Comprender los gestos para el diseño de la interfaz de usuario
Publicado: 2021-03-29Tocar, deslizar, arrastrar, presionar prolongadamente: estos son solo algunos de los gestos que han llegado a dominar nuestras experiencias digitales. Los iPhones con pantalla táctil incorporaron los gestos móviles hace años y no hemos mirado atrás desde entonces.
Los gestos afectan la forma en que interactuamos con las interfaces, incluidos teléfonos, computadoras portátiles y iPads. Pero no tenemos que ir muy lejos para encontrar una interfaz gestual más allá de nuestros dispositivos de trabajo y entretenimiento. Ya no es raro usar gestos al interactuar con pantallas de automóviles o lavabos de baños.
Las interfaces de usuario naturales (NUI) son tan naturales para los usuarios que la interfaz se siente, ya veces lo es, invisible, como una interfaz de pantalla táctil. Algunas NUI incluso usan control por gestos, lo que permite a los usuarios interactuar con la interfaz sin contacto físico directo. BMW lanzó recientemente una función de control de gestos que brinda a los usuarios un control sin contacto sobre el volumen del automóvil, las llamadas y más.
Los gestos son cada vez más comunes en el diseño de la interfaz de usuario y desempeñan funciones cada vez más complejas en nuestra vida cotidiana.
A medida que avanza la tecnología, los diseñadores y las empresas de UX y UI deberán adaptarse. No es necesario conocer todos los entresijos tecnológicos ni tener un conocimiento profundo de la inteligencia informática. Aún así, debe tener una comprensión básica de las capacidades, funciones y mejores prácticas de diseño para la tecnología de gestos.
Lo que hace un buen gesto
Entonces, ¿qué son los gestos?
Los gestos son una forma de comunicarse. Durante mucho tiempo hemos utilizado gestos con las manos y movimientos de cabeza para ayudar a transmitir significado, y ahora, los gestos juegan un papel importante en la comunicación con las interfaces de usuario.
Los buenos gestos proporcionan una comunicación eficaz y eficiente que se alinea con nuestra forma de pensar. Nuestros pensamientos y conocimientos influyen en la forma en que hablamos y en el uso que hacemos de los gestos, especialmente en el diseño de la interfaz de usuario. Considere cuánto más fácil es para las generaciones más jóvenes que crecen en torno a la tecnología moderna captar los gestos, o cómo el acto de deslizar imita empujar o limpiar algo. Es por eso que comprender a sus usuarios es esencial, incluso en el diseño de gestos.
Los gestos cruzan la barrera entre el mundo físico y el digital, permitiéndonos interactuar con los medios digitales con nuestros cuerpos. De alguna manera, hace que el uso de aplicaciones digitales sea más divertido, pero esto no es suficiente para que un gesto sea bueno.
Un buen gesto de movimiento mejora la usabilidad al hacer que las aplicaciones sean más fáciles de usar en todos los contextos. Los gestos bien diseñados tienen una curva de aprendizaje más corta porque se sienten naturales y son fáciles de aprender. Para citar a Bill Gates:
“Hasta ahora, siempre hemos tenido que adaptarnos a los límites de la tecnología y conformar la forma en que trabajamos con las computadoras a un conjunto de convenciones y procedimientos arbitrarios. Con NUI, los dispositivos informáticos se adaptarán a nuestras necesidades y preferencias por primera vez y los humanos comenzaremos a utilizar la tecnología de la manera que nos resulte más cómoda y natural”.
Beneficios de la tecnología de gestos
El amplio uso de las interfaces gestuales se debe a los muchos beneficios que conllevan. Tres de los beneficios más significativos de los gestos son interfaces más limpias, facilidad de uso y finalización de tareas mejorada.
1. Interfaces más limpias
Los humanos consumen más contenido que nunca, las empresas usan más datos y la tecnología continúa brindando más servicios. Con este aumento en el contenido, es fácil que las interfaces y las pantallas parezcan desordenadas. Los diseñadores pueden usar gestos para reducir la cantidad de elementos visuales, como botones, que ocupan espacio.
2. Facilidad de uso
Como se discutió anteriormente, las interacciones se vuelven más naturales con una interfaz basada en gestos. La facilidad de los simples gestos con las manos nos permite utilizar la tecnología con el mínimo esfuerzo a la máxima velocidad.
3. Finalización de tareas mejorada
Las tasas de finalización de tareas y las tasas de conversión aumentan cuando hay menos que hacer un usuario para completar una tarea. Es más probable que termine una tarea cuando requiere menos esfuerzo. Una interfaz de usuario basada en gestos aprovecha esto al hacer que las tareas sean simples y rápidas. Incluso pueden reducir la cantidad de pasos necesarios para completar una tarea.
Tipos de gestos en diseño de interfaz de usuario
El diseño táctil ha llevado al desarrollo de muchos tipos de gestos, los más comunes son tocar y deslizar. Hay tres categorías de gestos:
- Gestos de navegación (para navegar)
- Gestos de acción (para tomar acción)
- Transformar gestos (para manipular contenido)
Los siguientes son algunos de los gestos más comunes en las interfaces con los que todos (o casi todos) los usuarios están familiarizados, aunque no conscientemente. Mencionamos pantallas, pero puede sustituir la pantalla por un panel táctil o cualquier otra interfaz de gestos.
Tocar
Un gesto de toque es cuando toca la pantalla con un dedo para abrir o seleccionar algo, como una aplicación o una página. Aquí hay un consejo: diseñe elementos de interfaz en los que se pueda hacer clic para que se pueda hacer clic en todo el cuadro o fila, no solo en el texto. Dar a los usuarios más espacio aumenta la usabilidad.
Doble toque
Tocar dos veces es cuando toca la pantalla dos veces seguidas en una sucesión cercana. Muchas aplicaciones usan este gesto para acercar, pero en Instagram, los usuarios pueden tocar dos veces una foto para que le guste.
Golpe fuerte
Deslizar implica mover el dedo por la pantalla en una dirección, tocar hacia abajo en un lado y levantar el dedo en el otro. Los gestos de deslizamiento se utilizan a menudo para desplazarse o cambiar de página. Tinder usa deslizar el dedo hacia la derecha para coincidir con un perfil y deslizar el dedo hacia la izquierda para pasar por encima de uno.
Deslizar varios dedos
También puede realizar un gesto de deslizamiento con dos o tres dedos. Esta es una función común en los paneles táctiles de las computadoras portátiles que usan deslizamientos de dos y tres dedos para diferentes acciones.
Arrastrar
Arrastrar usa el mismo movimiento general que deslizar, solo que mueves el dedo más lento y no lo levantas hasta que hayas llevado el objeto a donde quieres que esté. Usas arrastrar para mover un elemento a una nueva ubicación, como cuando reorganizas las aplicaciones de tu teléfono.
Arrojar
Al igual que deslizar, un gesto de lanzamiento es cuando mueve el dedo por la pantalla a alta velocidad. A diferencia de un arrastre, su dedo no permanece en contacto con un elemento. Las aventuras se usan a menudo para quitar algo de la vista.
Pulsación larga
Una pulsación prolongada es cuando toca la pantalla pero mantiene el dedo presionado durante más tiempo de lo habitual. Las pulsaciones largas abren las opciones del menú, como cuando mantienes presionado el texto para copiarlo o presionas una aplicación para eliminarla.
Pellizco
Uno de los muchos gestos de dos dedos, un pellizco es cuando mantiene dos dedos separados en la pantalla y luego los arrastra uno hacia el otro en un movimiento de pellizco. Los gestos de pellizco a menudo se usan para alejar la imagen después de acercarla. A veces, presentan una vista de todas las pantallas abiertas para fines de navegación.
Pellizcar-Abrir o Difundir
Un gesto de pellizco abierto o de extensión es lo opuesto a un pellizco. Sostienes tus dos dedos juntos y luego los separas. La extensión, como el doble toque, generalmente se usa para acercar.
Rotación
Para hacer una rotación, presione en la pantalla con dos dedos y gírelos en un movimiento circular. El mejor ejemplo de rotación es cuando giras el mapa en Google Maps para ver qué hay a tu alrededor.
Gestos de diseño 101
Usa lo que la gente sabe
Los gestos han existido por un tiempo, por lo que existen pautas generales para la mayoría de los gestos.
Y en la mayoría de los casos, hay reglas que querrá seguir cuando diseñe gestos para una interfaz. Al crear una aplicación, por ejemplo, deberá considerar en qué interfaces los usuarios usarán su aplicación. Existe la posibilidad de que los usuarios descarguen su aplicación en teléfonos Android y Apple, los cuales ya usan gestos específicos del producto. Deberá evaluar los gestos de las interfaces de su producto y decidir cómo los aprovechará o si vale la pena agregar gestos con los que los usuarios no están familiarizados.
Aquí hay algunas pautas útiles de gestos y movimientos para interfaces de productos populares.
- Pautas de gestos de Google
- Directrices de gestos de Microsoft
- Directrices de gestos de Apple
- Directrices de gestos de Android
Al diseñar interfaces de usuario basadas en gestos, es una buena práctica ceñirse a lo que saben los usuarios. Puede ser creativo si es necesario, pero un nivel de coherencia entre los gestos y las interfaces ayuda a mantenerlos intuitivos para los usuarios, lo que aumenta la facilidad de uso de su producto.
Si cree que se avecina un nuevo gesto, debe probarlo exhaustivamente antes de implementarlo. Llevará a cabo una serie de métodos de investigación de usuarios para probar la usabilidad, la eficacia, las curvas de aprendizaje y la satisfacción del usuario con un gesto antes de lanzarlo al público.
Tiene la opción de reutilizar un gesto conocido para un propósito diferente, pero nuevamente, debe probar la efectividad de esta estrategia con anticipación. El beneficio aquí es que los usuarios están al menos familiarizados con el movimiento.
Tomemos, por ejemplo, el uso de Instagram del doble toque para dar me gusta o "corazonar" una publicación. Por lo general, se usa un doble toque para acercar, pero funciona bien para el propósito de Instagram. También es un gran estudio en eficiencia: Tocar el corazón debajo de una publicación requiere un toque menos pero más puntería. El método alternativo de doble toque permite a los usuarios desplazarse más rápido ya que tienen toda la imagen a la que apuntar, y es intuitivo tocar el objeto que te gusta.
Los diseñadores han comenzado a desarrollar un lenguaje de diseño con manos, círculos y flechas para comunicar la intención de los gestos a los desarrolladores y estrategas de productos. Este idioma es casi universal con una desviación mínima.
Piensa fuera de la pantalla
Los gestos existen en escenarios cotidianos fuera del uso del teléfono y la computadora portátil. Un número creciente de baños públicos ha instalado lavabos sensibles al movimiento, secadores de aire y dispensadores de toallas de papel. Estos dispositivos también evitan la propagación de gérmenes, una característica ingeniosa durante la temporada de gripe. Mientras tanto, los autos sin conductor se están implementando con tecnología de reconocimiento de gestos para mejorar su efectividad y seguridad.
Pero aún puede ser creativo con los gestos del teléfono mientras piensa fuera de la pantalla. Los dispositivos han estado utilizando la rotación y la agitación como métodos de interacción desde hace años. Por ejemplo, 'Agitar para deshacer' de Apple ofrece a los usuarios la opción de deshacer una acción agitando el teléfono. Y a estas alturas, probablemente esté familiarizado con la rotación de pantallas horizontalmente para ver un video en pantalla completa.
Siempre que se prueben primero, las tecnologías de gestos creativos pueden llevar los productos más allá y aumentar la facilidad de uso.
Gestos y Accesibilidad
Los gestos, como todas las cosas, deben ser accesibles. La accesibilidad se refiere a hacer que un producto sea accesible y utilizable para todas las personas en todos los contextos, incluidas las personas con discapacidad. Los gestos deben adherirse a las mejores prácticas de diseño accesible para contribuir a un entorno equitativo, cumplir con la Ley de Estadounidenses con Discapacidades (ADA) y permitir que todos los que puedan beneficiarse de su producto lo usen.
Además de asegurarse de que los gestos de la interfaz sean accesibles, vale la pena considerar cómo puede usar los gestos para mejorar la accesibilidad. Apple se dio cuenta de que las pantallas planas y sin textura del iPhone presentaban un obstáculo para los usuarios ciegos. Entonces, usaron su interfaz basada en gestos para crear gestos adicionales basados en la accesibilidad que ayudan a las personas con discapacidad visual a usar sus productos.
No te olvides de la experiencia de usuario
Es común usar los términos UX y UI indistintamente, pero esta es una práctica incorrecta. UX significa experiencia de usuario y se ocupa de las percepciones y emociones del usuario mientras interactúa con un producto. UI significa interfaz de usuario e involucra los elementos de un producto con el que interactúa un usuario. La interfaz de usuario es un elemento importante del diseño de UX. Si está interesado en obtener más información sobre cada uno y sus diferencias, consulte nuestra guía sobre UX vs UI Design.
El punto aquí es que UX y UI son diferentes, pero es fundamental tener en cuenta la experiencia del usuario al diseñar interfaces. Los gestos de la interfaz de usuario que son divertidos pero inútiles o interesantes pero tienen poca facilidad de uso son el resultado de diseñadores y desarrolladores que se olvidaron de la experiencia del usuario.
No importa cuántas pruebas haya realizado, dé a los usuarios la opción de eliminar ciertas funciones de gestos. Tocar es un gesto vital de la pantalla táctil con el que todos están familiarizados, pero algunos gestos no son cruciales para el funcionamiento de un producto y existen solo para hacerlo más útil. A veces, gestos como estos molestan a los usuarios que no están familiarizados con ellos o activan el gesto sin querer.
Por ejemplo, en una Mac, al deslizar dos dedos hacia la izquierda o hacia la derecha en el panel táctil, el navegador web retrocede o avanza una página. Muchos usuarios hacen este gesto por accidente y se frustran cuando la página sigue cambiando. Entonces, Apple les da a los usuarios la opción de deshabilitar esta función y muchas otras.
Mejorar la incorporación de usuarios
La incorporación de usuarios mejora el uso exitoso de un producto al enseñar a los usuarios cómo usarlo. Piensa en un nuevo programa que, al abrirlo por primera vez, te guíe a través de todas las funciones o pasos para usarlo.
La incorporación de usuarios es importante para los gestos táctiles porque a menudo están ocultos y es fácil pasarlos por alto, especialmente si un usuario no está familiarizado con un gesto o no tiene experiencia con él en ese contexto. Si no saben que pueden usarlo o cómo usarlo, no lo harán.
Al incorporar a un usuario, desea ser breve, enseñar una cosa a la vez y seguir la curva de aprendizaje que se ha demostrado que funciona mejor en las pruebas. Los tutoriales largos y las listas paso a paso son aburridos, menos interactivos y, a menudo, se omiten.
Adopte el futuro de las interfaces de gestos
Los gestos ya están aquí. Existen en el presente, haciéndose útiles en nuestra vida cotidiana. Para los usuarios, estos gestos pueden vivir en su subconsciente mientras deslizan y tocan dos veces sin pensar. Los diseñadores de productos, desarrolladores y estrategas tienen que entender los gestos en un nivel más íntimo.
El diseño para el tacto es una parte creciente del campo. Los gestos existen en los baños y los autos, ¿quién sabe qué sigue? Abrázalo. Un producto más utilizable es un producto eficaz.
¿Tiene preguntas o desea actualizar la UX y la UI de sus productos? Estamos felices de hablar. Simplemente comuníquese.