En esta serie de artículos quiero explicar diferentes decisiones de diseño, porqué se tomaron y cómo se implementaron en proyectos reales.
El proyecto: rediseño de la web corporativa de Odilo
Odilo es una compañía que proporciona plataformas para el préstamo de contenido digital. Algo así como una biblioteca online donde puedes reservar libros electrónicos, audiolibros, etc.
Odilo tiene diferentes productos enfocados para diferentes sectores, como bibliotecas públicas, universidades, incluso hoteles o ciudades inteligentes. Por ello, como cada producto tiene un cliente objetivo diferente, el mensaje de cada producto tiene que ser diferente.
En el rediseño del sitio web de Odilo, éste era uno de los puntos donde se articulaba todo el proyecto: la necesidad de dar un mensaje personalizado presentando la plataforma a cada cliente objetivo. Por supuesto todo este proyecto se desarrolló sobre WordPress a medida, con un theme desde cero en exclusiva para Odilo y un plugin personalizado donde controlar la funcionalidad que necesita la compañía para su sitio web corporativo.
La función
Se hace evidente que para que el mensaje de cada producto sea único para cada cliente, necesitamos una página por producto. Como si cada producto fuera una landing page.
Que cada producto sea una página independiente obliga a que podamos acceder a ellas desde la home de una forma clara para el usuario.
La home, como resumen corporativo de la compañía, tiene que mostrar todos los productos que puede ofrecer, aunque sea de forma genérica. Por ello se diseñó una malla formada por imágenes que representan a cada producto y que a forma de navegación conducen al visitante a una página dedicada y optimizada para el cliente objetivo que espera.
Esta imagen que representa a cada producto no está elegida al azar: es la misma imagen que la cabecera con la cual comienza cada página de cada producto, de esta manera, el usuario cuando navega desde la home a cada uno de los productos, identifica que se encuentra en el lugar correcto.
El diseño de la malla es un acierto, ya que muestra al visitante, en la home, cuales son las verticales y productos de la compañía y nos permite adaptar el mensaje de cada página de forma efectiva.
La solución
Esta propuesta tiene por contra una serie de problemas que hay que resolver:
El primero de ellos es indicarle al usuario que ésta malla es una elemento de presentación de productos, pero también de navegación. Es decir: hay que indicarle al usuario que esta malla es interactiva, que es navegación.
A su vez, además de indicar al usuario de que se trata de un elemento interactivo, tenemos que notificar al usuario que ha realizado la acción de clic, sobretodo si hay un poco de retardo entre el evento de clic y la carga de la página de destino.
La implementación
Notificación de la interactividad del elemento al usuario:
Para que el usuario separa que se trata de un elemento interactivo tenemos que notificárselo, para ello, la propuesta fue que al hacer hover sobre cualquier de las imágenes que componen la malla, la imagen cambiase.
Después de varias pruebes elegí aplicar un leve efecto de blur a la imagen sobre la cual el usuario pasaba el ratón. Era un efecto sutil y cumplía la función de notificar de la interactividad al usuario.
El efecto blur se aplica con el atributo filter CSS que admiten las imágenes. Y es algo tan sencillo como aplicar esto en el selector :hover de la imagen:
img:hover {
filter: blur(2);
}
En este caso concreto se aplica un blur de 2px.
Para conocer más sobre los filtros que se pueden aplicar a imágenes visita este artículo de css-tricks.
Notificando la acción al usuario:
Cuando el usuario haga clic sobre la imagen, si por cualquier motivo tarda un poco en cargar tenemos que avisar al usuario que ha realizado la acción con éxito, por ello realicé una animación similar a cuando pulsas un botón: es decir, hacer el elemento un poco más pequeño cuando se hace el clic para a continuación para volver a su tamaño original.
Le añadí un event listener de evento clic a la imagen con Javascript, de forma que cuando alguien hace clic, se añade una clase CSS que lanza una animación por transformación de la escala del elemento controlada por keyframes.
@keyframes clicked-solution {
0% {transform: scale(1)}
25% {transform: scale(.9)}
100% {transform: scale(1)}
}
De esta manera, de cara al usuario, la imagen se transforma y actúa como un botón, y cuando se produce la animación, aunque tarde un poco en cargar la nueva página, el usuario sabe que la acción se ha realizado correctamente.
Para conocer más sobre este tipo de animaciones por keyframes puedes leer este extenso y detallado artículo .
Conclusión
Como puedes ver, toda interacción o animación surge para notificar y para ayudar al usuario a que el uso del sitio web sea lo más satisfactorio posible. Intenta evitar el uso de animaciones que no aportan información o ayuda al usuario.