A propósito de la propuesta de Jennifer Boriss para rediseñar/suprimir la barra de estado del navegador en Firefox 4 se está montando una de esas bonitas discusiones antológicas que me hacen morir de envidia y en la que se aprende lo que no está escrito sobre usabilidad.
Abajo os pongo unas capturas de cómo lucen las interfaces de los navegadores principales hoy día para que veáis cómo aparece (o no) la barra de estado:
Me gustaría conocer vuestros puntos de vista y opiniones:
Fijaros además en las capturas de abajo en como se construye la jerarquía informativa de la interfaz del navegador en base a la jerarquía semántica del documento que, a la postre, es lo que le importa al usuario dado que la interfaz del browser realmente es cuando menos, secundaria:
Firefox Minefield- Tooltip que se muestra cuando el cursor se posiciona sobre un enlace. Nótese como se visualiza el título especificado en el atributo title del enlace y cómo está espacialmente separado el tooltip de la URL que aparece en la barra de estado en la parte inferior rompiéndose la relación semántica entre ambos.
Word 2007. Aspecto del cursor cuando está sobre una palabra
Word 2007. Aspecto de la barra de utilidades cuando se ha seleccionado una palabra. Nótese como se muestra de manera sútil y prácticamente transparente la barra contextual de utilidades con las que el usuario puede formatear el texto como mejor le parezca.
Word 2007. Barra de utilidades contextual que aparece cuando el usuario mueve el cursor hacia el contorno semitransparente (ver captura anterior) que la representa. De la misma forma para no mostrar toda la URL en el tooltip junto al title que se visualizaría cuando el usuario posicionase el cursor del ratón sobre un enlace, se podría considerar la posibilidad de mostrar tan sólo parte de la URL inicialmente y, a demanda del usuario con algún gesto sobre un área del tooltip, desplegar la URL completa si fuera necesario.
Hay mucho campo de investigación aquí y mucho espacio para las mejoras.
La pregunta es relevante ¿mostramos la barra de estado? ¿Sí? ¿No? ¿Que os parece la propuesta de Jennifer Boriss?
Os dejo con las capturas de los navegadores para que veáis como muestran actualmente las barras de estado (y las URLs):
Barra de estado en la parte inferior de la Minefield (Alpha) de Firefox 3.7
Barra de estado en la parte inferior en Chrome. Aparece sobre una pequeña capa azul cuando el usuario posiciona el cursor sobre un enlace y muestra hasta 59 caracteres de la URL incluidos el http://
Opera. Barra de estado en la parte inferior. Cuando el usuario posiciona el cursor sobre un enlace se amplia la pequeña capa con las utilidades de la esquina inferior izquierda permitiendo visualizar la URL
LA DE CAL:
Escenario de uso:
Un ciudadano quiere presentar su declaración de la renta. Va a la página web de la Agencia Tributaria y se descarga el programa de ayuda para hacer la renta PADRE 2009.
Se lo instala, lo ejecuta y accede a la pantalla de bienvenida donde comienzan los problemas:
¿Y ahora qué? se pregunta el ciudadano
¿?
El módulo central es pasado por alto completamente por su pinta de publicidad y por tener el fondo de color gris lo que parece que indica que tiene información que es más verborrea que otra cosa. El layout es de pena y la jerarquización de la información nula al tener los encabezados:
el mismo tamaño y tipografía que el inicial, inmediatamente debajo del logotipo de:
y que el teléfono de información a la derecha junto con el rótulo:
El punto de acción que interesa resaltar para que el usuario comience a realizar la declaración, el enlace “Modelo 100 IRPF” es obviado completamente por nuestro ciudadano quien se ve las caras de tarde en tarde con Hacienda y no termina de entender/saber del todo bien qué es eso del “Modelo 100 IRPF” (es que es un poco torpe, qué se le va ha hacer, ya se sabe lo de los usuarios de a pie de calle es que no dan para más… ) a pesar de haber presentado la declaración ya desde hace unos cuantos años.
Al final, después de un rato, escaneando visualmente la interfaz encuentra el icono superior izquierdo con pinta de documento y signo “+” al lado del icono de la puerta.
- ¡Ah! – piensa…
- que va a ser esto mira tú… -
y va y pone el cursor encima y lo deja unos momentos encima y ¡¡albricias!! le aparece un tooltip que le dice “Nueva declaración”
- jeje -
piensa nuestro confiado ciudadano que ufano acaba de encontrar la manera de comenzar a dar de alta su nueva declaración. Hace clic (menos mal que no sufre de parkinson y no se le va el cursor al icono de al lado porque si no lo de salirse de repente del programa, pufff… ) y…
- estoooooo… -
- estoooooooooooooo ¿¿?? -
- ¿Y cómo doy de alta una nueva declaración? -
piensa nuestro ciudadano desconcertado.
¿Cómo se da de alta una nueva declaración?
Pensadlo unos momentos antes de continuar leyendo por favor.
¿?
que por cierto… ¿y cómo es que hay dos iconos con la misma apariencia y el mismo nombre que supuestamente hacen lo mismo en dos posiciones diferentes de la pantalla, uno en la esquina superior izquierda y otro en el centro, a la derecha del box de ¿búsqueda? ¿de entrada de texto? ¿de…? ¿?
Resumiendo: Para comenzar a dar de alta una nueva declaración el proceso es:
Pregunta:
¿Cuantos ciudadanos no habrán sido siquiera capaces de empezar a rellenar su declaración de la renta por no haber averiguado cómo crearla?
¿?
Me gustaría saber la respuesta pero creo que me voy a quedar con la duda.
Creo que para el año que viene, al menos este aspecto del programa PADRE se debería mejorar radicalmente rediseñando por completo esas dos pantallas, fusionándolas si es necesario, suprimiendo funcionalidades duplicadas y racionalizando la barra de tareas (si se desea plantear así) del programa.
Año tras año, la Agencia Tributaria hace un gran esfuerzo para mejorar las cosas y hacernos la vida un poco más fácil a los ciudadanos…
pero todavía le queda trabajo, algo normal y natural en cualquier proyecto, vamos.
LA DE ARENA:
Aunque se puede trabajar más la landing page de la campaña de la Renta 2009, es bastante escaneable visualmente e incluye enlaces directos a las opciones más buscadas (programa PADRE, borrador de la declaración, cita previa, faqs, enlaces y manuales de ayuda y servicio de atención teléfonica). Orientada a las tareas. Cambiaría los rótulos de algunos contenidos o agruparía quizá la información de otra manera para evitar alguna duplicidad como los enlaces de “Datos fiscales” y “Borrador de la declaración” que aparecen con iguales literales en diferentes epígrafes lo cual puede dar lugar a algún equívoco, pero vamos, que la página es lo que tiene ser: útil.
Están haciendo un esfuerzo encomiable y en la buena dirección. Lo que hace falta es que sigan en ella y sigan invirtiendo y mejorando en la usabilidad tanto de la web, como del programa PADRE, que buena falta le hace.
Navegando he ido a dar con la home del Aeropuerto Internacional de Kansai
El caso, es que me ha llamado la atención cómo han diseñado el menú de navegación principal. No es un diseño muy ortodoxo que se diga ya que añaden iconografía a cada sección junto al correspondiente rótulo.
Así, los iconos predominan visualmente frente a los nombres de cada sección convirtiéndose en puntos focales de atención, dificultando la legibilidad de los rótulos e impactando en la usabilidad.
Diseño del menú de navegación con iconos y rótulos:
Sólo iconos:
Sólo rótulos:
En el caso de los menús de navegación de un sitio web no creo que sea buena idea añadir los iconos por la problemática intrínseca que tienen. Y menos en el sitio web de un aeropuerto internacional.
Por ejemplo, el avión de la primera sección sí se asocia a vuelos, pero también a aeropuertos, con lo cual la interpretación ya es cuando menos ambigua. El coche cuesta distinguirlo como coche por ser tan cuadrado en lugar de utilizar formas más redondas. Esta línea gráfica supone una menor usabilidad al reconocerse el coche con mayor dificultad. El tercer icono sí se interpreta más como llegadas y salidas, aunque también puede indicar tránsito o viajeros en tránsito (haciendo escalas). El de la cuarta sección no sé por qué, pero lo asocio a una bolsa bursátil o, por su forma, al monumento de Lincoln:
Lincoln memorial - Monumento a Lincoln. Imagen de Wikimedia Commons
El quinto se interpreta bien, tiendas y comida (restaurantes) y los dos últimos no los entiendo (el concepto que me evoca el último es el de radio) y el icono del mapa, puede ser cualquier cosa menos un mapa. ¿El perfil de la terminal del aeropuerto quizá? ¿?
Entre otros problemas que presentan los iconos pueden apuntarse:
¿Cuando está justificado el uso de los iconos? ¿Cuando conviene utilizarlos? ¿Sólos, o con texto?
La respuesta, como suele serlo en cuanto a cuestiones de usabilidad se refiere, es depende de la circunstancia y el contexto.
Los iconos, por su tamaño, permiten un extraordinario grado de plegado de información y una vez que se aprende su código (a qué corresponde cada icono, al fin y al cabo familiarizarnos con la iconografía y funcionalidad de cualquier aplicación es aprender un código y un lenguaje visual, específico para la misma) pueden facilitar la búsqueda visual de una función en una aplicación y en una interfaz que utilicemos de manera intensiva y cotidiana:
Ribbon de Microsoft Visio. Al utilizar de manera cotidiana la aplicación y ser consistentes los iconos principales con las funcionalidades asociadas a lo largo de todas las aplicaciones de la suite (Word, Excel, Power Point, etc) terminamos por aprender parte del código iconográfico de las mismas con lo cual visualmente resulta mucho más rápido localizar las funcionalidades.
Si tuviéramos que expresar con palabras por ejemplo, las funcionalides del grupo de “Fuente” de la pestaña “Inicio” de la Ribbon de Word 2007 quedaría algo similar a:
Nótense tres cosas:
Cuadro de diálogo para la personalización de la Ribbon en Microsoft Word 2007. Si se conoce la forma correspondiente del icono de la funcionalidad que se está buscando es mucho más rápido hacer un escaneado visual de los iconos que se están viendo, que ir leyendo uno a uno sus nombres textuales.
En cuanto a usabilidad se refiere, hay que medir el coste de lo que representa tomar una decisión de diseño de la interfaz u otra. O, como mínimo y dada la imposibilidad que tenemos en muchas ocasiones de testarlo o medirlo en laboratorio, ser al menos conscientes de ello y de cómo las decisiones que se toman impactan en el rendimiento de la aplicación o del sitio web.
Barra de funcionalidades de Zoho Mail. Utilizan iconos y rótulos
Barra de funcionalidades del cliente de correo Thunderbird. En este caso conviven iconos y rótulos ¿són lo suficientemente significativos y se entienden sin problemas los iconos? ¿El de "responder" y "responder todos"? Nótese que los botones de archivar y basura no llevan icono, y que el icono de la funcionalidad "eliminar" se asocia al de cerrar las ventanas de Windows lo que produce una disonancia cognitiva e impacta en la usabilidad
Barra de funcionalidades de GMail. En este caso Google opta por no usar iconos junto a los rótulos
En cuanto a la World Wide Web, y dado que en cada sitio web solemos estar de forma muy puntual, e interactuando con su interfaz durante tiempos muy reducidos, no es la mejor idea construir y utilizar un código iconográfico propio que conviva con los rótulos de las secciones, en la navegación principal, ni para facilitar la misma, ni para realzar el diseño desde un punto de vista gráfico.
Por cierto, un último detalle más en cuanto a la barra de navegación del aeropuerto, la pestaña “top” de la derecha es un elemento 100% superfluo 2.0).
¿Opiniones? ¿En qué contextos consideráis que los iconos juegan un papel importante y son recomendables y en qué ocasiones no? ¿Más ejemplos que conozcáis?
Pues el caso es que estaba navegando un rato y he ido a parar a la página de Hoteles.com. Curioseando he visto algunos componentes de la interfaz y patrones de diseño e interacción que me han llamado la atención.
El primero es la concepción y funcionamiento del buscador de la home. Me gusta cómo lo han planteado. Permiten búsquedas en base a cuatro criterios principales:
La faceta de “Punto de referencia” no es común ni habitual. Cuando menos me resulta curiosa y una buena idea si tu necesidad de información como consumidor no está predefinida y es más bien exploratoria. Si sabes la ciudad a la que quieres ir, el hecho de que te sugieran lugares con encanto o especiales de la misma se me antoja un valor añadido. Una forma de facetar la información que detrás tiene una reflexión pausada y una definición de un modelo mental de usuario que no suele ser muy habitual que se dé en los diseños de las webs.
Dicha faceta se ve bastante bien en la categorización que hacen en las autosugerencias. La forma en que están diseñadas comienza a ser un patrón de interacción estándar que se está imponiendo desde hace unos meses a ahora.
Facetas de información en las autosugerencias del buscador de Hoteles.com. Se observan cuatro tipos de facetas: Ciudades/Zonas, Puntos de referencia, Aeropuertos y Hoteles. Obsérvese la inconsistencia entre lo declarado encima del box y las facetas ofrecidas, las de "Zonas" y "Aeropuertos" no aparecen descritas encima del box de búsqueda
La idea es, cargar la inteligencia y el trabajo pesado de desarrollo en el background tecnológico y devanarse un poco los sesos pensando en las maneras en que podemos facetar nuestros contenidos para ayudar a los usuarios en sus búsquedas de información. Va siendo hora de comenzar a hacer un poco de trabajo de valor añadido en cuanto a la findability se refiere, definiendo unas buenas taxonomías de contenido y comenzando a enriquecer un área espacial interesantísima, la de las autosugerencias que se despliegan al introducir en el box una cadena o unos caracteres de texto, más allá del mero hecho de ofrecer como viene siendo común, las habituales palabras clave o ocurrencias coincidentes.
Otro componente que me gusta bastante y por lo que veo, que es más bien un estándar en las webs de hoteles, es el calendario:
Diseño del calendario desplegable en el buscador de Hoteles.com
Me gusta el diseño gráfico. El alto contraste con el fondo lo que focaliza la atención en el mismo. La adicción de una sombra para crear un efecto de oclusión y traerlo a primer plano respecto al resto de elementos de la interfaz, el hecho de mostrar dos meses en lugar de uno algo, que no termino de entender cómo no se establece ya de una vez y se generaliza como un estándar en todas las webs de reserva de hoteles, venta de billetes, etc. Dos meses considero que es lo mínimo que se debería plantear en un calendario de este tipo y creo que sería más que interesante y habría que medir el impacto en la venta de billetes o reservas, el hecho de mostrar incluso tres meses en lugar de dos.
Si queréis ver más diseños de calendarios podéis hacerlo en el album de calendarios que tengo en mi página de Flickr.
Tres pequeños detalles más en el calendario:
Diseño del calendario de la web estadounidense Hoteles.com. Llama la atención como frente a la española, ponen la primera letra del nombre del mes en mayúscula lo que redunda en una mejor escaneabilidad, focaliza sutilmente la atención en el nombre y mejora la usabilidad del calendario. No obstante, ponen igualmente en mayúscula la primera letra de la abreviatura de cada día lo cual supone una merma de esta.
Calendario de Xpedia.com. la capa de los meses se alinea con el borde izquierdo del campo de introducción de la fecha lo cual suele ser un estándar común. El problema es que los únicos elementos que el usuario tiene para relacionar dicha capa con el primer campo, y no con el segundo, son el foco azul de la fecha cuyo efecto se pierde por ser el color predominante de fondo en la web, y el hecho de estar exactamente alineada con el borde izquierdo del campo. El diseño del calendario en Hoteles.com con la flecha apuntando el campo y la ligera separación respecto a la parte inferior del mismo es mejor desde un punto de vista de usabilidad ya que la relación que se establece es inmediata e inequívoca.
Me gusta también el diseño visual del elemento de número de habitaciones. Un diseño gráfico muy limpio y muy visual. Eso sí, se les junta el “Mayores de 18″ con el otro rango de edad “0-17″ años lo que parece que es mayor de 180 años :-) En el diseño americano es mucho más claro –> “Ages 18+” y “0-17″:
Diseño visual del elemento para agregar habitaciones y especificar el número de ocupantes de las mismas
Por último me llaman la atención los filtros que hay mano derecha en la página de resultados:
Concretamente:
Hay más cosas pero de momento, lo dejo ahí.
Estos son dos de los controles de interfaz que me han llamado la atención últimamente. Ambos pertenecen a la suite de Google Docs.
El primero se encuentra en el gestor de archivos que aparece nada más acceder a Docs. Es un control que permite seleccionar los elementos del listado de elementos que se está viendo. A continuación se muestra tal cual aparece nada más acceder a Google Docs, sin haber hecho clic en el control:
En lugar de utilizar el clásico checkbox incluido en la cabecera de tabla alineado con los checkbox inferiores que permite, activándolo o desactivándolo, seleccionar todos los elementos de una sola vez en lugar de hacerlo uno por uno (ver estados de interacción a continuación en AOL Mail y el Explorador de Windows Vista):
en Google Docs, al hacer clic sobre el mismo aparece un menú desplegable con dos opciones:
que permiten realizar las mismas opciones pero explicitándolas haciendo que sea más predecible el funcionamiento del componente.
Una cosa que no termina de convencerme es que, en el diseño del control, estén o no estén los elementos inferiores seleccionados, el checkbox aparece siempe como seleccionado.
También me llama mucho la atención el uso del color que se hace en el gestor de Google Docs. Tal ycomo está ahora mismo, por defecto, todos los elementos del listado aparecen con un color de fondo que es un azul muy claro que indica un estado inactivo:
Cuando se seleccionan uno o varios elementos el color de fondo cambia a uno más claro indicando el estado activo:
Es justo el patrón contrario que se ha seguido hasta ahora en todos los sistemas operativos Windows, Mac, Linux y aplicaciones web (ver por ejemplo la captura del explorador de Windows Vista más arriba para observarlo), color claro para estado sin seleccionar, color más oscuro para elementos seleccionados.
El otro control de interfaz que me ha llamado la atención es el que aparece en la paleta de colores de Spreadsheet de Google Docs. Concretamente el diseño del recuadro de color cuando se ha seleccionado en la paleta. A continuación el aspecto que tiene en Spreadsheet de Google Docs:
Además de resaltar sutilmente con un borde que da aspecto de botón hundido el color seleccionado, le ponen una marca de check al mismo para distinguirlo claramente.
El mismo control en Excel con un color seleccionado (recuadro sombreado en rojo):
¿Qué os parecen los controles? ¿Opiniones sobre los distintos estados de interacción / diseños gráficos?
Llevo unos días leyéndome el libro de Joshua Porter: Designing for the Social Web lo que me ha llevado a toparme con una reflexión en las páginas 14 y 15 que Porter sumariza en un estupendo gráfico de esta última.
En concreto la reflexión viene en torno a la evolución de la comunicación que ha tenido lugar en la World Wide Web.
Esta trayectoria se recoge y sumariza en el gráfico original de Joshua Porter publicado en la página 15 de Designing for the Social Web que me he permitido traducir y adaptar para mejorar su comprensión:
En la actualidad estamos viviendo otro profundo cambio en el modelo de comunicación que gira en torno a los siguientes paradigmas:
Las tecnologías existen y están bastante maduras. Se ha avanzado extraordinariamente en los 15 últimos años en lo que a Usabilidad, Arquitectura de Información y Diseño de Interacción se refiere.
Ahora es cuando los aparatos y las interfaces comienzan a diluirse y hacerse verdaderamente invisibles para centrarse en los humanos y cuando la comunicación comienza a ser realmente natural y multimodal. Una comunicación humana centrada en los humanos y para los humanos, no para usuarios que sufren la tecnología.
Algunos controles de interfaz y páginas web que me han llamado la atención navegando:
En Boo.com me he encontrado un curioso filtro. En la home se puede observar junto al box de búsqueda por ciudad o nombre de hotel un deslizador que permite restringir los resultados a los hoteles de “n” estrellas. El uso del deslizador permite establecer un rango de las categorías de hoteles que nos gustaría consultar: entre ninguna y 3 estrellas, entre 2 y 5 estrellas..
Lograr el mismo comportamiento sin utilizar el deslizador y con controles “más estándares” es complicado y menos usable. Un posible diseño sería disponer de dos combos desplegables, uno rotulado como “hoteles desde…” y cuyos valores fueran desde ninguna estrella hasta 5, separando ambos combos la palabra “hasta” y otro combo rotulado como “hoteles hasta…” con valores que deberían variar en función de la selección que hiciera el usuario en el primer combo.
Muy complejo. Mejor el deslizador aunque habría que chequear su uso de cara a accesibilidad para asegurarnos de que no da ningún problema.
Por cierto, la forma en que se ha resuelto el diseño gráfico de las pestañas en ese módulo de búsqueda es francamente mala cuesta muchísimo percibirlas como tales y establecer la correcta asociación entre la pestaña que está activa y la parte inferior.
Cuando se ha hecho una búsqueda cualquiera me ha llamado también la forma en que han resuelto el sistema de navegación más allá de la propia home:
Boo.com Barra de navegadión con filtros (combos desplegables) en segundo nivel de navegación
En el segundo nivel de navegación, situados a la izquierda, los dos combos desplegables permiten escoger el país y la ciudad y en función de la selección realizada, el resto de opciones de segundo nivel de navegación que a su vez actúan como filtros, se actualizan. Algo similar al sistema de navegación de Idealista.com u 11870.com. Quizá, lo mejor de ello sea lo compacto que queda, y la fuerte jerarquía y relación horizontal que se establece. Normalmente los filtros solemos verlos en una columna situada a la derecha y cuyos elementos se jerarquizan de arriba a abajo. Esta es otra opción de navegación. Me gusta.
Cambiando de sitio, navegando he ido a dar con una consultora inglesa cuyo diseño del sitio me parece francamente majo: Clearleft.com
Un diseño muy limpio, una escala de colores muy cálida, cercana, verde lima, con todos los valores positivos que se le asocian. En la home dejan bien claro lo que hacen, sus fortalezas, lo que quieren y la forma de contacto todo por encima del pliegue de pantalla y haciendo scroll vertical, desplegando el resto de información importante en tres bloques adicionales “Web design & Consultancy”, “Clearleft news” y “What next” resaltados fuertemente gráficamente sobre un rectángulo de fondo marrón con un borde de 1px blanco que lo potencia respecto del fondo y que funciona como conector entre las camas de color de los cuatro bloques en los que está separada la home, el primero situado por encima del pliegue de pantalla y los tres restantes citados.
La retícula en tres columnas al 33% con sus medianiles y que rompen en el primer módulo (el pliegue de pantalla) en el que se entra al 100% de ancho y el último “What next” en el que las columnas se distribuyen al 66% y 33% respectivamente dan fuerza, ritmo e interés al diseño.
Se utiliza una jerarquía tipográfica muy clara jugando con los tamaños y con los cuerpos en negrita para centrar la atención donde interesa. Se hace un uso muy comedido de la imagen y con excepción del tercer módulo, se cuida bastante la carga textual de cada bloque.
Home de la consultora de UX inglesa Clearleft.com
Me gusta el detalle de las pestañas superiores y como crean una fuerte tensión visual rompiendo la linealidad del bloque de la cabecera con las opciones de navegación, y la pestaña activa que conecta la cabecera con el módulo inferior al desbordar sus límites. Utilizan además una sombra creando un efecto de oclusión o 3D sutil, para resaltarla. Asimismo, me gusta también el efecto de hover en el que se establece claramente el estado de transición antes de hacer clic en la pestaña sobre la que se encuentra situado el cursor:
Estado de transición de las pestañas de la navegación principal. Cuando el cursor se posiciona encima de una (en este caso "What we do") se resalta ligeramente por debajo de las demás pero no tanto como la actual seleccionada, y su cuerpo cambia de color a gris oscuro
Por último, como comentaba, se hace un buen uso de la imagen. En la captura, la página del equipo. Muy buen detalle el romper la linealidad recta del diseño alabeando ligeramente a izquierda y derecha las fotos de los miembros y superponiéndo las esquinas unas encima de otras como si las tuviéramos encima de una mesa y no enfrente de nosotros:
Equipo de trabajo de Clearleft.com
Por cierto, no tengo absolutamente nada que ver con ellos, ni les conozco ni pienso irme a trabajar a Inglaterra. Simplemente, me gusta el diseño de su site. Por estos lares también tenemos muy buenos ejemplos, y por latinoamérica también.
Si vendes consultoría de Experiencia de Usuario hay que predicar con el ejemplo. Si tu web tiene más de 4 años quizá sea hora de ir dándola una vuelta y actualizándola. Al fin y al cabo, la Web, es un organismo mutable y vivo, extremadamente dinámico. Y una de las mejores tarjetas de presentación de tu trabajo es el site de tu consultora. Yo no confiaría en alguién cuya imagen no refleja un mínimo de calidad, pero lo mismo es que soy un poco de Marte, quién sabe :-)
Actualización 31 dic 2009 (*)
Me gusta bucear por los webs de la Fundación Mozilla, por sus Wikis y sus grupos de discusión. Y me gusta porque son uno de los lugares donde más Diseño de Interacción y Diseño de Información aprendo.
El equipo de UX de Mozilla es francamente bueno y algunas de sus discusiones son antológicas y de libro. No hay muchos sitios en donde se pueda aprender interacción como en estos lugares en donde uno tiene la sensación de que realmente la Experiencia de Usuario se valora en lo que vale. Razones no les faltan. Con un público de 300 millones de usuarios, o lo haces bien, o pasas a ser jugador de segunda en nada de tiempo.
En España, aunque la UX ha avanzado muchísimo desde el 2000, todavía nos quedan un par de vueltas antes de que nos pongamos al mismo nivel que en otros países en cuanto a inversión de recursos en UX se refiere. Por aquí, no conozco muchos lugares donde de manera sistemática se hagan tests de usuarios como parte del proceso de diseño/rediseño de los sites o productos que se acometen y se haga diseño centrado en el usuario por mucho que se predique que se hace. El coste que conlleva tanto económico, como en tiempo y Recursos Humanos lo hacen inviable dado que, de momento, no hay muchos clientes que puedan o quieran asumirlo cuando pueden tener un producto “más o menos” aceptable desde un punto de vista de usabilidad con una rebaja de presupuesto del ¿30? ¿40%?
No obstante, poco a poco, se va abriendo brecha y algunas empresas punteras sensibilizadas van poniendo en marcha sus propios labs (que por cierto, a ver para cuando alguna consultora se anima a realizar la inversión y abre su propio dominio que empiece con labs.xxxxxx.xxx). El problema es una vez más el coste, aunque hay jugadores muy grandes que podrían acometer la inversión holgadamente. Todavía falta implantar realmente una cultura del I+D+i.
Y volviendo a la materia que da origen al título de este post, navegando por los Wikis de Mozilla he ido a dar con esta maqueta en donde se plantea el rediseño del sistema de notificaciones para Firefox 4.0.
Me gusta la forma en que se han utilizado los colores para comparar las características del antiguo rediseño y el nuevo por las siguientes razones:
Sin el uso de los colores sobre un prototipo en blancos, negros y grises, no sería posible obtener una visión y realizar una comparación tan clara de la interfaz original y la propuesta como evolución como se consigue en el presente ejemplo. Una buena práctica que se puede utilizar en nuestro trabajo diario:
Propuesta de rediseño para las notificaciones de Firefox 4.0. Los colores definen capas de información delimitando y relacionando con claridad y sin ambiguedades los distintos elementos de la interfaz original y la propuesta. La maqueta es de Alex Faaborg
(*) Para ver otro buen ejemplo de comparación de interfaces y uso del color (en este caso se comparan estados) se puede echar un vistazo a: “A piece with a lot of screenshots about the close tab behaviour in Google Chrome”
Qué importante es el uso del color como elemento para separar capas de información, centrar la atención donde hay que centrarla, mejorar la usabilidad de una aplicación y, en este caso concreto, incrementar el número de descargas del navegador.
Una captura de la página de de Apple para la descarga de Safari 4.0:
Fijaros cómo se utilliza el color azul degradado para el botón de la descarga y el naranja en el rectángulo superior de la página para crear un punto focal de atención. Al igual que podemos establecer jerarquías de información durante el diseño de un componente con sus correspondientes elementos, podemos establecer jerarquías de información basadas en colores.
En este diseño creo que el uso del color no es óptimo y se puede mejorar. Como me comentaba un compañero el otro día, Fernando, para los botones en tiendas de comercio electrónico funciona mejor el color naranja-calabaza que el azul. Generalizando más, también para las descargas y las llamadas a la acción.
Fijaros en la diferencia entre la pantalla de arriba y la de abajo con el código de color del botón y del rectángulo de la esquina invertido:
Habría que testarlo pero apuesto a que este segundo tendría un ratio de número de clics mayor que con el actual botón azul. La jerarquía de color es óptima (el más cálido y llamativo es el elemento más importante en el que se quiere crear el punto focal de atención -el botón de la descarga-) y el azul para el otro elemento que crea un punto focal de atención secundario en la página tanto por su color característico frente al gris y al blanco que lo rodea, como por su forma triangular que rompe con todas las líneas rectas y bordes redondeados del diseño.
AOL, por ejemplo, también usa el naranja-calabaza para el botón de buscar del buscador de su home:
Botón de buscar del buscador principal en la home de AOL
Curiosamente en la pantalla de logado del webmail invierten el patrón y centran la atención en el botón de registrarse y crear cuenta frente al de logarse:
Botón de logado de color azul en AOL y naranja para el de registrarse y crear nueva cuenta
Yahoo España y Yahoo internacional siguen el mismo patrón de colores para los botones del buscador y de acción:
Botones de color calabaza en Yahoo España, del buscador y de quedarse en la versión local de la página del usuario
En Amazon.com usan el naranja como color para el botón de “Mostrar todos los departamentos” y el botón para lanzar la búsqueda con el rótulo “Go” que además lo hacen circular para convertirlo en un punto focal de atención por su forma (el círculo es un elemento que añade una fuerte tensión visual e interés a cualquier diseño):
Botones de color naranja de "Mostrar todos los departamentos" y ejecutar búsqueda de Amazon
En lugar del naranja-calabaza, Firefox utiliza un color verde para el botón de descarga, también admisible. Originalmente el verde que utilizaban era muy oscuro y con el paso del tiempo se ha ido aclarando mucho. Además incorporan la palabra “Free” al rótulo principal con lo que han conseguido, como comenta Yusef (no encuentro el enlace, si localizo la presentación donde lo ví lo pongo) incrementar el número de descargas del navegador.
En este caso particular es posible que la elección del color verde para el botón sea plenamente consciente e intencionada para potenciar el logotipo de Firefox y no robarle protagonismo. Los colores naranja, calabaza y amarillo otorgan gran predominancia al logotipo junto al hecho de que sea redondo frente al resto de elementos de líneas rectangulares (con excepción de las palomas, no entiendo el motivo de que figuren ahí al igual que el ¿altavoz? ¿biberón? de la cañería) convierténdolo en un punto focal de atención muy fuerte. En la página creo que hay demasiado ruido por el uso de la imagen de fondo lo que va en detrimento de la usabilidad de la tarea principal a la que está enfocada la página -la descarga del navegador- si la quitasen o planteasen otro diseño mucho más limpio como el de Apple posiblemente obtendrían un mayor número de descargas:
Botón verde de descarga de Firefox
El uso de los colores es un aspecto crítico para las webs.
Es necesario conocer los fundamentos básicos de la teoría del color para poder juzgar de manera mínimamente objetiva y con razones y argumentos de peso por qué funcionan unos diseños y otros no. De nuevo, queda pendiente publicar un post (otro) sobre colores y usabilidad. El tema es realmente fascinante y mucho más complejo de lo que uno podría pensar a priori, y lo más llamativo, es un aspecto al que prácticamente hasta hace muy poco no se le ha comenzado a prestar atención más allá de la pura faceta estética o emocional cuando en realidad, es un aspecto fundamental para la usabilidad de cualquier interfaz.
RSS
