El documento habla sobre los aspectos psicológicos de las webs y la importancia de equilibrar el diseño gráfico con la información para crear una buena experiencia de usuario. Explica conceptos como las emociones básicas que pueden surgir durante la interacción con un sitio web y cómo principios de la psicología de la Gestalt como la similitud, proximidad y clausura afectan la percepción del usuario. También analiza cómo evitar la sobrecarga cognitiva a través de una jerarquía clara de la información y

1. Aspectos psicológicos de las webs:
información vs diseño gráfico
David Picó Vila
30/11/2016
Webinar patrocinado por:

2. Contenidos del webinar
• ¿Qué es la “experiencia” de un usuario?
• Aspectos emocionales y reacciones
• Coherencia entre diseño gráfico e información
• Principios perceptivos de la psicología de la Gestalt
• Ejemplos

3. Perfiles profesionales en un
equipo de desarrollo web
• Programador
• Diseñador gráfico
• “Arquitecto de la información”

4. Experiencia del usuario
Estímulo > Reacción emocional > Huella emocional
Pop-up > Percepción de intrusión > Irritación
Descarga lenta > Impaciencia > Enfado o desvinculación
Enlaces rotos > Sensación de descuido > Desconfianza
Cambios de diseño > Sensación de pérdida > Rechazo a lo nuevo

5. Emociones básicas en la
interacción con un sitio web
Miedo Evaluación de la seguridad, confianza
Afecto Sensación de vinculación, lealtad
Tristeza Decepción, pérdida, reacción a los cambios
Enfado Reacción a la invasión o a la omisión de cuidado
Alegría Energía para seguir en relación

6. Reacciones del usuario
Tema Percepciones Experiencia positiva
Sobrecarga cognitiva
“confusión”, “saturación”,
“sobresfuerzo”, “distracción”,
“interrupciones”, “dificultad de
entender”
Experiencia fluida
Atención centrada en los
contenidos
Orientación
“no encuentro lo que busco”,
“no sé qué hay”, “no sé dónde
estoy”, “no sé volver a lo
conocido”
Movimiento ágil
Sensación de dominio
Facilita el retorno
Confianza
“fiabilidad”, “precisión”, “buen
trato”, “soy cuidado”, “se me
da lo que necesito”
Facilita el intercambio
Boca a boca
Lealtad, servir de referencia

7. Reacciones del usuario
Tema
Algunos aspectos de un sitio web que contribuyen a una
buena experiencia en este ámbito
Sobrecarga cognitiva
Distinción entre contenido, navegación e interacción
Coherencia entre diseño gráfico e información
Jerarquía informativa y gráfica
Orientación
Estructuras de información claras
Herramientas de navegación apropiadas
Jerarquía informativa y gráfica
Confianza
Selección ajustada de contenidos
Informar de quién hay detrás: personas, procesos
Claridad en las intenciones: información vs publicidad

8. Psicología de la Gestalt
• Influyente escuela de psicología de la percepción de
principios del siglo XX.
• Se centra en intentar comprender la experiencia perceptiva
no analizando sus partes, sino como un todo.
• “El todo es diferente de la suma de las partes.”

9. Psicología de la Gestalt
Cómo dirigimos la atención: procesos de figura/fondo

11. Psicología de la Gestalt
Cómo estructuramos la percepción: agrupamientos

12. Principio de similaridad

13. Principio de similaridad

14. Menús complejos
T1
T2
T3
T4
P1
P2
P3
R1 R2

15. Menús complejos

16. Menús complejos
T1
T2
T3
T4
P1
P2
P3
R1
R2

17. Menús complejos

18. Menús complejos

19. Menús complejos
T1
T2
T3
T4
P1
P2
P3
R1
R2

20. Menús complejos

22. Principio de proximidad

23. Principio de proximidad

24. Jerarquía de textos

25. Jerarquía de textos

26. Jerarquía de textos

27. Menús complejos

28. Menús complejos

29. Menús complejos

30. Principio de clausura

31. Principio de clausura

32. Principio de
clausura
Tendemos a
buscar las
razones de cada
configuración que
observamos.

33. Principio de
clausura
Inferimos la
estructura para
“cerrar” nuestra
comprensión.

34. Principio de
clausura
Inferimos la
estructura para
“cerrar” nuestra
comprensión.

35. Principio de
clausura
Inferimos la
estructura para
“cerrar” nuestra
comprensión.

36. http://socialbiblio.com
info@socialbiblio.com
David Picó Vila
Luthiers De Webs
http://luthiersdewebs.com
Máster MUGI - Universitat Politècnica de València
https://mugi.webs.upv.es/profesores/
Terapiados
http://terapiados.net
CV en LinkedIn
https://www.linkedin.com/in/davidpicovila