Decisiones

23/nov/2009 11

En el transcurso de la vida profesional debes tomar muchas decisiones; algunas son tan mecánicas que ni las notas, mientras que otras pueden hacer que redefinas tu propia vida. Quiero compartir un pequeño caso que me tocó ver junto a otro colega, los argumentos que tuvimos y la decisión que enfrentamos. Lo encuentro interesante, ya que involucra accesibilidad, usabilidad, diseño, experiencia de usuario y desarrollo web, cada una disciplinas en sí pero que creo importante que tengan presencia y dominio en un profesional.

Este es uno de tantos artículos de este sitio que son inspirados a partir de vivencias, experiencias y conversaciones con otras personas que comparten el mismo oficio.

El comienzo

Típico proyecto web, se hizo la etapa de AI, wireframming, diseño de propuestas, se aprobó un estilo gráfico, se hicieron mejoras en el diseño y se comenzó a maquetar las páginas. Lo siguiente es una variación (más simple) del wireframe de la home (por motivos de privacidad, omito el nombre del proyecto/cliente y detalles):

Wireframe 1 en CSSLab.cl

Hasta aquí todo medianamente normal, pero al hacer funcionar la parte de Noticias, nos topamos con un pequeño gran detalle: en el wireframe y en el boceto se muestra que hay tabs por tipo de noticias, y además hay resumen de 3 noticias (según tipo) con fotografias a desplegarse, según pases el mouse sobre cada texto:

Wireframe 2 en CSSLab.cl

El análisis

¿Dónde veo un problema? Veámoslo según cada disciplina

  • Usabilidad: técnicamente, intervienen 2 tabs: por noticias, que al desplazar el cursor sobre cada resumen se reemplaza por su imagen respectiva; y por tipo de noticia, que son 3 tabs. Este doble tab puede crear confusión al usuario.
  • Experiencia de usuario: En total, son 9 imágenes cargadas: 3 tipos de noticias, 3 noticias por tipo; cada imagen, por el tamaño, es probable que pese cada una 20kb, lo que en total se debe cargar 180kb. Quizás no es mucho peso, pero hay que tomar en cuenta que además se cargan los banners, que son bastante grandes y pueden llegar a ser pesados…
  • Accesibilidad: Para conexiones lentas, no debemos pedirle tanto al usuario si es poco probable que vaya a necesitar de esas 9 imágenes. Para conexiones desde celulares, sería un abuso.
  • Desarrollo: para aminorar esa carga, podríamos cargar las noticias en los tabs según el usuario vaya haciendo click en ellas mediante AJAX; pero esto involucra un desarrollo extra que no estaba estimado.

Sinceramente, podríamos haber continuado con la construcción del sitio y ya. Pero es importante tomar en cuenta estos detalles, que al fin y al cabo hacen que un proyecto marque la diferencia.

La solución

Aún se está trabajando en ello, pero se intervendrá el diseño y probablemente se quitarán las imágenes asociadas por cada noticia, y se dejará sólo 1 imagen principal por tipo de noticia, lo que reduce la carga a sólo 3 imágenes:

Wireframe 3 en CSSLab.cl

Como ven, no impacta mayormente en el diseño final, pero sí será necesario cambiarlo y transparentarle esta modificación al cliente, siempre argumentando que es para mejor.

Esto es todo, como aún el proyecto está en proceso no hay desenlace (favorable o no), aún así me encantaría leer sus opiniones.

Comentarios

  1. Twitter Trackbacks for CSSLab - Desiciones [csslab.cl] on Topsy.com [#]

    […] CSSLab – Desiciones http://www.csslab.cl/2009/11/23/desiciones – view page – cached En el transcurso de la vida profesional debes tomar muchas desiciones; algunas son tan mecánicas que ni las notas, mientras que otras pueden hacer que redefinas tu propia vida. Quiero compartir un… Read moreEn el transcurso de la vida profesional debes tomar muchas desiciones; algunas son tan mecánicas que ni las notas, mientras que otras pueden hacer que redefinas tu propia vida. Quiero compartir un pequeño caso que me tocó ver junto a otro colega, los argumentos que tuvimos y la desición que enfrentamos. Lo encuentro interesante, ya que involucra accesibilidad, usabilidad, diseño, experiencia de usuario y desarrollo web, cada una disciplinas en sí pero que creo importante que tengan presencia y dominio en un profesional. Read less […]

  2. Alwaison [#]

    “deCISIones”, no deSICIones…

  3. Jorge Epuñan [#]

    Gracias Alwaison, corregido!

  4. Janoma [#]

    Quedó con el error en el RSS, en todo caso.

  5. Jorge Epuñan [#]

    Janoma: creo q es un problema de cache ya q corregi tanto el titulo como la URL; deberia solucionarse pronto (a mi se me despliega bien).

    BTW, lei tu trabajo sobre RDF, felicidades!

  6. Pablo [#]

    Buenas, un buen cambio, se entiende mucho más. De echo me costo entender un poco la parte de la noticias y la imagen asociada. Solo un detalle que no me calza mucho. ¿Porque 3 barras de navegación? Hay una superior, otra lateral (izquierda) y otra mas en el pie de la pagina. creo que es un poco exagerado.
    El espacio de la barra lateral se podría utilizar para mostrar los segmento y asi el espacio de los segmentos queda disponible para las noticias… solo una opinion.
    Ha una pregunta… ¿en que programa haces esos “wireframes”?… yo siempre termino haciendolos en html directamente.

  7. Patricio Maripani [#]

    dos cosas, en mi opinión quizás el crear tabs habiendo tanto menú lateral es sólo sobrecargar la visual del usuario, tal vez, el tener una página de mayor largo sería una opción(las 9 noticias visibles en la misma página), claro que esto queda fuera de las decisiones tomadas por el cliente.

    Lo otro, es que el concepto de accesibilidad, no hace referencia al tiempo de carga o a la experiencia de usuario, sino a facilitar el uso de un sitio a personas con dificultades físicas o cognitivas.

    PD: si se tiene como restricciones del cliente tener los tabs, concuerdo en que la opción ajax es de las únicas mejoras que se pueden hacer.

    PD2: la opción de usar los segmentos que comenta Pablo, a mi me suena lógico, pero también me parece que esto es una restricción por parte del usuario.

  8. Jorge Epuñan [#]

    Patricio Maripani: debo discordar con el concepto de accesibilidad; aunq si tiene relacion con deficiecias propias del usuario, tb se considera el medio por el cual se esta utilizando (tecnologia asociada):
    – escribir codigo semantico ayuda a lo browsers q leen la pantalla (lynx)
    – evitar el uso de tecnologias como Flash para contenido por lo mismo
    – optimizar el peso de los elementos a utilizar para no discriminar conexiones lentas, lo q perjudica a un tipo de usuarios q aunq no es discapacitado, si esta limitado por su tecnologia

    un aporte, una opinion.

    saludos y gracias por tu comentario

  9. dubó [#]

    No estás solo en este mundo 😉

    Si estas disponible para algún proyecto podrías escribirme?

  10. claudio merino [#]

    hay un tema que me queda dando vueltas del wireframe de la parte de las noticias… cada parrafo de la derecha es una noticia distinta?
    si es así deberían estar más separadas con una barra o con un título en negrita que sugiriera que es un tema distinto.

    suerte con el cliente, siempre es aplaudible la proactividad :)

    @pablo. yo para wireframear, después de haber ocupado durante un par de años obligado por la pega a usar Visio, y habiendo probado todas las opciones disponibles me decanté por fireworks para prototipar.

  11. Jorge Epuñan [#]

    Claro dubó, solo no dejaste donde escribirte.

    Salu2.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab