Miguel Peribáñez | Diseñador y Consultor UX

Miguel Peribáñez - Diseñador y Consultor UX

COMO DISEÑAR UI PARA USO GESTUAL

¿Recuerdas los días en que te movías y hacías clic con el ratón para la interacción con un sitio o una aplicación? Aquellos días han pasado. Cuando Apple introdujo el primer iPhone, la tecnología multitáctil se convirtió en la corriente principal y los usuarios aprendieron que no sólo podían apuntar y tocar la interfaz, sino también pellizcar, extender y deslizar. Los gestos se convirtieron en los nuevos clics.

Hoy en día el éxito de una interfaz de usuario móvil se puede medir por la eficacia con que utiliza los gestos.

CÓMO ELEGIR UN BUEN GESTO

Cuando se trata de incorporar gestos en tu interfaz de usuario es esencial conocer tu mercado y las otras aplicaciones que tu público objetivo puede estar utilizando. Trata de emplear los mismos tipos de gestos en tu aplicación.

De esta manera, no sólo estás optimizando tu interfaz de usuario basada en el comportamiento de tu mercado objetivo, sino también diseñando un enfoque más cómodo para los usuarios desde el principio.

ENSEÑANDO GESTOS

Los gestos son una necesidad en cada aplicación móvil, pero siempre es un desafío hacer que sean obvios para los usuarios. Las interfaces táctiles proporcionan muchas oportunidades para utilizar gestos naturales como toque, deslizamiento y los pellizcos para hacer las cosas, pero a diferencia de los controles gráficos de la interfaz de usuario, las interacciones basadas en gestos a menudo se ocultan a los usuarios. Así que a menos que los usuarios tengan el conocimiento previo de que existe un gesto, no lo intentarán.

Por lo tanto, el diseño para el descubrimiento es crucial. Debes asegurarte de proporcionar los signos visuales que ayuden a los usuarios a descubrir fácilmente cómo pueden interactuar con una interfaz.

INTENTA EVITAR TUTORIALES DE BIENVENIDA

Los tutoriales son una práctica muy popular para aplicaciones impulsadas por gestos. Incorporar tutoriales en tu aplicación en muchos casos significa mostrar algunas instrucciones al usuario para explicar la interfaz. Sin embargo, un tutorial de interfaz de usuario no es la manera más elegante de explicar la funcionalidad básica de una aplicación. El mayor problema con los tutoriales iniciales es que los usuarios tienen que recordar todas esas nuevas maneras de usar la aplicación una vez que entran. Demasiada información a la vez podría llevar a más confusión.

Por ejemplo, la aplicación Clear empieza con un tutorial obligatorio de 7 páginas y los usuarios tienen que leer pacientemente toda la información e intentar retenerla a su memoria. Eso es un mal diseño porque requiere que los usuarios trabajen de antemano incluso antes de que prueben la aplicación.

Interacción Gestual

EDUCAR EN EL CONTEXTO DE LA ACCIÓN

Cuando se trata de enseñar a los usuarios a usar tu interfaz de usuario, yo recomendaría hacerlo sobre todo educando en el contexto de la acción (cuando un usuario realmente la necesita). Dada una cierta interacción, las instrucciones pueden ser transformadas en un descubrimiento más gradual. Utiliza los momentos y el enfoque en explicar una sola interacción en lugar de tratar de explicar todas las acciones posibles en la interfaz de usuario.

A continuación puedes ver una pantalla de explicación de acciones gestuales en la aplicación de YouTube para Android. La aplicación tiene una interacción basada en gestos, pero no utiliza un tutorial para enseñar a los usuarios. En su lugar, utiliza sugerencias que aparecen en el primer lanzamiento para los nuevos usuarios, uno a la vez que el usuario llega a la sección correspondiente de la aplicación. La técnica se basa en comandos de texto que instan a los usuarios a realizar un gesto y describe el resultado de la interacción con una descripción corta y clara.

Interacción Gestual

USA ANIMACIONES PARA COMUNICAR GESTOS

Los gestos, siendo tan útiles, no serían nada sin animación. Como diseñador, puedes hacer uso de la animación para transmitir información sobre las acciones disponibles. Por ejemplo, para que los usuarios sepan que pueden interactuar con un determinado elemento, puedes crear un comando de texto en el elemento interactivo y animar el resultado de la interacción, como se muestra en el siguiente ejemplo.

Interacción Gestual

Hay tres técnicas populares para ayudar a educar a los usuarios basadas en el uso de la animación. La primera es un movimiento indirecto. La sugerencia de movimiento, o sugerencia visual animada, muestra una vista previa de cómo interactuar con un elemento al realizar la acción. Su objetivo es crear asociaciones entre el gesto y la acción que desencadena. Por ejemplo, la mecánica del juego de los monstruos de Pudding se basa únicamente en gestos, pero permiten a los usuarios obtener la idea básica de qué hacer sin tener que adivinar. La animación transmite información sobre la funcionalidad: se muestra un escenario con animación y se hace claro a los usuarios qué hacer.

Interacción Gestual

Una segunda técnica son las pistas de contenido. Las pistas de contenido son sutiles pistas visuales que indican lo que es posible. Un ejemplo a continuación demuestra un contenido de pistas para las tarjetas, simplemente muestra que existen otras tarjetas detrás de una tarjeta actual y esto deja claro que el deslizamiento es posible.

Interacción Gestual

La tercera y última técnica que me gustaría mencionar es la de la disponibilidad. Puedes dar a algunos elementos de tu interfaz de usuario una alta disponibilidad para señalar a los usuarios a las características de una interfaz y utilizar rebotes o pulsos como indicador de un gesto disponible. Un ejemplo de esta técnica se puede encontrar en Apple iOS. Cuando un usuario teclea el icono de la cámara, la pantalla de bloqueo rebota, revelando la aplicación de la cámara debajo.

Interacción Gestual

CONCLUSION

Si bien es cierto que los gestos táctiles son en su mayoría invisibles para nosotros, hay una serie de técnicas de diseño que pueden dar a los usuarios un conocimiento inicial de lo que es posible. Los consejos justo a tiempo, las pistas con animación y las pistas de contenido son algunas de las maneras en que los gestos ocultos pueden ser revelados.

:)