De cara a diseñar las interacciones en una app móvil es imprescindible conocer cuáles son las posibilidades que tenemos. Estas vienen dadas por los gestos (gestures) que los sistemas operativos móviles permiten a los usuarios y sus restricciones. Además estos gestos para interacciones móvil se ajustan a unas reglas de interacción que veremos luego
Tabla de contenidos
Esta es la lista de gestos de interacción móvil que vamos a ver:
- Tap
- Double tap
- Long press
- Flick / scroll & pan
- Drag
- Swipe
- Pinch
- Rotate
- Shake
- Compound gestures
Lista con gestos de interacción móvil:
Tap (pinchar / pulsar)
Movimiento básico de tocar la pantallas con la punta del dedo. Se utiliza igual que si pulsáramos un botón de forma física, es decir para activar un control.
Double tap (pulso doble)
Pinchar o pulsar dos veces de forma rápida la pantalla. Comunmente se utiliza para acercar zoom o alejar el zoom.
Long press (presión larga)
Pulsar y mantener presionado el área pulsada en la pantalla. Permite acceder a funcionalidades extras como desplegar un submenú o lo más común que es seleccionar el elemento sobre el que se mantiene pulsado.
Flick / Scroll & Pan (movimiento panorámico)
Movimiento rápido con el que se ejerce poca presión en la pantalla como si lanzáramos rápidamente el contenido. Puede ser de forma vertical llamado scroll, de forma horizontal lo que se llama pan o la mezcla que sería de forma diagonal. Se utiliza para navegar y movernos por dentro del espacio de la página que estemos viendo.
Swipe (deslizar)
Deslizar uno, dos o incluso tres dedos. Normalmente será un solo dedo ya que es lo que la gente espera, pero puede aumentar en caso de que nos falten comandos. Se hace siempre de un lado para otro y es una metáfora de como si lanzáramos la pantalla. Con un dedo el significado suele pasar a la pantalla anterior si es a la izquierda o a la siguiente si es a la derecha. Con 3 dedos en iOS suele ser deshacer (izquierda) rehacer (derecha).
Drag (arrastrar)
Es un movimiento de dos pasos. Primero agarraríamos un elemento que sea agarrable con una presión larga, es decir, manteniendo presionado sobre él y luego deslizaríamos el elemento para poder moverlo de un lado a otro de la pantalla arrastrando el dedo. Precisamente, el uso del drag es arrastrar un elemento para cambiarlo de posición, por ejemplo para reordenar las apps del dispositivo móvil.
Pinch (pinzar / pellizcar)
Es darle un pellizco a la pantalla como si intentáramos agarrarlo con unas pinzas. Este movimiento tiene dos posibilidades pellizcar hacia dentro o hacia fuera, lo que sería el equivalente a soltar lo pinzado. El uso que se le da es principalmente para ampliar o alejar el zoom aunque también se puede usar para abrir contenedores. En cualquier caso, el concepto es el mismo.
Rotate (rotar)
Consiste en tocar la pantalla con dos dedos y girarlos. De este modo rotamos el elemento rotable en la dirección en la que giremos los dedos y tantos grados como movimiento hagamos. Se deduce por tanto, que la utilidad de este gesto es el de hacer que los elementos de la pantalla giren sobre sí mismos. Normalmente el punto de giro estará en el centro del elemento, pero también puede estar definido en otro punto del elemento o incluso podemos establecerlo nosotros con la colocación del primer dedo.
Shake (agitar)
El shake consiste en agarrar el teléfono y agitarlo como si de un batido se tratara. Algunas de las actividades que se atribuyen a este gesto son la de deshacer una acción que acabamos de hacer (por tanto sería igual que el swipe de 3 dedos a la izquierda) o también se puede vincular con reiniciar o con características como activar cámara por ejemplo.
Compound gestures (gestos compuestos)
Los compound gestures no serían un gesto en sí pero sí son la suma o composición de varios de los gestos anteriores creando un movimiento de súperfluidez. Como gesto compuesto más común tal vez podríamos tener la suma del pinch y el rotate que nos permitiría hacer esos dos movimientos sin tener que separar los dedos de la pantalla, es decir de una sola vez.
Reglas y consejos para hacer buenas animaciones
Una vez conocidos los gestos permitidos a los usuarios, vamos a ver una serie de reglas y buenas prácticas que nos indican Apple en las guías Human Interface y Google en las guías de Material de cara a las interacciones móvil.
Reglas
- Utilizar los gestos ya normalizados de forma predeterminada.
- Evitar el uso de gestos normalizados para realizar acciones no normalizadas, es decir usar cada gesto para lo que se espera que haga y no intercambiarlos entre ellos.
- Evitar contradecir o interferir los comandos básicos del sistema.
- Ajustar la interacción al movimiento, es decir que la acción avance o retroceda según si el gesto avanza o retrocede y que la duración de la transición sea igual a la del movimiento
- Facilitar la visibilidad de los gestos, por ejemplo mostrando una flecha de la que tirar
- Facilitar el resultado de la acción, por ejemplo, mostrando el icono de eliminar al empezar a hacer swipe a la derecha
- Encajar la dirección de la animación y del movimiento. No tiene sentido que si el usuario estire a la derecha, el movimiento vaya a la izquierda. Por ello la dirección debe ser la misma
Fuentes:
https://material.io/design/interaction/gestures.html#types-of-gestures
https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/gestures/
