Tema 6. Interfaces Novedosas

30258- Diseño Centrado en el Usuario. Diseño para la Multimedia Dra. Sandra Baldassarri

Tipos de interfaces

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Tipos de interfaces Interfaces en los ‘80 –Comandos –WIMP/GUI

Interfaces en los ’90 –Multimedia, –Realidad virtual –Interfaces Web, hipertexto –Voz –Lápices, gestos (simples), pantalla táctil

Interfaces en el 2000 –Móvil –Basadas en gestos (kinect) –Interfaces multimodales –Interfaces hápticas –Cooperativa, colaborativa –Tangible , Multitouch –Realidad mezclada y aumentada –Portable –Cerebro-ordenador (BCI), Interfaces robóticas, Interfaces Emocionales

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Tipos de interfaces Interfaces en los ‘80 –Comandos –WIMP/GUI

Interfaces en los ’90 –Multimedia, –Realidad virtual –Interfaces Web, hipertexto –Voz –Lápices, gestos (simples), pantalla táctil

Interfaces en el 2000 –Móvil –Basadas en gestos (kinect) –Interfaces multimodales –Interfaces hápticas –Cooperativa, colaborativa –Tangible , Multitouch –Realidad mezclada y aumentada –Portable –Cerebro-ordenador (BCI), Interfaces robóticas, Interfaces Emocionales

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

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.

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces tangibles

Chromarium cubes

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Flow Blocks

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 tokens si se trabaja sobre una superficie.

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces basadas en gestos • Utilizan técnicas de visión por ordenador, sensores y reconocimiento a través de cámaras

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces basadas en gestos • Utilizan técnicas de visión por ordenador, sensores y reconocimiento a través de cámaras – Pueden reconocer los gestos del cuerpo, los brazos, o de la mano de una persona en una habitación – Sistemas tipo: Kinect, EyeToy, LeapMotion, ¿Wii?

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces basadas en gestos • Los gestos se mapean en gran variedad de movimientos para diferentes juegos: nadar, jugar a los bolos, etc… • Los jugadores se representan en la pantalla como avatares que realizan las mismas acciones que los usuarios

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces basadas en gestos • El uso principal de estas interfaces es el entretenimiento en los hogares • Los usuarios son muy diversos: niños pequeños, adultos, personas mayores, …

• Vídeo Milo 30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces basadas en gestos Algunos ejemplos: • Microsoft Kinect 3D Scanning Demo at Gadget Show Live 2013

• Wii and Kinect hack into your emotions 30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces basadas en gestos Algunas consideraciones prácticas: • ¿Cómo reconoce el ordenador los gestos que realizan los jugadores? – Tener en cuenta el movimiento de la mano y el contexto

• ¿Tener un dispositivo de control es más intuitivo que realizar gestos libremente? – Para juegos, ejercicios, bailes, ... 30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces multimodales Las interfaces multimodales tienen como objetivo generar experiencias de usuario más ricas y complejas: • Permitiendo transmitir la información utilizando diferentes modalidades: táctil, vista, sonido, habla… • Soportan métodos más flexibles, eficientes y expresivos de interacción persona-ordenador • Las modalidades más utilizadas suelen ser la voz y la vista 30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces multimodales

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces multimodales Algunas consideraciones prácticas: • Es necesario reconocer y analizar el habla, los gestos y la mirada • Hay que considerar que se gana al combinar las diferentes entradas y salidas • El modo de hablar y gesticular que se utiliza entre las personas ¿es adecuado para comunicarnos con un ordenador? 30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces hápticas • La interfaces hápticas agregan la sensación del tacto a la interacción con los ordenadores. • Cuando se tocan objetos virtuales, la sensación es de tacto real y tangible.

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces hápticas • Configuración básica de un sistema háptico 2

4

3 Sensors

Muscles

1 Human

Computer haptics

End effector

Machine

Hand

1 Virtual object

2

4

3

Sensors Actuators

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces hápticas • La información háptica combina: – Información táctil: se refiere a la información adquirida por sensores conectados al cuerpo (sensaciones sentidas por la piel). Permite al usuario sentir texturas, temperatura, vibración… – Información kinestésica o información de retorno de fuerza: se refiere a la información adquirida por los sensores en las articulaciones 30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

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

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

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

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces hápticas CYBER GRASP SYSTEM

PHANTOM INTERFACE

MAGLEV HAPTICS 30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces hápticas • Aplicaciones

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces hápticas Algunas consideraciones prácticas • ¿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?

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

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

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces portables

•

http://www.youtube.com/watch?v=9c6W4CCU9M4&feature=player_embedded

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces portables Google glass

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces portables Google glass

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces portables Google glass

• •

http://www.dreig.eu/caparazon/2013/04/30/gafas-de-google-creatividad-innovacion/ http://www.youtube.com/watch?v=WsmnmdibHFo

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces portables Algunos ejemplos: • First Sign-Smart Hair Clip

http://www.firstsign.us/ 30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces portables Ejemplos de sensores fisiológicos: • Sony-core-smartband – http://www.wearable-technologies.com/gadgets-ofthe-month/sony-core-smartband

• Nymi-Wearable – http://www.wearable-technologies.com/gadgets-ofthe-month/nymi-wearable-authenticationtechnology

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces portables Algunos ejemplos: • Evena Eyes-On Glasses – Dispositivo de bajo coste para clínicas y hospitales. Visualización de imágenes multiespectrales, imágenes anatómicas en tiempo real, tecnología see-through,… – http://www.wearable-technologies.com/gadgets-of-the-month/evena-eyes-onglasses

• Hexoskin: Wearable Body Metrics – http://www.hexoskin.com/en

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

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 30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

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 30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces Cerebro-Ordenador • Tipos de BCI

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces Cerebro-Ordenador • Control de juegos

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces Cerebro-Ordenador • Control de robots, rehabilitación

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces Cerebro-Ordenador • Neuro-feedback

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces robóticas Hay diferentes tipos de interfaces robóticas: • Robots remotos utilizados para investigación (lugares inaccesibles, peligrosos) • Robots domésticos que ayudan en las tareas del hogar • Robots de compañía • Robots sociables, con capacidad emocional

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces robóticas Robots de compañía • Aibo (Sony, Japón) • I-Cat (Philips, NL) • Paro (Wanda et al, Japón) • Huggable (MIT, USA)

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces robóticas Ventajas: • Los robots remotos permiten realizar tareas complejas o imposibles para los humanos. • Los robots de compañía han resultado terapéuticos, siendo capaces de reducir el estres y la soledad.

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces robóticas Algunas consideraciones prácticas: • ¿Cómo reaccionan los seres humanos ante robots físicamente diseñados para expresar comportamiento (expresiones faciales, etc.)? ¿Hay diferencias con los personajes virtuales? • ¿La interacción debe diseñarse para permitir que los usuarios interactúen como si fuera con otro humano o con un ordenador (presionando botones, etc.)?

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces emocionales • La Computación Afectiva es un campo emergente cuyo objetivo es el desarrollo de sistemas inteligentes capaces de dotar a un ordenador con la habilidad de reconocer, interpretar, procesar y expresar emociones.

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces emocionales • La expresión de las emociones se realiza a través diferentes canales, visibles o no visibles: expresiones faciales, gestos, voz, señales biológicas… • Hay que capturar la información afectiva y analizarla para mejorar la interacción con el usuario.

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces emocionales

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces emocionales

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces emocionales Aplicaciones: • Aplicaciones adaptables para personas con autismo • Entretenimiento: las emociones se utilizan para dar más realismo a los videojuegos

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces emocionales Algunos ejemplos: • Rosalind Picard: Emotion Technology – https://www.youtube.com/watch?v=ujxriwApPP4

• E-motions – https://www.youtube.com/watch?v=n8wJ8tjmnmU

• Lie to me – https://www.youtube.com/watch?v=9zvTgL2e044

• Human Emotional Interaction – http://sopi.media.taik.fi/research/hei/ 30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces robóticas y emocionales Kismet (C. Breazel) • Uso de una cabeza robótica humanoide que expresa emociones para estudiar: – El efecto de las emociones en la IPO – Aprendizaje de comportamientos sociales de los robots durante juegos entre humanos y robots

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Interfaces robóticas y emocionales Algunos ejemplos: • Cambridge Ideas - The Emotional Computer – https://www.youtube.com/watch?v=whCJ4NLUSB8

• NSN: Social Robots – https://www.youtube.com/watch?v=ZAMR7F47oBc

• ZENO R25 :: World's 1st advanced social robot :: Kickstarter – https://www.youtube.com/watch?v=8IuTLpMe6zY

• Future Humanoid Robots -From Fiction to Reality – https://www.youtube.com/watch?v=13JGGbB2ctM 30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Otras interfaces novedosas • No siempre es fácil clasificar una interfaz

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Otras interfaces novedosas • CUBES (Interaction Lab)

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Otras interfaces novedosas • ZeroN - Levitated Interaction Element – Interfaz que desafía la gravedad.

• Jinha Lee, Rehmi Post, and Hiroshi Ishii. 2011. ZeroN: mid-air tangible interaction enabled by computer controlled magnetic levitation. Proceedings of the 24th annual ACM UIST '11. 327-336. 30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Otras interfaces novedosas • inFORM - Interacting With a Dynamic Shape Display

tangible.media.mit.edu/vision/ 30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Otras interfaces novedosas • MaKey MaKey: An Invention Kit for Everyone

kickstarter.com/projects/joylabs/makey-makey-an-invention-kit-for-everyone 30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Otras interfaces novedosas • LUX - game projection in urban space – Videojuego sobre la fachada de un edificio en Stuttgart, Alemania.

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Otras interfaces novedosas Algunos ejemplos: • Unbelievable Bus Shelter | Pepsi Max • SuperMario In An Augmented World (Noche en Blanco 2010, Madrid) • Meet Sphero 2.0

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

Resumen • Desde la era de las WIMP/GUI han surgido muchas interfaces innovadoras incluyendo voz, móviles, portables, tangibles, etc. • La decisión sobre el estilo o el paradigma de interacción a tener en cuenta para un desarrollo específico es altamente dependiente del objetivo de la aplicación y del público objetivo al que esté dirigida. • Para diseñar e implementar una interfaz hay que tener en cuenta los aspectos concretos que se potencian y las limitaciones que tiene cada una. 30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia