tentándote.com

Bueno, ya era algo que me empezaba a preocupar un poco ya que en las últimas nightly de Firefox no observaba ningún cambio, pero por lo que veo, la gente de @Mozilla como no podía ser de otra forma, en su cuidado obsesivo de los diseños al pixel, acaba de publicar una actualización de las maquetas de la interfaz de Firefox 4 para Mac de la próxima gran versión del navegador en la que empiezan a despejar las dudas.

Confieso que tenía franca curiosidad por ver cómo resolvían el tema en cuanto al diseño gráfico de los laterales de la barra de tabs. Mirar una captura de la nightly de hoy (16 de junio de 2010) de Firefox 4 para Windows 7 en la que los bordes por donde aparecen y desaparecen las tabs aparecen planos y sin una línea que los remarque:

Echarle un vistazo ahora a la maqueta del diseño gráfico de la interfaz que han publicado para Mac, concretamente a los puntos que marcan las flechas amarillas, los laterales de la “barra de tabs” por las que aparecen y desaparecen éstas (nota: a pesar de que se ven mal las imágenes en el blog porque aparecen por debajo del texto de la columna derecha, no he querido reducirlas para que se aprecien correctamente los detalles. Para ver bien cada imagen lo único que tenéis que hacer es posicionaros encima de ella, dar botón derecho del ratón y seleccionar la opción “Ver imagen” para verla a pantalla completa en el navegador sin que os moleste la barra lateral del blog):

Os pongo a continuación la maqueta sin las flechas amarillas para que podáis apreciar mejor el diseño gráfico de los bordes de la barra por los que aparecen y desaparecen las tabs:

Fijaros en cómo jerarquizan los elementos de la interfaz de mayor a menor importancia situándolos en diferentes capas de profundidad mediante el uso de las sombras para crear un efecto de oclusión (unos elementos delante de otros). Concretamente pueden distinguirse 4 capas de información o de elementos de la interfaz:

1. La capa de color amarilla: Tab activa que contiene los principales elementos de la interfaz del navegador:
   • Los botones de adelante y atrás para realizar las correspondientes operaciones a través del historial de páginas visualizadas.
   • La barra de navegación o “barra maravillosa” junto a los botones de recargar/parar que ahora han fusionado en uno, situados al final.
   • El box de búsqueda para ejecutar consultas contra los buscadores, que inexplicablemente, versión tras versión, siguen sin fusionarlo con la barra de navegación mientras que en Chrome ya sólo tenemos una única barra de navegación en la interfaz principal. ¿Las causas? ¿? supongo que será cuestión de dinero o que tengan especificado por contrato con los buscadores el hecho de que siga separada o no lo sé pero desde luego, debería tender a desaparecer y fusionarse con la barra de navegación principal en aras de mejorar la usabilidad y simplificar la interfaz principal. El referente en este aspecto es, como comento, Chrome.
   • El botón de los marcadores que posicionan en último lugar, a la derecha, otorgándole gran importancia de acuerdo al estudio que hicieron del uso de los menús y que se sumariza en el mapa de calor que generaron a partir de los datos obtenidos de los usuarios que tenían instalada su herramienta de testeo remoto Test Pilot (para más información, no dejéis de leer el post de Alex Faaborg al respecto). En el mapa de calor podéis observar cómo el menú bookmark y sus opciones son las más usadas (se indican mediante el color rojo). ¿Por qué posicionándolo en ese lugar le están otorgando una relevancia especial, en mi opinión por varias razones:
     • La mitad derecha de la pantalla es aquella en la que para los diestros, normalmente se suele encontrar con mayor frecuencia posicionado el cursor del ratón. Esta afirmación está basada en mi mera percepción por lo que debéis tomarla con pinzas (como todo lo que digo, por supuesto) hasta que no haya estudios formales que la corroboren.
     • Por tanto, es más rápidamente alcanzable por el cursor del ratón al tener que recorrer el mismo por término medio una distancia menor desde la posición original en la que se encuentre.
     • Está posicionado al final de la barra muy cerca del borde derecho de la pantalla. Cualquier cosa que esté situada cerca de los bordes de la pantalla va a poder ser alcanzada con mucha mayor rapidez por el cursor del ratón ya que el borde actúa como guía visual, límite, barrera y freno del cursor en su desplazamiento. El movimiento tiene que ser menos preciso y por tanto se ejecuta con mayor rapidez hasta alcanzar el objetivo -el botón del marcador-.
     • Esta situado en el lugar en el que termina el escaneado visual de la parte superior de la interfaz -la cabecera global del navegador- lo que significa un refuerzo cognitivo de su posición en nuestra memoria de corto plazo.
2. La capa de color rojo correspondiente al botón de la home, situada en segundo plano por detrás de la amarilla. Contiene el botón para volver a nuestra Home Tab o página que tengamos configurada por defecto en las preferencias. Se aprecia que está en una capa diferente de la amarilla por el borde inferior contínuo, negro, que lo separa de la misma (o la parte correspondiente del borde superior de la capa amarilla).
3. La capa marrón en la que están situados los controles de cerrar, minimizar y maximizar. El título de la tab activa centrado, los controles de desplazar a izquierda y derecha la barra de tabs, el control de nueva tab (el “+” situado a la derecha) y el control que despliega el menú con la lista de los títulos de las tabs abiertas en la barra de tabs. Todos estos controles están agrupados en la misma capa y aquí viene lo interesante porque… ¿cómo han resuelto el problema de la jerarquización de la capa de la barra de tabs respecto a las demás a través del diseño gráfico…¿?…pues aplicando una sombra en el lateral de la barra de tabs (lo que marcaba en la maqueta superior con las flechas amarillas). Ello crea el efecto de un bolsillo de un pantalón o de una página en la que con un cúter hiciéramos un corte y por el mismo pasásemos una tira de papel que pudierámos deslizar a uno u otro lado según nos conveniese. Vamos, exactamente el mismo efecto que aplicaba el equipo de UX de Monster para crear puntos focales de atención en su página, y concretamente, en cuanto a cómo diseñaban las tabs que daban acceso a los apartados de “Información personal”, “Experiencia”, “Formación”, y “Objetivos profesionales” (podéis leerlo bajando por el post, como al quinto pantallazo aproximadamente).Una solución de diseño gráfico la del equipo de UX de Firefox francamente inteligente.
4. La capa gris de la barra de tabs propiamente dicha que, con su diseño gráfico, se “introduce” y emerge de la capa marrón.
   

Por concluir, la jerarquización de los elementos de una interfaz no sólo se consigue mediante un buen uso de los colores (y remito nuevamente al post de Monster en el que hablaba de ello). Otro gran recurso además, que tenemos a nuestro alcance son las sombras que ayudan a crear un efecto de oclusión o superposición de los elementos de la interfaz y por ende, de capas de información.

Me encanta Firefox. En su equipo de diseño se respira y se vive la Experiencia de Usuario en mayúsculas. Y lo mejor, es que hay mucho de su trabajo cotidiano que hacen público para uso, disfrute y aprendizaje, de todos.

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:

• Los colores definen capas de información, relacionan elementos y permiten realizar con precisión comparaciones entre ellos.
• Permite hacer emerger el conocimiento implícito en el rediseño explicitándo gráficamente las razones por las que se lleva a cabo, para que sean entendidas sin ambiguedades y rápidamente por parte del cliente.
• Facilita juzgar fácilmente el peso que se le otorga a los distintos elementos de la interfaz y la mejora que supone en cuanto usabilidad.
• Facilita estudiar la interrelación semántica que se establece entre los distintos componentes de la interfaz y entrar a considerar cuestiones como la idoneidad de su posicionamiento espacial.

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”