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 Problemática ¿Por qué prestar atención al diseño visual? Importancia de lo visual • Toma de decisiones • Cumplimiento de tareas • Identidad Tomada de http://goo.gl/jKLxi7 Las interfaces gráficas están cargadas de información visual… Mucha información visual ¿Por qué prestar atención al diseño visual en GUIs? ¿Por qué prestar atención al diseño visual en GUIs? GUI Sistema Usuario ¿Por qué prestar atención al diseño visual en GUIs? GUI Sistema Información visual Usuario ¿Por qué prestar atención al diseño visual en GUIs? GUI Significado/Sentido Sistema Información visual Usuario ¿Por qué prestar atención al diseño visual en GUIs? Experiencia de Usuario (UX) GUI Significado/Sentido Sistema Información visual Usuario Enfoque (contenido del capítulo) 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. 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. 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. 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. 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. 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 Implicaciones de los diez factores + imaginación computacional Estar conscientes del medio dispara nuestra imaginación computacional. Implicaciones de los diez factores + imaginación computacional Estar conscientes del medio dispara nuestra imaginación computacional. Necesitamos reforzar nuestra imaginación computacional espacial. Implicaciones de los diez factores + imaginación computacional Estar conscientes del medio dispara nuestra imaginación computacional. Necesitamos reforzar nuestra imaginación computacional temporal. Implicaciones de los diez factores + imaginación computacional Estar conscientes del medio dispara nuestra imaginación computacional. Necesitamos reforzar nuestra imaginación computacional representacional. 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 ¡Gracias! http://tzec.com http://profmartysiegel.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.