Importancia del diseño centrado en la atención

100% recomendable la lectura de “Attention-Driven-Design” de Oli Gardner en Unbounce donde describe y presenta ejemplos de 23 principios visuales para diseñar landing pages más efectivas, aunque estos diseños pueden aplicarse al diseño en general.

No se trata de aplicar todos los principios a la vez sino de ser conscientes a la hora de diseñar de las distintas técnicas que podemos aplicar - de forma aisalada o en combinación - para conseguir ese bien tan preciado que es la atención del usuario.

Lo ideal en mi opinión sería combinar el diseño centrado en la atención con el diseño centrado en el usuario (usabilidad) en este orden (de nada sirve una gran usabilididad si no captamos la atención del usuario y no tiene oportunidad de comprobarlo…).

Los principios del diseño centrado en la atención son:

1. DIRECCIÓN

2. MOVIMIENTO

3. AFFORDANCE

4. CONTRASTE

5. ANIDAMIENTO

6. DESTACAR

7. ESPACION EN

8. ANOMALÍA

9. PROXIMIDAD

10. DISTRACCIÓN

11. INTERRUPCIÓN

12. PREDOMINIO

13. CONSISTENCIA

14. REPETICIÓN

15. SIMETRÍA

16. SOLAPAMIENTO

17. ALINEAMIENTO

18. CONTINUIDAD

19. TAMAÑO

20. PERSPECTIVA

21. AGRUPAMIENTO

22. ENCAPSULACIÓN

23. CONTACTO VISUAL

Cómo evaluar la usabilidad de una web (I)

Para evaluar la usabilidad de una web existen 2 herramientas que pueden monitorizar la actividad de los usuarios y generar los correspondientes informes que permitirían identificar puntos de mejorar relacionada con la usabilidad en base al comportamiento del usuario.

Estas 2 herramientas son:

- CrazyEgg (http://www.crazyegg.com) que analiza las interacciones de los visitantes de la web midiendo el número de clics que realizan los usuarios, asociando esos clics con los tipos de tráfico (nuevas visitas, visitantes recurrentes…), a través de los mapas de calor, el movimiento del ratón o el scroll de la página.

- Visual Website Optimizer (https://vwo.com/) para realizar tests A/B a través de distintas versiones del sitio web.

Un test A/B en el ámbito del diseño de páginas web y el análisis de la experiencia del usuario, tiene como objetivo identificar los cambios que incrementan o maximizan un resultado determinado. En este tipo de pruebas, se comparan dos versiones (A y B) que son idénticas excepto en una variación que puede influir en el comportamiento del usuario. 

En el proceso de compra, conseguir mejoras marginales en la tasa de abandono, pueden implicar incrementos significativos en las ventas. Igualmente, se pueden observar mejoras cuando se modifican elementos como el texto, la disposición de elementos o layout, imágenes y colores

A través de estas herramientas de medición se puede responder una serie de preguntas:

- ¿Dónde se concentran la atención los usuarios? Los mapas de calor marcan aquellos lugares donde más se fijan los usuarios y están representados con colores.

- ¿Cómo se mueven por la página? Los usuarios interesados en un producto moverán en ratón por aquellas zonas que más les llamen la atención (fotos, botones, más información…) y harán scroll hasta parar en el sitio que les interese.

- ¿Dónde se registra el mayor porcentaje de clics? El análisis de estas zonas permiten conocer qué tipo de información es más demandada, por ejemplo si quieren los gastos de envío o las condiciones de devolución.

En ambas aplicaciones es necesario es insertar un código o snippet para que el servicio pueda registrar las interacciones de los usuarios con el sitio web.

Qué es usabilidad web y cómo mejorarla

El gurú de la usabilidad Jakob Nielsen define la usabilidad como:

 “el atributo de calidad que mide lo fáciles que son de usar las páginas Web”. 

Los principios básicos en los que se basa la usabilidad, según Jakob Nielsen: 

· Capacidad de aprendizaje: Una web altamente usable ha de permitir que los nuevos usuarios interaccionen de forma efectiva con el sistema. Está relacionada con la predicibilidad, sintetización, familiaridad, la generalización de los conocimientos previos y la consistencia.

· Facilidad de Uso: los usuarios han de utilizar la herramienta de forma fácil sin requerir formación específica, ha de ser intuitiva y natural en la forma de trabajar.

· Flexibilidad: ha de favorecer múltiples formas y vías para una misma tarea.

· Robustez: Consistencia y apoyo al usuario en su proceso de intercambio.

Para validar la aplicación de las mejores prácticas de usabilidad puede utilizarse la siguiente lista de comprobación que recoge las principales directrices de usabilidad tanto para usuarios, como para los navegadores y motores de búsqueda:

1-Anticipación y calidad de diseño web

El sitio web ha de anticiparse a las necesidades y expectativas del usuario, mostrando un diseño atractivo, agradable, y que aporta confianza a los usuarios y potenciales clientes. 

2-Estándar de accesibilidad y usabilidad web:

Respetar los estándares y principales especificaciones técnicas que definen y describen aspectos de la web. 

3-Autonomía y eficiencia del usuario

Ha de presentar un menú de navegación claro y sencillo, que facilite la libertad de elección por parte del usuario y permita acceder a todas las secciones de la web y a sus contenidos en pocos pasos.

4- Interfaz visible y legible

Cuidar el diseño web evitando elementos invisibles de navegación como menús desplegables y también utilizar colores adecuados, cuidar el tamaño de las fuentes y la presentación estándar para los enlaces, como el efecto de subrayar el hipervínculo al situar al cursor encima.

5-Contenido organizado, claro y sencillo

Presentar la redacción de los textos de una forma clara, concisa y no repetitiva, evitando así prácticas como el “keyword stuffing” desaconsejadas de “black hat SEO” para afectar el posicionamiento.

El keyword stuffing o sobreoptimización de palabras claves consiste en incluir más veces de las necesarias las palabras claves por las que se intenta posicionar un sitio web.

Otra recomendación es la colocación del contenido más importante, novedades y promociones, en la parte superior o en la zona conocida como “above the fold”.

6-Calidad del menú de Navegación

Presentar menús de navegación claros y útiles, incluyendo sólo la información más importante y facilitando la navegación a los usuarios.

7- Evitar Pop-ups o ventanas emergentes

No hacer uso de ventanas emergentes para mostrar información o avisos.

8- Enfoque a conversión

Enfocar a conseguir el objetivo principal: la venta.

Algunas de las siguientes técnicas en el sitio web ayudan a optimizar la conversión:

• Apartado de “carrito” visible y accesible en todo momento
• El proceso de pedido ha de estar bien estructurado y claramente identificados los pasos que lo componen, y en el que se encuentra el usuario, permitiendo además volver al paso anterior para modificar o rectificar datos.

9-Tiempo de espera y carga

Presentar una carga rápida, sin caídas frecuentes del servidor que dejen inaccesible la página web.

La velocidad de carga es uno de los parámetros que buscadores como Google tiene en cuenta para el posicionamiento de un sitio web, valorando positivamente a los sitios web más rápidos.

10- Diseño web adaptable o responsive

Adaptación del diseño a cualquier tipo de dispositivo, esto es, responsive. Es una realidad que hay un aumento generalizado en el tráfico web desde dispositivos móviles, tablets y smartphones, por ello es fundamental y aconsejable proporcionar a los usuarios de estos dispositivos, la mejor experiencia y los mismos contenidos y funcionalidades que en la versión para escritorio.


Otras técnicas que mejorarían la usabilidad –y como resultado la conversión- en el sitio web, serían:

• Uso de fotografías de mejor calidad
• Incorporación de comentarios sobre el producto de otros compradores (en caso de incorporar la compra online)
• Inserción de un vídeo relacionado con cada servicio (hay estudios que demuestran que un vídeo aumenta la conversión independientemente incluso de si se reproduce)