Interacciones con el puntero

Los usuarios de computadoras de escritorio dependen de dispositivos apuntadores, como un mouse o un panel táctil, para interactuar con tu app. Para brindar una experiencia óptima en computadoras de escritorio, admite eventos de puntero clave, como desplazamiento, desplazamiento, clic principal y clic secundario.

Aspectos a tener en cuenta al adaptar la app a las entradas de computadoras de escritorio

1. Agrega estados cuando se coloca el cursor sobre un elemento e interacciones a tu sistema existente.
2. Se tiene en cuenta la interacción con el botón derecho para aumentar la eficiencia.
3. Los objetivos deben tener un tamaño más preciso.

Clic principal

El clic principal, o en la mayoría de los casos el clic izquierdo, es la principal interacción del cursor en la que confía un usuario de computadora. La regla general es que un usuario debería poder completar todos los recorridos principales del usuario solo con clics principales. No ocultar la funcionalidad de los clics principales no solo es bueno para la visibilidad, sino que también es fundamental para las tecnologías de asistencia, como la Accesibilidad con interruptores.

Clic secundario

Si bien las interacciones táctiles se basan en mantener presionado un botón, los usuarios de computadoras esperan que los menús contextuales aparezcan con un clic secundario, como un clic con el botón derecho del mouse o un toque con dos dedos en un panel táctil. Para una experiencia óptima en computadoras de escritorio, configura tu app para que active los menús contextuales con un clic secundario, en lugar de requerir un clic prolongado.

Se hace clic con el botón derecho en una tarjeta para mostrar un menú contextual con más opciones.

Colocar el cursor sobre un elemento

Además del cambio de ícono del cursor, la interactividad también se puede indicar cambiando el estado visual de un elemento cuando se coloca el cursor sobre él. Para obtener orientación sobre el diseño, consulta estados.

La acción de colocar el cursor sobre un elemento también puede revelar información o acciones complementarias, como información sobre herramientas o acciones de lista anidadas en menús contextuales o menús de desbordamiento.

Aquí, se usa la función de desplazamiento para mostrar información adicional en una sugerencia y más interacciones.

Arrastrar y soltar

En las pantallas táctiles, arrastrar requiere una presión prolongada, ya que el deslizamiento con un dedo se reserva para el desplazamiento. El arrastrar y soltar debe ser instantáneo con los dispositivos apuntadores que tienen métodos de desplazamiento dedicados, como una rueda de desplazamiento o un deslizamiento con dos dedos en un panel táctil.

Tarjetas arrastrables como interacción alternativa.

Selección

Proporciona un destino de clic exclusivo para optimizar las interacciones de selección en la experiencia de escritorio.

En lugar de mantener presionado para revelar las opciones de selección, la versión para computadoras permite usar casillas de verificación cuando se coloca el cursor sobre ellas.

Tamaño objetivo

Cuando definas el tamaño de los elementos de la IU para las interacciones con el cursor, evita los botones que sean demasiado grandes o que tengan objetivos táctiles intrínsecos más allá de los límites visuales del elemento.

check_circle

Qué debes hacer

Establece un ancho máximo para los botones y sus objetivos cuando se usa un dispositivo de puntero.

cancel

Qué no debes hacer

Permite que los botones se expandan a todo el ancho o mantengan los objetivos táctiles intrínsecos.

Los objetivos del puntero pueden ser más pequeños que el objetivo táctil estándar de 48 × 48 dp para interacciones alternativas del cursor, como un archivo que aparece principalmente después de seleccionar el elemento.

Para obtener más información sobre el diseño de entradas, consulta Entradas de Material Design. Obtén más información para implementar la compatibilidad con mouse y panel táctil.