Este documento discute la importancia del diseño visual en las interfaces gráficas de usuario (GUIs) y presenta 10 factores clave del diseño visual como la comprensión de la forma y la línea, la tipografía, la estructuración del espacio y el uso del color. También describe 7 principios del buen diseño como centrarse en el usuario y crear interacciones imaginativas, y explica cómo una mayor conciencia del medio puede fomentar la imaginación computacional.

1. Principios de
Diseño Visual
para IHC
Omar Sosa-Tzec & Martin A. Siegel
School of Informatics & Computing
Indiana University Bloomington
Presentación del libro:
“La Interacción Humano-Computadora en México”
Co-editado por Jaime Muñoz (UAA), Juan Manuel González (BUAP)
y Alfredo Sánchez (UDLAP)
Día Virtual sobre Interacción Humano-Computadora - CUDI
Martes 14 de octubre de 2014

2. Problemática

3. ¿Por qué prestar atención
al diseño visual?

4. Importancia de lo visual
•Toma de decisiones
•Cumplimiento de tareas
•Identidad
Tomada de http://goo.gl/jKLxi7

5. Las interfaces gráficas están cargadas de información visual…

6. Mucha información visual

7. ¿Por qué prestar atención al diseño visual en GUIs?

8. ¿Por qué prestar atención al diseño visual en GUIs?
Sistema
Usuario
GUI

9. ¿Por qué prestar atención al diseño visual en GUIs?
Información visual
GUI
Usuario
Sistema

10. ¿Por qué prestar atención al diseño visual en GUIs?
GUI Significado/Sentido
Información visual
Usuario
Sistema

11. ¿Por qué prestar atención al diseño visual en GUIs?
Experiencia de Usuario (UX)
GUI Significado/Sentido
Información visual
Usuario
Sistema

12. Enfoque
(contenido del capítulo)

13. Factores de ejecución en el diseño visual de GUIs
1. Compresión de la línea y de la forma.
2. Tipografía.
3. Estructuración y aprovechamiento del espacio.
4. Jerarquización y contraste de componentes.
5. Ritmo visual.
6. Lectura de la interfaz.
7. Empleo de metáforas y metonimias.
8. Síntesis e iconicidad.
9. Uso del color.
10. Estética y Cultura.

14. Ejemplos
Diseño de interfaz para “Hola” por Jaime Martínez Domínguez para Enigma Diseño.
Diseño de archivo en línea “Juan de Palafox y Mendoza” por Omar Sosa-Tzec para Universidad
de las Américas Puebla.

15. Siete temas del buen diseño
1. Es centrado en el usuario, no en la máquina.
2. Emplea la computadora como un medio transparente.
3. Crea interacciones imaginativas con imaginación computacional.
4. Provee facilidad de aprendizaje.
5. Implica rediseño continuo.
6. Es más un oficio que arte.
7. Siempre involucra acuerdos.
Siegel, M.A., & Stolterman, E. (2008). Metamorphosis: Transforming Non-designers into Designers.
Proceedings from: Undisciplined! Design Research Society. She"field, UK: Design Research Society.

16. Imaginación computacional
“Explotar el medio para algún
propósito que no podría hacerse
en otro medio y que satisface las
necesidades de los usuarios de tal
forma que ni se habían dado
cuenta de que las tenían, pero una
vez que las ‘ven’, todos quieren
usar el diseño.”
Siegel, M.A., & Stolterman, E. (2008). Metamorphosis: Transforming Non-designers into Designers.
Proceedings from: Undisciplined! Design Research Society. She"field, UK: Design Research Society.

17. Imaginación computacional
Siegel, M.A., & Stolterman, E. (2008). Metamorphosis: Transforming Non-designers into Designers.
Proceedings from: Undisciplined! Design Research Society. She"field, UK: Design Research Society.

18. Cruce de los factores de ejecución y los siete temas del diseño
10 factores de
ejecución visual
7 temas del
buen diseño

19. Implicaciones de los diez factores + imaginación computacional
Estar conscientes del medio dispara
nuestra imaginación computacional.

20. Implicaciones de los diez factores + imaginación computacional
Estar conscientes del medio dispara
nuestra imaginación computacional.
Necesitamos reforzar nuestra
imaginación computacional espacial.

21. Implicaciones de los diez factores + imaginación computacional
Estar conscientes del medio dispara
nuestra imaginación computacional.
Necesitamos reforzar nuestra
imaginación computacional temporal.

22. Implicaciones de los diez factores + imaginación computacional
Estar conscientes del medio dispara
nuestra imaginación computacional.
Necesitamos reforzar nuestra
imaginación computacional
representacional.

23. Documentos para consulta
Artículo de Metamorphosis: Transforming Non-designers into
Designers (Siegel & Stolterman, 2008):
http://shura.shu.ac.uk/449/1/fulltext.pdf
Borrador del capítulo:
http://tzec.com/files/capitulo-diseno-visual-para-ux.pdf

24. ¡Gracias!
http://tzec.com
Las imágenes aquí mostradas son propiedad de sus autores.
Algunas son resultado de búsquedas web, por lo que fueron
tomadas de Internet. Todas ellas son empleadas en esta
presentación con propósitos meramente académicos.
http://profmartysiegel.com