Curso de Interacción Hombre Computador

1. Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT

2. Agenda: • Presentación del curso (programa) • Presentación de los alumnos • Presentación del instructor • Evaluación de entrada • Ejemplo: Enseñanza de la matemática utilizando Realidad Aumentada • Capítulo 1: Qué es Diseño de la Interacción

3. Presentación del curso • Programa • Ejemplo de Intuit con Quicken. • Bloopers: • “Keyboard not present. Press F1.” • Secuencia en Word: uno salva, imprime y al cerrar, Word pregunta si sale sin salvar. • …

4. Que NO es el curso • Curso de programación de HTML • Curso de programación • Curso de diseño gráfico

5. Presentación de los alumnos

6. Presentación del instructor

7. Evaluación de entrada (15 minutos) • NO tiene influencia en la nota. • Piense en una interfaz que lo haya irritado, molestado o lo haya hecho perder mucho tiempo. Qué está mal? Cómo la cambiaría? • Piense en una interfaz que le haya causado una experiencia agradable. Qué está bien? Qué puede aprender de esta interfaz?

8. Ejemplo: • Video de Enseñanza de la matemática utilizando RA

9. Qué es Diseño de la Interacción?

10. Agena • Qué es DI • Cuál es la interacción a diseñar? • Dónde está la interacción (evolución) • Metas de Usabilidad • Principios de Diseño

11. Que es Diseño de la Interacción? • Diseñar productos interactivos para apoyar a los humanos en la vida diaria y en su trabajo (Preece 2002). • El diseño de espacios para la comunicación e interacción humana (Winograd 1997).

12. Metas del Diseño de la Interacción • Desarrollar productos usables: • Fáciles de usar • Efectivos en su uso • Que brinden una experiencia agradable • Involucrar los usuarios en el proceso de diseño

13. Los botones y los “labels” en la fila de abajo son demasiado parecidos. Por qué no se confunde el usuario con los botones de la fila de arriba? Tomado de www.baddesign.com Ejemplos de diseño bueno y malo

14. Cuál es la interacción que se diseña? • Hay que tener en cuenta: • Quiénes son los usuarios. • Qué actividades se llevan a cabo. • Dónde tienen lugar las interacciones. • Se debe optimizar la interacción de los usuarios con los productos • Para que se encuentren las actividades y necesidades de los usuarios.

15. Entender las necesidades de las personas • En qué son buenos y en qué son malos • Cómo se les puede ayudar a realizar su trabajo • Escuchar qué quieren e involucrarlos • Utilizar métodos que han sido probados para involucrar a los usuarios.

16. Actividades • Cómo difieren una llamada cuando se hace por: • Celular • Teléfono • Hay que considerar el tipo de usuario, de actividad y el contexto.

17. Dónde está la interfaz “HCI” 50’s: paneles con interruptores 60’s: en la programación (Fortran, Cobol) 70’s: terminales (lenguajes de comandos) 80’s: diálogos (GUI, multimedia) 90’s: groupware, sistemas en red 00’s: “pervasive interface” – tags de RF, dispositivos móviles, pantallas interactivas, tecnología embebida.

18. Pasos para el Diseño de la Interacción (DI) • Definir los requerimientos del usuario. • Desarrollar diseños alternativos. • Construir prototipos interactivos que se puedan evaluar. • Evaluar el objeto durante su construcción.

19. Características esenciales del DI • Involucrar a los usuarios durante el proceso de construcción. • Identificar y definir la metas de usabilidad • Iterar durante las actividades de desarrollo.

20. Metas de usabilidad • Facilidad de uso • Eficiencia al usarlo • Seguridad • Útil • Fácil de aprender • Fácil recordar cómo funciona

21. Respecto a la Usabilidad • Qué tan fácil debería ser (y qué tan fácil es realmente): • Aprender a usar un VCR para reproducir una cinta de video. • Programar un VCR para grabar dos programas de TV. • Usar una herramienta para crear una página web.

22. Metas en cuanto a la experiencia del usuario • Satisfactorio • Divertido • Entretenido • Motivador • Estéticamente agradable • … y más.

23. Cómo conciliar ambas? (usabilidad vs. Experiencia) • Cómo difieren? • Cómo se concilian las diferencias (ejemplo: divertido vs. Seguro)? • Cuáles son más fáciles de medir?

24. Principios de Diseño • Abstracciones para pensar el proceso del DI. • Derivados de una mezcla de teoría y práctica

25. Principios • Visibilidad • Retroalimentación • Restricciones • Lógica (vs. Ambigüedad) • Mapeo • Consistencia • “Affordances”

26. Visibilidad • Esta es una foto de los controles de un ascensor: • Cómo funciona? • No es visible cómo funciona • (tomado de www.baddesign.com)

27. Hay que deslizar la tarjeta de llave por la ranura. Cómo explicarle al usuario? Un mensaje? En qué idioma? Un “label” que haga la ranura más obvia. Visibilidad

28. Retroalimentación • Darle retroalimentación al usuario respecto a lo que hay que hacer. • Pude incluir: • Sonido (al presionar un botón de un celular) • Animaciones (al hacer “click” sobre un botón de una GUI) • Combinaciones

29. Restricciones • Restringir las acciones que puede tomar el usuario. • Ayuda a impedir seleccionar operaciones inválidas • Tres tipos: • Físicas • Culturales • Lógicas

30. Restricciones Físicas • Restringir los movimientos físicos. • Ejemplo: al insertar una llave en una cerradura. • Cómo se puede insertar un DVD o un CD en una computadora? • Cómo difiere esto de la manera de insertar un diskette?

31. Restricciones lógicas • Explotar el “sentido común” de los usuarios frente al mundo. • Ejemplo: • Semejanza entre la disposición de un dispositivo y la forma como funciona.

32. Este diseño es lógico o ambiguo? • Dónde se conecta el “mouse”? • Dónde el teclado? • El color ayuda? • (Tomado de www. baddesign.com)

33. Cómo hacerlo más lógicamente • (A) Mapeo entre el ícono y el conector. • (B) Color para asociar entre el conector y el ícono.

34. Restricciones Lógicas • Aprender convenciones aprendidas, tales cómo el triángulo rojo para advertencias. • Pueden ser universales o dependientes de la cultura. Hay algunas universales?

35. Mapeo • Relación entre los controles y su significado en el mundo. • Por qué el siguiente mapeo de controles no es bueno?

36. Mapeo • Por qué este mapeo es mejor? • Hay un mejor mapeo entre la disposición de los controles y su significado

37. Mapeo (Actividad) • Cuál control maneja cuál parrilla?

38. Mapeo • Por qué éste diseño es mejor?

39. Consistencia • Interfaces con elementos similares para realizar tareas similares. • Por ejemplo: • Siempre usar la tecla <ctrl> para comenzar un comando (ctrl-s, ctrl-o, …) • Interfaces consistentes son más fáciles de aprender y de usar

40. Consistencia • Puede ser interna (dentro de la aplicación) • Puede ser externa (entre aplicaciones o dispositivos). Ejemplo: Los menús superiores en las aplicaciones de windows.

41. Consistencia – Ejemplo • Ejemplo de inconsistencia: • Teclados numéricos: • (A) Teléfonos, controles remotos • (B) Calculadoras, computadores 8 9 7 1 2 3 4 5 6 4 5 6 1 2 3 8 9 7 0 0

42. “Affordances” • Característica de un objeto que invita al usuario a hacer algo con el objeto. • Ejemplo: • El botón de un “mouse” invita al usuarioa presionarlo. • Ejemplo: un “scrollbar” invita a moverlo hacia arriba o abajo.

43. “Affordances” • A qué invitan estos objetos? • Qué tan obvios son?

44. Affordances virtuales • A qué invitan estos íconos? • Cuáles son más obvios?

45. Principos de Usabilidad • Utilizados principalmente para evaluar sistemas • Similares a los principios de diseño, pero más tipo “lista de chequeo”

46. Principios de Usabilidad • Mostrar el estado del sistema • Relación entre el sistema y el mundo real • El usuario tiene el control • Consistencia y estándares • Ayudarle al usuario a detectar y recuperarse del error • Prevenir el error • Flexibilidad y eficiencia en el uso • Diseño estético y minimalista • Ayuda y Documentación. • (Jakob Nielsen)

47. Puntos clave • DI es diseñar productos interactivos que le ayuden a la gente en su vida diaria • Es multidisciplinario • Se ha vuelto esencial (cuál es su cliente de correo?) • En DI se toman en cuenta factores múltiples, tales como: contexto de uso, tipo de usuario o tipo de tarea (ejemplo del celular). • Hay que buscar la usabilidad y las metas de experiencia del usuario • Los principios (de diseño y de usabilidad) son útiles para analizar productos.

48. Discusión clave: • Cómo influye la interfaz en una aplicación de software?

49. Bibliografía • Diapositivas basadas en Preece, Rogers y Sharp: Interaction Design. • Preece, Rogers, Sharp y Benyon: Capítulo 1. What is HCI? • Cooper y Reimann: Goal-directed Design.