VerMás

Juan Carlos Marino Dodge
Application Developer: Mobile
Package Solution Consultant
IBM
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
Una INHM no es algo
“mágico” que responde a
cualquier acción,
“adivinando” de alguna
manera la intención del
usuario.
SI
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

juan.marino@mevolucion.com
jcmarino@co.ibm.com