Tendemos a pensar que todo lo que tenemos que contar es importante y que cuanto más grande y llamativo lo pongamos, más captará la atención del usuario. Pero, ¿qué pasa cuando todo lo que ponemos es enorme y llamativo? ¿Cómo sabe el usuario qué es lo importante entonces? Aprenderemos a identificar qué es lo importante en una web, cómo leemos en web los usuarios, en qué consiste el escaneo y cómo tenemos que usarlo a la hora de diseñar nuestras webs para lograr nuestros objetivos y que, además, el usuario tenga una buena experiencia.

1. NORA FERREIRÓS
No me chilles que no te veo
La jerarquía visual en pantalla

2. Diseñadora UX/UI y de marcas
www.noradriana.com | @noradriana_
NORA FERREIRÓS
www.wpfem.org | @wpfem

3. LA JERARQUÍA VISUAL | NORA FERREIRÓS
¡No me
chilles que
no te veo!

4. LA JERARQUÍA VISUAL | NORA FERREIRÓS
¡No me
chilles que
no te veo!

5. LA JERARQUÍA VISUAL | NORA FERREIRÓS

6. LA JERARQUÍA VISUAL | NORA FERREIRÓS

7. LA JERARQUÍA VISUAL | NORA FERREIRÓS

8. LA JERARQUÍA VISUAL | NORA FERREIRÓS

9. LA JERARQUÍA VISUAL | NORA FERREIRÓS

10. LA JERARQUÍA VISUAL | NORA FERREIRÓS
TU MARCA
NO ES TU LOGO

11. LA JERARQUÍA VISUAL | NORA FERREIRÓS

12. LA JERARQUÍA VISUAL | NORA FERREIRÓS
¿Qué es lo importante en una web?
Objetivos.
Necesidades.

13. LA JERARQUÍA VISUAL | NORA FERREIRÓS
LOS FALSOS
OBJETIVOS

14. LAS PERSONAS USUARIAS

15. LA JERARQUÍA VISUAL | NORA FERREIRÓS
¿Cuál es la lógica de las personas usuarias
a la hora de navegar por una web?
Satisficing.
Una sola cosa cada vez.
Escaneo visual.

16. LA JERARQUÍA VISUAL | NORA FERREIRÓS
TU WEB NO ES
EL PARQUE
DEL RETIRO

17. LA JERARQUÍA VISUAL | NORA FERREIRÓS

18. LA JERARQUÍA VISUAL | NORA FERREIRÓS
¿Qué es el escaneo visual?
Lectura en diagonal.
Puntos de atención.
Cadena lógica.

19. LA JERARQUÍA VISUAL | NORA FERREIRÓS

20. LA JERARQUÍA VISUAL | NORA FERREIRÓS

21. LA JERARQUÍA VISUAL | NORA FERREIRÓS

22. LA JERARQUÍA VISUAL | NORA FERREIRÓS

23. LA JERARQUÍA VISUAL | NORA FERREIRÓS

24. ¿POR QUÉ ESCANEAMOS?

25. LA JERARQUÍA VISUAL | NORA FERREIRÓS
El proceso del escaneo visual
1. La persona usuaria abre la web.
2. Comienza a escanear por donde lo guía el orden de
lectura.
3. La jerarquía la atrae instintivamente a puntos concretos.
4. Decide si lo que visualmente llama su atención se
relaciona
con sus objetivos o expectativas.

26. LA JERARQUÍA VISUAL | NORA FERREIRÓS

27. LA JERARQUÍA VISUAL | NORA FERREIRÓS
https://www.nngroup.com/articles/how-users-read-on-the-web/
“Don't Make Me Think, Revisited: A
Common Sense Approach to Web
Usability”, Steve Krug

28. LA JERARQUÍA VISUAL | NORA FERREIRÓS
¿Qué condiciona el escaneo visual?
Factores circunstanciales.
Orden de lectura.
Legibilidad.

29. LA JERARQUÍA VISUAL | NORA FERREIRÓS
Orden de
lectura:
el patrón F
https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/

30. LA JERARQUÍA VISUAL | NORA FERREIRÓS
Orden de
lectura:
el patrón Z

31. LA JERARQUÍA VISUAL | NORA FERREIRÓS
Orden de
lectura:
el patrón Z

32. LA JERARQUÍA VISUAL | NORA FERREIRÓS
Legibilidad

33. LA JERARQUÍA VISUAL

34. LA JERARQUÍA VISUAL | NORA FERREIRÓS
¿Por qué es importante básica la
jerarquía visual?
Foco
Guía.
Orientación.

35. “El principio de jerarquía visual establece que debemos
dar mayor peso visual precisamente a aquellos
elementos que en cada momento de la interacción
puedan resultar más relevantes para el usuario,
guiando y facilitando de este modo su tarea de
búsqueda visual.”
LA JERARQUÍA VISUAL | NORA FERREIRÓS
http://yusef.es/Experiencia_de_Usuario.pdf

36. LA JERARQUÍA VISUAL | NORA FERREIRÓS
¿Por qué es importante básica la
jerarquía visual?
Foco
Guía.
Orientación.

37. LA JERARQUÍA VISUAL | NORA FERREIRÓS
¿Cómo se crea la jerarquía visual?
Contexto.
Contraste.

38. LA JERARQUÍA VISUAL | NORA FERREIRÓS

39. LA JERARQUÍA VISUAL | NORA FERREIRÓS

40. LA JERARQUÍA VISUAL | NORA FERREIRÓS

41. LA JERARQUÍA VISUAL | NORA FERREIRÓS
¿Cómo se crea la jerarquía visual?
Contexto.
Contraste.

42. ¿CÓMO CREAMOS CONTRASTE?

43. LA JERARQUÍA VISUAL | NORA FERREIRÓS
Movimiento o animación

44. LA JERARQUÍA VISUAL | NORA FERREIRÓS
Tamaño o grosor

45. LA JERARQUÍA VISUAL | NORA FERREIRÓS
Color

46. LA JERARQUÍA VISUAL | NORA FERREIRÓS
Forma

47. LA JERARQUÍA VISUAL | NORA FERREIRÓS
Forma

48. LA JERARQUÍA VISUAL | NORA FERREIRÓS
Orientación o rotación

49. LA JERARQUÍA VISUAL | NORA FERREIRÓS
Espacio o aislamiento

50. LA JERARQUÍA VISUAL | NORA FERREIRÓS
Espacio o aislamiento

51. LA JERARQUÍA VISUAL | NORA FERREIRÓS
(Falta de) Semejanza

52. RECOMENDACIONES

53. LA JERARQUÍA VISUAL | NORA FERREIRÓS
1. Objetivos y usuarios concretos.
2. El contenido antes que el diseño.
3. Lo básico siempre funciona.
4. Haz pruebas con personas usuarias.

54. escribes@noradriana.com
¡MUCHAS GRACIAS!
@noradriana_