Rediseño HA! (Parte 6 — Artistas y navegación)

Traducción al español del sexto post, escrito en tiempo real, sobre el rediseño de la web historia-arte.com. Ver la versión original en gallego

Rediseño HA! (Parte 5 —Artículos)

En la sexta parte he decidido avanzar un poco más rápido en este proceso, y he estado trabajando en la ficha del artista, así como en otras páginas intermedias de navegación.

Actualmente, la ficha de un artista esta compuesta por una imagen (identificada siempre por su forma circular), una serie de etiquetas, la biografía y la lista de obras de las que tenemos ficha. En este rediseño tuve que abordar algunas cuestiones:

• Lógicamente, cambiar la página para el nuevo sistema de diseño, compuesto por otras tipografías, espacios, navegación, etc.
• A diferencia de las obras (que cada página tiene un color y layout distintos) y artículos (que también tienen un diseño personalizado), para el resto de la web quizás un estilo más homogéneo, con un layout y colores comunes, funcionaría mejor y le daría mucho más valor a esas páginas con tratamiento especial.
• Echaba en falta algún elemento que permitiese continuar la navegación al llegar a un artista, así que le añadí una zona de artistas relacionados, que básicamente son artistas que comparten alguna característica como pertenecer al mismo movimiento artístico o tienen etiquetas comunes.
• Por último, dado que se trata de mostrar la biografía de una persona, que mejor modo de enseñar sus obras que dentro de una línea temporal? De este modo cogen más relevancia, no solo por estar realizadas por esa persona, sino también por formar parte de un período concreto de su vida. La idea en un futuro es poder enriquecer esta línea temporal con apuntes sobre acontecimientos destacados en la vida del artista, proporcionando un mayor contexto a las obras realizadas.

Así que, a día de hoy, la página está más o menos así:

Página de artista antes y después. No solo se distribuyen mejor los contenidos y los espacios en blanco, sino que se incluye más información como artistas relacionados o el uso de la línea temporal para mostrar las obras ordenadas cronológicamente.

También hubo que tener en cuenta que no todos los artistas disponen de biografía o de obras, por lo que se crearon layouts alternativos para estos casos, donde los artistas relacionados aparecen debajo del título, donde debería estar la biografía.

Lista de artistas

A la hora de buscar contenido en la web partimos de dos necesidades distintas:

• Sé el nombre de lo que quiero buscar. En este caso, simplemente se puede utilizar el buscador de la parte superior derecha (buscador que aún no está desarrollado de todo y del que hablaré en un futuro)
• No sé el nombre, o prefiero explorar. Para cubrir ese caso de uso, hubo que repensar las páginas de lista de artistas, proporcionando herramientas para poder filtrar y encontrar material no conocido previamente.

Cuando un usuario accede a la sección de “artistas”, sin utilizar el buscador, seguramente sea porque no está buscando nada en concreto, sino que quiere ver lo que hay. Lo ideal sería, por lo tanto, mostrarle sugerencias y ofrecerle herramientas que le permitan descubrir nuevos artistas que no conocía. Por esa razón, he pensado en una ruta de dos pasos:

Lo más popular

En la primera página se muestra una lista de los artistas más populares en las últimas 24 horas. Los datos para poder montar esta lista vienen directamente de Matomo la herramienta de código abierto que utilizamos para medir las visitas, e que resulta mucho más respetuoso con la privacidad que Google Analytics. Colocamos una pequeña barra debajo de cada artista para mostrar visualmente el nivel de popularidad que tiene:

El ranking de los artistas más populares en este momento. Desgraciadamente solo una mujer en medio de tanto machirulo.

Debajo de este ranking, tenemos el botón “Ver todos” que ya nos permite explorar más en profundidad:

La columna de filtros de la izquierda permite diferentes combinaciones

Los filtros permiten diferentes combinaciones, como por ejemplo artistas japoneses que estén vivos en la actualidad, o artistas italianos de la época del romanticismo. Además, para no mostrar demasiadas opciones, cada filtro tiene una serie de opciones predeterminadas y la opción “Otro…” para verlas todas. La idea además es que una vez selecciones un filtro, la próxima vez ya aparezca entre los predeterminados, para que no tener que buscarlo de nuevo. Por ejemplo, si seleccionas el país México, la próxima vez que entres, ya aparecerá México entre los países visibles inicialmente.

¿Por qué no hacer lo mismo con las obras?

Pues sería lo más lógico, dado que tanto los artistas como las obras son las entidades más importantes de la web. Se hizo, por lo tanto, la misma ruta: primero las obras más populares y luego la lista completa con una serie de filtros.

Lista con las obras más vistas en las últimas 24 horas

Una vez que entramos en la lista de obras completa, vemos los filtros al lado. Existen muchos más filtros para obras que para artistas, como el museo o el autor del texto. En este ejemplo filtramos por todas las obras realizadas por mujeres.

Páginas intermedias de navegación

El resto de páginas que quedan son de navegación de menor importancia como países, museos, etiquetas, etc. En este caso creo que lo importante es la consistencia entre ellas sin intentar ser demasiado “innovador”. Por ejemplo, una etiqueta puede estar presente en obras, artistas y artículos, un país puede tener artistas, obras y museos, un movimiento contiene artistas y obras… Al final estamos siempre hablando de lo mismo, y es importante que se vean siempre igual.

Por eso lo que pensé fue simplemente en unos layouts sencillos donde se vayan colocando los distintos elementos en pisos. Algunos ejemplos:

Página de la etiqueta “Bronce”, que muestra las 6 primeras obras y los artistas con esa etiqueta.

La página del país “Suiza”, que contiene obras, artistas y museos suizos. Además va acompañada de un mapa donde se ven los museos geolocalizados

Página de un museo, en este caso el Guggenheim de Nueva York, con sus obras y otros museos de la misma ciudad.

Página de una técnica, en este caso acrílico. También se incluye una imagen representativa de la técnica, junto con seis obras aleatorias.

Página de un movimiento artístico (Romanticismo), con imagen representativa, descripción…

…y en la parte inferior obras y artistas representativos de este movimiento.

Como se puede ver, todas las páginas tienen la misma estructura y los elementos están colocados del mismo modo. Son páginas que sirven de puente entre otras páginas. Por ejemplo, podemos estar viendo una obra, clicar en el museo en el que está expuesta, y a continuación saltar a otra obra del mismo museo. Por eso tienen que ser páginas predecibles, ya que lo importante no es su contenido sino a dónde nos pueden llevar.

Y esto ha sido todo lo que se ofrece en esta sexta parte. Ya solo quedan… cuatro? cinco? veinte? No se, ya veremos :)

Seguimos.

Rediseño HA! (Parte 7 — Rompiendo algunas reglas)