Diseño de Interacción en Cátedra Salomone DG2 DG3 FADU/UBA - 9 jun 2011

B U E N O S A I R E S Diseño de interacción Santiago Bustelo Salomone DG2 / DG3 9 de junio 2011Presentación bajo licencia Creative Commons Atribución 2.5 Argentina http://creativecommons.org/licenses/by/2.5/ar

IxDA (Interaction Design Association) • Red global dedicada a la práctica profesional del Diseño de Interacción • Foro global, 25.000 miembros • En Buenos Aires: • Encuentros • Charlas • Congresos • Cursos I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

1993-2011: Cada vez más interacciónSitios estáticos Aplicaciones web Sitios socialesContenido estático con Contenido dinámico Contenido dinámicoel que no se puede privado modificado por público modificado por lainteractuar. la interacción con el interacción de muchaDiseño Gráfico usuario. gente. Diseño de Interacción Diseño de Interacción Social I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Diseñar • El diseño es la organización de materiales y procesos de la forma más productiva, en un sentido económico, con un equilibrado balance de todos los elementos necesarios para cumplir una función. László Moholy-Nagy, 1938 I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Diseño de InteracciónABSTRACTO • Diseño de Experiencias • Diseño de Interacción (IxD) • Define el modelo de operación de productos interactivos para lograr mejores experiencias para la mayor cantidad de usuarios • Diseño de Interfaces • Define los elementos concretos empleados en la interacciónCONCRETO I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Funciones del diseño Presentación Información Uso I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Forma y/vs. Función 16 17 18 19 15 2 0 13 14 2 3 4 21 2 1 5 6 7 2 23 12 8 1 2 9 10 1 4 25 2 1 6 2 30 3 7 28 29 I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Escala de las decisiones sobre la forma I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Sitios que te inspiran vs. sitios que usás I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Diseñando para el usuarioI N T E R A C T I O N D E S I G N A S S O C I A T I O NA S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

¿Cuándo está terminado nuestro trabajo? • Cuando nos gusta a nosotros • Cuando funciona como queríamos • Cuando le gusta al cliente • Cuando el usuario logra lo que esperábamos I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Entendiendo al usuario• Su fin es realizar una tarea.• Nuestra interfaz es sólo un medio que puede ser transparente, o un impedimento.• Nuestra interfaz no debe ocupar lugar en la mente del usuario. Cuando el usuario tiene que pensar en nuestra interfaz, es porque se está preguntando lo que espera que sea evidente, y es señal de que no hicimos bien nuestro trabajo.• No quiere perder tiempo. Se saltea instrucciones, presentaciones. La navegación se compone de señales de tránsito, no carteles publicitarios. I N T E R A C T I O N D E S I G N A S S O C I A T I O N ASOCIACION DE DISEÑADORES DE INTERACCION

Usabilidad • La usabilidad de una interfaz es una medida de la efectividad, eficiencia y satisfacción con la cual determinados usuarios pueden alcanzar determinados objetivos en un entorno particular con dicha interfaz. (ISO 9241, Requerimientos ergonómicos para trabajo de oficina con terminales visuales, Parte 11 - 1997) I N T E R A C T I O N D E S I G N A S S O C I A T I O N ASOCIACION DE DISEÑADORES DE INTERACCION

Efectividad: Incorporando al usuario I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Eficiencia: análisis y cuantificación !"#$%&()*&++,-".3 2 1 /!"#$%&#()*%+,-. 0 Cuantificación KLM-GOMS 4 Estado inicial: mano en el mouse 1 M inicio tarea 1,35 2 P Apuntar a primer campo 1,1 3 M inicio tarea 1,35 3 K click campo de texto 0,2 4 M inicio tarea 1,35 4 H pasar al teclado 0,4 5 M pensar dato 1,35 6 K 18 tipear dato 3,6 Total 10,7 I N T E R A C T I O N D E S I G N A S S O C I A T I O N ASOCIACION DE DISEÑADORES DE INTERACCION

Satisfacción: experiencia óptima !"#$%"&()* !+#,*(& -,$&./0 32#""(4(,*%0 1&2(+(-&- Simplificación del modelo de Mihaly Csikszentmihalyi I N T E R A C T I O N D E S I G N A S S O C I A T I O N ASOCIACION DE DISEÑADORES DE INTERACCION

Diálogo con IT: viabilidad !"#"$%&" #$%&" ()*+,$%&" +*(,)*$& Requerimientos de la interfaz I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Affordances ynivel de representación I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Affordance• A situation where an object’s sensory characteristics intuitively imply its functionality and use.• A button, by being slightly raised above an otherwise flat surface, suggests the idea of pushing it. A lever, by being an appropriate size for grasping, suggests pulling it. A blinking red light and buzzer suggests a problem and demands attention. A chair, by its size, its curvature, its balance, and its position, suggests sitting on it.• An affordance is a desirable property of a user interface – software which naturally leads people to take the correct steps to accomplish their goals.• The common psychological term for this is stimulus-response compatibility. Usability First: Affordance I N T E R A C T I O N D E S I G N A S S O C I A T I O N ASOCIACION DE DISEÑADORES DE INTERACCION

Teapot Dome Service Station Wikipedia articleI N T E R A C T I O N D E S I G N A S S O C I A T I O NASOCIACION DE DISEÑADORES DE INTERACCION

Mensajes contradictorios The ADA Hall of Shame I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Camino del menor esfuerzo Bad Designs.com [1], [2] I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Mapeo de controlesUX Errors (Flickr Group): Stove Burners…Wikipedia: Natural mapping I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

¿Cómo elijo Allegro? Bad Designs: How do I set allegro? I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Botones misteriosos UX Errors (Flickr Group) I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Esta pantalla no es táctil UX Errors (Flickr Group) I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

¿Para qué sirve esto? Mx44.2 Download Page I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Realismo vs. Simbolismo UX Magazine: Realism in UI design I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Representación específica / universal / críptica UX Magazine: Realism in UI design I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Información: el punto justo UX Magazine: Realism in UI design Indexed: Needles and haystacks and such. I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Artefacto físico free-scores.com: MACKIE DFX12 12 INPUT ANALOG MIXER I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Metáfora como condicionante Bristol: Realtime Mixer I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Balance metáfora / GUI I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Proceso de diseñoI N T E R A C T I O N D E S I G N A S S O C I A T I O NA S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Proceso lineal1. Definición de requerimientos.2. Diseño y desarrollo a nivel de producción.3. Entrega. I N T E R A C T I O N D E S I G N A S S O C I A T I O N ASOCIACION DE DISEÑADORES DE INTERACCION

Proceso lineal interminable1. Definición de requerimientos.2. Diseño y desarrollo a nivel de producción.3. Entrega.4. No es lo que el cliente quería, retrocede tres casilleros.5. Se repite hasta el hartazgo de una o ambas partes. I N T E R A C T I O N D E S I G N A S S O C I A T I O N ASOCIACION DE DISEÑADORES DE INTERACCION

Entender el tipo de problema• Problemas bien definidos • Problemas dinámicos • Algoritmos • Heurísticas • Resolución lineal • Resolución asintótica • Metodología estructurada • Metodología ágil • Foco en análisis y • Foco en entregables documentación I N T E R A C T I O N D E S I G N A S S O C I A T I O N ASOCIACION DE DISEÑADORES DE INTERACCION

Proceso convergente1. Objetivos y análisis inicial.2. Diseño y desarrollo en iteraciones avanzando progresivamente en: • Funcionalidad • Estructura y elementos • Lenguaje visual3. Entrega y puesta en producción. I N T E R A C T I O N D E S I G N A S S O C I A T I O N ASOCIACION DE DISEÑADORES DE INTERACCION

SIU Guaraní: versión actual I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Plan de proyecto • Tareas iniciales • Establecimiento de objetivos del proyecto. • Relevamiento del modelo operativo y proceso actual. • Relevamiento con usuarios • Definición de perfiles de usuarios, tareas críticas y escenarios, entorno y guión para las pruebas. Reclutamiento de usuarios. • Pruebas con usuarios sobre interfaz actual. • Arquitectura de información • Elaboración de mapa de sitio. • Diseño de prototipo preliminar • Wireframes. • Validación de prototipo con referentes del cliente. • Pruebas con usuarios. • Diseño de prototipo final • Implementación de ajustes. • Lenguaje visual. • Diseño final. I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Guión de tareas • Login • El usuario se acuerda de su clave? Cómo resuelve problemas en el ingreso? • Inscribirse a materia “Comunicación 1”, cátedra a elección • Identificación de materia correcta (101 - Teorías y Prácticas de la Comunicación I - Comunicaciones de Masas) • Proceso de decisión: Cátedra, días, horarios • Inscribirse a Materia y Comisión (amigos) • Proceso de navegación e inscripción • Resolución de problema: no hay cupo • Inscripción a correlativas • Información de contexto • Qué materias figuran como aprobadas, cursadas o libres • Nomenclatura, proceso • Dar de baja una materia • Cuál es la pantalla inicial? Orden Sujeto - Verbo • Inscripción a examen final • Proceso similar al de insc. a materia? Posible confusión? I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

Pruebas de usabilidad: versión actualI N T E R A C T I O N D E S I G N A S S O C I A T I O NASOCIACION DE DISEÑADORES DE INTERACCION

Wireframes inicialesI N T E R A C T I O N D E S I G N A S S O C I A T I O NASOCIACION DE DISEÑADORES DE INTERACCION

Inscripción a materiasI N T E R A C T I O N D E S I G N A S S O C I A T I O NASOCIACION DE DISEÑADORES DE INTERACCION

Pruebas de usabilidad: prototipo en papel I N T E R A C T I O N D E S I G N A S S O C I A T I O N ASOCIACION DE DISEÑADORES DE INTERACCION

Diseño final: Inscripción a MateriasI N T E R A C T I O N D E S I G N A S S O C I A T I O NASOCIACION DE DISEÑADORES DE INTERACCION

Diseño final: Historia académicaI N T E R A C T I O N D E S I G N A S S O C I A T I O NASOCIACION DE DISEÑADORES DE INTERACCION

Diseño de Interacción en ArgentinaOportunidades • Interés creciente en usabilidad • Diseño como requerimientoDesafíos • Baja integración del diseñador con Desarrollo y Negocios • Falta de visión y lenguaje común deseable • Falta de percepción de valor usable • Poca madurez del mercado • Alto riesgo de innovación confiable funcional I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

B U E N O S A I R E Sixda.com.ar

Diseño de Interacción en Cátedra Salomone DG2 DG3 FADU/UBA - 9 jun 2011

by Santiago Bustelo

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 145

Statistics

Diseño de Interacción en Cátedra Salomone DG2 DG3 FADU/UBA - 9 jun 2011 Presentation Transcript