La interacción receptiva genera confianza en el usuario ya que les permite participar. Cuando un usuario interactúa con una app y ocurre algo que sea bonito y lógico provoca satisfacción en el usuario. La interacción es reflexiva y tiene un propósito, no es al azar, y nunca debe distraer. Esto fomenta que el usuario explore dentro de la app. ¿Qué pasará si toco esto? ¿Y esto otro?
Entrada de usuario
En material design, las apps son receptivas, sensibles y ansiosas de que haya una entrada de usuario.
- El toque, la voz, el ratón y el teclado son los principales métodos de entrada.
- Aunque los elementos de la interfaz de usuario parezcan palpables, realmente se encuentran detrás de una capa de cristal (la pantalla). Las señales visuales y de movimiento ayudan a llenar ese vacío reconociendo inmediatamente la entrada, lo cual implica una manipulación directa.
La interacción receptiva eleva una app desde algo que simplemente transmitía información cuando el usuario la solicitaba hacia algo que se comunica con el usuario de un modo palpable.
Reacción de la superficie
Respuesta de material
Reacción radial
Reacción de la superficie
Al recibir un evento de entrada, el sistema proporciona una confirmación visual instantánea en el punto de contacto de la pantalla con la yema del dedo, en el micrófono para la voz o en el campo tecla apropiada del teclado. Una forma de mostrar este reconocimiento es a través de la metáfora de la tinta, la superficie de la pantalla recubre cada hoja de papel.
El mecanismo visual central para mostrar este contacto es llamado Touch Ripple (ondas de toque). Gracias a el se puede enseñar el lugar y la duración de un evento de toque además de los aspectos dinámicos como la amplitud de la voz o la presión de un toque.
Relacionado
Buenas prácticas
Para una buena interacción receptiva, las entradas ocurren en puntos específicos, en el punto de contacto del dedo con la pantalla o en el icono del micrófono para la voz. La reacción radial aparece en dicho punto.
Ripple al tocar: presionar y soltar
Ripple al tocar: arrastrar hacia dentro y hacia fuera
Respuesta de material
Además de los ripples sobre la superficie, material por si mismo también puede reaccionar. Material puede elevarse cuando es tocado, indicado un estado activo. El usuario puede generar nuevos material o transformar los existentes al tocarlos, o directamente manipular las capas de material arrastrándolas o arrojándolas.
Relacionado
Punto de origen
Cuando un nuevo material es generado como un resultado de la interacción directa del usuario, el movimiento de la superficie debería generarse desde el punto de entrada.
Sí.
Material aparece desde el punto de contacto, visualmente atado al elemento dicho punto.
No.
El papel aparece desde el centro de la pantalla, rompiendo la relación con la entrada.
Elevación al tocar
Cuando una tarjeta o elemento es activado, deberían elevarse para indicar que es un estado activo.
Relacionado
Sí.
Material aparece desde el punto de contacto, visualmente atado al elemento dicho punto.
Reacción radial
Añade claridad a estos eventos mediante la creación de conexiones visuales desde la entrada de usuario, ya sean los dedos tocando la pantalla o la voz a través del micrófono.
Los eventos de entrada son visuales
La conexión entre un evento de entrada y una acción sobre la pantalla debería ser representada visualmente para vincularse entre ellos. Para un toque o un ratón, ocurre en el punto de contacto. Para la voz, en el icono del micrófono. Un toque de onda, ripple, indica donde y cuando se ha tocado la pantalla y pone en conocimiento del usuario que el evento de entrada ha sido recibido.
Conectar la entrada a la acción
Las transiciones, o los eventos accionados mediante eventos de entrada, deberían conectar visualmente dichos eventos de entrada. Las reacciones ripple cerca del epicentro ocurre antes que las que están más alejadas, como una onda.
Por ejemplo:
- Una secuencia de cambios de contenido: las imágenes aparecen o desaparecen.
- Una secuencia de movimientos de material: tarjetas entrando o saliendo de la pantalla.
Relacionado
Puedes ver más información sobre Interacción receptiva en la página oficial de Google en inglés pulsando aquí.