Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.
-
Upload
lucio-herrada -
Category
Documents
-
view
219 -
download
0
Transcript of Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.
![Page 1: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/1.jpg)
Curso de Interacción Hombre ComputadorHelmuth Trefftz
EAFIT
![Page 2: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/2.jpg)
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
![Page 3: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/3.jpg)
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.…
![Page 4: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/4.jpg)
Que NO es el curso
Curso de programación de HTML Curso de programación Curso de diseño gráfico
![Page 5: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/5.jpg)
Presentación de los alumnos
![Page 6: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/6.jpg)
Presentación del instructor
![Page 7: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/7.jpg)
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?
![Page 8: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/8.jpg)
Ejemplo:
Video de Enseñanza de la matemática utilizando RA
![Page 9: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/9.jpg)
Qué es Diseño de la Interacción?
![Page 10: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/10.jpg)
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
![Page 11: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/11.jpg)
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).
![Page 12: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/12.jpg)
Metas del Diseño de la Interacción
Desarrollar productos usables:Fáciles de usarEfectivos en su usoQue brinden una experiencia agradable
Involucrar los usuarios en el proceso de diseño
![Page 13: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/13.jpg)
Ejemplos de diseño bueno y malo
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
![Page 14: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/14.jpg)
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 productosPara que se encuentren las actividades y
necesidades de los usuarios.
![Page 15: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/15.jpg)
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.
![Page 16: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/16.jpg)
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.
![Page 17: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/17.jpg)
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.
![Page 18: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/18.jpg)
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.
![Page 19: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/19.jpg)
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.
![Page 20: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/20.jpg)
Metas de usabilidad
Facilidad de uso Eficiencia al usarlo Seguridad Útil Fácil de aprender Fácil recordar cómo funciona
![Page 21: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/21.jpg)
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.
![Page 22: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/22.jpg)
Metas en cuanto a la experiencia del usuario Satisfactorio Divertido Entretenido Motivador Estéticamente agradable … y más.
![Page 23: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/23.jpg)
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?
![Page 24: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/24.jpg)
Principios de Diseño
Abstracciones para pensar el proceso del DI.
Derivados de una mezcla de teoría y práctica
![Page 25: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/25.jpg)
Principios
Visibilidad Retroalimentación Restricciones Lógica (vs. Ambigüedad) Mapeo Consistencia “Affordances”
![Page 26: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/26.jpg)
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)
![Page 27: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/27.jpg)
Visibilidad
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.
![Page 28: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/28.jpg)
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
![Page 29: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/29.jpg)
Restricciones
Restringir las acciones que puede tomar el usuario.
Ayuda a impedir seleccionar operaciones inválidas
Tres tipos:FísicasCulturalesLógicas
![Page 30: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/30.jpg)
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?
![Page 31: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/31.jpg)
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.
![Page 32: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/32.jpg)
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)
![Page 33: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/33.jpg)
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.
![Page 34: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/34.jpg)
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?
![Page 35: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/35.jpg)
Mapeo
Relación entre los controles y su significado en el mundo.
Por qué el siguiente mapeo de controles no es bueno?
![Page 36: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/36.jpg)
Mapeo
Por qué este mapeo es mejor?
Hay un mejor mapeo entre la disposición de los controles y su significado
![Page 37: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/37.jpg)
Mapeo (Actividad)
Cuál control maneja cuál parrilla?
![Page 38: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/38.jpg)
Mapeo
Por qué éste diseño es mejor?
![Page 39: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/39.jpg)
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
![Page 40: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/40.jpg)
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.
![Page 41: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/41.jpg)
Consistencia – Ejemplo Ejemplo de inconsistencia: Teclados numéricos:
(A) Teléfonos, controles remotos (B) Calculadoras, computadores
1 2 3
4 5 6
7 8 9
0
7 8 9
1 2 3
4 5 6
0
![Page 42: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/42.jpg)
“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.
![Page 43: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/43.jpg)
“Affordances”
A qué invitan estos objetos?
Qué tan obvios son?
![Page 44: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/44.jpg)
Affordances virtuales
A qué invitan estos íconos?
Cuáles son más obvios?
![Page 45: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/45.jpg)
Principos de Usabilidad
Utilizados principalmente para evaluar sistemas
Similares a los principios de diseño, pero más tipo “lista de chequeo”
![Page 46: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/46.jpg)
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)
![Page 47: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/47.jpg)
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.
![Page 48: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/48.jpg)
Discusión clave:
Cómo influye la interfaz en una aplicación de software?
![Page 49: Curso de Interacción Hombre Computador Helmuth Trefftz EAFIT.](https://reader036.fdocument.pub/reader036/viewer/2022062809/5665b4641a28abb57c912795/html5/thumbnails/49.jpg)
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.