diseño y evaluación de interfaces -...
TRANSCRIPT
27/11/2013
1
Dra. Sandra Baldassarri
http://webdiis.unizar.es/~sandra
Diseño y Evaluación de Interfaces
Paradigmas de Interacción
Tema: Paradigmas de Interacción
Estilos y paradigmas de interacción
Objetivos
Dar una visión general de los distintos tipos de
interfaces y dispositivos de interacción • Resaltar las características principales de diseño de cada una
Considerar qué interfaz es mejor para un determinado tipo de aplicación y/o actividad
Reconocer qué paradigmas subyacen bajo cada una de ellas
27/11/2013
2
Tema: Paradigmas de Interacción
Contenidos
• Paradigmas y estilos de interacción – Consideraciones de diseño
– Considerar qué tipo de interfaz es la adecuada para cada actividad
• Evolución histórica de los paradigmas de interacción
• Algunos paradigmas destacados – Realidad Virtual
– Realidad Aumentada
– Computación Ubicua
– Interfaces Tangibles
– Dispositivos móviles
– …
Tema: Paradigmas de Interacción
Introducción
• Estilos y paradigmas en Interacción Persona-Ordenador – El paradigma predominante en los ‘80 era el diseño de
aplicaciones centradas en el usuario para un único usuario, en el escritorio del ordenador.
– A mediados de los ‘90 hubo un cambio en la forma de pensar
– Varios avances tecnológicos llevaron a una nueva generación de entornos informáticos para los usuarios, como por ejemplo: • Multimedia, Realidad Virtual, Computación ubicua, Interfaces
basadas en Agentes, ...
• El efecto de llevar la interacción “más allá del
escritorio” provocó nuevas preguntas y desafíos e implicó considerar nuevos fenómenos y cuestiones.
27/11/2013
3
Tema: Paradigmas de Interacción
Introducción
• Por ejemplo, computación ubicua: – Los ordenadores se diseñan para estar “embebidos” dentro
del entorno. Hay que re-pensar la Interacción entre la Persona y el Ordenador en este contexto.
• Hay que tener en cuenta: – ¿Cómo se permite que la gente acceda e interactúe con la
información en su trabajo, en su vida cotidiana, etc.?
– Diseñar experiencias con interfaces que forman parte del entorno, sin dispositivos específicos de control
– ¿Cómo se da información contextual relevante en el momento y lugar adecuado?
– Asegurar que la información que se transmite entre los distintos dispositivos interconectados es segura y fiable
Tema: Paradigmas de Interacción
¿Qué es un estilo de interacción?
• Interacciones – Todos los intercambios que suceden entre la persona y el
computador • Baecker and Buxton, 1987
• Estilo de interacción – Un término genérico para agrupar las diferentes maneras
en que los usuarios se comunican o interaccionan con el ordenador • Preece, 1994
• Sistema multimodal • Varios estilos de interacción
27/11/2013
4
Tema: Paradigmas de Interacción
¿Qué es un paradigma?
• La palabra paradigma viene del latín paradigma y éste del griego parádeigma que quiere decir ejemplo, modelo. En este aspecto los paradigmas de interacción representan los ejemplos o modelos de los que se derivan todos los sistemas de interacción.
• La evolución de las interfaces y los estilos de interacción dieron lugar a diferentes paradigmas a lo largo de la historia de la computación. Los paradigmas interactivos más conocidos hoy en día son: – El ordenador de sobremesa
– La realidad virtual
– La realidad aumentada
– La computación ubicua
Tema: Paradigmas de Interacción
Tipos de interfaces
Interfaces en los ’40 – Procesamiento en lotes (batch) – Tiempo compartido: un ordenador, varios usuarios
Interfaces en los ‘50 –Pantallas (Video display units) – Sketchpad (I. Shuterland)
Interfaces en los ‘60 –Herramientas de programación para soporte a tareas específicas
•Programming toolkit
Interfaces en los ‘70 – Ordenadores personales – Smalltalk (Alan Kay) – Metáforas
27/11/2013
5
Tema: Paradigmas de Interacción
Tipos de interfaces
Interfaces en los ‘80 –Comandos –WIMP/GUI
Interfaces en los ’90 –Multimedia, –Realidad virtual –Hipertexto, Web –Voz –Lápices, gestos (simples), pantalla táctil
Interfaces en el 2000 –Móvil –Multimodal (Gestos) –Cooperativa, colaborativa –Tangible , Multitouch (Perceptive Pixel) –Realidad mezclada y aumentada –Portable –Cerebro-ordenador –Interacción WII
Tema: Paradigmas de Interacción
Evolución histórica
Interfaces en los ’40
• Procesamiento en lotes (batch)
Impersonal computing
27/11/2013
6
Tema: Paradigmas de Interacción
Evolución histórica
Interfaces en los ’40
• Tiempo compartido
– 1940-1950s – fuerte crecimiento tecnológico
– J.C.R. Licklider en ARPA
– un solo ordenador, múltiples usuarios
Interactive computing
Tema: Paradigmas de Interacción
Evolución histórica
Interfaces en los ’50
• Pantallas (Video Display Units) – Mejora significativa en el dispositivo de salida (antes
papel)
– 1962 – Sutherland's Sketchpad I. Shuterland
– Los ordenadores se comienzan a utilizar para la visualización y la manipulación de datos
27/11/2013
7
Tema: Paradigmas de Interacción
Evolución histórica
Interfaces en los ’60
• Herramientas de programación
para soporte a tareas específicas
– Douglas Engelbart, Stanford
Research Institute
– 1963 – Augmenting man's intellect
– 1968 Demostración NLS/Augment
system
– Herramienta de programación que
pemite construir sistemas interactivos
complejos a partir de bloques
Tema: Paradigmas de Interacción
Evolución histórica
Interfaces en los ’70
• Ordenadores personales – 1970s – Lenguaje LOGO para programar gráficos
simples (educación)
– Un sistema es más potente si es más fácil de usar
– El futuro de la computación se basa en ordenadores pequeños y potentes, dedicados a una sola persona
– Alan Kay presenta Dynabook en Xerox’s Parc
27/11/2013
8
Tema: Paradigmas de Interacción
Evolución histórica
Interfaces en los ’80
– Interfaces basadas en comandos
– WIMP/GUI
Tema: Paradigmas de Interacción
Interfaces basadas en comandos
• Interfaz por línea de comandos – Primer estilo de interacción de uso generalizado.
– Es una manera de dar instrucciones directamente al
ordenador.
– Pueden tener la forma de teclas de función, un
carácter, abreviaciones cortas o palabras enteras.
27/11/2013
9
Tema:
Interfaces basadas en comandos
• Interfaz por línea de comandos de Second
Lifecommand-based para usuarios con
discapacidad visual
Tema: Paradigmas de Interacción
Interfaces basadas en comandos
• Interfaz por línea de comandos
– Ventajas
• Flexibilidad
– Permite la iniciativa del usuario
– Es atractivo para usuarios expertos
• Potencialmente rápido para tareas complejas
• Capacidad para hacer macros
– Desventajas
• Requiere aprendizaje y entrenamiento
• Difícil de memorizar
• Gestión de errores pobre
27/11/2013
10
Tema: Paradigmas de Interacción
Interfaces basadas en comandos
• Consideraciones de diseño e investigación
– La forma, los tipos de nombres y la estructura son
aspectos claves para un buen diseño
– La consistencia es el principio de diseño más
importante
• e.g., siempre utilizar la primera letra del comando
– Actualmente las interfaces basadas en comandos son
muy populares para scripting en la web
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
27/11/2013
11
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaces WIMP/GUI – Windows
• Pueden abrirse, cerrarse, moverse en la pantalla usando el ratón, superponerse, agrandarse y achicarse, hacer scroll.
– Icons • Representan aplicaciones, objetos, comandos, y herramientas
que se abren al hacer click sobre ellas
– Menus • Ofrecen listas de opciones sobre las que moverse y
seleccionar
– Pointer Device • Un ratón controla el cursor como punto de entrada a las
ventanas, menús e iconos de la pantalla
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaces WIMP/GUI
• GUI - Interfaz Gráfica de Usuario
– Bloques básicos de construcción similares a las WIMP
pero más variados
• Color, 3D,sonido, animación
• Varios tipos de menús, iconos, ventanas
– Nuevos elementos gráficos como barras de
herramientas, desplegables, ...
27/11/2013
12
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaces WIMP: Windows
– Las ventanas se inventaron para superar las restricciones físicas de las pantallas de ordenador, permitiendo presentar más información y realizar varias tareas
– Las barras de scroll dentro de las ventanas también permitieron mostrar más información
– La opción de ventanas múltiples dificultaba encontrar una ventana en particular, por lo tanto surgieron diferentes técnicas:
– Listar
– Iconos
– Achicar / Minimizar
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaces WIMP: Apple’s shrinking windows
27/11/2013
13
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaces WIMP: Elección de una opción
(scrolling window)
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaces WIMP: Elección de una opción
¿es mejor este método?
27/11/2013
14
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaz por ventanas: Consideraciones de
diseño e investigación
– Permite a los usuarios moverse con fluidez entre
diferentes ventanas (y monitores)
– ¿Cómo cambiar la atención de una a otra para
encontrar la información buscada sin distracciones?
– Deben utilizarse los principios de espaciado,
agrupación y simplicidad
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaces WIMP: Menu
– Diferentes estilos de interfaces tipo menú
– Listas planas, cascada, pop-up, contextual, expansible...
• Menús de listas planas
– Bueno para mostrar pocas opciones al mismo tiempo.
Especialmente útil cuando el tamaño del dispositivo de
visualización es pequeño, como iPods
– Pero es necesario anidar opciones unas dentro de otras, y
en casos requiere varios pasos para lograr llegar a la
opción deseada.
– Moverse a las pantallas previas suele ser tedioso
27/11/2013
15
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaces WIMP: Menú
– Estructura de menú de lista plana para iPod
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaces WIMP: Menú
• Menús expansibles
– En una sola pantalla permite mostrar más opciones
que el menú de lista plana
– Navegación más flexible, permite que la selección de opciones se realice en la misma pantalla
– Los más populares son los menús expansibles en cascadas • Menús primarios, secuandarios e incluso hasta 3 niveles
• Requiere un control preciso del ratón
• Puede provocar seleccionar opciones incorrectas
27/11/2013
16
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaces WIMP: Menú
– Menú en cascada
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaces WIMP: Menú
• Menú contextual – Otorga acceso a comandos más usados que tienen sentido
en el contexto de la tarea actual
– Aparece cuando el usuario presiona la tecla Control mientras también presiona algún otro elemento de la interfaz
– Ayuda a superar algunos problemas de navegación asociados con los menus en cascada
27/11/2013
17
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaces WIMP: Menú
– Ventajas
• Entrenamiento reducido
• Toma de decisión estructurada
• Permite el uso de herramientas de gestión de diálogos
• Errores fáciles de gestionar
– Desventajas
• Peligro de muchos menús
• Puede hacerlo más lento a usuarios experimentados
• Requiere una visualización rápida
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaz por menú: Consideraciones de diseño e
investigación
– ¿Cuáles son los mejores nombres / etiquetas / frases
a utilizar?
– La ubicación de los elementos en la lista es un factor
crítico (cardsorting)
– Ej: Quit / Save necesitan estar separadas
– Existen varias directrices internacionales que
enfatizan sobre la navegación, estructura,
profundidad... – Ej: ISO 9241
27/11/2013
18
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaces WIMP: Iconos
– Los iconos son más fáciles de aprender y recordar que los comandos
– Pueden diseñarse para ser compactos y con posiciones que varían en la pantalla
– Actualmente son popular en todas la aplicaciones y sistemas operativos
• Representan objetos del escritorio, herramientas (e.g., paintbrush), aplicaciones (e.g., web browser) y operaciones (e.g., cut, paste, next)
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaces WIMP: Iconos
– Desde su comienzo en Xerox Star los iconos han ido cambiando su aspecto:
– Blanco y negro → color, sombras, imágenes fotorrealistas, visualizacion en 3D, animación
– Muchos iconos han sido diseñados de forma muy detallada y han sido animados para hacerlos visualmente atractivos e informativos
– En la actualidad las interfaces GUIs son altamente motivadoras, con numerosos iconos incorporados
27/11/2013
19
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaces WIMP: Iconos
• Forma de los iconos – El mapeo entre la representación y lo que representan
puede ser: • similar (una imagen de un fichero representa al objeto fichero),
• análogo (una imagen de unas tijeras representa ‘cut’)
• arbitrario (el uso de una X representa ‘delete’)
– Los iconos más efectivos son los similares
– Determinadas operaciones son acciones difíciles de representar • Usar una combinación de objetos y símbolos que capturan la
parte más destacada de la acción
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaces WIMP: Iconos
– Primeros iconos
27/11/2013
20
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaces WIMP: Iconos
– Iconos recientes
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaces WIMP: Iconos
– Iconos simples + etiquetas
27/11/2013
21
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Interfaz por iconos: Consideraciones de diseño
e investigación
– Existen recursos que no tienen iconos asociados o
fáciles de dibujar y/inventar
• Guías de estilo, estándares, librerías
– Las etiquetas se pueden usar junto con los iconos
para mejorar la identificación
– Utilización de rollovers para grandes conjuntos de
iconos (e.g., procesadores de texto, editores de
fotografía)
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
• Ejemplo: Iconos de una cámara de fotos
Toshiba
27/11/2013
22
Tema: Paradigmas de Interacción
Interfaces WIMP/GUI
Trabajo:
• Realizar prototipos de iconos simples para representar las siguientes operaciones que deberían aparecer en la pantalla de una cámara digital: – Borrar la última foto que se ha sacado
– Borrar todas las fotos guardadas
– Formatear la tarjeta de memoria
• Evaluar vuestros diseños con usuarios
Tema: Paradigmas de Interacción
Evolución histórica
Interfaces en los ’90
– Interfaces multimedia
– Realidad virtual
– Hipertexto, Web
– Voz
– Lápices, gestos (simples), pantalla táctil
27/11/2013
23
Tema: Paradigmas de Interacción
Interfaces Multimedia
• Consiste en la combinación de varios medios (texto, gráficos, audio, vídeo, animación) en una sola interfaz con diferentes formas de interactuar
• Los usuarios interactúan a través de enlaces en imágenes o texto para:
– Lanzar una aplicación o programa
– Ejecutar videos o animaciones
– Moverse de un lugar a otro de la aplicación
• Una interfaz multimedia exige la presencia de
interactividad e integración entre los medios.
Tema: Paradigmas de Interacción
Interfaces Multimedia
• Entorno de aprendizaje multimedia BioBlast
27/11/2013
24
Tema: Paradigmas de Interacción
Interfaces Multimedia
• Ventajas – Facilita un acceso rápido a diferentes formas de
representación de la información
– Permite un aprendizaje fácil y una mayor comprensión
– Permite que los usuarios puedan explorar diferentes partes de un juego, una historia, un tema de estudio...
– Generalmente incluye vídeos y animaciones junto con textos y diagramas
• Desventajas – Si no se diseña y planifica correctamente puede
generar frustración.
Tema: Paradigmas de Interacción
Interfaces Multimedia
• Consideraciones de diseño e investigación – Hay que diseñar las aplicaciones multimedia para
ayudar a los usuarios a explorar, seguir e integrar las diferentes representaciones • Proveer simulaciones y ejemplos interactivos que el usuario
tenga que completar para resolver una tarea
• Usar ‘dynalinking,’ donde la información que se muestra en una pantalla cambie en relación a lo que ocurra en otra (Scaife y Rogers, 1996).
– Existen diferentes guías de estilo que recomiendan como combinar múltiples medios para diferentes tipos de tarea
27/11/2013
25
Tema: Paradigmas de Interacción
Interfaces web
• Interfaz Web
– Los primeros sitios web estaban basados en texto,
con hipervínculos
– Se comienza a tener en cuenta como estructurar la
información de la mejor manera posible para permitir
que los usuarios naveguen y accedan a la información
de forma fácil y rápida
– Actualmente en este tipo de interfaces se hace
hincapié en que las páginas sean distintivas,
llamativas, ...
Tema: Paradigmas de Interacción
Interfaces web Hace unos meses...
27/11/2013
26
Tema:
Interfaces web y ahora…
Don Norman: Designing For People
Nielsen Norman Group
Hugo Tognazzini, Don Norman y Jakob Nielsen
Tema: Paradigmas de Interacción
Interfaces web
• Interfaz Web: Swim
27/11/2013
27
Tema: Paradigmas de Interacción
Interfaces web
• Interfaz Web: Consideraciones de diseño e investigación – Las interfaces web se están convirtiendo en GUIs
– Debate: ¿usable o atractivo?
– Es necesario considerar cuál es la mejor forma de diseñar, presentar y estructurar la información para lograr un buen funciomiento del sistema
– El contenido y la navegación también son temas centrales
– Principios de diseño de Veen
(1) ¿Dónde estoy?
(2) ¿A dónde puedo ir?
(3) ¿Qué hay aquí?
Tema: Paradigmas de Interacción
Interfaces web
• Ejemplo: Nike.com website
27/11/2013
28
Tema: Paradigmas de Interacción
Interfaces web
• Trabajo: Análisis del sitio web Nike.com
–¿Qué tipo de website es?
–¿Contradice los principios de Veen? ¿Es eso importante?
– ¿Qué tipo de experiencia de usuario ofrece?
– ¿Cuál es tu experiencia como usuario?
Tema: Paradigmas de Interacción
Realidad Virtual
• Simulaciones gráficas generadas por ordenador
que proveen:
– “the illusion of participation in a synthetic environment
rather than external observation of such an
environment” (Gigante, 1993)
• Nuevos tipos de experiencias, que permiten que
los usuarios interactúen con los objetos y
naveguen por el espacio 3D
• Creación de experiencias de usuario muy
atractivas
27/11/2013
29
Tema: Paradigmas de Interacción
Realidad Virtual
• Puede dar un mayor nivel de fidelidad en la representación de los objetos
• Induce a un sentido de presencia donde la persona “siente” las experiencias – “a state of consciousness, the (psychological) sense of
being in the virtual environment” (Slater and Wilbur, 1999)
• Permite diferentes puntos de vista: 1ª y 3ª persona
• Hay que tener cuidado con el tipo de periféricos – Los cascos no suelen ser confortables
y pueden causar mareos y desorientación
Tema: Paradigmas de Interacción
Realidad Virtual
d
27/11/2013
30
Tema: Paradigmas de Interacción
Realidad Virtual
• Consideraciones de diseño e investigación
– Hay mucha investigación en cómo diseñar RV realista y de forma segura para facilitar el entrenamiento • Por ej: simuladores de vuelo
• Tratamiento de fobias (arañas, hablar en público)
– Consideraciones de diseño • Tener en cuenta cuál es el mejor modo de navegar: ¿1ª o 3ª
persona?
• Tener en cuenta cómo controlar las interacciones y los movimientos (utilizar movimientos de cabeza y cuerpo)
• Considerar cuál es el mejor modo de interactuar con la información (uso de teclas, punteros, joystick)
• Considerar el nivel de realismo necesario para dar sensación de presencia
Tema: Paradigmas de Interacción
Realidad Virtual
• Ejemplo
¿Cuál es el juego de “snake” más atractivo?
¿Cómo se presentaría este juego en Realidad Virtual?
27/11/2013
31
Tema: Paradigmas de Interacción
Interfaces por voz
Tema: Paradigmas de Interacción
Interfaces por voz
• Interfaz por voz
– La persona interactúa con un sistema a través del lenguaje, por ej, planificador de viaje, telefonía
– Generalmente se utiliza para sistemas que ofrecen informacion muy específica, como realización de determinadas transacciones (comprar un billete de tren, etc).
– También se utiliza para personas con limitaciones
• Reconocimiento de lenguaje en procesadores de texto, lectores de web, sistemas de control del hogar
27/11/2013
32
Tema: Paradigmas de Interacción
Interfaces por voz
• El uso más popular de los sistemas de interacción por voz corresponden a respuesta automática en telefonía:
– Los usuarios deben especificar sus requerimientos con sus propias palabras
• “Tengo problemas con mi buzón de voz”
– Y el sistema ofrece automaticamente el servicio apropiado
• ¿Cuál es vuestra experiencia con estos sistemas?
Tema: Paradigmas de Interacción
Interfaces por voz
• Lenguaje natural
27/11/2013
33
Tema: Paradigmas de Interacción
Interfaces por voz
• Lenguaje natural
– Ventajas • Conocimiento del propio lenguaje
• Uso de la voz, por tanto, manos libres
– Desventajas • Interfaces todavía no inteligentes
– Funcionalidades y conceptos
• Diferencias en lenguajes, argots, voces – Pueden ser necesarios diálogos de clarificación
Tema: Paradigmas de Interacción
Interfaces por voz
• Consideraciones de diseño e investigación:
– ¿Cómo diseñar sistemas que puedan seguir una conversación?
• Ayudar a una navegación eficiente a través de un sistema de menús
• Permitir recuperarse fácilmente de los errores
– Tener en cuenta el tipo de voz del actor (hombre, mujer, neutral, dialectos)
• ¿la gente prefiere escuchar y es más paciente con una voz de hombre o de mujer? ¿qué acento es mejor/peor tolerado?
27/11/2013
34
Tema: Paradigmas de Interacción
Interfaces móviles
• Interfaces móviles
– Dispositivos para llevar en la mano y utlizarlos mientras la persona se mueve. Por ej, PDAs, teléfonos móviles
– Las aplicaciones que se ejecutan en este tipos de dispositivos se han multiplicado en el último tiempo
• En restaurantes para hacer pedidos
• En supermercados para verificar el stock
• En educación para soportar aprendizaje a distancia
Tema: Paradigmas de Interacción
wikipedia
Interfaces móviles: panorámica
En 2011 se vendieron un 11% que en 2010
27/11/2013
35
Tema:
dotMobi
Interfaces móviles: panorámica
En 2011 las ventas de smartphones supusieron un 31’8%
Tema:
Interfaces móviles: aplicaciones
• Nuevos diseños orientados primordialmente
para el entretenimiento (user experience)
• Muchas aplicaciones no se han diseñado para
cubrir ninguna necesidad o uso, sino
específicamente para momentos de ocio, para
diversión
– iBeer desarrollada por el mago Steve Sheraton
– Uso ingenioso del acelerómetro que se encuentra
dentro del teléfono
27/11/2013
36
Tema:
Interfaces móviles: aplicaciones
• iBeer app
Tema:
Interfaces móviles: aplicaciones
• Códigos QR
27/11/2013
37
Tema:
• Pantallas pequeñas, número reducido de teclas y de controles
• Uso de pantallas táctiles (¡pero no todos!)
• Diseños físicos muy variados
• La orientación del dispositivo puede cambiar
• La usabilidad y las preferencias pueden variar enormemente dependiendo de la destreza y de la entrega del usuario.
Interfaces móviles: desafíos
Tema:
Screen Resolution and Formats
dotMobi
Tamaños de pantalla
reducidos
Interfaces móviles: desafíos
27/11/2013
38
Tema:
Numeric Keyboard and Joystick
Half Keyboard and Ball
Full Keyboard and Touchscreen
Touchscreen
(Multi-touch)
Cursor Keys
Interfaces móviles: desafíos
Diseños físicos muy variados
Tema: Paradigmas de Interacción
Interfaces móviles: desafíos
• Teléfonos móviles ¿accesibles para todos?
27/11/2013
39
Tema: Paradigmas de Interacción
Interfaces móviles
• Consideraciones de diseño e investigación
– A pesar de los avances en interfaces móviles pueden ser complicadas de usar, a diferencia de las GUIs
– Especialmente para personas con pocas habilidades manuales o con manos grandes
– La clave consiste en diseñar para pantallas pequeñas reales y controlar el espacio limitado que poseen
Tema: Paradigmas de Interacción
Interfaces móviles
• No hay que considerar sólo a los teléfonos
móviles, también hay que tener en cuenta
interfaces móviles para cubrir necesidades
especiales.
27/11/2013
40
Tema:
Interfaces táctiles
• Las pantallas táctiles, como los kioscos, detectan la presencia y ubicación en la pantalla del tacto de una persona
• Las pantallas multi-touch soportan distintos tipos de acciones dinámicas de los dedos, como por ejemplo: barrido, empujar, teclear,...
• Actualmente se utiliza en gran cantidad de dispositivos como Smartphones, iPods, tablets y tabletops
Tema: Paradigmas de Interacción
Interfaces táctiles
Consideraciones de diseño e investigación
• Estilos de interacción más fluidos y directos que incluyen gestos de la mano o gestos basados en lápices.
• Es clave tener en cuenta si el tamaño, orientación y forma del display favorecen el efecto de colaboración.
• Hay que verificar la rapidez en acciones de tipo scroll, utilizando ruedas, barras, etc
• Es más difícil de manipular y genera más errores trabajar con un teclado virtual en una pantalla táctil que trabajar con un teclado físico.
27/11/2013
41
Tema: Paradigmas de Interacción
Interfaces táctiles
Consideraciones de diseño e investigación
Tema:
Interfaces hápticas
• Retorno táctil
– Se aplica vibración y fuerzas al cuerpo de una
persona utilizando actuadores que están embebidos
en su ropa o en el dispositivo que llevan
• Permiten enriquecer la experiencia del usuario o
guiarlos para corregir un error
• Se suelen usar para simular el sentido del tacto:
– Comunicación remota
– Aplicaciones médicas
27/11/2013
42
Tema:
Interfaces hápticas
Retorno vibrotactil en tiempo real
• Da pequeños golpes cuando
se ejecuta inadecuadamente
• Utiliza captura de movimiento
• Los golpes son vibraciones en
los brazos y las manos
Tema:
Interfaces hápticas
Consideraciones de diseño e investigación
• Cuál es el mejor lugar para poner los actuadores
• Se utiliza sólo un “toque” o una secuencia
• Qué intensidad hay que aplicar y cuándo
• Cómo se siente el usuario que lo lleva en diferentes
situaciones y contextos
27/11/2013
43
Tema: Paradigmas de Interacción
Interfaces colaborativas
• Interfaces colaborativas
– Están diseñadas para que se usen por más de un usuario al mismo tiempo
• Múltiples entradas, incluso permite entradas simultáneas por grupos
• Dispositivos de visualización grandes, o de pared, donde la gente puede interactuar a través de lápices o gestos
• Mesas interactivas donde pequeños grupos pueden interactuar con la información utilizando sus manos / dedos
Tema: Paradigmas de Interacción
Interfaces colaborativas
• Smartboard
• DiamondTouch Tabletop
27/11/2013
44
Tema: Paradigmas de Interacción
Interfaces colaborativas
• Consideraciones de diseño e investigación
– Estilo de interacción directo y fluido que incluye gestos, utilizar las manos o lápices.
– El diseño debe tener en cuenta el efecto en la colaboración del tamaño, la orientación y la forma del dispositivo
– Las superficies horizontales soportan mejor el trabajo colaborativo que las verticales
– Utilizar mesas (tabletops) más grandes no mejora el trabajo en grupo pero facilita la división del trabajo
Tema: Paradigmas de Interacción
Interfaces tangibles
• Interfaces tangibles:
– Interacción basada en objetos físicos que tienen una
representación digital
– Cuando una persona manipula los objetos físicos
produce un efecto digital, como lanzar una animación
– Los efectos digitales pueden tener lugar en diferentes
medios o espacios físicos, o pueden estar embebidos
en el objeto físico
27/11/2013
45
Tema: Paradigmas de Interacción
Interfaces tangibles
Chromarium cubes Flow Blocks
Tema: Paradigmas de Interacción
Interfaces tangibles
• Consideraciones de diseño e investigación
– El tipo de relación que se utiliza entre la acción física y el efecto digital
• Si se trata de una aplicación educativa este mapeo es crítico
• Si se trata de una aplicación de entretenimiento se puede establecer un mapeo más implícito e inesperado
– Hay que considerar el objeto físico a utilizar
• Normalmente se utilizan bloques, cubos, porque son simples y ofrecen flexibilidad
• También se utilizan tarjetas con marcadores si se trabaja sobre una superficie
27/11/2013
46
Tema: Paradigmas de Interacción
Realidad Aumentada y Mixta
• En la Realidad Aumentada se superponen representaciones virtuales sobre dispositivos físicos u objetos
• En la Realidad Mixta se combina la visualización del mundo real con visualizaciones de un entorno virtual
• Existen muchas aplicaciones desarrolladas: en medicina, juegos, simulaciones, etc.
Tema: Paradigmas de Interacción
Realidad Aumentada y Mixta
• Aplicaciones:
– Medicina:
• Objetos virtuales como rayos-X y escáneres se superponen
sobre parte del cuerpo del paciente
• Ayudan a los médicos a entender qué es lo que se examina o
se opera
– Control de tráfico aéreo
• Se superpone sobre la pantalla de vídeo información dinámica
de los despegues y aterrizajes de aeronaves virtuales junto
con los planos reales
• Permite realizar planes y simulaciones de gestión de tráfico,
etc.
27/11/2013
47
Tema: Paradigmas de Interacción
• Aplicaciones: reconstrucción arquitectónica:
Vilars
Realidad Aumentada y Mixta
Tema: Paradigmas de Interacción
Realidad Aumentada y Mixta
• Aplicaciones: Juegos
27/11/2013
48
Tema:
Realidad Aumentada y Mixta
¿Realidad Aumentada “inteligente”?
• Aplicaciones de Smartphone que intentan guiar
a usuarios caminando por una ciudad:
– Se superponen flechas e información local (e.g.
McDonalds más cercano) en una imagen de la calle
en la que está caminando el usuario
– ¿Significa esto que la gente perderá más tiempo
mirando su smartphone que mirando los lugares por
los que pasa?
Tema: Paradigmas de Interacción
• Aplicaciones: visitas guiadas
Realidad Aumentada y Mixta
27/11/2013
49
Tema: Paradigmas de Interacción
Interfaces portables
• Interfaces portables
– Los primeros desarrollos consistían en cámaras montadas en la cabeza o en gafas que permitían al usuario grabar lo que veía y acceder a información digital
– Luego se introducen joyas, sombreros, ropa inteligente, zapatos, chaquetas... • Permiten que el usuario pueda interactuar con información
digital mientras se mueve
– Las aplicaciones incluyen visitas turísiticas
Tema: Paradigmas de Interacción
Interfaces portables
• http://www.youtube.com/watch?v=9c6W4CCU9M4&feature=player_embedded
27/11/2013
50
Tema: Paradigmas de Interacción
Interfaces portables
Google glass
Tema: Paradigmas de Interacción
Interfaces portables
Google glass
27/11/2013
51
Tema: Paradigmas de Interacción
Interfaces portables
Google glass
• http://www.dreig.eu/caparazon/2013/04/30/gafas-de-google-creatividad-innovacion/
• http://www.youtube.com/watch?v=WsmnmdibHFo
Tema: Paradigmas de Interacción
Interfaces portables
• Consideraciones de diseño e investigación – Comfort
• Tienen que ser ligeros, pequeños, preferiblemente ocultos en la ropa
– Higiene
• Se pueden lavar o limpiar las ropas una vez usadas?
– Fácil de llevar
• Tener en cuenta que tan fácil es quitar un dispositivo electrónico y cambiarlo por otro
– Usabilidad
• Tener en cuenta como puede controlar el usuario los dispositivos embebidos en la ropa
27/11/2013
52
Tema: Paradigmas de Interacción
Realidad Aumentada y Mixta
• Consideraciones de diseño e investigación
– ¿Qué tipo de “aumento” digital?
• ¿Cuándo y dónde en el entorno físico?
• Necesidad de llevarlo a cabo sin que produzca distracciones de las tareas que se tienen que llevar a cabo
• Necesidad de ser capaz de alinear correctamente los objetos del mundo real
– ¿Qué tipo de dispositivo?
• Smartphone
• Gafas
• ¿otros...?
Tema: Paradigmas de Interacción
Interfaces Cerebro-Ordenador
• Las Interfaces Cerebro-Ordenador (BCI)
proveen una comunicación entre las ondas del
cerebro de una persona y un dispositivo
externo, como un cursor en una pantalla
• La persona se entrena para concentrarse en la
tarea, e.g. mover el cursor
• Las BCIs funcionan detectando los cambios en
el funcionamiento neuronal del cerebro – Definición BCI
– Historia BCI
27/11/2013
53
Tema: Paradigmas de Interacción
Interfaces Cerebor-Ordenador
• Control de juegos
Tema: Paradigmas de Interacción
Tipos de interfaces
Interfaces en los ‘80 –Comandos –WIMP/GUI
Interfaces en los ’90 –Multimedia, –Realidad virtual –Hipertexto, Web –Voz –Lápices, gestos (simples), pantalla táctil
Interfaces en el 2000 –Móvil –Multimodal (Gestos) (kinect) –Cooperativa, colaborativa –Tangible , Multitouch (Perceptive Pixel) –Realidad mezclada y aumentada –Portable –Cerebro-ordenador (BCI) –Interacción WII
27/11/2013
54
Tema: Paradigmas de Interacción
¿Qué interfaz es mejor?
• Para aprendizaje ¿son mejores las interfaces multimedia o las tangibles?
• ¿La interfaz por voz es tan efectiva como una interfaz basada en comandos?
• ¿Una interfaz multimodal es más efectiva que una monomodal?
• Los entornos virtuales ¿son los mejores para juegos?
• Las interfaces colaborativas ¿son mejores para soportar la comunicación comparadas con los PCs en red?
Tema: Paradigmas de Interacción
Resumen
• Desde la era de las WIMP/GUI han surgido muchas interfaces innovadoras incluyendo voz, móviles, portables, tangibles, etc.
• Para decidir que interfaz usar hay que considerar aspectos de diseño e investigación
• Las interfaces web cada vez se asemejan más a las interfaces basadas en multimedia
• Una consideración importante que subyace en el diseño de cualquier interfaz es cómo se representará la información al usuario de forma que pueda llevar a cabo una tarea determinada
27/11/2013
55
Tema: Paradigmas de Interacción
Bibliografía
El material presentado en estas transparencias debe complementarse con:
• Preece, Rogers, Sharp: “Interaction Design: Beyond Human-Computer Interaction”, 3º ed, Wiley, 2011 – Capítulo 6
• Dix, Finlay, Abowd, Beale: “Human-Computer Interaction”, 3º ed, Prentice-Hall, 2004 – Capítulo 4