la interaccion persona ordenador
DESCRIPTION
La Interacción Persona Ordenador Primer tema de la asignatura Diseño de Interfaces de Usuario Grado de Ingeniería Informática. Universidad de Granada Actualización al curso 2013/14TRANSCRIPT
![Page 1: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/1.jpg)
Tema 1:
Interacción Persona-Ordenador
Diseño de Interfaces de Usuar io
e d i c i ó n 2 014
Miguel Gea ([email protected] s) Dpt. Lenguajes y S is temas Informáticoss Grado en Ingenier ía Informática Univers idad de Granada
!
!
![Page 2: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/2.jpg)
1. Interacción Persona - Ordenador
Introducción El Interfaz de usuario Principios Generales Herramientas Evolución de los IU
Diseño de Interfaces de Usuar io
![Page 3: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/3.jpg)
Interacción Persona - Ordenador!
El personaje
The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it
!!!
The computer for the 21st Century. Art. Scientific American, Vol. 265, No. 3 (September 199lMark Weiser
(1952-1999)
![Page 4: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/4.jpg)
Tema 1. Introducción HCI
La Relación persona-máquina
[SCH08]
Visión en cine/películas:
El cine usa tecnología existente
La tecnología inspira películas
La películas inspiran nueva tecnología
El cine y desarrolladores desarrollan nuevas visiones tecnológicas
Metrópolis (1927, Fritz Lang)
2001 La odisea del espacio (1968) Blade Runner (1982) el cortador de cesped (1992) The matrix (1999) AI, ArtiLicial Intelligence (2001) Minority Report (2002) I robot (2004)
interfaces antropomórLicos diseño emocional interfaces gestuales interfaces neuronales invasivos realidad virtual
![Page 5: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/5.jpg)
Ambitos de trabajo: Tema 1. Introducción HCI
La Relación persona-máquina
![Page 6: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/6.jpg)
Tema 1. Introducción HCI
Evolución:
La Relación persona-máquina
http://www.historiacultural.com/2010/11/primera-revolucion-industrial.html
2ª guerra mundial
![Page 7: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/7.jpg)
Definición:
Interacción Persona-OrdenadorTema 1. Introducción HCI
[ACMCHI92]
La Interacción Persona-Ordenador es “la disciplina que se dedica al estudio del diseño, evaluación e implantación de sistemas interactivos dedicados al uso humano, y de todos aquellos fenómenos que pueden afectar a la comunicación !
InformáticaPsicología
Ergonomía
DiseñoSociología
EtnografíaSemiótica
Ingeniería
HCI
![Page 8: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/8.jpg)
Tema 1. Introducción HCI
Interacción Persona-Ordenador
ACM SIGCHI - http://old.sigchi.org/cdg/figure_1.pdf
![Page 9: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/9.jpg)
Definición:!La Interfaz de usuario de la parte del sistema informático a través del cual los usuarios pueden comunicarse con el ordenador, y comprende todos los puntos de contacto entre el usuario y el equipo (hardware y software). Es por tanto el instrumento que nos permite utilizar efectivamente el sistema o artefacto [Thim90].
Tema 1. Introducción HCI
Interfaz de Usuario
Subsistemade entrada Aplicación
Dispositivos físicos
E
R
![Page 10: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/10.jpg)
Comentarios:
!Lenguaje de entrada para el usuario, un lenguaje de salida para el ordenador y un protocolo para la interacción. !Donde los bits y las personas se encuentran [NEGR95]
Tema 1. Introducción HCI
Uhmm
00001001011101add 1,nfor (i=0; i< 10; i++)
Interfaz de usuario
![Page 11: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/11.jpg)
Tema 1. Introducción HCI
Interfaz de los objetos
Objetos: Qué hacen? Cómo se utilizan?
Función de la Interfaz de usuario Proporcionar el acceso al objeto Percepción del objeto !
¡¡¡¡ CONTROL INTUITIVO !!!
![Page 12: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/12.jpg)
Tema 1. Introducción HCI
Interfaz de los objetosConsideraciones de la Interfaz de Usuario!- “Bien diseñado”!- “Facilidad de uso”!
Cualidades en el diseño de la interfaz de usuario:!! ! ! ! ! - Visibilidad!! ! ! ! - Proyección (Affordance)!! ! ! ! - Realimentación (Feedback)!! !! ! ! ! !
[NORM13]
Cabeza
Empuñadura
![Page 13: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/13.jpg)
Tema 1. Introducción HCI
Interfaz de los objetos
http://www.baddesigns.com/
![Page 14: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/14.jpg)
Tema 1. Introducción HCI
Interfaz de usuario:
Tipologías de Interfaces:
- Ordenador - Ordenador !!!!- Ordenador - Usuario
![Page 15: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/15.jpg)
Tema 1. Introducción HCI
Interfaz de usuario:
Tipos:
DISPOSITIVOS
SISTEMA OPERATIVO
APLICACION
![Page 16: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/16.jpg)
Tema 1. Introducción HCI
Interfaz de usuario:
Efectividad. Porcentaje de las posibilidades ofrecidas por la máquina (o programa) que el usuario es capaz de usar. !Eficiencia. Cantidad de esfuerzo que se requiere para conseguir un propósito. !Satisfacción. Grado de comodidad que un usuario experimenta mientras utiliza un producto.
Mejora de la usabilidad [ISO 9241]:
objetivo: éxito comercial
![Page 17: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/17.jpg)
Tema 1. Introducción HCI
Principios Generales:
1. Conocer al usuario 2. Diseño intuitivo 3. Realimentación 4. Consistencia 5. Flexible 6. Ayuda 7. Robusto 8. Atractivo 9. Estandarización y portabilidad
Fuentes (varias)![HIG95] Macintosh Human Interface Guidelines, Apple 1995![DIX03] [SCHNE06]!
![Page 18: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/18.jpg)
Comunicación:Claridad en funciones disponibles Lenguaje claro y conciso
Tema 1. Introducción HCI
Principios Generales: 1. Conocer al usuario
Perfil:Intenciones (objetivos) Habilidades, experiencia
Control:Iniciativa del usuario Anular/Cancelar tareas
![Page 19: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/19.jpg)
Tema 1. Introducción HCI
Principios Generales: 2. Consistencia
Funcionalidad Apariencia y Comportamiento (look&feel) Datos
La consistencia indica que todos los aspectos de la interfaz de usuario son uniformes en su funcionamiento y filosofía (color, tipo de mensajes, petición de datos,
![Page 20: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/20.jpg)
Tema 1. Introducción HCI
Principios Generales: 2. Consistencia (cont.)
1 2 3
4 5 6
7 8 9
0
Teléfonos y control remoto
7 8 9
1 2 3
4 5 6
0
Calculadora, teclado,ordenador
![Page 21: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/21.jpg)
Tema 1. Introducción HCI
Principios Generales: 3. Flexible
• Diversidad de Usuarios
• Diversidad de Dispositivos
Interfaz flexible para trabajar con un rango de usuarios con distinto nivel de inicialización
![Page 22: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/22.jpg)
Tema 1. Introducción HCI
Principios Generales: 4. Realimentación
• Informar del estado
•Informar al Usuario de lo que hace
![Page 23: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/23.jpg)
Tema 1. Introducción HCI
Principios Generales: 5. Robustez
Evitar situaciones en las que se produzcan errores irreversibles, o un malfuncionamiento general del sistema
![Page 24: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/24.jpg)
Tema 1. Introducción HCI
Principios Generales: 6. Ayuda
Tipo:
- General (acerca de...)
- Contexto
- Referencia / guía rápida
![Page 25: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/25.jpg)
Tema 1. Introducción HCI
Principios Generales: 7. Minimizar errores
Avisar / Evitar / Corregir (undo)
![Page 26: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/26.jpg)
Tema 1. Introducción HCI
Principios Generales: 8. Diseño y apariencia
![Page 27: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/27.jpg)
Tema 1. Introducción HCI
Principios Generales: 9. Estandarización y Portabilidad
Interfaz común en diferentes aplicaciones
IBM CUA, MacOS X-AQUA
Favorece consistencia
![Page 28: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/28.jpg)
Tema 1. Introducción HCI
Principios Generales: 9. Estandarización y Portabilidad
IU sobre diferentes plataformas (S.O.)
![Page 29: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/29.jpg)
Tema 1. Introducción HCI
Herramientas:
Las Herramientas de creación de IU permiten la programación de sistemas interactivos, minimizando el esfuerzo de desarrollo [DIX03]
40-70% del esfuerzo de desarrollo
Hardware
Sistema Operativo
Wm y paquetes gráficos
Toolkits
Generador IU
UIMS
![Page 30: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/30.jpg)
Tema 1. Introducción HCI
Herramientas: Gestores de Ventanas
Gestores de ventanas • Interfaces Gráficos • Metáfora de escritorio • Iconos y barra de tareas
Hardware
Sistema Operativo
Wm y paquetes gráficos
Toolkits
Generador IU
UIMS
![Page 31: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/31.jpg)
Tema 1. Introducción HCI
Herramientas: Compontentes (Controles)
Hardware
Sistema Operativo
Wm y paquetes gráficos
Toolkits
Generador IU
UIMS
Menú
Paneles
RadioButton
CheckButton
Escala
Area de TextoBarras Scroll
Botones
Elementos de interacción Composicionables
![Page 32: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/32.jpg)
Tema 1. Introducción HCI
Tendencias
1950 1960 1970 1980 1990 2000
Sistemas Interactivos
SketchPad
Ratón
Internet
Memex hipertexto
WYSIWIG
Ventanas
XwindowsMS
Windows
HyperCard
HardwarePDAs
Apple Lisa
PortátilesPC
UNIVAC
Interactividad
2010
iPhone
Web 2.0
Interacción
iPad
![Page 33: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/33.jpg)
Tema 1. Introducción HCI
Tendencias
Calidad gráfica Miniaturización Conectividad Diálogo natural Inteligencia Artificial Ubicuo !
![Page 34: La Interaccion persona ordenador](https://reader033.vdocuments.co/reader033/viewer/2022061212/5494bfdcac7959292e8b4c52/html5/thumbnails/34.jpg)
Tema 1. Introducción HCI
Referencias[ACMCHI92] ACM SIGCHI Curricula for Human-‐Computer Interaction,92, ACM online: http://old.sigchi.org/cdg/ [DIX03] A. Dix, J. Finlay, G. Abowd, R. Beale: Human-‐Computer Interaction, 3ª ed. Prentice Hall, 2003. [HIG95] Macintosh Human Interface Guidelines, Apple 1995 online: https://developer.apple.com/.../AppleHIGuidelines/OSXHIGuidelines.pdf ![ISO 9241] ISO Ergonomics of human-‐system interaction. Usability online http://www.w3.org/2002/Talks/0104-‐usabilityprocess/slide3-‐0.html [NEGR95] N. Negroponte: Being Digital, Knopf Inc [NORM13] D. Norman : The Design of Everyday things. Basicbooks, 2013. online UGR: http://sl.ugr.es/06NU [SCH08] M. Schmitz, C. Endres, A. Butz. “A Survey of Human-Computer Interaction Design in Science Fiction Movies”. ACM Proceeding INTETAIN '08 Proceedings of the 2nd international conference on INtelligent TEchnologies for interactive enterTAINment. online: http://www.cip.i`i.lmu.de/~butz/publications/talks/HCI-‐Sci`i-‐talk-‐slides.pdf [THIM90] Thimbleby, Harold: "User Interface Design". ACM Press. Addison Wesley 1990 !!!