principios de diseño visual para interacción humano-computadora
TRANSCRIPT
![Page 1: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/1.jpg)
Principios de Diseño Visualpara IHC
Omar Sosa-Tzec & Martin A. SiegelSchool of Informatics & ComputingIndiana 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 - CUDIMartes 14 de octubre de 2014
![Page 2: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/2.jpg)
Problemática
![Page 3: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/3.jpg)
¿Por qué prestar atenciónal diseño visual?
![Page 4: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/4.jpg)
Tomada de http://goo.gl/jKLxi7
Importancia de lo visual
• Toma de decisiones
• Cumplimiento de tareas
• Identidad
![Page 5: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/5.jpg)
Las interfaces gráficas están cargadas de información visual…
![Page 6: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/6.jpg)
Mucha información visual
![Page 7: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/7.jpg)
¿Por qué prestar atención al diseño visual en GUIs?
![Page 8: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/8.jpg)
¿Por qué prestar atención al diseño visual en GUIs?
Sistema
Usuario
GUI
![Page 9: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/9.jpg)
Información visual
¿Por qué prestar atención al diseño visual en GUIs?
GUI
Usuario
Sistema
![Page 10: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/10.jpg)
Información visual
¿Por qué prestar atención al diseño visual en GUIs?
GUISignificado/Sentido
Usuario
Sistema
![Page 11: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/11.jpg)
Información visual
¿Por qué prestar atención al diseño visual en GUIs?
Experiencia de Usuario (UX)
GUISignificado/Sentido
Usuario
Sistema
![Page 12: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/12.jpg)
Enfoque(contenido del capítulo)
![Page 13: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/13.jpg)
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.
![Page 14: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/14.jpg)
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.
![Page 15: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/15.jpg)
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. Sheffield, UK: Design Research Society.
![Page 16: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/16.jpg)
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. Sheffield, UK: Design Research Society.
![Page 17: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/17.jpg)
Imaginación computacional
Siegel, M.A., & Stolterman, E. (2008). Metamorphosis: Transforming Non-designers into Designers. Proceedings from: Undisciplined! Design Research Society. Sheffield, UK: Design Research Society.
![Page 18: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/18.jpg)
10 factores deejecución visual
Cruce de los factores de ejecución y los siete temas del diseño
7 temas delbuen diseño
![Page 19: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/19.jpg)
Implicaciones de los diez factores + imaginación computacional
Estar conscientes del medio dispara nuestra imaginación computacional.
![Page 20: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/20.jpg)
Implicaciones de los diez factores + imaginación computacional
Necesitamos reforzar nuestra imaginación computacional espacial.
Estar conscientes del medio dispara nuestra imaginación computacional.
![Page 21: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/21.jpg)
Implicaciones de los diez factores + imaginación computacional
Necesitamos reforzar nuestra imaginación computacional temporal.
Estar conscientes del medio dispara nuestra imaginación computacional.
![Page 22: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/22.jpg)
Implicaciones de los diez factores + imaginación computacional
Necesitamos reforzar nuestra imaginación computacional
representacional.
Estar conscientes del medio dispara nuestra imaginación computacional.
![Page 23: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/23.jpg)
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
![Page 24: Principios de Diseño Visual para Interacción Humano-Computadora](https://reader031.vdocumento.com/reader031/viewer/2022020101/55ae8a721a28ab7a1c8b4749/html5/thumbnails/24.jpg)
¡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