TEMA 2. Interacción Inter acci ón Objetivos

Anuncio
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
Descargar