Redeseño HA! (Parte 7 — Rompendo algunhas regras)

Oscar Otero
4 min readJul 27, 2018

--

Séptimo post, dunha serie escrita en tempo real, sobre o redeseño da web historia-arte.com

Versión traducida al español

Á hora de deseñar a interface dunha web, existen un gran número de convencións e recomendacións que os deseñadores debemos coñecer: o logotipo debería ir na parte superior esquerda, a icona de lupa significa “buscar”, etc. Estas normas son resultado de anos de práctica da profesión e aseguran que a interface vai ser entendida pola xente que a vai usar. Tamén son obxecto de estudos e tests como os que fan na arquicoñecida Nielsen Norman Group que abarcan dende cousas tan variopintas como UX para cans ata outras moito máis concretas como os diálogos de confirmación para borrar elementos.

No redeseño de HA! quixen romper, de maneira consciente, algunhas desas normas establecidas, baseándome en determinados datos que puiden recoller do Piwik (a ferramenta que usamos para contar as visitas). Vai ser interesante, cando o redeseño estea funcionando, comprobar se de verdade estes cambios foron positivos ou non.

U-lo menú?

Actualmente existe unha barra superior cun menú de navegación coas seccións máis importantes (obras, artistas, artigos, etc). Se ben, é o máis normal que calquera web proporcione un menú para acceder a estas seccións, despois de comprobar as visitas que recibían esas páxinas, descubrín que non chegan nin ao 2% entre todas elas xuntas. A maioría da xente que entra chega directamente de Google, aterrando directamente na ficha dunha obra, artista, artigo ou movemento. Tamén se emprega bastante o buscador. Por iso ocorréuseme a idea de ocultar ese menú e promover o concepto de “contido como interface”, sen establecer categorías ou xerarquías. Un usuario pode entrar nunha obra, a partir dela navegar ao museo onde está exposta, logo a outra obra, despois ao artista desa obra, e así poder explorar e descubrir novas cousas. Algo, por outro lado, que facemos todos cando navegamos, que forma parte do funcionamento natural da web e que explotan outros sitios como a Wikipedia, sen ir máis lonxe.

Na esquerda, vese o deseño actual, onde hai un menú superior ao lado do buscador. No redeseño da dereita, decidín arriscar mostrando unha navegación minimalista a máis non poder: logo e buscador. Punto.

Está no buscador?

Efectivamente, o buscador é un dos elementos clave desta web e o máis empregado para navegar dun sitio a outro. Un dos problemas que ten o buscador actual é que, unha vez que pos o foco nel, queda agardando a que escribas algo para amosarche resultados. Por que, en vez diso, non aproveitar ese momento de espera para amosar o menú que ocultei previamente, e dese xeito darlle xa opcións ao usuario antes de que faga nada? Esa idea tola, de xuntar o menú e o buscador nun único elemento, non sei se existe nalgunha outra web. Eu polo menos non a vin, veremos que resultado da. Creo que pode funcionar porque sería fácil de descubrir, ao estar ligado ao buscador que é o elemento máis empregado da web. Xa o dicía Scott Berkun en The myth of discoverability: as cousas máis empregadas teñen máis prioridade, e as menos empregadas, menos prioridade. Parece obvio.

Outra vantaxe engadida é que se soluciona tamén o problema do espazo en móbiles. Ademais diso, tamén se aproveita ese momento do buscador para mostrar as pesquisas máis recentes, que penso que pode ser práctico xa que unha gran cantidade de usuarios visita a mesma obra varias veces.

Para aprender máis sobre as suxestións nos buscadores, Nielsen ten un interesante artigo con boas prácticas e diferentes estratexias.

Facendo foco no buscador, desplegase o menú de opcións xunto coas buscas máis recentes. Este é o que se lle chama un momento “wow”, aínda que pode que para algúns non pase de “bah”.

E o logo?

Xa postos a rachar convencións, desta vez tocoulle ao logo. Un estudo feito por Nielsen (este é a última ligazón que paso del, prometido) indica que os logos colocados na parte superior esquerda son máis fáciles de atopar polos usuarios, que se estiveran na parte da dereita. No caso de HA!, decidín non facerlle demasiado caso e xuntar o buscador co logotipo para darlle un maior empaque e deixar a parte da esquerda libre para as imaxes e contido da web.

Promovendo a navegación

Para reforzar máis esta idea de contido como interface, pensei en introducir unha transición entre páxinas a modo de feedback visual. Esa transición, ademais, ten unha dobre función, que é a de mellorar a percepción de velocidade de carga da páxina. É dicir, cando se fai click nunha ligazón, mentres esperas a que cargue a seguinte páxina, non é o mesmo ver unha pantalla en branco, que amosar unha animación a modo de transición que fará que te esquezas de que se está cargando algo. Aínda que este efecto realmente non fai que a páxina cargue máis rápido, a percepción por parte do usuario, é distinta. E iso é moito máis importante que calquera métrica. De feito, hai infinitos estudos sobre iso, pásovos por exemplo este artigo a modo de introduccion de Matt West. No meu caso, aproveitando o feito de que cada obra ten unha cor propia, fixen unha animación para transicionar dende a cor de fondo actual ata a cor de fondo da seguinte páxina.

Exemplo de transición entre as diferentes páxinas para mellorar a percepción de rapidez. Podes experimentalo no teu navegador visitando a páxina https://v2.historia-arte.com/

E ata aquí todo o que deron estes días de experimentacións e tests. Xa pouco queda para botar a andar a nova interface. Se che gustou este artigo, xa sabes o que tes que facer. Apertas e gozade do verán.

--

--