Tema 2. Los sistemas Interactivos: El ordenador

2,388 views

Published on

Segundo Tema de la asignatura Diseño de Interfaces de Usuario
Parte 1. El ordenador
Grado de Ingeniería Informática. Universidad de Granada

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,388
On SlideShare
0
From Embeds
0
Number of Embeds
1,338
Actions
Shares
0
Downloads
34
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tema 2. Los sistemas Interactivos: El ordenador

  1. 1. Tema 2: Los Sistemas Interactivos I - El ordenador DISEÑO DE INTERFACES DE USUARIO edición 2015 ! ! Miguel Gea (mgea@ugr.es) Dpt. Lenguajes y Sistemas Informáticos Grado en Ingeniería Informática Universidad de Granada http://utopolis.ugr.es/diu http://www.slideshare.net/mgea/tema-2-1-el-ordenador-2013
  2. 2. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Indice 2 I: El ordenador Dispositivos y tareas de interacción Arquitectura del Sistema Interactivo Componentes interactivos II: La persona El Factor Humano
  3. 3. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu El personaje: Douglas Engelbart “Las computadoras no sólo deben servir para ser eficientes y productivas, sino que deben contribuir a aumentar la capacidad intelectual” En 1997, le fue concedido el Premio Lemelson-MIT, del Instituto Tecnológico de Massachusetts. Su mérito no es haber inventado el mouse, sino “haber descubierto la interfaz entre los ordenadores y los seres humanos”. Xerox PARC (Palo Alto Research Center Incorporated, California) ha sido una centro de investigación de referencia en la informática moderna: 1967 mouse, precursor de GUI y metáfora desktop,WYSIWYG, impresión láser, OOP… http://www.parc.com/about/ http://web.stanford.edu/dept/SUL/library/extra4/sloan/mousesite/1968Demo.html 3
  4. 4. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Interacción con el Ordenador Tareas del Interfaz Usuario: - Obtención de datos (Input) - Efecto de las acciones (Feedback) - Presentación datos (layout) - Enlace con aplicación Subsistema de entrada Aplicación Dispositivos físicos Usuario E R E = Entradas del usuario R = Realimentación - Dispositivos - Tareas - (Gestos) - Programación de la interacción Interfaz WIMP (Windows, Icons, Mouse, Pointer) de Xerox parc 1973 4
  5. 5. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 1 - Dispositivos Diversidad dispositivos Características Ergonómicas (adaptación a la persona) Tipo de tareas a realizar -> tareas básicas http://research.microsoft.com/en-us/um/people/bibuxton/buxtoncollection/pivot.htm 5
  6. 6. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 1 Dispositivos: Características ergonómicas 6 x y [MATH11[SHARP11][DIX03] Características Dispositivos. Pueden condicionar su uso para ciertas tareas Absolutos/relativos Directos/indirectos Continuos/discreto Limitados/no limitados Tamaño del área de trabajo Relación Control / Display Ergonomía: Estudio de las condiciones de adaptación del un lugar de trabajo, o sistemas a las características físicas y psicológicas del trabajador o usuario. Estudio de las características físicas de la interacción.
  7. 7. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 1 Dispositivos: Características ergonómicas D W [MATH11[SHARP11][DIX03] Ley de Fitts Mide el tiempo (estimado) necesario para moverse rápidamente desde una posición inicial hasta una zona destino final (en base a la distancia y tamaño del objetivo final), a y b son constantes empíricas Mt = a + b log2(D/W + 1) La parte logarítmica se denomina índice de dificultad (ID) para alcanzar el objetivo, y tiene unidades de bits. 7
  8. 8. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 1. Dispositivos: Tipos • Trackball • Touchpad • Trackpad • Joystick • Tableta Gráfica • Lápiz Optico • Voz (micrófono) • Ratón • Teclado • Seguimiento ocular (eye tracking) 8
  9. 9. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 1. Dispositivos Toshiba Tecra 720CDT (Pointing stick) Macintosh PowerBook 100 (trackball) 9
  10. 10. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 2 Tareas de interacción básica (BIT) Tareas: • Posicionamiento • Valor • Texto • Selección • Arrastre Dispositivos lógicos Tareas de interacción básica (BIT) Los dispositivos lógicos es una “herencia" del standard GKS (ISO, 1983) para gestión de entradas de usuario en sistemas graficos: locator, stroke, valuator, pick, string, choice [BUXT09] 10
  11. 11. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 2 Tareas de interacción básica (BIT) TAREA: Posicionamiento • Sistema de coordenadas (2D, 3D, pantalla..) • Resolución • Restricciones (modular/direccional) • Realimentación (espacial/numérica) 11
  12. 12. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 2 Tareas de interacción básica (BIT) TAREA: Selección • Tamaño del conjunto (fijo/variable) • Modos (identificación/ apuntando) 12
  13. 13. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 2 Tareas de interacción básica (BIT) Ley de Hicks El tiempo necesario para hacer una elección se se incrementa cuando crece el número de alternativas T = b log2(n + 1) b: constante calculada empíricamente, n: número de opciones. 13
  14. 14. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 2 Tareas de interacción básica (BIT) TAREA: Texto • Tamaño del texto • Codificación • Dispositivos especiales • Gestos / T9 14
  15. 15. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 2 Tareas de interacción básica (BIT) TAREA: Valor • Rango • Continuo/discreto 15
  16. 16. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 2 Tareas de interacción básica (BIT) TAREA: Arrastre (drag & drop) • Acción continua de manipulación sobre objetos. •Enlace con tareas complejas sobre objetos (copiar, mover, desplazar, borrar) 16
  17. 17. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 2 Taxonomía de dispositivos de entrada The design space of input devices [MACK90] extensión de [BUXT83] (M)echanical, (T)ouch 17
  18. 18. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 3 nuevos modos interacción 18 Gestos multitouch (sobre pantallas de contacto) Interfaces tangibles y hápticos
  19. 19. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 3 Gestos 19 http://www.lukew.com/touch/
  20. 20. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 4 Arquitectura: Modelo de Seeheim Primera aproximación (1er Congreso UISoftware Tool, Seeheim, Alemania) 1983 Separación por capas Capa Presentación Capa Diálogo Capa Aplicación Léxico Sintáctico Semántico Aplicación Usuario <orden> ::= Copiar | …. <copiar> ::= copy <from> <to> <from> ::= [ <disk> : ] [ <Directory> ] < filename> <to> := [ <diskSpec> : ] [ <Directory> ] [< filename> ] … BNF >copy c:/doc/info.txt d: 20
  21. 21. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 4 Modelo Vista Controlador Aparece con lenguaje Smalltalk-80 Identifica relaciones entre elementos Puede haber varias vistas y controladores asociados a un modelo Modelo Vista Controlador 21
  22. 22. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 5 Gestión del Diálogo Dirigido por aplicación / Usuario Dispositivo Sistema Interactivo Aplicación Petición Control Datos Main() Dispositivo Sistema Interactivo Aplicación Evento Control add get Control disposit. Request (petición) Event (Eventos) 22
  23. 23. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 5 Eventos Teclas y modificadores Componente implicado Información adicional Coordenadas mouse (x,y) Instante de tiempo Tipo evento Evento Un evento es un suceso significativo provocado (normalmente) por el usuario y que supone un cambio en el estado de algún componente (pulsación de un botón, movimiento del ratón, una tecla). Pasos de la definición de la interacción Identificar el evento al que se desea escuchar o atender. ¿qué va a suceder?, ¿a qué se va a responder? Identificar sobre qué objeto sucede ese evento (sobre un botón, una ventana…). ¿en qué objeto va a producir el evento? (event listener) Asociar una acción que expresa el comportamiento deseado. Esta es la respuesta a la acción del usuario. ¿Qué hay que hacer cuando ocurra el evento? (event handler) 23
  24. 24. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 5 Eventos Posee información relevante del estado de la aplicación Tipos de eventos: • Usuario • Mouse (botones, movimiento,..) • Teclas (pulsación, modificadores) • Entrar/Salir componente (foco) • Acción (de cada componente) • Sistema • Ventanas (redimensionamiento, cierre...) • De aplicación (insertar nuevos elementos) Teclas y modificadores Componente implicado Información adicional Coordenadas mouse (x,y) Instante de tiempo Tipo evento Evento 24
  25. 25. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 5 Gestión de Eventos Widgets Gestión eventos (event loop) Colas eventos (Sistema) Colas eventos (dispositivos) 25
  26. 26. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 5 Gestión de Eventos: modelos proc update { . . . } MOUSE_ENTER bind .Button_Si <Mouse_enter> { exit(); } Sistema X Windows (Motif, Tcl/TK) Ventana 1 A C B MOUSE_ENTER MOUSE_EXIT MOUSE_MOVE MOUSE_DOWN MOUSE_UP ACTION_EVENT a) Callbacks Asociar llamadas a código sobre eventos (directamente sobre los controles) 26
  27. 27. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 5 Gestión de Eventos Ventana 1 A C BLos eventos se pasan a todos los componentes potencialmente interesados en el mismo B C Delivery Ventana1 A Handle B C Ventana1 Java 1.0.2, MacApp, Windows b) Notificación 27
  28. 28. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 5 Gestión de Eventos Ventana 1 A C B Modelo objetos: Java 1.1, Smalltalk, NeXTStep Receptor Componente fuente Registrar Evento MOUSE_ENTER Ventana 1 Ventana1.Close(); c) Delegación Los “receptores” (listener) registran sobre los componentes y para un evento. 28
  29. 29. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Comentarios y aplicaciones Aplicable a: - Herramientas de programación y GUI - servicios y apoyo para programación - Sistemas de ventanas - Soporte del S.O. para dar soporte a actividad usuario - Diseño de nuevos dispositivos - funcionalidad y ergonomía - gestos, 3D, lenguaje natural… 29
  30. 30. Tema 2. Los sistemas interactivos: el ordenador. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Referencias [DIX03] A. Dix, J. Finlay, G. Abowd, R. Beale: Human-Computer Interaction, 3ª ed. Prentice Hall, 2003. [OLSE98] D. Olsen: Developing User Interfaces. Morgan Kaufmann, 1998 [FOLE14] J. D. Foley, S. Feiner, K. Akeley: Computer Graphics: Principles and Practice (3rd Edition), Chapteer 21. Pearson, 2014 [MATH11] L. Mathis, Designed for Use: Usable Interfaces for Applications and the Web. The Pragmatic Bookshelf, 2011 [OLSE10] D. Olsen: Building Interactive Systems: Principles for Human-Computer Interaction, 1st Edition. Brigham Young University, 2010 [LUKEW10] L. Wroblewski: Touch Gesture Reference Guide. Cards & guides. Online: http:// www.lukew.com/touch/ Bill Buxton Input Devices Collection http://research.microsoft.com/en-us/um/people/bibuxton/buxtoncollection/ Artículos: [MACK90] J. Mackinlay, S. K. Card, G . Robertson: A Semantic Analysis of the Design Space of Input Devices. HUMAN-COMPUTER INTERACTION, vol 5, 1990 [BUXT95] W. Buxton. Touch, Gesture & Marking. Chapter 7 in R.M. Baecker, J. Grudin, W. Buxton and S. Greenberg, S. (Eds.). Readings in Human Computer Interaction: Toward the Year 2000 San Francsco: Morgan Kaufmann Publishers, 1995 [GKS83] ISO (1983). Information Processing-Graphical Kernel System (GKS) Functional Description, International Standards Organization, ISO/DP 7942. 30

×