tipos de interfaces

196
Diseño de la Interacción Humano-Computadora. Tipos de interfaces. Mtro. Omar Sosa Tzec. Lic. en Diseño de Interacción. Universidad Iberoamericana Campus Puebla. http://www.tzek-design.com/blog

Upload: omar-sosa-tzec

Post on 20-Jul-2015

21.083 views

Category:

Design


1 download

TRANSCRIPT

Diseño de la InteracciónHumano-Computadora.Tipos de interfaces.

Mtro. Omar Sosa Tzec.

Lic. en Diseño de Interacción.Universidad Iberoamericana Campus Puebla.

http://www.tzek-design.com/blog

Principios en el diseñode interfaces.

* Naturalidad.* Consistencia.* Relevancia.* Soporte.* Flexibilidad.

Human Computer Interaction.Jenny Preece. Addison Wesley, 1994.

Naturalidad.

Consistencia.

Relevancia.

Soporte.

¿Dónde estoy?

¿Cómo llegué aquí?

¿Qué está pasando?

¿A dónde puedo ir después?

¿Qué puedo hacer?

Flexibilidad.

Paradigmas enel diseño de interacción.

Dentro del diseño de interacción, un paradigma se refiere a un enfoque particular que ha sido adoptado por la comunidad de investigadores y diseñadores para realizar su trabajo, en términos de supuestos, conceptos, valores y prácticas compartidas.

Interaction Design: beyond Human-Computer Interaction.2nd Edition.Helen Sharp, Yvonne Rogers and Jenny Preece.Wiley, 2007.

El cómputo ubicuo es uno de los desarrollos que más influencia ha tenido en el diseño de interfaces.

La idea de tener dispositivos tecnológicos o de cómputo en forma ubicua fue introducida por Mark Weiser.

Su visión era de que llegaríamos en algún momento a diseñar y desarrollar “Tecnología de Calma”.

El paradigma de diseño del Calm Technology parte del supuesto de que el usuario puede lidiar con la interfaz realizando movimientos entre la “periferia” y el “centro”. Las tecnologías de calma son las que soportan este(a) movimiento/liberación cognitiva.

Interaction Design: beyond Human-Computer Interaction.2nd Edition.Helen Sharp, Yvonne Rogers and Jenny Preece.Wiley, 2007.

Designing a user interface based on the calm technology paradigm and schematic visualization, and its evaluation from a communicability and rhetoric standpoint. Omar Sosa Tzec, 2009. http://www.slideshare.net/Tzek/gui-design-by-schematic-visualization

Periphery

Center

Designing a user interface based on the calm technology paradigm and schematic visualization, and its evaluation from a communicability and rhetoric standpoint. Omar Sosa Tzec, 2009. http://www.slideshare.net/Tzek/gui-design-by-schematic-visualization

Periphery

Center

Designing a user interface based on the calm technology paradigm and schematic visualization, and its evaluation from a communicability and rhetoric standpoint. Omar Sosa Tzec, 2009. http://www.slideshare.net/Tzek/gui-design-by-schematic-visualization

Debido al cómputo ubicuo se han formulado preguntas que incluyen:

¿Cómo permitir a las personas acceder e interactuar con información en sus trabajos, vida diaria y social, usando un conjunto de tecnologías?

¿Cómo diseñar experiencias de uso para la gente usando interfaces que son parte del ambiente pero donde no hay aparatos de control obvios?

¿Cómo y en qué forma se puede proveer a la gente de información relevante al contexto en tiempos y lugares apropiados mientras éstos se está desplazando?

¿Cómo asegurar que la información que está siendo pasada vía dispositivos de despliegue, aparatos y objetos, está segura y que es confiable?

Interaction Design: beyond Human-Computer Interaction.2nd Edition.Helen Sharp, Yvonne Rogers and Jenny Preece.Wiley, 2007.

Términos equivalentes son:

* Pervasive computing.

* Disappearing computer.

* Ambient intelligence.

Interaction Design: beyond Human-Computer Interaction.2nd Edition.Helen Sharp, Yvonne Rogers and Jenny Preece.Wiley, 2007.

Tipos de interfaces.Los 80’s.

80’s.

* Comandos.* GUI/WIMP.

Interaction Design: beyond Human-Computer Interaction.2nd Edition.Helen Sharp, Yvonne Rogers and Jenny Preece.Wiley, 2007.

Línea deComandos.

¿Cuáles son las ventajas?

¿Cuáles son las desventajas?

¿Qué tan pesada podría decirse que esla carga cognitiva?

¿Cómo influye el dispositivo de entrada?

¿Influye el dispositivo de salida? ¿Si es unapantalla? ¿Si no lo es?

WIMP/GUI.

GUI.

Metáforas. Metonimias.

¿Por qué son importantes las metáforas ylas metonimias en el diseño de interfacesgráficas de usuario?

¿Cuál sería el criterio para el diseñode un menú?

¿Cuál es la relación entre la arquitecturade información y el diseño de menúes?

¿Cómo etiquetar y cómo agrupar las funciones del sistema?

¿Cuál sería el criterio para el diseñode un icono?

¿Cómo está relacionada la iconicidadcon el diseño de íconos?

¿Cómo está relacionada la narrativa visualcon el diseño de íconos?

¿Cómo está relacionada la retórica visualcon el diseño de íconos?

manzana

Tipos de interfaces.Los 90’s.

90’s.

* Gráficas avanzadas (multimedia, realidad virtual, visualización de información).* Web.* Voz.* Pluma, gestos y toques.* Aparato.

Human Computer Interaction.Jenny Preece. Addison Wesley, 1994.

Multimedia.

¿Por qué preferir una interfaz multimedia?

¿No sobrecargamos cognitivamenteal usuario?

¿Qué influye en el diseño de información?

Realidad virtual yambientes virtuales.

¿Existe una aplicación “casera” ycomercial para la realidad virtual?

Visualización deInformación.

¿Cómo influye la iconicidad?

¿Las leyes de Gestalt?

¿Qué perjudica a una visualización?

Web.

¿Sólo la usabilidad cuenta?

La web como plataformapara el desarrollo deaplicaciones.

El cómputo en la nube(cloud computing).

La web…¿como herramienta?

¿como medio?

¿como repositorio?

¿Cuál es el futuro de la web?

Voz.

Búsqueda por voz en Google. http://www.google.com/mobile/google-mobile-app/

¿Cuáles son las ventajas de unainterfaz de voz con respecto a unade línea de comandos o una GUI?

¿La experiencia es más rica o se empobrece?

¿Cuál es el futuro de lasinterfaces de voz?

Pluma, toquesy gestos.

Palm, una PDA. http://upload.wikimedia.org/wikipedia/commons/9/9b/PalmTX.jpg

El “undo” en el iPhone. http://gizmodo.com/

¿Cómo relacionar el espaciode funciones con el espaciode “gestos” disponibles?

¿Cómo afectaría la redundanciade los mismos gestos entrediferentes dispositivos con estemismo tipo de interfaz?

Aparatos(electrodomésticos).

¿Es un análisis de tareas suficientepara determinar la funcionalidad deun electrodoméstico?

¿Cuál es el papel del design researchen la innovación de interfaces paraelectrodomésticos del futuro?

Tipos de interfaces.Los 00’s.

00’s.

* Móviles.* Multimodales.* Compartidas.* Tangibles.* Realidad aumentada.* Utilizable.* Robótica.

Human Computer Interaction.Jenny Preece. Addison Wesley, 1994.

Móviles.

http://na.blackberry.com

Los dispositivos móvilesy el futuro del cómputo ubicuo.

Multimodales.

Los dispositivos con interfacesmultimodales y el futuro del cómputo ubicuo.

http://gizmodo.com

Compartidas.

¿Dónde se pueden explotarlas interfaces de trabajo colaborativo?

¿Dónde no es conveniente?

¿Cuál es la mayor dificultadque se podría tener al trabajarcon este tipo de interfaces?

La convergencia entre los dispositivos coninterfaces para trabajo colaborativo y losdispositivos móviles multimodales…

¿Qué pasará?

Tangible.

David Merrill - Siftables http://blog.ted.com/DavidMerrill_interview.jpg

¿Por qué es importante desarrollarinvestigación en cómputo tangible?

¿Qué se necesita para que un usuariose apto para manejar este tipo de interfaces?

¿Qué papel juega el design research?

Realidad aumentada.

Utilizable.

¿Por qué seguir investigando enel cómputo utilizable como vestimenta?

Robótica.

¿Por qué seguir investigando en robótica?

¿Qué ventajas y áreas de oportunidadexisten que no se dan en los demástipos de interfaces?

Ejercicio 1.

La idea de este ejercicio es bocetar en 60 segundos alguna idea de diseño de interacción que se te venga a la mente para cada una de las palabras.

Ojo, si la palabra se repite, no debes continuar con la idea anterior sino plantear una nueva idea.

Para cada boceto, debes poner a un lado la palabra asociada para recordar sobre qué trata dicho boceto.

Venta de café.

Predial.

Refrigerador.

Caducidad.

Repostería.

Mascota.

Fiesta.

Ilustración.

Café.

Despensa.

Caducidad.

Pago de tarjeta de crédito.

Oficio.

Préstamo de libro.

Ubicación de material en biblioteca.

Ubicación de material en biblioteca.

Préstamo de libro.

Salud.

Fiesta.

Caducidad.

Fiesta.

Salud.

Show de televisión.

Toma de medicamento.

Plantas.

Venta de café.

Repostería.

Fiesta.

Ubicación de material en biblioteca.

Plantas.

Diálogo.

Estudio/Aprendizaje.

Diálogo.

Circulación/Tráfico/Peatones.

Fiesta.

Comida/Preparación.

Refrigerador.

Compras.

Oficio.

Comida/Preparación.

Diálogo.

Estudio/Aprendizaje.

Predial.

Comida/Preparación.

Ejercicio 1 (cont).

Expon ante tus compañeros las ideas más relevantes que tuviste durante el proceso de bocetaje, las dificultades con las que te encontraste y por qué tus ideas resultarían innovadoras para su contexto de uso.

Algunos videos para checar:

“A day at MIT with Near-Field Communication”.http://www.vimeo.com/2028724

“The Cloud”.http://www.vimeo.com/1199539

“Green Wheel - Scenario 7: Cultural trip”.http://www.vimeo.com/4171214

“Connected Urban Development”.http://www.vimeo.com/6145800

“New Media Medicine”.http://www.vimeo.com/4400829

Tarea 1.

Checa uno de los siguientes videos y realiza una presentación de 20 minutos que resuma los puntos importantes de la charla y tu conclusión personal sobre la relación del tema con el diseño de interacción.

“Bill Buxton on sketching experiences”.http://www.vimeo.com/5189134

“Luis Arnal: Field Stories from Latin America”.http://www.vimeo.com/9217883

“Jon Kolko on Predicting and Avoiding the Commoditization of Design Research”.http://www.vimeo.com/8347509

Tarea 2.

* Piensa en las personas que ahora tienen 40 años en promedio.

* Imagina el futuro entre los diferentes tipos de interfaces.

* Reflexiona en cómo la alfabetización tecnológica e informática de estos usuarios quizá no se equipare al desarrollo tecnológico en el futuro. Quizá en 30 años.

* Detecta un problema que encuentres con personas alrededor de 70 años: visitando un parque, platicando con un familiar, estando en un restaurant, en el cine, etc.

* Toma fotografías del lugar, lo que hay en ese lugar y las personas.

* Cuando detectes el problema que quieras atacar, diseña una solución futurista.

* Realiza un storyboard (limpio y legible) que narre cómo la gente que en un futuro tendrá cerca de 70 años puede resolver el problema que detectas en el presente con tu propuesta de diseño.

* Traer el storyboard en papel y hacer un post donde expliques el problema, pongas las fotos, el storyboard y expliques cuál es tu propuesta de diseño de interfaz.

Gracias.

* Presentación con fines didácticos sin lucro. Imágenes y textos son propiedad de sus autores.

* Esta presentación tiene contenido meramente ilustrativo y no debe abusarse de la información personal aquí mostrada.