Rediseño HA! (Parte 7 — Rompiendo algunas reglas)
Traducción al español del séptimo post, escrito en tiempo real, sobre el rediseño de la web historia-arte.com. Ver la versión original en gallego
A la hora de diseñar la interfaz de una web, existen un gran número de convenciones y recomendaciones que los diseñadores debemos conocer: el logotipo debería ir en la parte superior izquierda, el icono de lupa significa “buscar”, etc. Estas normas son el resultado de años de práctica de la profesión y aseguran que la interfaz será entendida por la gente que la va a usar. También son objeto de estudios y tests como los que hacen en la archiconocida Nielsen Norman Group que abarcan desde cosas tan variopintas como UX para perros hasta otras mucho más concretas como los diálogos de confirmación para borrar elementos.
En el rediseño de HA! he querido romper, de manera consciente, algunas de esas normas establecidas, basándome en determinados datos que he podido recoger del Piwik (la herramienta que usamos para contar las visitas). Será interesante, cuando el rediseño esté funcionando, comprobar si de verdad estos cambios fueron positivos o no.
¿Dónde está el menú?
Actualmente existe una barra superior con un menú de navegación con las secciones más importantes (obras, artistas, artículos, etc). Si bien, lo más normal es que cualquier web proporcione un menú para acceder a estas secciones, despues de comprobar las visitas que recibían estas páginas, descubrí que no llegaban ni al 2% entre todas ellas juntas. La mayoría de la gente que entra llega directamente desde Google, aterrizando directamente en la ficha de una obra, artista, artículo o movimiento. También se utiliza bastante el buscador. Por eso se me ocurrió la idea de ocultar ese menú y promover el concepto de “contenido como interfaz”, sin establecer categorías o jeraquías. Un usuario puede entrar en una obra, a partir de ella navegar al museo donde está expuesta, luego a otra obra, despues al artista de esa obra, y así poder explorar y descubrir nuevas cosas. Algo, por otro lado, que hacemos todos cuando navegamos, que forma parte del funcionamiento natural de la web y que explotan otros sitios como la Wikipedia, sin ir más lejos.
¿Está en el buscador?
Efectivamente, el buscador es uno de los elementos clave de esta web y lo más utilizado para navegar de un sitio a otro. Uno de los problemas que tiene el buscador actual es que, una vez que pones el foco, se queda esperando a que escribas algo para mostrar resultados. ¿Por qué, en su lugar, no aprovechar ese momento de espera para mostrar el menú que había ocultado previamente, y de ese modo darle ya opciones al usuario antes de que haga nada? Esa idea loca, de juntar el menú y el buscador en un único elemento, no sé si existe en alguna otra web. Yo no lo he visto, veremos qué resultado da. Creo que puede funcionar porque sería fácil de descubrir, al estar relacionado con el buscador que es el elemento más utilizado de la web. Ya lo decía Scott Berkun en The myth of discoverability: las cosas más utilizadas tienen más prioridad, y las menos utilizadas, menos prioridad. Parece obvio.
Otra ventaja añadida es que se soluciona también el problema del espacio en móviles. Además de todo esto, también se aprovecha ese momento del buscador para mostrar las búsquedas más recentes, que pienso que puede ser práctico ya que una gran cantidad de usuarios visita la misma obra varias veces.
Para aprender más sobre las sugerencias en los buscadores, Nielsen tiene un interesante artículo con buenas prácticas y diferentes estrategias.
¿Y el logo?
Ya puestos a romper convenciones, esta vez le tocó el turno al logo. Un estudio realizado por Nielsen (este es el último link que paso de él, prometido) indica que los logos colocados en la parte superior izquierda son más fáciles de encontrar por los usuarios, que si estuviesen en la parte de la derecha. En el caso de HA!, he decidido no hacerle demasiado caso y juntar el buscador con el logotipo para darle un mayor empaque y dejar la parte izquierda libre para las imágenes y contenido de la web.
Promoviendo la navegación
Para reforzar más esta idea de contenido como interfaz, quise introducir una transición entre páginas a modo de feedback visual. Esa transición, además, tiene una doble función, que es la de mejorar la percepción de velocidad de carga de la página. Es decir, cuando se hace click en un link, mientras esperas a que cargue la siguiente página, no es lo mismo ver una pantalla en blanco, que mostrar una animación a modo de transición que hará que te olvides de que se está cargando algo por detrás. Aunque esto no hace que la página realmente cargue más rápido, es lo que percibe el usuario. Y esto es mucho más importante que cualquier métrica. De hecho, hay infinitos estudios sobre eso, os paso por ejemplo este artículo a modo de introducción de Matt West. En mi caso, aprovechando el hecho de que cada obra tiene un color propio, hice una animación para transicionar desde el color de fondo actual hasta el color de fondo de la siguiente página.
Y hasta aquí todo lo que dieron de sí estos días de experimentación y tests. Ya queda poco para lanzar la nueva interfaz. Si te gustó este artículo, ya sabes lo que tienes que hacer. Abrazos y disfrutad del verano.
