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.