Interacciones táctiles

En este tema se proporcionan instrucciones de diseño para crear experiencias personalizadas optimizadas para toques en aplicaciones de Windows.

Información general

Touch es una forma principal de interacción en Windows y las aplicaciones de Windows que implica el uso de uno o varios dedos (o contactos táctiles). Estos contactos táctiles y su movimiento se interpretan como gestos táctiles y manipulaciones que admiten una variedad de interacciones del usuario.

Tanto Windows SDK como Windows App SDK incluyen colecciones completas de controles optimizados para entrada táctil que proporcionan experiencias sólidas y coherentes en todas las aplicaciones de Windows.

Use estas instrucciones al crear controles, experiencias y marcos personalizados para las aplicaciones de Windows.

Principios de diseño

Tenga en cuenta lo siguiente a medida que diseña la experiencia táctil en la aplicación de Windows.

Optimizado para Pantalla Táctil

Las experiencias de aplicaciones de Windows deben sentirse atractivas para tocar, permitir la manipulación directa y dar cabida a interacciones menos precisas. Considere la posibilidad de aceleradores táctiles, incluidos los gestos y la integración de lápiz y voz.

Coherente en todas las posturas

La aplicación debe tener una experiencia coherente independientemente del método de entrada o la posición en la que esté el usuario. Los cambios de la posición de escritorio tradicional a la posición de la tableta (consulte Configuración recomendada para mejorar las experiencias de tableta), así como los cambios en la orientación, no deben desorientar, sino más bien sutiles y solo según sea necesario. La aplicación debe realizar ajustes sutiles en la interfaz de usuario para crear una experiencia familiar y cohesiva que se adapte a los usuarios en su contexto.

Respuesta correcta

Las aplicaciones y las interacciones deben brindar retroalimentación a los usuarios en cada fase (toque inicial, acción, toque final) de una interacción mediante animaciones que respondan al estado existente de un usuario a la vez que indican posibles acciones. Las animaciones también deben mantener al menos 60 fps para sentirse suaves y modernas.

Respetar las convenciones táctiles

Comentarios dinámicos

Los comentarios visuales adecuados durante las interacciones con su aplicación ayudan a los usuarios a reconocer, aprender y adaptarse a cómo interpretan sus interacciones tanto en la aplicación como la plataforma Windows. Proporcione comentarios inmediatos y continuos en respuesta al toque del usuario, que es notable, comprensible y no perdido por distracciones. Estos comentarios inmediatos son cómo los usuarios aprenderán y explorarán los elementos interactivos de la aplicación.

• Los comentarios deben ser inmediatos al tocar, y los objetos en movimiento deberían adherirse al dedo del usuario.
• La interfaz de usuario debe responder a los gestos haciendo coincidir la velocidad y los movimientos del usuario, evitando el uso de animaciones de fotograma clave.
• Los comentarios visuales deben transmitir posibles resultados antes de que el usuario se confirme en una acción.

Para obtener más información, consulta Directrices para comentarios visuales y Movimiento en Windows 11

Patrones de interacciones táctiles

Respeta estos patrones comunes de interacción y gestos para aportar coherencia y predicción a tu experiencia.

Interacciones comunes

Hay un conjunto de comportamientos y gestos táctiles comunes con los que los usuarios están familiarizados y esperan trabajar de forma coherente en todas las experiencias de Windows.

• Pulse para activar o seleccionar un elemento.
• Presionar y arrastrar brevemente para mover un objeto
• Presione y mantenga presionado para acceder a un menú de comandos contextuales secundarios
• Deslizar el dedo (o arrastrar y liberar) para comandos contextuales
• Gire en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj para pivotar

Para obtener más información, consulta Directrices para comentarios visuales y Movimiento en Windows 11

Gestos

Los gestos reducen el esfuerzo requerido por los usuarios para navegar y actuar en interacciones comunes. Siempre que sea posible, admita la interfaz de usuario con gestos táctiles para facilitar a los usuarios navegar y actuar en una aplicación.

Si navega entre vistas, use animaciones conectadas para que los estados nuevos y existentes sean visibles a mitad de arrastre. Si se interactúa con la interfaz de usuario, los elementos deben seguir el movimiento del usuario, proporcionar retroalimentación y, al soltar, reaccionar con acciones adicionales basadas en umbrales de posición de arrastre.

Los gestos también deben ser accionables con parpadeos y deslizamientos basados en la inercia y estar dentro de un cómodo intervalo de movimiento.

• Arrastre o deslice para volver hacia atrás y hacia adelante
• Desliza para cerrar
• Deslizar para actualizar

Para obtener más información, consulta Transiciones de página y Deslizar hacia abajo para actualizar.

Gestos personalizados

Usa gestos personalizados para llevar teclas de atajo de teclado de uso frecuente y gestos del trackpad a una interacción táctil. Mejora la detectabilidad y la respuesta a través de funcionalidades dedicadas con animaciones y estados visuales (por ejemplo, colocar tres dedos en la pantalla hace que las ventanas se reduzcan como retroalimentación visual).

• No invalide los gestos comunes, ya que esto puede causar confusión para los usuarios.
• Considere la posibilidad de usar gestos de varios dedos para acciones personalizadas, pero tenga en cuenta que el sistema ha reservado algunos gestos de varios dedos para el cambio rápido entre aplicaciones y escritorios.
• Tenga en cuenta los gestos personalizados que se originan cerca de los bordes de una pantalla, ya que los gestos de borde están reservados para los comportamientos de nivel de sistema operativo, que se pueden invocar accidentalmente.

Evitar la navegación accidental

Si tu aplicación o juego puede implicar interacciones frecuentes cerca de los bordes de la pantalla, considera presentar tu experiencia en un modo Exclusivo de pantalla completa (FSE) para evitar activaciones accidentales de paneles flotantes del sistema (los usuarios tendrán que deslizar directamente en la pestaña temporal para sacar el panel flotante del sistema asociado).

Experiencias de teclado táctil

El teclado táctil habilita la entrada de texto para los dispositivos que admiten la entrada táctil. Los controles de entrada de texto de la aplicación de Windows invocan el teclado táctil de forma predeterminada cuando un usuario pulsa en un campo de entrada editable.

Invocar al tocar el campo de texto

El teclado táctil debe aparecer cuando un usuario pulsa en un campo de entrada de texto; esto funcionará automáticamente mediante nuestras API del sistema para mostrar y ocultar el teclado. Vea Responder a la presencia del teclado táctil.

Usar controles de entrada de texto estándar

El uso de controles comunes proporciona un comportamiento esperado y minimiza las sorpresas para los usuarios.

Los controles de texto que admiten el Marco de Servicios de Texto (TSF) proporcionan capacidades de escritura gestual (teclado de deslizar).

Señales táctiles del teclado

Tenga en cuenta la entrada de datos, la postura, y las señales de hardware que hacen que el teclado táctil sea el modo principal de entrada (el teclado de hardware está desconectado, los puntos de entrada se invocan con el tacto y hay una clara intención del usuario de escribir).

Refluir adecuadamente

• Tenga en cuenta que el teclado puede ocupar hasta 50% de la pantalla en dispositivos más pequeños.
• No oscurezca el campo de texto activo con el teclado táctil.
• Si el teclado táctil oculta el campo de texto activo, desplácese el contenido de la aplicación (con animación) hasta que el campo esté visible.
• Si el teclado táctil oculta el campo de texto activo, pero el contenido de la aplicación no puede desplazarse hacia arriba, intente mover el contenedor de la aplicación (con animación).

Objetivos alcanzados

Asegúrese de que los elementos táctiles sean cómodos e inviten a tocar. Si los objetivos táctiles son demasiado pequeños o están demasiado juntos, los usuarios deben ser más precisos, lo que es difícil con las pantallas táctiles y puede dar lugar a una mala experiencia.

Táctil

Definimos como táctil un mínimo de 40 x 40 epx, incluso si el objeto visual es más pequeño, o un mínimo de 32 epx de alto si el ancho es de al menos 120 epx.

Nuestros controles comunes se ajustan a este estándar (están optimizados tanto para los usuarios táctiles como para el mouse).

Optimizado para interfaces táctiles

Para una interfaz de usuario optimizada para toques, considere la posibilidad de aumentar el tamaño de destino a 44 x 44 epx con al menos 4 epx de espacio visible entre los destinos.

Se recomiendan dos comportamientos predeterminados: siempre táctil optimizado o transición en función de las señales del dispositivo.

Cuando una aplicación se puede optimizar para la interacción táctil sin afectar a los usuarios del mouse, especialmente si la aplicación se usa principalmente con táctil, entonces siempre optimice para táctil.

Si realiza la transición de la interfaz de usuario en función de las señales del dispositivo para la posición del dispositivo, proporcione siempre experiencias coherentes en todas las posiciones.

Asocia los elementos visuales con el objetivo táctil

Considere actualizar los objetos visuales cuando cambien las dimensiones de los objetivos táctiles. Por ejemplo, si los objetivos de alcance aumentan cuando los usuarios entran en el modo tableta, la interfaz de usuario que representa los objetivos de alcance también debe actualizarse para ayudar a los usuarios a comprender el cambio de estado y la funcionalidad actualizada. Para obtener más información, consulta Conceptos básicos del diseño de contenido para aplicaciones de Windows, Directrices para destinos táctiles, Tamaño y densidad de control.

Optimización en modo retrato

Admite diseños dinámicos que tengan en cuenta tanto las ventanas altas como anchas para asegurarse de que una aplicación está optimizada para las orientaciones horizontales y verticales.

Esto también garantizará que las ventanas de aplicaciones muestren los objetos visuales principales de la interfaz de usuario correctamente en escenarios de varias tareas (aplicaciones acopladas en paralelo con relaciones de aspecto verticales) independientemente de la orientación y los tamaños de pantalla.