GRAFICOS POR COMPUTADOR TEMA 2. Interacción 2.1. Dispositivos 2.2. Interfaz de Usuario 1 Sección de Informática Gráfica DSIC/UPV Objetivos Tener 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 2 Inter acci ón Sección de Informática Gráfica DSIC/UPV Inter acci ón 2.1 Dispositivos Dispositivos • • • • • • • Teclado y pantalla Dispositivos apuntadores Scanners y cámaras Voz y sonido Dispositivos hápticos Realidad virtual y aumentada Dispositivos avanzados Tablet PC’s Interacción ubicua Sensores de huellas dactilares Rastreo ocular Aromas Casas interactivas Ordenadores corporales 3 Sección de Informática Gráfica DSIC/UPV Dispositivos Apuntadores Permiten situar la posición del cursor en la pantalla También permiten seleccionar (p.ej. mediante botones) Ejemplos • • • • • Inter acci ón Ratón Trackball Joystick Pantalla Táctil Ordenador con Lápiz 4 Sección de Informática Gráfica DSIC/UPV Inter acci ón Ratón Inventado por Doug Englebart en Xerox PARC (1968) Permite posicionar el cursor y seleccionar mediante botones Dos tipos • Mecánicos • Opticos Puede llevar una rueda para hacer “scrolling” 5 Sección de Informática Gráfica DSIC/UPV Trackball y Joystick Trackball: como el ratón, pero no requiere espacio extra Touchpad: • Similar al trackball • Detecta la capacitancia del dedo Inter acci ón Joystick • Utilizado por videojuegos • Suelen tener múltiples botones • Pueden tener realimentación de fuerza 6 Sección de Informática Gráfica DSIC/UPV Pantalla Táctil Permite 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 7 Sección de Informática Gráfica DSIC/UPV Ordenadores con Lápiz El lápiz: • Es un dispositivo apuntador, para seleccionar o mover información • Se puede utilizar para dibujar o escribir, creando un bitmap Inter acci ón Inter acci ón 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 8 Sección de Informática Gráfica DSIC/UPV Scanners y Cámaras Scanners (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: Inter acci ón 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 9 Sección de Informática Gráfica DSIC/UPV 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: Inter acci ón Resolución de captura en píxeles Velocidad de captura en imágenes por segundo 10 Sección de Informática Gráfica DSIC/UPV Voz y Sonido Micrófono • Para introducir información multimedia: sonidos, palabras, canciones, etc. • Soporta la interacción mediante lenguaje natural Inter acci ón Altavoces • Para comunicar información al usuario 11 Sección de Informática Gráfica DSIC/UPV 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 Inter acci ón Reconocimiento de la voz (paso de voz a texto) • Reconocimiento de palabras aisladas Requiere pausas entre palabras • Reconocimiento de voz continua No requiere pausas, se puede hablar de forma continuada • Dependiente del que habla Requiere el entrenamiento con la voz del usuario • Independiente del que habla Puede reconocer cualquier usuario • Aplicaciones: Ordenes habladas: aplicación más común Dictado por la voz 12 Sección de Informática Gráfica DSIC/UPV 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 Inter acci ón Tipos de sistemas • Kinestética: retroalimentación de fuerza (force feedback) Interactúa con músculos y tendones: aplican una fuerza • Retroalimentación táctil Interactúa con nervios terminales de la piel (calor, presión, textura): dan la sensación de estar en contacto con un objeto virtual 13 Sección de Informática Gráfica DSIC/UPV Realidad Virtual y Aumentada Realidad virtual • Para simulación con dispositivos de interacción especiales: Entrada: ratones 3D, guantes virtuales, detectores de orientación Salida: sonido 3D, cascos (HMD’s), sistemas de proyección, la cueva Inter acci ón • 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 14 Sección de Informática Gráfica DSIC/UPV Realidad Virtual y Aumentada Dispositivos de interacción y manipulación • Ratón 3D: Para posicionamiento y orientación en 3D Permite navegación y selección de objetos Inter acci ón • Palanca de mando: Similar al joystick, con botones Puede tener retroalimentación • Guante Dispositivo más intuitivo de interacción Capturan la flexión de los dedos Permite “coger” y manipular objetos Permite apuntar con el dedo Dataglove: sensores de fibra óptica Powerglove: galgas extensiométricas • Dextrous Hand Master Dermatoesqueleto sujeto a los dedos Puede detectar el movimiento de lado a lado 15 Sección de Informática Gráfica DSIC/UPV Realidad Virtual y Aumentada Cascos • HMD: head mounted display • Visualizan estéreo: una imagen por ojo • Tipos Inter acci ón Con pantallas LCD Con tubos de rayos catódicos Con una columna de LEDs y un espejo Gafas • Para realidad aumentada • Combinan la vista del mundo real con una imagen sobre un LCD 16 Sección de Informática Gráfica DSIC/UPV Realidad Virtual y Aumentada Mesa de trabajo (Workbench) Sistemas multi-proyección • Proyección frontal • Proyección trasera 17 Sección de Informática Gráfica DSIC/UPV Realidad Virtual y Aumentada Cueva • • • • CAVE: Cave Automatic Virtual Environment Sistema multiproyección Permite múltiples usuarios Configuraciones Inter acci ón Inter acci ón Tres paredes y suelo Tres paredes y techo 18 Sección de Informática Gráfica DSIC/UPV Inter acci ón 2.2 Interfaz de usuario Interfaz de usuario • Introducción a las interfaces de usuario Definiciones Principios generales Usabilidad y accesibilidad • Herramientas • Componentes • Paradigmas de interacción 19 Sección de Informática Gráfica DSIC/UPV Objetivos Aprender 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 Inter acci ón Tener una visión general y comparativa de los distintos paradigmas de interacción 20 Sección de Informática Gráfica DSIC/UPV Inter acci ó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 21 Sección de Informática Gráfica DSIC/UPV Introducción a los IU ¿Por qué estudiar IPO? Gestión de datos Inter acci ón Multimedia Gráficos en 3D Entradas por voz etc.. Lógica de la aplicación interfaz de usuario 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 22 Sección de Informática Gráfica DSIC/UPV Inter acci ó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 23 Sección de Informática Gráfica DSIC/UPV Inter acci Interfaz. Objetos de la vida cotidiana ón Introducción a los IU 24 Sección de Informática Gráfica DSIC/UPV Inter acci Interfaz. Objetos de la vida cotidiana ón Introducción a los IU Evidencia: Visible y comprensión intuitiva 25 Sección de Informática Gráfica DSIC/UPV Introducción a los IU Interfaces 26 Inter acci ón Sección de Informática Gráfica DSIC/UPV 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 27 Sección de Informática Gráfica DSIC/UPV Introducción a los IU Principios generales de una IU Factores a considerar • • • • • • • • • • Inter acci ón Inter acci ón Comunicación Consistencia Flexibilidad Realimentación Ayuda Robusto Minimizar errores Atractivo Estándar Portabilidad 28 Sección de Informática Gráfica DSIC/UPV Introducción a los IU Principios generales de una IU Comunicación Inter acci ón • Diálogo entre el usuario y la aplicación • Aspectos a considerar: Control de la aplicación Funcionalidad completa (conjunto de actividades que se pueden realizar) Acceso fácil y comprensible Consistencia • Los aspectos del interfaz y del diálogo son uniformes en su funcionamiento y filosofía Modo 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 usuarios Diferente grado de experiencia, conocimientos, propósito … 29 Sección de Informática Gráfica DSIC/UPV Introducción a los IU Principios generales de una IU Realimentación Inter acci ón • Mantener al usuario informado de la tarea que está realizando • Información de seguimiento de las actividades que realiza Representació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ón futura … Robusto • Fiabilidad del sistema Realizar las tareas correctamente, control de excepciones Minimizar errores • Evitar errores del usuario Facilitar mecanismos de recuperación (undo) 30 Sección de Informática Gráfica DSIC/UPV Introducción a los IU Principios generales de una IU Atractivo Inter acci ón • Satisfacción de uso Fácil de usar Personalizable Estándar • Características del interfaz comunes entre múltiples aplicaciones Mejora el tiempo de aprendizaje (Familiaridad) Portabilidad • Migrabilidad de datos entre aplicaciones • Migrabilidad de la aplicación entre plataformas 31 Sección de Informática Gráfica DSIC/UPV Introducción a los IU Cambio 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. 32 Inter acci ón Sección de Informática Gráfica DSIC/UPV Introducción a los IU Herramientas de creación de IU Inter acci ón 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 33 Sección de Informática Gráfica DSIC/UPV Introducción a los IU Herramientas de creación de IU Gestores de ventanas Inter acci ón • Interfaces Gráficos • Metáfora de escritorio • Iconos y barra de tareas 34 Sección de Informática Gráfica DSIC/UPV Introducción a los IU Herramientas de creación de IU Controles/Widgets Inter acci ón • Elementos interactivos • Composicionables: se pueden componer entre sí 35 Inter acci ón Componentes Arquitectura Sección de Informática Gráfica DSIC/UPV Modelo Seeheim • Separación por capas (1985) 36 Sección de Informática Gráfica DSIC/UPV Inter acci ón Componentes Capa 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 37 Componentes Capa de diálogo Modos de entrada: Petición (Request) Sección de Informática Gráfica DSIC/UPV Inter acci ón • Diálogo dirigido por la aplicación 38 Sección de Informática Gráfica DSIC/UPV Componentes Capa de diálogo Modos de entrada: Eventos (Event) Inter acci ón • Control del diálogo por el usuario 39 Inter acci ón Componentes Capa de diálogo Sección de Informática Gráfica DSIC/UPV 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) • Sistema Ventanas (redimensionamiento, cierre, …) De aplicación (insertar nuevos elementos) 40 Sección de Informática Gráfica DSIC/UPV Inter acci ón Componentes Capa 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 41 Sección de Informática Gráfica DSIC/UPV Inter acci ón Componentes Capa 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 42 Sección de Informática Gráfica DSIC/UPV Inter acci ón Componentes Capa 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 visuales Distinción visual entre elementos de distinta naturaleza Lenguaje icónico: Representación gráfica de un concepto Reconocimiento, recuerdo y discriminación • Consistencia visual Organización de los elementos de distinta naturaleza El color: Usar el color como técnica de codificación y conservadoramente, combinación de colores modificables • Formato de pantalla Gestión y organización del espacio disponible Balanceado Simetría Regularidad y acentuación Agrupamiento y alineamiento 43 Sección de Informática Gráfica DSIC/UPV Paradigmas de interacción Modelos de los que se deriva el sistema de interacción y establece las características de la comunicación Tipos: • • • • Inter acci ón Ordenador de sobremesa Realidad virtual Computación ubicua Realidad aumentada Interacciones: • Hombre-ordenador • Ordenador-entorno • Hombre-entorno 44 Sección de Informática Gráfica DSIC/UPV Paradigmas de interacción Esquema comparativo Inter acci ón ÍÎ Persona - Computador ÍÎ Persona - Mundo real ÍÎ Mundo real - Computador A) Sobremesa B) Realidad Virtual C Computador R Mundo Real C) Computación Ubicua D) Realidad Aumentada 45 Sección de Informática Gráfica DSIC/UPV