(NUI) Natural User Interface – Diseñando con gestos en espacio aéreo

El movimiento de las manos es uno de los gestos más naturales e intuitivos, basta recordar a personas con las que hemos mantenido una conversación u observado mientras lo hacen y también nosotros mismo lanzando gestos de forma natural e intuitiva para comunicar o apoyar una idea.

starkHace un par de meses hemos estado metidos de cabeza diseñando y LUCHANDO con Leap Motion, personalmente esta tecnología me ha impresionado harto, si bien el lugar donde las personas interactuan con este tipo de interfaces es en las películas (Taller de Tony Stark) ahora estamos mas cerca de llevarlas a la realidad, eso si a menor escala y producciones complejas que son más efectista.

Leap Motion permite interactuar con la interfaz en un espacio aéreo sin tener contacto físico, sin usar un mouse, teclado, wacom, ni un gamepad, nuestro objetivo principal es definir como input gestos. Leap Motion cuenta con una bilbioteca de gestos básicos y testeados, cercanos a los que acostumbramos a realizar en otras interfaces y que han formando hábitos, aprendizaje y comprensióin. La comprensibilidad es fundamental para generar una NUI (Natural User Interface).

Elon Musk es el fundador de PayPal, Tesla Motors y SpaceX.
Herramienta de diseño interactivo: El uso de NX, un controlador Leap Motion y su propia gama de pantallas diseñadas a medida, SpaceX está explorando métodos de ingenieria para acelerar el flujo de trabajo mediante el diseño 3D. (y además es super cool!).
 

Heurísticas de LEAPMOTION

  1. Algunos gestos están muy bien definidos, otros son mucho más difícil de leer. Desde una perspectiva de producción, lo difícil es detectar estos gestos con un alto grado de precisión.
  2. Ergonomía. Teniendo en cuenta las limitaciones del cuerpo humano, el lugar de uso, y el contexto para la interacción, ¿cuáles son los problemas ergonómicos? ¿Alguien puede realizar esta interacción mientras se está relajado, o crea una tensión innecesaria? ¿El uso repetido de gestos puede convertirse estresante? ¿La interacción requiere un movimiento poco natural?.
  3. Dada la interacción configurada en una aplicación, ¿Son las transiciones claras y fáciles de aprender? ¿Qué tan fácil es detectarlas? ¿Qué sucede en el caso de las transiciones ambiguas?.
  4. El feedback puede tomar un montón de formas; visual, audio o háptica . La falta de información necesaria en la interfaz puede hacer fracasar una interacción.

 

Gestos predefinidos

gesture basic

  • Swipe: Movimiento lineal con la mano y dedos.
  • Circle: Dibujar un circulo en el aire.
  • Screen Tap: Movimiento como si pulsara sobre la pantalla.
  • Key Tap: Movimiento como si pulsara un botón de un teclado.

Además se puede obtener información como:

Hands: Información de las manos, la identidad (derecha o izquierda), la posición, orientación, velocidad, una lista con los dedos asociados a la mano…
Arm: Información del brazo, tamaño, orientación…
Fingers:  Información de cada dedo de una mano, son identificados por nombre y se puede obtener la dirección y posición. Además podemos obtener información de cada uno de los huesos:
Bone: Describe la posición y orientación de cada uno de los huesos de la mano.

See more at:

Cómo aprovechar al máximo las partituras de interacción

El pasado sábado 3 de octubre asistí al workshop diseño de interacción y experiencia en servicios, dictado por los diseñadores Katherine Exss y Herbert Spencer.

Uno de los principales temas fue el lanzamiento de la nueva versión de las partituras de interacción PiX, junto con ello app online (que por ahora esta disponible para ser usada en mozilla) y la actualización de las descarga de Templates & Stencils para Omnigraffle e Illustrator, para ser más precisos PiX version 4.1.0. En esa misma instancia además se mencionó sobre la escalabilidad con la que se está trabajando la herramienta y el objetivo de ser open source, así incentivar a los diseñadores de interacción presentes a apoyar en la mejora y evolución de esta herramienta.

Y bueno, pasando al lado de las trinchera del saber cómo podemos sacarle provecho y medir si flujo de interacción es realmente de calidad y funciona en el negocio.

Pero antes de… ¿qué es una partitura de interacción?

Es un entregable que permite encapsular el flujo de interacción, la cualidad y calidad de la experiencia que proponemos al usuario, a nuestros colegas y a nuestros clientes.

Un ejemplo:

pix online

En el ejemplo la partitura está dividida en tres capas:

  1. La capa del servicio
  2. La capa de la interacción
  3. La capa del usuario

 

La capa del usuario

Esta capa muestra los objetivos de la persona mediante el desarrollo de su modelo mental de la tarea en cuestión. También muestra las emociones (esperadas) involucradas en la experiencia global.

La capa de interacción

Esta es la capa del diálogo que representa las acciones concretas sucediendo en la interfaz: gestos, mensajes, acciones; toda manipulación directa de elementos y constructos sucediendo en el punto de contacto.

La capa del usuario

Esta es la capa del sistema que muestra lo que ocurre tras bambalinas, aquello que permite que el servicio se desarrolle; todas las acciones de apoyo que son entregadas y presentadas a la persona.

 


 

Teniendo esto claro, podemos sacarle provecho en 2 importantes puntos: 1) Test deUsuario y 2) Seguimiento con Google Analytics.

1) Apoyando el test de usuarios con PIX

Si bien a la hora de testear un producto digital, debemos escoger una o varias tareas que deberá llevar a cabo el usuario, para esto debemos revisar el sistema y ver cuales son aquellas que puedan ocasionar problemas de usabilidad (usando analytics, paseos cognitivos u otro). Sería de gran ayuda si en los entregables se sumaran las partituras de interacción, así tendríamos las interacciones que son el core del proyecto y esta nos permitiría liderar un test con material importante y comparar por ejemplo cómo son las emociones “esperadas” involucradas en la experiencia y así ir validando la hipótesis.

2) ¿CONVIERTE NUESTRA INTERACCIÓN?

Usando Google Analytics podemos configurar un embudo de conversiones para medir la cantidad de entradas y salidas, porcentaje de las consecuciones de objetivos (cuantas usuarios son los que convierten) y abandonos, llevando esto al ejemplo de la partitura, deberíamos medir un flujo.

Configurar embudo de conversión en Google Analytics

Para configurar en Google Analytics: ir a Setting > Objetivos (en vista) > Nuevo Objetivo 

Paso 1: Creación

crear embudo en analytics

Paso 2: Visualización

embudo-conversion-google-analytics-prueba

 

¡Ya esta! has creado un embudo de conversión para realizar seguimiento de flujos a tu proyecto.

fuentes:

Interaction notation for UX design
Crear Partituras de Interacción online con Mozilla
Créditos imagen @Tatov 

 

Áreas de alcance en dispositivos móviles y tablets

Así como en la web existen los ‘heatmaps’ o mapas de calor (ejemplos de estudio con Eye Tracking), para móviles y tablets también hay áreas calientes donde en estas zonas es mas fácil acceder y por ende hay una mayor interacción dependiendo de la posición, el uso, tamaño del dispositivo y lo mas importante el contexto en que los usuarios lo usan.

Gran parte de la información de este post (móviles) se ha extraído de un estudio realizado por Steven Hoober (@shoobe01) en donde investiga la forma en que la gente interactúa con sus dispositivos móviles en donde se observaron a 1.333 personas, durante 2 meses.

En dispositivos móviles

En las figuras a continuación se ilustran las áreas y alcances de interacción (dedos<->pantalla), cada color indica el áreas que el usuario puede alcanzar con el dedo para lograr la interacción con la pantalla. verde indica que puede llegar fácilmente; amarilla indica que requiere un mínimo esfuerzo, y rojo es un área que requiere cambiar el modo en que están sosteniendo un dispositivo (imagen 1 y 2 una mano). Estas áreas son aproximadas y varían para los distintos tipos de usuarios, la forma en que wl usuario está sosteniendo el teléfono y el tamaño de este.

Una mano

El 49% de los usuarios observados utilizaban sus móvil con una sola mano.

HoldPhones_Figure-1 copia

Para el caso de los zurdos estos hacen lo contrario.

Dos manos

Sosteniendo

El 36% de los usuarios observados utilizan la posición Cradling (acunado) de dos formas distintas: con el pulgar o indice.

HoldPhones_Figure-3

 Usando

El 15% de los usuarios observados de teléfonos móviles usaban sus dispositivos con las dos manos y en dos posiciones.

HoldPhones_Figure-4

Quienes usan el dispositivo de forma horizontal en su mayoría son para hacer ingreso de datos (ej: chat  y email) y jugar.

 

En tablets

En primer lugar, cuando sostenemos un Tablet lo hacemos sujetando cerca de los extremos superiores, y por ende los pulgares se ubican en el tercio superior de la pantalla, cerca de las esquinas. En segundo lugar, las tablets de mas pulgadas o más grandes hacen que sea difícil de llegar al centro. Entonces el control primario de la aplicación (menús, accesos, opciones, acciones, filtros u similares) debiese estar en estas zonas. En tercer lugar, considerar que hay posiciones y formas de interactuar con un tablet o móvil que son especificas al realizar una tarea.

Instapaper y Twitter para iPad son un buen ejemplo de esto:

ipad-instapaper

ipad-twitter

Fuentes y mucha más información en:

This Is Why the iPhone’s Screen Will Always Be 3.5 Inches

Diseñando sitios amigables para el iPhone

10 recomendaciones para diseñar una web para un iPad

Designing For Touch

How Do Users Really Hold Mobile Devices? 

Gestos Multi-touch

Primero que todo ¿que es Multi-touch? – Esta es una tecnología que permite la interacción de hombre y máquina mediante movimientos táctiles conocido como gestos táctiles en pantalla. En resumen y más fácil de entender permite al usuario hacer gestos con los dedos para manejar información, por ejemplo: pasar fotos, ampliarlas con un simple movimiento, etc.

Un ejemplo sencillo de un gesto es el “Spread, Se utilizan dos dedos para acercar la imagen, el usuario coloca dos dedos el pulgar y un dedo sobre la pantalla y para agrandar los separa sin levantarlos de la pantalla.

A continuación dejo 2 recursos muy completos en donde es muy fácil de  interpretar los distintos tipos de gestos y pueden ser utilizados de forma gratuita para cualquier tipo de proyecto.

Gestos Multi-touch

1 – Gesture Reference Guide
Esta guía contiene: 1) resumen de los gestos básicos 2) la forma de utilizar estos gestos para apoyar las acciones de Usuario 3)representaciones visuales de cada gesto para usar en la documentación de diseño y prestaciones.
Formatos: pdf, eps. omnigraffle stencil, visio stencils y visio.

Esture Reference Guide

2 – Touch Gesture Icons
Los iconos son libres para usar en cualquier proyecto personal, comercial, incluyendo el diseño web, software, aplicaciones, publicidad, cine, vídeo, juego de ordenador, diseño gráfico, ilustración, propios o para clientes.
Formatos: psd, eps, png en cinco tamaños diferentes: 48px, 64 px, 128px, 256px y 512px

gesture-icons-001