Principios de Diseño Visual para Interacción Humano-Computadora

Download Principios de Diseño Visual para Interacción Humano-Computadora

Post on 22-Jul-2015

437 views

Category:

Design

2 download

TRANSCRIPT

<ul><li><p>Principios de Diseo Visualpara IHC</p><p>Omar Sosa-Tzec &amp; Martin A. SiegelSchool of Informatics &amp; ComputingIndiana University Bloomington</p><p>Presentacin del libro: La Interaccin Humano-Computadora en MxicoCo-editado por Jaime Muoz (UAA), Juan Manuel Gonzlez (BUAP) y Alfredo Snchez (UDLAP)</p><p>Da Virtual sobre Interaccin Humano-Computadora - CUDIMartes 14de octubre de 2014</p></li><li><p>Problemtica</p></li><li><p>Por qu prestar atencinal diseo visual?</p></li><li><p>Tomada de http://goo.gl/jKLxi7</p><p>Importancia de lo visual</p><p> Toma de decisiones</p><p> Cumplimiento de tareas</p><p> Identidad </p></li><li><p>Las interfaces grficas estn cargadas de informacin visual</p></li><li><p>Mucha informacin visual</p></li><li><p>Por qu prestar atencin al diseo visual en GUIs?</p></li><li><p>Por qu prestar atencin al diseo visual en GUIs?</p><p>Sistema</p><p>Usuario</p><p>GUI</p></li><li><p>Informacin visual</p><p>Por qu prestar atencin al diseo visual en GUIs?</p><p>GUI</p><p>Usuario</p><p>Sistema</p></li><li><p>Informacin visual</p><p>Por qu prestar atencin al diseo visual en GUIs?</p><p>GUI Significado/Sentido</p><p>Usuario</p><p>Sistema</p></li><li><p>Informacin visual</p><p>Por qu prestar atencin al diseo visual en GUIs?</p><p>Experiencia de Usuario (UX)</p><p>GUI Significado/Sentido</p><p>Usuario</p><p>Sistema</p></li><li><p>Enfoque(contenido del captulo)</p></li><li><p>Factores de ejecucin en el diseo visual de GUIs</p><p>1. Compresin de la lnea y de la forma.</p><p>2. Tipografa.</p><p>3. Estructuracin y aprovechamiento del espacio.</p><p>4. Jerarquizacin y contraste de componentes.</p><p>5. Ritmo visual.</p><p>6. Lectura de la interfaz.</p><p>7. Empleo de metforas y metonimias.</p><p>8. Sntesis e iconicidad.</p><p>9. Uso del color.</p><p>10. Esttica y Cultura.</p></li><li><p>Ejemplos</p><p>Diseo de interfaz para Hola por Jaime Martnez Domnguez para Enigma Diseo.</p><p>Diseo de archivo en lnea Juan de Palafox y Mendoza por Omar Sosa-Tzec para Universidad de las Amricas Puebla.</p></li><li><p>Siete temas del buen diseo</p><p>1. Es centrado en el usuario, no en la mquina.</p><p>2. Emplea la computadora como un medio transparente.</p><p>3. Crea interacciones imaginativas con imaginacin computacional.</p><p>4. Provee facilidad de aprendizaje.</p><p>5. Implica rediseo continuo.</p><p>6. Es ms un oficio que arte.</p><p>7. Siempre involucra acuerdos.</p><p>Siegel, M.A., &amp; Stolterman, E. (2008). Metamorphosis: Transforming Non-designers into Designers. Proceedings from: Undisciplined! Design Research Society. Sheffield, UK: Design Research Society.</p></li><li><p>Imaginacin computacional</p><p>Explotar el medio para algn propsito que no podra hacerse en otro medio y que satisface las </p><p>necesidades de los usuarios de tal forma que ni se haban dado </p><p>cuenta de que las tenan, pero una vez que las ven, todos quieren </p><p>usar el diseo.Siegel, M.A., &amp; Stolterman, E. (2008). Metamorphosis: Transforming Non-designers into Designers. Proceedings from: Undisciplined! Design Research Society. Sheffield, UK: Design Research Society.</p></li><li><p>Imaginacin computacional</p><p>Siegel, M.A., &amp; Stolterman, E. (2008). Metamorphosis: Transforming Non-designers into Designers. Proceedings from: Undisciplined! Design Research Society. Sheffield, UK: Design Research Society.</p></li><li><p>10 factores deejecucin visual</p><p>Cruce de los factores de ejecucin y los siete temas del diseo</p><p>7 temas delbuen diseo</p></li><li><p>Implicaciones de los diez factores + imaginacin computacional</p><p>Estar conscientes del medio dispara nuestra imaginacin computacional.</p></li><li><p>Implicaciones de los diez factores + imaginacin computacional</p><p>Necesitamos reforzar nuestra imaginacin computacional espacial.</p><p>Estar conscientes del medio dispara nuestra imaginacin computacional.</p></li><li><p>Implicaciones de los diez factores + imaginacin computacional</p><p>Necesitamos reforzar nuestra imaginacin computacional temporal.</p><p>Estar conscientes del medio dispara nuestra imaginacin computacional.</p></li><li><p>Implicaciones de los diez factores + imaginacin computacional</p><p>Necesitamos reforzar nuestra imaginacin computacional </p><p>representacional.</p><p>Estar conscientes del medio dispara nuestra imaginacin computacional.</p></li><li><p>Documentos para consulta</p><p>Artculo de Metamorphosis: Transforming Non-designers into Designers (Siegel &amp; Stolterman, 2008):http://shura.shu.ac.uk/449/1/fulltext.pdf</p><p>Borrador del captulo:http://tzec.com/files/capitulo-diseno-visual-para-ux.pdf</p></li><li><p>Gracias!</p><p>http://tzec.com</p><p>Las imgenes aqu mostradas son propiedad de sus autores. Algunas son resultado de bsquedas web, por lo que fueron tomadas de Internet. Todas ellas son empleadas en esta presentacin con propsitos meramente acadmicos.</p><p>http://profmartysiegel.com</p></li></ul>