TEMA 2. Interacción - dsic.upv.esjlinares/grafics/Tema_2.pdf · TEMA 2. Interacción 2.1....

1Sección de Informática Gráfica DSIC/UPV

GRAFICOS POR COMPUTADOR

TEMA 2. Interacción

2.1. Dispositivos

2.2. Interfaz de Usuario


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


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


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


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”


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


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


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


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


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


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


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


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


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


Interacción


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


Interacción


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


Interacción

Realidad Virtual y AumentadaMesa de trabajo (Workbench)

Sistemas multi-proyección• Proyección frontal

• Proyección trasera


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


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


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


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


Interacción


¿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..


Interacción


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


Interacción


Interfaz. Objetos de la vida cotidiana


Interacción


Interfaz. Objetos de la vida cotidiana

Evidencia: Visible y comprensión intuitiva


Interacción

Introducción a los IUInterfaces


Interacción


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


Interacción


Factores a considerar• Comunicación

• Consistencia

• Flexibilidad

• Realimentación

• Ayuda

• Robusto

• Minimizar errores

• Atractivo

• Estándar

• Portabilidad

Principios generales de una IU


Interacción


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 …



Interacción


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)



Interacción


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



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.


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


Interacción


Gestores de ventanas• Interfaces Gráficos

• Metáfora de escritorio

• Iconos y barra de tareas


Interacción


Controles/Widgets• Elementos interactivos

• Composicionables: se pueden componer entre sí


Interacción

ComponentesArquitectura

Modelo Seeheim• Separación por capas (1985)


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


Interacción


Modos de entrada: Petición (Request)• Diálogo dirigido por la aplicación


Interacción


Modos de entrada: Eventos (Event)• Control del diálogo por el usuario


Interacción


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)


Interacción


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


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


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


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


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

TEMA 2. Interacción - dsic.upv.esjlinares/grafics/Tema_2.pdf · TEMA 2. Interacción 2.1....

Documents

Transcript of TEMA 2. Interacción - dsic.upv.esjlinares/grafics/Tema_2.pdf · TEMA 2. Interacción 2.1....