1Sección de Informática Gráfica DSIC/UPV
GRAFICOS POR COMPUTADOR
TEMA 2. Interacción
2.1. Dispositivos
2.2. Interfaz de Usuario
2Sección de Informática Gráfica DSIC/UPV
Interacción
ObjetivosTener una visión general del estado actual de los dispositivos de interacción
Conocer los dispositivos de interacción de los ordenadores de sobremesa
Estudiar dispositivos de interacción para aplicaciones avanzadas, como la realidad virtual
Aprender las distintas técnicas básicas de interacción
Conocer las aplicaciones de esas técnicas de interacción
3Sección de Informática Gráfica DSIC/UPV
Interacción
2.1 DispositivosDispositivos• Teclado y pantalla
• Dispositivos apuntadores
• Scanners y cámaras
• Voz y sonido
• Dispositivos hápticos
• Realidad virtual y aumentada
• Dispositivos avanzadosTablet PC’sInteracción ubicuaSensores de huellas dactilaresRastreo ocularAromasCasas interactivasOrdenadores corporales
4Sección de Informática Gráfica DSIC/UPV
Interacción
Dispositivos Apuntadores
Permiten situar la posición del cursor en la pantalla
También permiten seleccionar (p.ej. mediante botones)
Ejemplos• Ratón
• Trackball
• Joystick
• Pantalla Táctil
• Ordenador con Lápiz
5Sección de Informática Gráfica DSIC/UPV
Interacción
Ratón
Inventado por Doug Englebarten Xerox PARC (1968)
Permite posicionar el cursor y seleccionar mediante botones
Dos tipos• Mecánicos
• Opticos
Puede llevar una rueda para hacer “scrolling”
6Sección de Informática Gráfica DSIC/UPV
Interacción
Trackball y Joystick
Trackball: como el ratón, pero no requiere espacio extra
Touchpad:• Similar al trackball
• Detecta la capacitancia del dedo
Joystick• Utilizado por videojuegos
• Suelen tener múltiples botones
• Pueden tener realimentación de fuerza
7Sección de Informática Gráfica DSIC/UPV
Interacción
Pantalla TáctilPermite situar el cursor y seleccionar sobre la misma pantalla
Aplicaciones• Terminales de punto de venta
• Teléfonos móviles, PDAs (también ver ordenadores con lápiz)
• Cajeros automáticos, quioscos informativos
8Sección de Informática Gráfica DSIC/UPV
Interacción
Ordenadores con LápizEl lápiz:• Es un dispositivo apuntador, para seleccionar o mover información
• Se puede utilizar para dibujar o escribir, creando un bitmap
El bitmap puede ser procesado mediante técnicas de reconocimiento de escritura manual
Hay dos tipos de lápices:• Opticos: un fotodetector detecta la luz emitida por un píxel
• De digitalización: una rejilla en la pantalla detecta la posición del lápiz
9Sección de Informática Gráfica DSIC/UPV
Interacción
Scanners y CámarasScanners (o digitalizadores) 2D• Permiten capturar texto e imágenes
• Generan un mapa de bits o un mapa de píxels
• El texto requiere típicamente reconocimiento: OCR
• Se caracterizan por:Resolución espacial: en puntos por pulgada (DPI)Resolución de color: número de bits por píxel
Scanners 3D• Obtienen una nube de puntos en 3D
• También pueden generar la geometría (polígonos) de (la cara de) un objeto
10Sección de Informática Gráfica DSIC/UPV
Interacción
Scanners y Cámaras
Cámaras• Permiten capturar imágenes y video
• Conectadas mediante USB, Firewire, o a través de memoria Flash
• Requieren una tarjeta digitalizadora (frame grabber), que puede estar integrada dentro de la cámara
• Se caracterizan por:Resolución de captura en píxelesVelocidad de captura en imágenes por segundo
11Sección de Informática Gráfica DSIC/UPV
Interacción
Voz y Sonido
Micrófono• Para introducir información multimedia: sonidos, palabras,
canciones, etc.
• Soporta la interacción mediante lenguaje natural
Altavoces• Para comunicar información al usuario
12Sección de Informática Gráfica DSIC/UPV
Interacción
Voz y Sonido
Tecnologías de la voz: métodos de interacción• Reconocimiento del habla
• Síntesis de la voz
• Identificación y verificación de una persona por la voz
• Comprensión del lenguaje natural
Reconocimiento de la voz (paso de voz a texto)• Reconocimiento de palabras aisladas
Requiere pausas entre palabras
• Reconocimiento de voz continuaNo requiere pausas, se puede hablar de forma continuada
• Dependiente del que hablaRequiere el entrenamiento con la voz del usuario
• Independiente del que hablaPuede reconocer cualquier usuario
• Aplicaciones:Ordenes habladas: aplicación más comúnDictado por la voz
13Sección de Informática Gráfica DSIC/UPV
Interacción
Dispositivos Hápticos
Los sistemas actuales carecen de estímulos para el tacto
Ejemplo: coger una copa virtual• Cómo informar del contacto con la copa
• Cómo evitar que la mano traspase la copa
Tipos de sistemas• Kinestética: retroalimentación de fuerza (force feedback)
Interactúa con músculos y tendones: aplican una fuerza
• Retroalimentación táctilInteractúa con nervios terminales de la piel (calor, presión, textura): dan la sensación de estar en contacto con un objeto virtual
14Sección de Informática Gráfica DSIC/UPV
Interacción
Realidad Virtual y Aumentada
Realidad virtual• Para simulación con dispositivos de interacción especiales:
Entrada: ratones 3D, guantes virtuales, detectores de orientaciónSalida: sonido 3D, cascos (HMD’s), sistemas de proyección, la cueva
• El objetivo es la total inmersión del usuario en un entorno virtual
Realidad aumentada• Parte de imágenes y/o vídeo del mundo real
• Añade información gráfica y textual en tiempo real
Elementos• Dispositivos de interacción y manipulación
• Detectores de posición y orientación
• Navegación
• Visualización
• Soporte hardware y software
15Sección de Informática Gráfica DSIC/UPV
Interacción
Realidad Virtual y Aumentada
Dispositivos de interacción y manipulación• Ratón 3D:
Para posicionamiento y orientación en 3DPermite navegación y selección de objetos
• Palanca de mando:Similar al joystick, con botonesPuede tener retroalimentación
• GuanteDispositivo más intuitivo de interacciónCapturan la flexión de los dedosPermite “coger” y manipular objetosPermite apuntar con el dedoDataglove: sensores de fibra ópticaPowerglove: galgas extensiométricas
• Dextrous Hand MasterDermatoesqueleto sujeto a los dedosPuede detectar el movimiento de lado a lado
16Sección de Informática Gráfica DSIC/UPV
Interacción
Realidad Virtual y Aumentada
Cascos• HMD: head mounted display
• Visualizan estéreo: una imagen por ojo
• TiposCon pantallas LCDCon tubos de rayos catódicosCon una columna de LEDs y un espejo
Gafas• Para realidad aumentada
• Combinan la vista del mundo real con una imagen sobre un LCD
17Sección de Informática Gráfica DSIC/UPV
Interacción
Realidad Virtual y AumentadaMesa de trabajo (Workbench)
Sistemas multi-proyección• Proyección frontal
• Proyección trasera
18Sección de Informática Gráfica DSIC/UPV
Interacción
Realidad Virtual y AumentadaCueva• CAVE: Cave Automatic Virtual Environment
• Sistema multiproyección
• Permite múltiples usuarios
• ConfiguracionesTres paredes y sueloTres paredes y techo
19Sección de Informática Gráfica DSIC/UPV
Interacción
2.2 Interfaz de usuarioInterfaz de usuario• Introducción a las interfaces de usuario
DefinicionesPrincipios generalesUsabilidad y accesibilidad
• Herramientas
• Componentes
• Paradigmas de interacción
20Sección de Informática Gráfica DSIC/UPV
Interacción
ObjetivosAprender el concepto de interfaz
Conocer los principios generales de las IU
Conocer los principios del diseño universal
Conocer qué son y los fundamentos de las herramientas de creación de IU
Conocer la arquitectura de una IU
Tener una visión general y comparativa de los distintos paradigmas de interacción
21Sección de Informática Gráfica DSIC/UPV
Interacción
Introducción a los IU
Definición y Justificación
IPO: Interacción Persona-Ordenador• Disciplina relacionada con el diseño, implementación
y evaluación de sistemas informáticos interactivos para su uso por seres humanos
Por qué estudiar IPO?• Interfaz: parte muy importante del éxito o fracaso de
una aplicación
• Sobre un 50% del código de la aplicación estádedicado al desarrollo de la interfaz.
• A pesar de ello, se le dedica poco tiempo en la docencia de informática
22Sección de Informática Gráfica DSIC/UPV
Interacción
Introducción a los IU
¿Por qué estudiar IPO?
Actualmente más del 70% del esfuerzo de desarrollo de las aplicaciones interactivas estádedicado a la interfaz
Cambio de paradigma de programación:
• Paradigma de la interacción
versus
• Paradigma del algoritmo
Gestión de datos
Lógica de la aplicacióninterfaz de usuario
MultimediaGráficos en 3DEntradas por voz etc..
23Sección de Informática Gráfica DSIC/UPV
Interacción
Introducción a los IU
Definiciones Básicas
Usuario:
• Persona que interacciona con un sistema informático
Interacción
• Todos los intercambios que suceden entre el usuario y el ordenador
24Sección de Informática Gráfica DSIC/UPV
Interacción
Introducción a los IU
Interfaz. Objetos de la vida cotidiana
25Sección de Informática Gráfica DSIC/UPV
Interacción
Introducción a los IU
Interfaz. Objetos de la vida cotidiana
Evidencia: Visible y comprensión intuitiva
26Sección de Informática Gráfica DSIC/UPV
Interacción
Introducción a los IUInterfaces
27Sección de Informática Gráfica DSIC/UPV
Interacción
Introducción a los IU
Interfaz. Definiciones
• Es todo lo que el usuario experimenta, ve y hace con el sistema informático
• Son las partes del sistema con las que el usuario entra en contacto
• Las interfaces han de ser usables y accesibles
28Sección de Informática Gráfica DSIC/UPV
Interacción
Introducción a los IU
Factores a considerar• Comunicación
• Consistencia
• Flexibilidad
• Realimentación
• Ayuda
• Robusto
• Minimizar errores
• Atractivo
• Estándar
• Portabilidad
Principios generales de una IU
29Sección de Informática Gráfica DSIC/UPV
Interacción
Introducción a los IU
Comunicación• Diálogo entre el usuario y la aplicación
• Aspectos a considerar:Control de la aplicaciónFuncionalidad completa (conjunto de actividades que se puedenrealizar)Acceso fácil y comprensible
Consistencia• Los aspectos del interfaz y del diálogo son uniformes en su
funcionamiento y filosofíaModo de presentación (color, tipo de mensajes, petición de datos)secuencia de acciones …
Flexibilidad• Facilitar diferentes modos de diálogo
• Posibilidad de una diversidad de usuariosDiferente grado de experiencia, conocimientos, propósito …
Principios generales de una IU
30Sección de Informática Gráfica DSIC/UPV
Interacción
Introducción a los IU
Realimentación• Mantener al usuario informado de la tarea que está realizando
• Información de seguimiento de las actividades que realizaRepresentación visual de la acción (desplazamiento del cursor,borrado de un fichero …)
Ayuda• Información al usuario del sistema y su funcionamiento
Información de ayuda general, según el contexto, sobre la acciónfutura …
Robusto• Fiabilidad del sistema
Realizar las tareas correctamente, control de excepciones
Minimizar errores• Evitar errores del usuario
Facilitar mecanismos de recuperación (undo)
Principios generales de una IU
31Sección de Informática Gráfica DSIC/UPV
Interacción
Introducción a los IU
Atractivo• Satisfacción de uso
Fácil de usarPersonalizable
Estándar• Características del interfaz comunes entre múltiples
aplicacionesMejora el tiempo de aprendizaje (Familiaridad)
Portabilidad• Migrabilidad de datos entre aplicaciones
• Migrabilidad de la aplicación entre plataformas
Principios generales de una IU
32Sección de Informática Gráfica DSIC/UPV
Interacción
Introducción a los IUCambio de paradigma
Cambio de idea de ordenador:
•Asistimos a un cambio de paradigma
•Del ordenador de sobremesa en que interaccionamos sentados y centrados en la interacción a realizar pasamos a la interacción en cualquier lugar, en cualquier momento y junto a otras actividades
•Ejemplos: agenda, internet móvil, ordenador de a bordo.
33Sección de Informática Gráfica DSIC/UPV
Interacción
Introducción a los IUHerramientas de creación de IU
Qué son:• Las herramientas de creación de IU permiten la
programación de sistemas interactivos, minimizando el esfuerzo de desarrollo
• Un 48% del código de la aplicación está dedicado al desarrollo de la interfaz
Fundamentos• Independencia de la aplicación
• Independencia de dispositivos
• Independencia de usuario
34Sección de Informática Gráfica DSIC/UPV
Interacción
Introducción a los IUHerramientas de creación de IU
Gestores de ventanas• Interfaces Gráficos
• Metáfora de escritorio
• Iconos y barra de tareas
35Sección de Informática Gráfica DSIC/UPV
Interacción
Introducción a los IUHerramientas de creación de IU
Controles/Widgets• Elementos interactivos
• Composicionables: se pueden componer entre sí
36Sección de Informática Gráfica DSIC/UPV
Interacción
ComponentesArquitectura
Modelo Seeheim• Separación por capas (1985)
37Sección de Informática Gráfica DSIC/UPV
Interacción
ComponentesCapa de diálogo
Objetivo• Función: Control del diálogo con el usuario
Funciones• Establecer protocolo de interacción
• Control de eventos
• Gestión de eventos y conexión con aplicación
38Sección de Informática Gráfica DSIC/UPV
Interacción
ComponentesCapa de diálogo
Modos de entrada: Petición (Request)• Diálogo dirigido por la aplicación
39Sección de Informática Gráfica DSIC/UPV
Interacción
ComponentesCapa de diálogo
Modos de entrada: Eventos (Event)• Control del diálogo por el usuario
40Sección de Informática Gráfica DSIC/UPV
Interacción
ComponentesCapa de diálogo
Eventos• Información sobre sucesos
• Posee información relevante
Tipos de eventos• Usuario
Mouse (botones, movimiento, …)Teclas (pulsación, modificadores)Entrar/salir componente (foco)Acción (de cada componente)
• SistemaVentanas (redimensionamiento, cierre, …)De aplicación (insertar nuevos elementos)
41Sección de Informática Gráfica DSIC/UPV
Interacción
ComponentesCapa de diálogo
Gestión de eventos• Estrategias de obtención del evento y notificación a la
aplicación
El método más común: funciones de respuesta (callbacks)• Sistema OpenGL (glut)
• Conexión entre componentes (visual)-evento-código de aplicación
42Sección de Informática Gráfica DSIC/UPV
Interacción
ComponentesCapa de Presentación
Presentación• Organizar la información de E/S y su apariencia
Importancia• Representa la percepción del usuario sobre el sistema
• Gestionar los recursos disponibles
• Representación adecuada de los objetos
43Sección de Informática Gráfica DSIC/UPV
Interacción
ComponentesCapa de Presentación
Aspectos de estudio• Claridad visual
Enfatizar la organización lógica de la información mediante un análisis de cómo organiza el observador los estímulos visuales
• Códigos visualesDistinción visual entre elementos de distinta naturalezaLenguaje icónico: Representación gráfica de un conceptoReconocimiento, recuerdo y discriminación
• Consistencia visualOrganización de los elementos de distinta naturalezaEl color: Usar el color como técnica de codificación y conservadoramente, combinación de colores modificables
• Formato de pantallaGestión y organización del espacio disponibleBalanceadoSimetríaRegularidad y acentuaciónAgrupamiento y alineamiento
44Sección de Informática Gráfica DSIC/UPV
Interacción
Paradigmas de interacción
Modelos de los que se deriva el sistema de interacción y establece las características de la comunicaciónTipos:• Ordenador de sobremesa• Realidad virtual• Computación ubicua• Realidad aumentada
Interacciones:• Hombre-ordenador• Ordenador-entorno• Hombre-entorno
45Sección de Informática Gráfica DSIC/UPV
Interacción
Paradigmas de interacciónEsquema comparativo
A) Sobremesa
D) Realidad AumentadaC) Computación Ubicua
B) Realidad Virtual
C Computador
R Mundo Real
Persona - Computador
Persona - Mundo real
Mundo real - Computador