PDF de programación - Interfaces Naturales Hombre-Máquina

Juan Carlos Marino Dodge
Juan Carlos Marino Dodge

Application Developer: Mobile
Application Developer: Mobile
Package Solution Consultant
Package Solution Consultant

IBMIBM

Quien soy



 Ingeniero de Sistemas – Universidad del Norte.
 Master Certificate IS/IT Project Management – Villanova

University.

 Application Developer: Mobile / Package Solution

Consultant – IBM Colombia.

 Android, iOS.
 IoT: Domótica, Telemetría, Integración, Cloud.
 Design Thinking – Agile.
 I + D + i
 Conferencista, Asesor de Tesis, Emprendedor.

Agenda


 Interfaces Hombre – Máquina.
 Qué es una Interfaz Natural Hombre – Máquina.
 Reglas Básicas.
 Características principales.
 Toques / Gestos / Voz.
 Mecánica – Dinámica y Estética.
 Oportunidades.
 Ejemplos.

Interfaz Hombre –

Máquina





Permiten expresar nuestros deseos al dispositivo y/o

visualizar su respuesta.

Tipos de Interfaces
Hombre – Máquina



 Hardware.
 Línea de comandos.
 Interfaz Gráfica de Usuario (GUI – Graphical User

Interface).

 Menús.
 Híbridas.

Hardware



Hardware



Línea de Comandos



Línea de Comandos



 Lenguaje formal.
 Inflexible en sintaxis.
 Carga de memoria para el usuario.
 No hay mucha retroalimentación.
 Conocidas como CLI (Command Line Interface).

GUI


GUI


 Representación gráfica en pantalla de los programas,

datos y objetos.

 Emplea monitor gráfico.
 Emplea dispositivos apuntadores.
 WYSIWYG.
 Respuesta visual a las acciones.
 Paradigma escritorio.

Menús


Menús


 Lista de opciones que se muestran.
 Navegar dentro de sistema.
 Seleccionar elementos de una lista.
 Fáciles de aprender y recordar.

Híbridas



Híbridas



 Combinación de cualquiera de las anteriores.
 Busca aprovechar las ventajas de cada una

dependiendo del contexto.

INHM


INHM


Qué es una INHM



 Hace uso de movimientos gestuales.

 Yemas de los dedos (Touch).
 Cercano a la pantalla (Gestos).
 Reconocimiento del habla (Voz).

 Movimientos “comunes”.

 Imita acciones en el mundo real.
 Imita paradigmas existentes.

 No necesita entrenamiento / capacitación.
 INVISIBLE!!!!!!

Reglas básicas



 Olvidar los estilos de interacción del pasado.
 No transcribir.
 Iniciar con interacciones simples.
 Ir añadiendo complejidad.
 Verificar si es intuitivo.
 En resumen: DE MENOS A MAS

Reglas básicas



Reglas básicas



Reglas básicas



Reto


A nivel diseño:
Como crear una interfaz en la que los usuarios se
vuelvan rapidamente expertos mientras usan acciones
que sienten naturales?

A nivel real:
Como puedo estar seguro que la interfaz se siente
natural?

Reto


NO

SI

Una INHM no es algo
“mágico” que responde a
cualquier acción,
“adivinando” de alguna
manera la intención del
usuario.

Una INHM fomenta el
desarrollo de habilidades
generando una sensación
de destreza y maestría
convirtiendo la interacción
en algo eficiente,
homogéneo y divertido.

Características



 Contexto: Aspectos Espaciales y Sociales.
 Suspensión de Incredulidad.
 Super realidad.
 Auto aprendizaje.
 Diferenciación.
 Retroalimentación.

Contexto: Reto



 En que contextos se puede aplicar INHM de manera

exitosa?

 Que acciones son naturales de acuerdo al ambiente?
 Cómo tomar esas acciones y convertirlas en

interacción?

 Como debería verse la interacción natural?

Contexto: Considerar



 Empezar con acciones que son propias del ambiente.
 Considerar contenido.

 Proveer el menor número de elementos de interfaz

que son requerido para la interacción.

 Extender la interacción de manera lógica para que se

aprendan fácilmente nuevas acciones.

Ejemplo



Contexto:

Recomendaciones



 Elementos de control no deben mostrarse si no se

necesitan.
 Ejemplo, para “ampliar” un objeto.

 Nuevos elementos sólo para comunicar estado del
sistema, sugerir próximo paso y/o consecuencia de
la acción.

 Los estados deben ser pocos y los gestos obvios.
 Sugerencia: Estado inicial y estado inicial, remover

elementos de control, imaginar como interactuar
para pasar de un estado al otro.

Contexto: Espacio



 Los ambientes 3D

pueden ser complejos.

 Tener en cuenta siempre

profundidad.
 Eje Z.

 Dar comportamiento 3D

a elementos 2D.

 El espacio de trabajo

puede ser mayor al
espacio visible.

Contexto: Social



 Soporte a múltiples usuarios interactuando.
 No es sólo interacciones entre usuario y máquina.

 Menos comunicación usuario – máquina.
 Mas comunicación usuario – usuario.
 Máquina se vuelve secundaria.

 Acoplamientos de tareas.

 Alto: Trabajar en la misma tarea.
 Bajo: Diferentes tareas para un mismo fin.
 Nulo: Tareas completamente diferentes.

Contexto: Social



 Diseñar interacción.
 Múltiples Usuarios.
 Un sólo Usuario.
 Entra Usuario.
 Sale Usuario.
 Tener en cuenta

acoplamiento.

Suspensión de
Incredulidad



 Inmersión.
 Simular objetos del mundo real.
 Extender usando mundo virtual.

 Rendimiento debe ser fluido y continuo.
 Respuesta: Haptics.
 Experiencia debe ser mejor que en el mundo real.
 Advertencia: Es muy frágil!
 Recomendación: Jugar con las reacciones físicas.

Suspensión de
Incredulidad



Super Realidad



 Tomar interacción real.

 Extender.
 Experiencia más allá del mundo real.

 Respuesta inmediata.
 Física: Inercia, interacción de elementos.

Auto aprendizaje



 Pasar de:

 Novato: Primera vez.

 Llegar a:

 Experto: Usar el sistema tal como fue concebido por

los diseñadores.

 Lo más rápido posible.
 Cambiar de:

 Cómo funciona todo el sistema?

 A:

 Que puedo hacer ahora?

Auto aprendizaje



Diferenciación



 Conoce a tus usuarios.
 Tipos de identificación.

 Flexible: Preferencias de usuario.
 Definida: Por tipo de app.
 Individual: Autenticación.
 Interactiva: Cuánto tiempo usa la app.
 Diferenciada: Tipo de usuario: normal, administrador.

 No identificar si no es necesario.

 Usuario debe obtener un claro beneficio.

Diferenciación



Retroalimentación



 Ejemplo:

 PC, click en elemento, no sucede nada.

 Reacción del usuario?

 Tablet, touch en elemento, no sucede nada.

 Reacción del usuario?

 Toda causa, debe generar un efecto.
 Tipos de retroalimentación:

 Eco
 Semántica.

Retroalimentación



 Problemas.

 Evento de activación.
 Dedos gordos.
 Activación.
 Contenido “inerte”.
 Activación accidental.
 Múltiples capturas.
 Restricciones físicas.
 “Escombros”.
 Interacción forzada.
 Captura robada.

Retroalimentación



Toques / Gestos / Voz



 Gestos no son “toques en el aire”.
 Voz no es “gestos con palabras”.
 Problema:

 Diferenciar comandos de “fantasmas”.
 En toques es menos común.
 Síndrome “micrófono abierto”.

 Solución.

 Movimientos específicos para marcar inicio y fin.
 Palabras clave en caso de voz.

Mecánica – Dinámica –

Estética


Oportunidades



Oportunidades



 Voz y sonido.
 Vista.
 Toque / Gestos.
 Posición / Movimiento.
 Biometría.

Voz y sonido



Voz y sonido



 Control por voz.

 Lenguaje para accesar comandos.

 Agente conversacional.

 Interacción sin saber comandos.

 Audio seguridad.

 Firma de voz mueve responsabilidad de seguridad del

usuario al sistema.

 Canales de datos.

 Uso de audio para transmisión de datos.

Vista.


Vista.


 Realidad aumentada.

 Capa de contenido digital añadida a contenido

natural.

 Seguridad Ocular.

 Mueve responsabilidad de seguridad del usuario al

sistema.

 Detección de emociones.

 Adaptación proactiva del sistema.



Toque / Gestos



Toque / Gestos



 Colaboración.

 Control de interfaz compartido en una forma no

posible para dispositivos de entrada individual/única.

 3 dimensiones.

 Conexión directa e inmersiva al añadir profundidad a

la interfaz.

 “Accionabilidad”.

 Simulación de objetos reales tiene la ventaja del

conocimiento acumulado del usuario sobre uso y
características del objeto.

Posición / Movimiento



Posición / Movimiento



 Control físico.

 Entradas físicas (analógicas) se convierten a digital.

 Conciencia espacial.

 Dispositivo conoce posición relativa de usuario con

respecto a otras personas y actúa como agente.

 Monitoreo de movimientos.

 Fuente de información adicional que puede usarse

para aprender y/o adaptarse.

Biometría



Biometría



 Haptics.

 Retroalimentación digital que puede imitar

sensaciones físicas.

 Monitoreo del cuerpo.

 Lectura de lenguaje corporal y actuar en consecuencia.

 Seguridad biométrica.

 Mueve responsabilidad de seguridad del usuario al

sistema.

Ejemplos



 Newton.
 Nintendo Wii.
 Color-based hand gesture recognition on Android.
 uMotio.
 Sparkfun – Gesture Sensor.
 3D Tracking Interface – Arduino.
 Haptic TouchScreen Technology.
 MIT – Tangible Media.
 Sixth Sense.
 Leap Motion.
 Manomotion.

Newton



Nintendo Wii



Gesture Android



Gesture Android



Gesture Android



Gesture Android



Gesture Android*



uMotio


Sparkfun Gesture

Sensor*


3D tracking interface*



MIT Tangible Media*



Sixth Sense*



Gracias




[email protected]

[email protected]