Mostrando entradas con la etiqueta usabilidad. Mostrar todas las entradas
Mostrando entradas con la etiqueta usabilidad. Mostrar todas las entradas

lunes, 14 de marzo de 2016

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




sábado, 11 de abril de 2015

Cómo evaluar la usabilidad de una web

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 (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.

Como complemento a las herramientas anteriores, es también recomendable la realización de una encuesta a algunos usuarios o clientes habituales o clientes piloto para recoger sugerencias y opiniones sobre su experiencia de compra y navegación.

Para la realización de estos cuestionarios se propuso combinar 2 tipos de encuesta: telefónica y online, esta última se generaría a través de un formulario de Google Drive y el enlace a la misma se transmitiría o difundiría por 3 vías:


1) Enlace desde la página de fin de pedido o solicitud

2) Incluir el enlace en el próximo e-mail o boletín de noticias que fuera a enviar la empresa.

3) Publicar el enlace en las principales redes sociales del cliente con presencia activa

El número de preguntas de la encuesta no debería ser superior a 10 y se dividirían en 2 bloques:

- uno sobre la experiencia de compra y

- otro sobre mejoras o sugerencias de los usuarios para incorporar en el futuro.


Un modelo de encuesta a realizar sería el siguiente:

1. ¿Cómo calificaría su experiencia al comprar en nuestro portal?

a. Buena
b. Regular
c. Mala

2. ¿Cómo calificaría el proceso de contratación?

a. Rápido y/o claro
b. Normal, se tarda y se solicita lo estrictamente necesario
c. Lento y/o confuso

3. ¿Volvería a comprar en nuestro portal?

a. Probablemente sí
b. No lo sé
c. Probablemente no

4. En caso negativo, ¿por qué?

5. ¿Recomendaría a otras personas comprar en nuestro portal?

a. Probablemente sí
b. No lo sé
c. Probablemente no

6. ¿Qué le gustó más de nuestro portal?

7. ¿Qué le gusto menos de nuestro portal?

8. ¿Qué le gustaría encontrar o cree que le falta a nuestro portal?

9. ¿Tiene algún otro comentario o sugerencia?