hci curso comsocial-2014
TRANSCRIPT
![Page 1: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/1.jpg)
Usabilidad y Experiencia del Usuario: Mucho Más
que Diseño de Pantallas Agradables.
César Alberto Collazos O.
![Page 2: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/2.jpg)
Importancia
Lecciones:
La mayoría de las fallas en los sistemas hombre-máquina se deben a diseños pobres
• No toman en cuenta las capacidades y habilidades de los usuarios
• Generalmente son rotulados como “fallas del sistema” o “errores humanos”, no como “fallas de diseño”
![Page 3: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/3.jpg)
Origen
Factores Humanos:
Originado dentro de los Militares US durante la WW2
Los malos diseños de las armas podían matar las propias fuerzas antes que las enemigas nacimiento de la
usabilidad
Aplicado a la industria y al desarrollo de productos
![Page 4: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/4.jpg)
Origen
![Page 5: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/5.jpg)
Casos de Exito
![Page 6: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/6.jpg)
Definición
Disciplina relacionada con el diseño, implementación y evaluación de sistemas informáticos interactivos para uso de seres humanos y con el estudio de los fenómenos más importantes con los que están relacionados (ACM SIGCHI curricula, 1992)
Human-computer interaction (HCI, CHI), en español, IPO
No se limita a la situación clásica de una persona sentada delante de un terminal
Los computadores se encuentran en muchas formas
![Page 7: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/7.jpg)
Definiciones
Usuario
persona que interactua con un sistema informático
Interacción
Todos los intercambios que suceden entre la persona y el computador (Baecker and Buxton, 1987)
![Page 8: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/8.jpg)
Qué es HCI?
Human-Computer Interaction
Definición:
“ Proveer un entendimiento de la forma en que los
usuarios trabajan, las tareas que necesitan ejecutar y la forma en que los sistemas computacionales necesitan ser estructurados para facilitar el logro de dichas tareas” (Faulkner, p1-2)
![Page 9: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/9.jpg)
Qué es HCI?
“Kenneth Olsen, the engineer who founded and still runs Digital Equipment Corp., confessed at the annual meeting that he can‟t figure out how to heat a cup of coffee in the company‟s microwave oven.” [Wall Street Journal, 1986]
![Page 10: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/10.jpg)
Ambito de HCI
Métodos de especificar cómo debería funcionar la interfaz, cómo debería responder al usuario, y cómo debería aparecer.
Diseño de interfaces computacionales de tal forma que se ajusten a las propiedades y objetivos de las personas.
Diseño herramientas que ayuden a los diseñadores a construir mejores interfaces.
Analizar lo que hace la gente con los computadores y las interfaces; entender las tareas de los usuarios y los requerimientos.
![Page 11: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/11.jpg)
Uso y Contexto
![Page 12: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/12.jpg)
Aspectos a considerar
Uso de dispositivos
La adaptación a las tareas
Las metáforas
Cultura
Los controles y sus comportamientos
Navegación
Integración entre aplicaciones
El diseño
![Page 13: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/13.jpg)
Cambio de paradigma
Estamos asistiendo a un cambio de paradigma del Computador de sobremesa en que interactuamos sentados y centrados en la interacción a realizar en cualquier lugar, en cualquier momento y junto a otras actividades
![Page 14: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/14.jpg)
El crecimiento de las Soc. Información
Usuarios base ha aumentado
Más máquinas
Máquinas más pequeñas y veloces
Mayor disponibilidad de aplicaciones
Sociedad como un todo, más dependiente de las TI
![Page 15: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/15.jpg)
Nuevas formas de trabajo
Graphical user interfaces (GUI)
De sistemas batch a sistemas interactivos
Redes de Area Local (LAN‟s)
Redes de Area Global (WAN‟s)
WWW
Tele - Trabajo
![Page 16: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/16.jpg)
Tipos de Fallas
Técnicas
Hardware, Redes
Utilidad
Funcionalidad ineficiente
Usabilidad
Calidad del Sistema
![Page 17: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/17.jpg)
Debilidades Humanas
En HCI la persona es el elemento impredescible:
Desconcentración
Cambios en actitud
motivaciones y emociones
prejuicios y miedos
comete errores and juicios
Todos somos diferentes
![Page 18: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/18.jpg)
Fortalezas Humanas
Animales exitosos:
reciben y responden a estímulos externos rápidamente
resuelven problemas complejos
creativos
trabajan cooperativamente (la mayoria del tiempo)!
Capacidad para aprender
Buenas HCI abandona las debilidades humanas y se construye en las fortalezas
![Page 19: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/19.jpg)
Porqué las Interfaces son difíciles de utilizar?
¿Por qué las cosas son difíciles de utilizar?
El problema radica en el desarrollo del producto, en el énfasis de la tecnología en vez del usuario, la persona para la cual está hecho el dispositivo (Donald Norman, The invisible computer)
Una aplicación usable es la que permite al usuario centrarse en su tarea, no en la aplicación
Las interfaces se ponen en el medio. No quiero concentrar mis energías en la interfaz, me quiero concentrar en mi trabajo (Donald Norman)
![Page 20: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/20.jpg)
Interfaces y Modelo Mental
![Page 21: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/21.jpg)
Interfaces y Modelo Mental
![Page 22: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/22.jpg)
Interfaces y Modelo Mental
![Page 23: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/23.jpg)
Interfaces y Modelo Mental
![Page 24: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/24.jpg)
Interfaces y Modelo Mental
![Page 25: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/25.jpg)
Interfaces y Modelo Mental
![Page 26: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/26.jpg)
Interfaces y Modelo Mental
![Page 27: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/27.jpg)
Interfaces y Modelo Mental
![Page 28: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/28.jpg)
Interfaces y Modelo Mental
![Page 29: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/29.jpg)
Interfaces y Modelo Mental
![Page 30: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/30.jpg)
Interfaces y Modelo Mental
![Page 31: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/31.jpg)
Interfaces y Modelo Mental
![Page 32: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/32.jpg)
Interfaces y Modelo Mental
![Page 33: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/33.jpg)
Interfaces y Modelo Mental
![Page 34: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/34.jpg)
Interfaces y Modelo Mental
![Page 35: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/35.jpg)
Interfaces y Modelo Mental
![Page 36: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/36.jpg)
Interfaces y Modelo Mental
![Page 37: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/37.jpg)
Interfaces y Modelo Mental
![Page 38: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/38.jpg)
Interfaces y Modelo Mental
![Page 39: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/39.jpg)
Interfaces y Modelo Mental
![Page 40: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/40.jpg)
Interfaces y Modelo Mental
![Page 41: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/41.jpg)
Interfaces y Modelo Mental
![Page 42: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/42.jpg)
Interfaces y Modelo Mental
![Page 43: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/43.jpg)
Interfaces y Modelo Mental
![Page 44: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/44.jpg)
Interfaces y Modelo Mental
![Page 45: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/45.jpg)
Interfaces y Modelo Mental
![Page 46: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/46.jpg)
Interfaces y Modelo Mental
![Page 47: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/47.jpg)
Interfaces y Modelo Mental
![Page 48: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/48.jpg)
Interfaces y Modelo Mental
![Page 49: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/49.jpg)
Interfaces y Modelo Mental
![Page 50: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/50.jpg)
Interfaces y Modelo Mental
![Page 51: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/51.jpg)
Interfaces y Modelo Mental
![Page 52: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/52.jpg)
Interfaces y Modelo Mental
![Page 53: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/53.jpg)
Interfaces y modelo mental
![Page 54: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/54.jpg)
Interfaces y modelo mental
![Page 55: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/55.jpg)
Interfaces y modelo mental
![Page 56: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/56.jpg)
Interfaces y Modelo Mental
![Page 57: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/57.jpg)
Disciplinas relacionadas
HCI
Psicología
Diseño
Sociología Ergonomía
Programación
Ingeniería del software
Inteligencia artificial
C. Social
![Page 58: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/58.jpg)
HCI y Cognición
Entender y representar cómo los seres humanos interactúan con computadores, en términos de cómo el conocimiento es transmitido entre ambos
![Page 59: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/59.jpg)
Mira fijamente el ojo del pájaro rojo mientras cuentas lentamente hasta 20
Color
http://www.exploratorium.edu/exhibits/espanol/bird_in_a_cage/index.html
Experimento
Ahora mira inmediatamente un solo punto en la jaula vacía. La imagen débil y fantasmal de un pájaro azul verdoso aparecerá en la jaula
Haz lo mismo con el pájaro verde. En la jaula aparecerá la figura débil de un pájaro magenta
20 19 18 17 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1 0
![Page 60: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/60.jpg)
Los pájaros fantasmales se denominan imágenes secundarias, y son imágenes que permanecen después de mirar un objeto. Los conos sólo son sensibles a algunos colores. Cuando se mira fijamente el pájaro rojo, los conos sensibles al rojo comienzan a cansarse y pierden su sensibilidad. Cuando se cambia repentinamente la mirada al fondo blanco de la jaula, se ve el blanco menos rojo en los lugares donde las células sensibles al rojo se han fatigado. La luz blanca menos la luz roja es luz azul verdoso. Por eso la imagen secundaria es azul verdoso Lo mismo sucede cuando mira fijamente el pájaro verde. Esta vez son los conos sensibles al verde los que se fatigan. Blanco menos luz verde es luz magenta, de modo que se ve la imagen secundaria de color magenta
Color
http://www.exploratorium.edu/exhibits/espanol/bird_in_a_cage/index.html
Explicación
![Page 61: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/61.jpg)
Ilusiones ópticas
![Page 62: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/62.jpg)
Ilusiones ópticas
Ilusión de
Muller-Lyer
Ilusión de Ponzo
(engaño con
la distancia)
Tamaño
pistas ficticias
![Page 63: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/63.jpg)
Ilusiones ópticas
![Page 64: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/64.jpg)
Ilusiones ópticas
Perspectiva (Escher)
![Page 65: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/65.jpg)
Ilusiones ópticas
![Page 66: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/66.jpg)
Ilusiones ópticas
![Page 67: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/67.jpg)
Percepción y atención
El mismo caracter H, puede ser percibido de frmas diferentes dependiendo de las letras cercanas.
Sistema visual reconoce primero formas como letras, luego combina letras en palabras y luego en oraciones.
![Page 68: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/68.jpg)
Percepción y atención
What we see can be biased by what we are hearing, and vice versa What we feel with our tactile sense can be biased by what we are hearing, seeing, or smelling Contexto influye la forma de percibir las cosas (ejemplo del perro y del gato). (Cat Mirage)
![Page 69: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/69.jpg)
Percepción y atención
Buscar Tijeras
Habia un destornillador? Cuando la gente navega a traves de un Software o un sitio Web, buscando información o una función específica, no leen cuidadosamente. Miran pantallas rapidamente y superficialmente buscando items relacionados a sus objetivos. No es que ignoren los items que no esten relacionados con sus objetivos, es que simplemente no los notan.
![Page 70: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/70.jpg)
Percepción y atención
![Page 71: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/71.jpg)
Percepción y atención
Our goals filter our perceptions in other perceptual senses as well as in vision. A familiar example is the “cocktail party” effect. If you are conversing with someone at a crowded party, you can focus your attention to hear mainly what he or she is saying even though many other people are talking near you. The more interested you are in the conversation, the more strongly your brain filters out surrounding chatter. If you are bored by what your conversational partner is saying, you will probably hear much more of the conversations around you. Adultos mas que para niños
Controladores Aéreos
![Page 72: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/72.jpg)
Percepción y atención
Implicaciones de Diseño:
Evitar la Ambiguedad
Ser consistente
Entender los objetivos
![Page 73: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/73.jpg)
HCI y Cognición
![Page 74: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/74.jpg)
¿Cuántos hay?
![Page 75: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/75.jpg)
¿Cuántos hay?
![Page 76: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/76.jpg)
¿Cuántos números individuales puedes recordar?
72410358291064351290
![Page 77: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/77.jpg)
72 41 03 58 29 10 64 35 12 90
¿Cuántos números individuales puedes recordar?
![Page 78: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/78.jpg)
Percepción y atención
![Page 79: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/79.jpg)
Estructura Visual
![Page 80: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/80.jpg)
Estructura Visual
![Page 81: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/81.jpg)
Estructura Visual
![Page 82: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/82.jpg)
Frustraciones Ocultas
![Page 83: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/83.jpg)
Frustraciones Ocultas
![Page 84: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/84.jpg)
Frustraciones Ocultas
![Page 85: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/85.jpg)
Frustraciones Ocultas
![Page 86: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/86.jpg)
Frustraciones Ocultas
![Page 87: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/87.jpg)
Frustraciones Ocultas
Estos productos son pensados para ayudar a ahorrar tiempo, aumentar la productividad
¿Por qué entonces requerimos la asesoría de técnicos, utilizar manuales, recibir instrucciones especiales, asistir a cursos, para utilizar varios de estos productos?
¿Por qué estos productos aumentan el stress en lugar de disminuirlo?
![Page 88: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/88.jpg)
Paradoja de la Tecnología
Tecnología intenta ayudar a hacer la vida más fácil y disfrutable
Cada nueva tecnología provee mejores beneficios
Mayor número de funciones genera mayor complejidad, dificultad y frustración
Diseños apropiados minimizan la complejidad y dificultad
![Page 89: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/89.jpg)
Error
Nadie es perfecto !!
Errores de manejo
Errores con convencimiento
Errores por curiosidad
Errores de entendimiento
![Page 90: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/90.jpg)
Importancia
Algunas “historias” de la relación hombre - máquina
“El contenedor de la taza („cup holder‟)” (Supuestamente, historia real en Novell Netwire [Greenberg97])
Llamante: “Hola, estoy comunicado con el Servicio Técnico?”
Soporte Técnico: “Si. En que puedo ayudarlo?”
Llamante: “El contenedor de la taza de mi PC está roto, y aún está dentro de la garantía. Que debo hacer para obtener uno nuevo?”
Soporte Técnico: “Lo siento, pero no lo comprendo: Ud. dijo ´el contenedor de la taza de su PC´?”
Llamante: “Sí, está colocado en el frente de mi PC”
Soporte Técnico: “Estoy algo sorprendido. Ud. ha recibido este contenedor como parte de alguna promoción? Como lo obtuvo? Tiene alguna marca colocada?”
Llamante: “No conozco si era una promoción o no, vino instalado con mi PC. Tiene una marca „4X‟ en el frente”
Soporte Técnico: ......(silencio) .....
![Page 91: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/91.jpg)
Desastres HCI
En 1990 Vuelo 605 de Aerolíneas Indias se estrelló muriendo 98 personas.
El piloto no pudo controlar el avión, debido 100% a que el panel de control era muy confuso. El piloto recibió un mensaje informándole de un problema en la aeronave. La mala interfaz del panel de control confundió al piloto e hizo que ejecutara movimientos errados y en lugar de resolver el problema, el lo hizo peor.
El mal diseño de HCI llevó al desastre. Es claro que la interfaz debe ser diseñada lo más claro posible para el piloto. Aunque debe estar entrenado para operar la aeronave, debe encontrar la interfaz entendible, y tener todos los instrumentos para lograrlo, haciendo posible para el tener control total de las cosas.
![Page 92: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/92.jpg)
Ejemplo – Pobre HCI
Warning!
Este es un ejemplo de mala HCI.
Se puede imaginar que esta es la pantalla de precaución para una interface de seguridad crítica?
![Page 93: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/93.jpg)
Importancia
Un teclado para acelerar la operación más frecuentemente utilizada en MS Windows
![Page 94: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/94.jpg)
Porqué HCI?
HCI: Cómo diseñar software/hardware para que sea usado por las personas de forma correcta y eficiente.
Existen unos principios básicos de visualización que permiten diseñar interfaces con minimalidad de errores.
![Page 95: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/95.jpg)
Para quién diseñas?
![Page 96: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/96.jpg)
Para quién diseñas?
![Page 97: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/97.jpg)
Proverbios sobre diferencias individuales
Usted NO necesariamente representa un buen usuario promedio del equipo o sistema que se diseña
No espere que los demás piensen y actuen como Usted
La gente varia en su pensamiento y comportamiento
Usted casi NUNCA es el usuario.
![Page 98: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/98.jpg)
Proverbios sobre diferencias individuales
Realizar una interfaz que funcione para Usted puede que no funcione para el resto de los usuarios.
La mayoria de los usuarios pueden tener experiencia pero no en computadores.
La mayoria de los usuarios no son programadores.
Ellos pueden pensar las cosas de forma muy diferente que Usted.
![Page 99: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/99.jpg)
Porqué el diseño es difícil
La gente considera el costo y apariencia sobre el diseño
Malos diseños no siempre son visibles
La gente tiende a culparse cuando ocurren los errores
• “Nunca he sido bueno con las máquinas”
• “Sabía que debería haber leído el manual!”
• “Mira lo que hice, soy un estúpido!”
![Page 100: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/100.jpg)
Diseño centrado en el usuario
Explícito, modelo conceptual coherente
Hacer las cosas visibles
Obtener los correctos mappings.
Explotar el poder de las restricciones
Utilizar estandares y convenciones
Diseñar para el error, permitiendo la exploración sin penalidad.
![Page 101: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/101.jpg)
Una Musa Inspirativa
El hombre del renacimiento
Combinó ciencias & arte
Integró ingenieria & estética
Balance avances tecnológicos & los valores humanos
Mezcla visión & práctica
Leonardo da Vinci (1452-1519)
![Page 102: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/102.jpg)
Objetivos de la nueva computación
La vieja computación : Los que pueden hacer los computadores.
La nueva computación: Lo que la gente puede hacer.
Terminar con las frustraciones de los usuarios.
![Page 103: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/103.jpg)
Objetivos de la nueva computación
1) Usable: Confiable
& compresible
2) Universal: Diversos usuarios & variados equipos
3) Util: En armonia con las necesidades humanas
![Page 104: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/104.jpg)
Diseños Usables
![Page 105: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/105.jpg)
Usabilidad
El grado en el cual un producto puede ser usado por usuarios determinados para lograr los objetivos específicos con efectividad, eficiencia y satisfacción en un contexto especificado de uso [ISO9241]
Las interfaces se ponen en el medio. No quiero concentrar mis energías en la interfaz, me quiero concentrar en mi trabajo (Donald Norman)
![Page 106: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/106.jpg)
Usabilidad
Aceptabilidad del Sistema
Aceptabilidad Social
Aceptabilidad Práctica
Provechoso
Costo
Compatibilidad
Confiabilidad
Utilidad
Usabilidad
Aprendibilidad
Eficiencia
Memorabilidad
Errores
Satisfacción
![Page 107: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/107.jpg)
El Diseño como Respuesta
Se requiere:
Desarrollar conciencia sobre problemas de diseño
Interesarse en mejorar los objetos (diseño y manufactura)
Ser más sensibles a los problemas de la vida
Ser más sensible a las necesidades de las personas
Desarrollar conciencia y conocimiento sobre cómo el diseño afecta a los usuarios
![Page 108: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/108.jpg)
El Diseño como Respuesta
Se requiere:
Realizar diseños simples de utilizar, simples de entender e interpretar, estéticamente placenteros y poderosos
“Usability, understandability, and appearance”
Considerar las necesidades del usuario
Diseñar la calidad del producto
![Page 109: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/109.jpg)
Usabilidad
Utilización
Utilidad
Usabilidad
• Fácil de aprender
• Eficiencia en el uso
• Fácil de recordar
• Minimalidad de errores
• Placentero al utilizarlo
![Page 110: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/110.jpg)
El Diseño como Respuesta
Buenos diseños
Son fáciles de interpretar
Son fáciles de entender
Proveen pistas visibles para su operatividad
Consideran el error humano
![Page 111: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/111.jpg)
Diseño
Diseños deficientes
Difíciles de utilizar
Frustrantes al usar
No proveen pistas
Proveen pistas falsas
![Page 112: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/112.jpg)
Terminar la frustración del usuario
Objetivo - Hacer computadores menos frustrantes
![Page 113: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/113.jpg)
Frecuentes experiencias frustrantes
Redes & Web
![Page 114: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/114.jpg)
Cajas de diálogo confusas
Qué pasa cuándo se cancela una operación de cancelar?
Tengo alguna opción?
Umm, gracias por la recomendación,
Pero qué debo hacer?
Upsss.
![Page 115: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/115.jpg)
Applicaciones & caídas del sistema
Frecuentes experiencias frustrantes
![Page 116: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/116.jpg)
![Page 117: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/117.jpg)
Efectos de Transferencia
Personas transfieren sus expectativas / conocimiento de objetos similares a los objetos actuales
•Transferencia positiva: El aprendizaje previo también se aplica a los nuevos diseños
•Transferencia negativa: El aprendizaje previo presenta conflicto con el nuevo diseño
![Page 118: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/118.jpg)
![Page 119: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/119.jpg)
![Page 120: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/120.jpg)
Image source unknown
Diseños Utiles?
![Page 122: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/122.jpg)
Image source unknown
Diseños Utiles?
![Page 123: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/123.jpg)
Image source unknown
Diseños Utiles?
![Page 124: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/124.jpg)
Image source unknown
Diseños Utiles?
![Page 125: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/125.jpg)
Image source unknown
Diseños Utiles?
![Page 126: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/126.jpg)
Image source unknown
Diseños Utiles?
![Page 127: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/127.jpg)
Image source unknown
Diseños Utiles?
![Page 128: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/128.jpg)
Image source unknown
Diseños Utiles?
![Page 129: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/129.jpg)
Image source unknown
Diseños Utiles?
![Page 130: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/130.jpg)
Image source unknown
Diseños Utiles?
![Page 131: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/131.jpg)
Image source unknown
Diseños Utiles?
![Page 132: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/132.jpg)
Image source unknown
Diseños Utiles?
![Page 133: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/133.jpg)
Image source unknown
Diseños Utiles?
![Page 134: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/134.jpg)
Image source unknown
Diseños Utiles?
![Page 135: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/135.jpg)
Image source unknown
Diseños Utiles?
![Page 136: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/136.jpg)
Image source unknown
Diseños Utiles?
![Page 137: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/137.jpg)
Image source unknown
Diseños Utiles?
![Page 138: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/138.jpg)
Image source unknown
Diseños Utiles?
![Page 139: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/139.jpg)
Diseños Utiles?
![Page 140: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/140.jpg)
Diseños Utiles?
![Page 141: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/141.jpg)
Diseños Utiles?
![Page 142: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/142.jpg)
Diseños Utiles?
![Page 143: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/143.jpg)
Diseños Utiles?
![Page 144: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/144.jpg)
Image source unknown
Diseños Utiles?
![Page 145: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/145.jpg)
Líneas de interés
Multiculturalidad y HCI
Interfaces Emocionales
Interfaces Colaborativas y Sistemas de Awareness (Redes Sociales)
Usabilidad en diversos escenarios (TV Digital Interactiva, VideoJuegos, Entornos 3D)
Nuevos Entornos de Interacción (Interfaces físicas, EyeGaze Interaction)
Enseñanza de HCI a nivel Iberoamericano
![Page 146: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/146.jpg)
Conclusiones
HCI es una disciplina bien asentada
La interfaz es un concepto amplio y en la que hay que tener en cuenta todo el entorno
Acceso para todos
La usabilidad como objetivo fundamental
La interdisciplinariedad de HCI
Diseño centrado en el usuario
![Page 147: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/147.jpg)
Conclusiones
![Page 148: Hci curso comsocial-2014](https://reader034.vdocuments.mx/reader034/viewer/2022052311/5595acbb1a28ab7b678b4880/html5/thumbnails/148.jpg)
Reflexiones