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):
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:
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:
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.
]]>Es casi imposible crear una interfaz que encaje con todos los usuarios; pero aún así, es importante entregarles una variedad de opciones que les permita ejecutarlas mismas tareas de diferentes maneras, y de la que más le acomode. Después de todo, nuestra misión es no hacerle perder su tiempo con nuestros errores.
Y ¿cómo se comporta un usuario? No tengo una respuesta a esto; son muchas las variantes. Cada usuario es particular e impredecible en su comportamiento frente a un monitor, pero sí existen similitudes en lo que esperan cuando se les presenta una interfaz web:
- Quiere estar entretenido: el usuario navega por internet buscando algo interesante para sí mismo: información, juegos, pornografía, etc. Para entretenerlo, necesitas captar la atención y dirigirla hacia el objetivo de tu proyecto web. Cuando se dicta una charla, se considera que el mensaje está compuesto por un 60% de lenguaje corporal, 10% el contenido y 30% el tono de la voz. Extrapolando esto a un proyecto web, podríamos llegar a consolidarlo en un 60% de diseño, 10% de contenido y 30% del estilo en que ese contenido está redactado. ¿Conclusión? Puedes entretener al usuario con sólo presentarle lo que busca con un lenguaje acorde, mínimo.
- Quiere descubrir cosas: no necesariamente debes pensar que tus usuarios son estúpidos y que debes darle todo fácil; a ellos les gusta sentirse inteligentes y curiosear entre enlaces y conocer sus consecuencias; por algo las ventanas modales y los efectos que nos ofrecen las librerías Javascript se han hecho tan populares.
- No tiene tiempo de aprender cosas muy complicadas: bueno, tienes que hacer un balance entre no entregarles todo muy fácil, pero tampoco demasiado complicadas; siempre deberías guiar al usuario si le presentas nuevas interfaces o si tratas de innovar en alguna existente. Evita formularios complejos y con muchos pasos ya que la paciencia del usuario tiene límite.
Finalmentes ¿cómo obtener simplicidad? Claramente, no es un trabajo fácil. Sin embargo, existen ejercicios para llegar a ello:
- Enfócate en conocer tus usuarios, la audiencia que esperas lograr con tu sitio web, construir para ellos y reducir elementos innecesarios teniéndolos en cuenta.
- Creando diseños, interfaces e interacciones que logren seducir a tus usuarios en un nivel sensorial (estimulando sus emociones de alguna manera), obtendrás visitantes satisfechos y seguro volverán por más.
- Consistencia, consistencia, consistencia. ¿Mencioné consistencia? ¡Consistencia! Agrupa elementos visualmente, haz que el comportamiento sea similar a lo que el usuario espera. Por ejemplo, si defines que el estilo de tus enlaces serán subrrayados (text-decoration: underline), haz que todos los enlaces sean iguales, y no hagas que algunos no tengan subrrayados o en itálica; sólo lograrás confundir a tus usuarios.
Existe una paradoja que define muy bien lo dificil de dominar esta disciplina:
Es más simple crear una interfaz compleja porque es más complejo simplificarla.
La simplicidad toma tiempo, pero tiene su valor en los resultados.
K.I.S.S. es el acrónimo para Keep It Simple, Stupid, una manera cortés de decir Manténlo Simple, Estúpido.
]]>OK, es importante, pero: ¿Porqué es tan importante?- se preguntarán. Porque nuestro oficio está estrechamente relacionado con la interacción humano-computador (HCI), y de esa interacción surgen varios dilemas con los cuales no estamos acostumbrados por naturaleza. Piensen que estamos interactuando con una máquina, y esa máquina responde a nuestros estímulos (mover un mouse por ejemplo gatilla que el cursor se mueve por la pantalla). Pero esa máquina nos entrega una respuesta ‘inteligente’ a nuestro estímulo, lo que puede interpretarse como una reacción natural, pero no lo es ya que fue programada por alguien similar a nosotros para ello. Esa reacción fue adquirida por nosotros a través del tiempo, y la actual generación joven tiene a Internet y a estas interfaces ya propias, y no conocen otro mundo sin ellas.
Actualmente la psicología cognitiva es utilizada para entender y predecir el comportamiento de los usuarios ante un rediseño o una innovación. En un sitio web donde su rediseño puede afectar a miles de usuarios, esta rama de la psicología es fundamental. Aunque las desiciones y conclusiones que se tomen de aquí no son absolutas -nunca lo son cuando se estudia al ser humano; somo seres impredecibles- sí es posible amortiguar errores y que éste no sea catastrófico o hacer perder millones en inversión. Recuerdo el caso de Yahoo! cuando rediseñó su actual web, algo que aún le repercute y del cual Google está muy agradecido, y el más reciente rediseño de Facebook queriendo acercarse más al modelo de Twitter, causando un rechazo importante de sus usuarios expresado en su misma plataforma.
Pero no basta con saber cómo piensa el usuario que se enfrenta a una interfaz; también debes conocer a fondo las herramientas disponibles para sacar el máximo provecho a la información y a la interacción del usuario con ella. No es lo mismo una galería de fotos normal que una que utiliza alguna caja modal para mostrar la imagen en mayor calidad, pero ¿realmente la necesitas? ¿y la accesibilidad? ¿qué sucede si el usuario tiene javascript deshabilitado? Estas son preguntas mínimas que deberías hacerte si quieres poner al usuario frente a tu cliente.
… continuará
]]>Modo de Uso
- Adjuntar jquery.js y jquery.fontSizer.js entre las etiquetas <head></head>
- Definir id’s para ambos links, por ejemplo #aumentar (+) y #disminuir (-)
- Inicializar el plugin, como en el ejemplo:
$(document).ready(function(){
$("#aumentar").fontSizer({
action: "up"
});
$("#disminuir").fontSizer({
action: "down",
});
}); - Eso es. El único parámetro obligatorio es indicar la acción de cada link mediante action. Los parámetros son:
- action: "up/down" (requerido).
- elements: "elemento" (un id, class o etiqueta donde actuará el cambio de tamaño de fuente).
- increment: número (en cuántos pasos serán el cambio de tamaño; por defecto es de 1 en 1).
- max: número (tamaño máximo del tamaño de fuente; por defecto es 30px).
- min: número (tamaño mínimo del tamaño de fuente; por defecto es 8px).
Por ahora solo ha sido probado con jQuery 1.2.6, pero no debería de tener problemas con versiones desde 1.2+
]]>
No es nada del otro mundo de complejo; en realidad es bastante simple. Lo que hace es leer las etiquetas <a> buscando por sus atributos href y target por las extensiones anteriormente nombradas y si las encuentra, agrega una class respectiva que tiene ese ícono. Lo bueno es que puedes configurar en qué <div> aplicarlo a través de un id o class.
Es la versión 1.0 y se esperan mejoras, dependiendo del feedback.