Interacciones táctiles

Este tema proporciona directrices de diseño para crear experiencias personalizadas y optimizadas para la función táctil en aplicaciones de Windows.

Información general

La función táctil es una forma principal de entrada en Windows y aplicaciones de Windows que implica el uso de uno o más dedos (o contactos táctiles). Estos contactos táctiles, y su movimiento, se interpretan como gestos y manipulaciones táctiles que respaldan una variedad de interacciones del usuario.

Tanto el SDK de Windows como el SDK de aplicaciones para Windows incluyen colecciones completas de controles táctiles optimizados que proporcionan experiencias sólidas y consistentes en todas las aplicaciones de Windows.

Utilice estas directrices cuando cree controles, experiencias y marcos personalizados para sus aplicaciones de Windows.

Principios de diseño

Tenga en cuenta lo siguiente al diseñar la experiencia táctil en su aplicación de Windows.

Función táctil optimizada

Las experiencias de las aplicaciones de Windows deben resultar atractivas al tacto, permitir la manipulación directa y adaptarse a interacciones menos precisas. Tenga en cuenta aceleradores táctiles que incluyan gestos e integración de lápiz y voz.

Consistente en todas las posiciones

Su aplicación debe tener una experiencia consistente independientemente del método de entrada o la posición en la que se encuentre el usuario. Los cambios de la posición tradicional del escritorio a la posición de la tableta (consulte Configuración recomendada para mejorar las experiencias de tableta), así como los cambios de orientación, no deben ser desorientadores, sino más bien sutiles y sólo cuando sean necesarios. Su aplicación debe redistribuir la interfaz de usuario de manera sutil para crear una experiencia familiar y coherente que llegue a los usuarios dondequiera que se encuentren.

Capacidad de respuesta

Las aplicaciones y las interacciones deben proporcionar a los usuarios comentarios en cada fase (toque hacia abajo, acción, toque hacia arriba) de una interacción mediante animaciones que respondan al estado actual del usuario al tiempo que indican posibles acciones. Las animaciones también deben mantener al menos 60 fps para que parezcan fluidas y modernas.

Respetar las convenciones de la función táctil

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 sean perceptibles, comprensibles y que no se pierdan por las distracciones. Estos comentarios inmediatos son la forma en que los usuarios aprenderán y explorarán los elementos interactivos de su aplicación.​

• Los comentarios deben ser inmediatos al tocar hacia abajo y los objetos en movimiento deben adherirse al dedo del usuario.​
• La interfaz de usuario debe responder a los gestos haciendo coincidir la velocidad y los movimientos del usuario; evite el uso de animaciones de fotogramas clave.
• Los comentarios visuales deben transmitir posibles resultados antes de que el usuario se comprometa con una acción.

Hacer

No

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

Patrones de interacción táctil

Respete estos patrones comunes de interacción y gestos para darle coherencia y previsibilidad a su experiencia.

Interacciones comunes

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

• Tocar para activar o seleccionar un elemento​
• Presionar brevemente y arrastrar para mover un objeto​
• Mantener presionado para acceder a un menú de comandos contextuales y secundarios
• Pasar el dedo (o arrastrar y soltar) para ver comandos contextuales
• Rotar en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj para girar

Interacciones

Tocar

Pasar el dedo (o arrastrar y soltar)

Presionar brevemente y arrastrar

Rotar

Mantener presionado

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

Gestos

Los gestos reducen el esfuerzo necesario por parte de los usuarios para navegar y actuar en interacciones comunes. Siempre que sea posible, admita la interfaz de usuario con gestos táctiles para que a los usuarios les resulte más fácil navegar y actuar en una aplicación.

Si navega entre vistas, utilice animaciones conectadas para que tanto los estados existentes como los nuevos sean visibles mientras los arrastra. Si interactúan con la interfaz de usuario, los elementos deben seguir el movimiento del usuario, proporcionar comentarios y, al soltarlos, reaccionar con acciones adicionales basadas en los umbrales de posición de arrastre.

Los gestos también deben poder ejecutarse con movimientos rápidos y deslizados basados en la inercia y estar dentro de un rango de movimiento cómodo.​

• Arrastrar o deslizar para avanzar y retroceder​
• Arrastrar para descartar​
• Deslizar hacia abajo para actualizar​

Gestos

Arrastrar o deslizar para avanzar y retroceder​

Deslizar hacia abajo para actualizar

Arrastrar para descartar

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

Gestos comunes

Utilice gestos personalizados para incorporar teclas de método abreviado de teclado de alta frecuencia y gestos del trackpad a una interacción táctil. Ayude a la capacidad de descubrimiento y la respuesta a través de funciones dedicadas con animaciones y estados visuales (por ejemplo, colocar tres dedos en la pantalla hace que las ventanas se reduzcan para obtener comentarios visuales).

• No anule los gestos comunes, ya que esto puede causar confusión a los usuarios.
• Considere usar gestos con varios dedos para acciones personalizadas, pero tenga en cuenta que el sistema ha reservado algunos gestos con varios dedos para cambiar rápidamente entre aplicaciones y escritorios.
• Tenga en cuenta los gestos personalizados que se originan cerca de los bordes de la pantalla, puesto que los gestos de los bordes están reservados para comportamientos a nivel del sistema operativo, que pueden invocarse de forma accidental.

Evitar navegación accidental

Si su aplicación o juego puede implicar interacciones frecuentes cerca de los bordes de la pantalla, considere presentar su experiencia en un modo exclusivo de pantalla completa (FSE) para evitar activaciones accidentales de los menús laterales del sistema (los usuarios tendrán que deslizar el dedo directamente en la pestaña temporal para acceder al menú lateral del sistema asociado).

Nota:

Evite usar esto a menos que sea absolutamente necesario, ya que hará más difícil para los usuarios navegar fuera de su aplicación o usarla junto con otros usuarios.

Experiencias con teclado táctil

El teclado táctil permite la entrada de texto en dispositivos táctiles. Los controles de entrada de texto de las aplicaciones de Windows invocan el teclado táctil de manera predeterminada cuando un usuario toca un campo de entrada editable.

Invocar al tocar el campo de texto​

El teclado táctil debería aparecer cuando un usuario toca un campo de entrada de texto; esto funcionará automáticamente utilizando las API de nuestro sistema para mostrar y ocultar el teclado. Consulte Responder ante la presencia del teclado táctil..

Usar controles de entrada de texto estándar​

El uso de controles comunes proporciona el comportamiento esperado y minimiza cualquier sorpresa para los usuarios.

Los controles de texto que admiten Text Services Framework (TSF) proporcionan capacidades de escritura con formas (teclado deslizante).

Señales de teclado táctil​

Tenga en cuenta la entrada, la posición 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, intención clara del usuario de escribir).​

Redistribuir de forma apropiada​

• Tenga en cuenta que el teclado puede ocupar hasta el 50 % de la pantalla en dispositivos más pequeños.
• No oculte el campo de texto activo con el teclado táctil.
• Si el teclado táctil oculta el campo de texto activo, desplace el contenido de la aplicación hacia arriba (con animación) hasta que el campo sea 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 a alcanzar

Asegúrese de que los objetivos a alcanzar sean cómodos y atractivos al tacto. Si los objetivos a alcanzar son demasiado pequeños o están repletos, los usuarios deben ser más precisos, lo que es difícil al tacto y puede resultar en una mala experiencia.​

Táctil

Definimos táctil como un mínimo de 40 x 40 epx (píxeles efectivos), incluso si el objeto visual es más pequeño, o 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 usuarios táctiles como para mouse).

Interfaz táctil optimizada

Para una interfaz de usuario táctil optimizada, considere aumentar el tamaño del objetivo a 44 x 44 epx (píxeles efectivos) con al menos 4 epx de espacio visible entre los objetivos.

Recomendamos dos comportamientos predeterminados: tocar siempre con la función optimizada o realizar una transición basada en las señales del dispositivo.

Cuando una aplicación se puede optimizar con la función táctil sin comprometer a los usuarios del mouse, especialmente si la aplicación se usa principalmente con la función táctil, entonces siempre se debe optimizar con la función 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.

Hacer coincidir objetos visuales para tocar el objetivo

Considere la posibilidad de actualizar los objetos visuales cuando cambien las dimensiones del objetivo táctil. Por ejemplo, si los objetivos a alcanzar aumentan cuando los usuarios adoptan la postura de tableta, la interfaz de usuario que representa los objetivos a alcanzar también debe actualizarse para ayudar a los usuarios a comprender el cambio de estado y la disponibilidad actualizada. Para obtener más información, consulte Conceptos básicos de diseño de contenido para aplicaciones de Windows, Directrices para objetivos táctiles, Control del tamaño y la densidad.

Optimización vertical

Admite diseños dinámicos con ventanas altas y anchas para garantizar que una aplicación esté optimizada tanto para orientación horizontal como vertical.

Esto también garantizará que las ventanas de las aplicaciones muestren correctamente las imágenes principales de la interfaz de usuario en escenarios multitarea (aplicaciones colocadas una al lado de la otra con relaciones de aspecto verticales), independientemente de la orientación y el tamaño de la pantalla.