Tocar

Nota:

Esta guía de diseño se creó para Windows 7 y no se ha actualizado para las versiones más recientes de Windows. Gran parte de las instrucciones todavía se aplican en principio, pero la presentación y los ejemplos no reflejan nuestra guía de diseño actual.

Todas las aplicaciones de Microsoft Windows deberían tener una experiencia táctil excelente. Y crear esta experiencia es más fácil de lo que piensa.

La función táctil se refiere al uso de uno o varios dedos para permitir entradas a través de una pantalla de dispositivo e interactuar con Windows y las aplicaciones. Una aplicación optimizada para la entrada táctil tiene un modelo de interfaz de usuario y de interacción diseñado para adaptarse a las áreas de contacto táctiles más grandes y menos precisas, los diversos factores de forma de los dispositivos táctiles y las numerosas posturas y formas de agarrar que los usuarios pueden adoptar al usar un dispositivo táctil.

Cada dispositivo de entrada tiene sus puntos fuertes. El teclado es mejor para la entrada de texto y proporcionar comandos con un movimiento de mano mínimo. El mouse es mejor para apuntar de manera eficiente y precisa. La entrada táctil es mejor para la manipulación de objetos y proporcionar comandos simples. Un lápiz es mejor para la expresión de forma libre, como con la escritura a mano y el dibujo.

Windows 8.1 está optimizado para la capacidad de respuesta, la precisión y la facilidad de uso con la entrada táctil, al tiempo que admite métodos de entrada tradicionales (como el mouse, el lápiz y el teclado). La velocidad, la precisión y la información táctil que proporcionan los modos de entrada tradicionales son familiares y atractivos para muchos usuarios y potencialmente más adecuados para escenarios de interacción específicos.

Puede encontrar instrucciones relacionadas con el mouse, el lápiz y la accesibilidad en otras guías.

Cuando piense en la experiencia de interacción para la aplicación:

No suponga que si una interfaz de usuario funciona bien para un mouse, también funcionará bien para la entrada táctil. Aunque la compatibilidad con el mouse es un comienzo, una buena experiencia táctil tiene algunos requisitos adicionales.

No suponga que si una interfaz de usuario funciona bien para un dedo, también funcionará bien para un lápiz. Hacer que la aplicación sea táctil ayuda mucho para proporcionar una buena compatibilidad con el lápiz. La diferencia principal es que los dedos tienen una punta más obtusa, por lo que necesitan destinos más grandes.

Con la entrada táctil, puede manipular objetos y la interfaz de usuario directamente, lo que hace que sea una experiencia más rápida, más natural y atractiva.

Proporcionar una excelente experiencia táctil

Debe asegurarse de que los usuarios puedan realizar tareas críticas e importantes de forma eficaz mediante la entrada táctil. Sin embargo, es posible que la funcionalidad específica de la aplicación, como la manipulación de texto o píxeles, no sea adecuada para la entrada táctil y se pueda reservar para el dispositivo de entrada más adecuado.

Si no tiene mucha experiencia en el desarrollo de aplicaciones táctiles, lo mejor es aprender haciendo. Obtenga un equipo con entrada táctil, coloque el mouse y el teclado a un lado y use solo los dedos para interactuar con la aplicación. Si tiene una tableta, experimente con diferentes posiciones, como en las piernas, plana en una mesa o en sus manos mientras está de pie. Pruebe las orientaciones vertical y horizontal.

Las aplicaciones optimizadas para la entrada táctil que funcionan mejor con esas interacciones suelen ser:

• Naturales e intuitivas. Las interacciones están diseñadas para corresponder a cómo interactúan los usuarios con objetos en el mundo real.
• Menos intrusivas. El uso de la entrada táctil es silencioso y, en consecuencia, distrae mucho menos que escribir o hacer clic.
• Portables. Los dispositivos táctiles son más compactos porque muchas tareas se pueden completar sin teclado, mouse, lápiz o panel táctil. También son más flexibles porque no se requiere una superficie de trabajo.
• Directas y atractivas. La entrada táctil hace sentir que se están manipulando directamente objetos en la pantalla.
• Menos precisas. Los usuarios no pueden seleccionar objetos con precisión con la entrada táctil, en comparación con un mouse o un lápiz.

La función táctil brinda una sensación natural y real a la interacción. La manipulación directa y la animación completan esta impresión, dando a los objetos un movimiento y respuesta realistas y dinámicos. Por ejemplo, considere un juego de cartas. No solo es conveniente y fácil arrastrar cartas usando un dedo, la experiencia toma una sensación atractiva del mundo real cuando se puede lanzar, deslizar y girar las cartas como lo haría con una baraja física. Y cuando intenta mover una carta que no se puede mover, es una mejor experiencia tener la resistencia de la carta pero no evitar el movimiento y volver a colocarse en su lugar cuando se libera, para indicar claramente que la acción se reconoció pero no se puede realizar.

Afortunadamente, si la aplicación ya está bien diseñada, proporcionar una excelente experiencia táctil es fácil de hacer. Para este propósito, un programa bien diseñado:

• Garantiza que las tareas más importantes se puedan realizar de forma eficaz con un dedo (al menos las tareas que no impliquen mucha escritura o manipulación detallada de píxeles).
• Usa controles grandes para la función táctil. Los controles comunes tienen un tamaño mínimo de 23 x 23 píxeles (13 x 13 DLU) y los controles más usados tienen al menos 40 x 40 píxeles (23 x 22 DLU). Para evitar un comportamiento que no responda, los elementos de la interfaz de usuario deben tener al menos 5 píxeles (3 DLU) de espacio entre ellos. Para otros controles, asegúrese de tener al menos un destino de clic de 23 x 23 píxeles (13x13 DLU), incluso si la apariencia estática es mucho menor. Consulte el ajuste de tamaño del control estándar.
• Admite las entradas con mouse. Los controles interactivos tienen funciones claras y visibles. Los objetos tienen comportamientos estándar para las interacciones estándar del mouse (un clic y doble clic izquierdo, clic derecho, arrastrar y mantener el puntero).
• Admite las entradas con teclado. La aplicación proporciona asignaciones de teclas de método abreviado estándares, especialmente para comandos de navegación y edición, que también se pueden generar a través de gestos táctiles.
• Garantiza la accesibilidad. Usa Automatización de la interfaz de usuario o Accesibilidad activa de Microsoft (MSAA) para proporcionar acceso mediante programación a la interfaz de usuario para las tecnologías de asistencia. La aplicación responde adecuadamente a los cambios de orientación, tema, configuración regional y métrica del sistema.
• Elimina interacciones innecesarias. Para evitar la pérdida de datos o acceso al sistema, use los valores predeterminados más seguros. Si la seguridad y la protección no son factores, la aplicación selecciona la opción más probable o conveniente.
• Proporciona un equivalente táctil para mantener el puntero. No se basa en mantener el puntero como la única manera de realizar una acción.
• Garantiza que los gestos surtan efecto inmediatamente. Mantiene los puntos de contacto debajo de los dedos del usuario sin problemas durante el gesto, lo que proporciona el efecto de la asignación de gestos directamente al movimiento del usuario.
• Usa gestos estándar siempre que sea posible. Gestos personalizados solo para interacciones exclusivas de la aplicación.
• Garantiza que los comandos no deseados o destructivos se puedan invertir o corregir. Es más probable que ocurran acciones accidentales con la entrada táctil.

Directrices para las entradas táctiles

Con la función táctil, la aplicación de Windows puede usar gestos físicos para emular la manipulación directa de los elementos de la interfaz de usuario.

Tenga en cuenta estos procedimientos recomendados al diseñar la aplicación habilitada con la función táctil:

La capacidad de respuesta es esencial para crear experiencias táctiles que se sientan directas y atractivas. Para sentir directamente, los gestos deben surtir efecto inmediatamente y los puntos de contacto de un objeto deben permanecer debajo de los dedos del usuario suavemente durante el gesto. El efecto de la entrada táctil debe asignarse directamente al movimiento del usuario, por lo que, por ejemplo, si el usuario gira los dedos 90 grados, el objeto también debe girar 90 grados. Cualquier retraso, respuesta variable, pérdida de contacto o resultados inexactos destruye la percepción de manipulación directa y también de calidad.

La coherencia es esencial para crear experiencias táctiles que se sientan naturales e intuitivas. Una vez que los usuarios aprenden un gesto estándar, esperan que ese gesto tenga el mismo efecto en todas las aplicaciones. Para evitar confusiones y frustraciones, nunca asigne significados no estándares a gestos estándares. En su lugar, use gestos personalizados para interacciones exclusivas del programa.

A continuación, describiremos el lenguaje táctil de Windows, pero antes de continuar, esta es una breve lista de términos básicos de entrada táctil.

• Gesto

  Un gesto es el acto físico o movimiento realizado en o por el dispositivo de entrada (dedo, dedos, lápiz, mouse, etc.). Por ejemplo, para iniciar, activar o invocar un comando, se usa un solo toque de dedo para un dispositivo táctil (equivalente a un clic izquierdo con un mouse, una pulsación con un lápiz o Intro en un teclado).

• Manipulación

  Una manipulación es la reacción inmediata, en tiempo real, o respuesta que tiene un objeto o interfaz de usuario a un gesto. Por ejemplo, los gestos de deslizar y deslizar rápidamente normalmente hacen que un elemento o la interfaz de usuario se muevan de alguna manera.

  El resultado final de una manipulación, cómo se manifiesta por el objeto en la pantalla y en la interfaz de usuario, es la interacción.

• Interacción

  Las interacciones dependen de cómo se interpreta una manipulación y el comando o la acción resultantes de la manipulación. Por ejemplo, los objetos se pueden mover mediante los gestos de deslizar y deslizar rápidamente, pero los resultados difieren en función de si se cruza un umbral de distancia. Deslizar se puede usar para arrastrar un objeto o desplazar una vista mientras que deslizar rápidamente se puede usar para seleccionar un elemento o mostrar una barra de la aplicación.

Lenguaje táctil de Windows

Windows proporciona un conjunto conciso de interacciones táctiles que se usan en todo el sistema. Aplicar este lenguaje táctil de forma coherente hace que la aplicación se sienta familiar con lo que los usuarios ya conocen. Esto aumenta la confianza del usuario, lo que hace que la aplicación sea más fácil de aprender y usar. Para obtener más información sobre la implementación del lenguaje táctil, consulte Gestos, manipulaciones e interacciones.

Mantener presionado para más información

El gesto de presionar y mantener presionado muestra información detallada o objetos visuales de enseñanza (por ejemplo, una información sobre herramientas o un menú contextual) sin confirmar una acción o un comando. El movimiento panorámico sigue siendo posible si se inicia un gesto de arrastrar mientras se muestra el objeto visual.

Importante

Puede usar presionar y mantener presionada la selección en los casos en los que está habilitado el desplazamiento horizontal y vertical.

Estado de entrada: uno o dos dedos en contacto con la pantalla.

Movimiento: sin movimiento.

Estado de salida: el último dedo hacia arriba termina el gesto.

Efecto: mostrar más información.

Gesto de presionar y mantener presionado.

Mantener presionado

Mantener el puntero es una interacción útil porque permite a los usuarios obtener información adicional a través de sugerencias antes de iniciar una acción. Ver estas sugerencias hace que los usuarios se sientan más seguros y reduce los errores.

Desafortunadamente, mantener el puntero no es una interacción compatible con las tecnologías táctiles, por lo que los usuarios no pueden mantener el puntero al usar un dedo. La solución sencilla a este problema es aprovechar al máximo la interacción de mantener el puntero, pero solo de maneras que no sean necesarias para realizar una acción. En la práctica, esto suele significar que la acción también se puede realizar haciendo clic, pero no necesariamente de la misma manera.

En este ejemplo, los usuarios pueden ver la fecha de hoy al mantener el puntero o hacer clic.

Pulsar para la acción principal

Al pulsar en un elemento, se invoca su acción principal, por ejemplo, iniciar una aplicación o ejecutar un comando.

Estado de entrada: un dedo en contacto con la pantalla o el panel táctil y se levanta antes del umbral de tiempo para una interacción de mantener presionado.

Movimiento: sin movimiento.

Estado de salida: el dedo hacia arriba termina el gesto.

Efecto: iniciar una aplicación o ejecutar un comando.

El gesto de pulsar.

Deslizar para desplazamiento lateral

Deslizar se usa principalmente para las interacciones de desplazamiento lateral, pero también se puede usar para mover (cuando el desplazamiento lateral está restringido a una dirección), dibujar o escribir. Deslizar también se puede usar para seleccionar elementos pequeños y densamente empaquetados arrastrando (deslizando el dedo sobre objetos relacionados, como botones de radio).

Estado de entrada: uno o dos dedos en contacto con la pantalla.

Movimiento: arrastrar, con los dedos adicionales restantes en la misma posición.

Estado de salida: el último dedo hacia arriba termina el gesto.

Efecto: mover el objeto subyacente directamente e inmediatamente a medida que se mueven los dedos. Asegúrese de mantener el punto de contacto debajo del dedo durante el gesto.

Gesto de desplazamiento lateral.

Deslizar rápidamente para seleccionar, ejecutar un comando y mover

Deslizar el dedo una corta distancia, perpendicular a la dirección de desplazamiento lateral (cuando el desplazamiento lateral está restringido a una dirección), selecciona objetos de una lista o cuadrícula. Mostrar la barra de la aplicación con comandos pertinentes cuando se seleccionan objetos.

Estado de entrada: uno o varios dedos tocan la pantalla.

Movimiento: arrastrar una corta distancia y levantar antes de que se produzca el umbral de distancia para una interacción de movimiento.

Estado de salida: el último dedo hacia arriba termina el gesto.

Efecto: se selecciona o se mueve el objeto subyacente o se muestra la barra de la aplicación. Asegúrese de mantener el punto de contacto debajo del dedo durante el gesto.

El gesto de deslizar rápidamente.

Reducir y ampliar para acercar

Los gestos de reducir y ampliar se usan para tres tipos de interacciones: zoom óptico, cambio de tamaño y zoom semántico.

El zoom óptico ajusta el nivel de ampliación de todo el área de contenido para obtener una vista más detallada. En cambio, el cambio de tamaño es una técnica para ajustar el tamaño relativo de uno o varios objetos dentro de un área de contenido sin cambiar la vista en el área.

El zoom semántico es una técnica optimizada de la función táctil para presentar y navegar por datos estructurados o contenido en una sola vista (como la estructura de carpetas de un equipo, una biblioteca de documentos o un álbum de fotos) sin necesidad de controles de desplazamiento lateral, desplazamiento o vista de árbol. El zoom semántico proporciona dos vistas diferentes del mismo contenido al permitirle ver más detalles al acercar y menos detalles al alejar.

Estado de entrada: dos dedos en contacto con la pantalla al mismo tiempo.

Movimiento: los dedos se separan (gesto de ampliar) o se unen (gesto de reducir) a lo largo de un eje.

Estado de salida: cualquier dedo hacia arriba termina el gesto.

Efecto: acercar o alejar el objeto subyacente directamente e inmediatamente a medida que los dedos se separan o se acercan en el eje. Asegúrese de mantener los puntos de contacto debajo del dedo durante el gesto.

El gesto de zoom.

Rotar para girar

La rotación con dos o más dedos hace que un objeto gire. Rotar el dispositivo para girar toda la pantalla.

Estado de entrada: dos dedos en contacto con la pantalla al mismo tiempo.

Movimiento: uno o ambos dedos giran alrededor del otro, moviendo perpendicular a la línea entre ellos.

Estado de salida: cualquier dedo hacia arriba termina el gesto.

Efecto: girar el objeto subyacente la misma cantidad que han girado los dedos. Asegúrese de mantener los puntos de contacto debajo del dedo durante el gesto.

El gesto de rotación.

La rotación solo tiene sentido para determinados tipos de objetos, por lo que no está asignada a una interacción de sistema de Windows.

La rotación se realiza a menudo de forma diferente por diferentes personas. Algunas personas prefieren girar un dedo alrededor de un dedo de eje, mientras que otras prefieren girar ambos dedos en un movimiento circular. La mayoría de las personas usan una combinación de los dos, con un dedo que se mueve más que el otro. Aunque la rotación suave a cualquier ángulo es la mejor interacción, en muchos contextos, como la visualización de fotos, es mejor establecerse en la rotación de 90 grados más cercana una vez que el usuario suelte. En la edición de fotos, puede usar un pequeño giro para enderezar la foto.

Deslizar rápidamente desde el borde para los comandos de la aplicación

Deslizar el dedo una corta distancia desde el borde inferior o superior de la pantalla revela los comandos de la aplicación en una barra de la aplicación.

Estado de entrada: uno o varios dedos tocan el bisel.

Movimiento: arrastrar una corta distancia en la pantalla y levantar.

Estado de salida: el último dedo hacia arriba termina el gesto.

Efecto: se muestra la barra de la aplicación.

Gesto de deslizar rápidamente desde el borde.

Desarrolladores: para obtener más información, consultar la enumeración DIRECTMANIPULATION_CONFIGURATION.

Uso de controles

Aquí, se proporcionan algunas directrices para optimizar los controles para el uso táctil.

• Use controles comunes. Los controles más comunes están diseñados para permitir una buena experiencia táctil.
• Elija controles personalizados diseñados para admitir la entrada táctil. Es posible que necesite controles personalizados para admitir las experiencias especiales del programa. Elija controles personalizados que:
  • Puedan tener un tamaño lo suficientemente grande como para facilitar la selección y la manipulación.
  • Cuando se manipulen, se muevan y reaccionen de la forma en que los objetos del mundo real se mueven y reaccionan; por ejemplo, con impulso y fricción.
  • Sean flexibles al permitir que los usuarios corrijan fácilmente los errores.
  • Sean flexibles con la inexactitud al hacer clic y arrastrar. Los objetos que se sueltan cerca de su destino deben caer en el lugar correcto.
  • Tengan información visual clara cuando el dedo esté sobre el control.
• Use controles restringidos. Los controles restringidos, como las listas y los controles deslizantes, cuando están diseñados para facilitar la selección de destinos táctiles, pueden ser mejores que los controles sin restricciones, como los cuadros de texto, ya que reducen la necesidad de entrada de texto.
• Proporcione los valores predeterminados adecuados. Seleccione la opción más segura (para evitar la pérdida de datos o acceso al sistema) y la opción más segura de forma predeterminada. Si la seguridad y la protección no son factores, seleccione la opción más probable o conveniente, lo que elimina la interacción innecesaria.
• Proporcione finalización automática de texto. Proporciona una lista de valores más probables, o valores de entrada más recientes, para facilitar más la entrada de texto.
• Para tareas importantes que usan selección múltiple, si se usa normalmente una lista de selección múltiple estándar, proporcione una opción para usar una lista de casillas en su lugar.

Tamaños de controles y destinos táctiles

Debido al área expuesta grande del dedo, los controles pequeños que están demasiado cerca unos a otros pueden ser difíciles de seleccionar con precisión.

Como regla general, un tamaño de control de 23 x 23 píxeles (13 x 13 DLU) es un buen tamaño de control interactivo mínimo para cualquier dispositivo de entrada. Por el contrario, los controles de giro de 15 x 11 píxeles son demasiado pequeños para usarse eficazmente con la entrada táctil.

Tenga en cuenta que el tamaño mínimo se basa realmente en el área física, no en métricas de diseño como píxeles o DLU. La investigación indica que el área de destino mínima para una interacción eficaz y precisa con un dedo es de 6 x 6 milímetros (mm). Este área se traduce en métricas de diseño como esta:

Fuente	Milímetros	Píxeles relativos	DLU
Segoe UI de 9 puntos	6 x 6	23 x 23	13 x 13
Tahoma de 8 puntos	6 x 6	23 x 23	15 x 14

Además, la investigación muestra que un tamaño mínimo de 10 x 10 mm (unos 40 x 40 píxeles) permite mejorar la velocidad y la precisión, y también es más cómodo para los usuarios. Cuando sea práctico, use este tamaño mayor para los botones de comando usados para los comandos más importantes o usados con frecuencia.

El objetivo no es tener controles gigantes, solo los que se usan fácilmente con la función táctil.

En este ejemplo, Microsoft Word usa botones de más de 10 x 10 mm para los comandos más importantes.

Esta versión de Calculadora usa botones de más de 10 x 10 mm para sus comandos más usados.

No hay un tamaño perfecto para los destinos táctiles. Los diferentes tamaños funcionan en diferentes situaciones. Las acciones con consecuencias graves (como eliminar y cerrar) o las acciones usadas con frecuencia deben usar destinos táctiles grandes. Las acciones usadas con poca frecuencia con consecuencias menores pueden usar destinos pequeños.

Directrices de tamaño de destinos para controles personalizados

Guía de tamaños	Descripción
	7 x 7 mm: tamaño mínimo recomendado 7 x 7 mm es un buen tamaño mínimo si se puede corregir el destino incorrecto en uno o dos gestos o en un plazo de cinco segundos. El relleno entre destinos es tan importante como el tamaño del destino.
	Cuándo la precisión importa Cerrar, eliminar y otras acciones con consecuencias graves no pueden permitirse el lujo de pulsaciones accidentales. Use destinos de 9 x 9 mm si tocar el destino incorrecto requiere más de dos gestos, cinco segundos o un cambio de contexto importante para corregirlo.
	Cuando no cabe Si se encuentra apiñando los elementos para que entren, está bien usar destinos de 5 x 5 mm, siempre y cuando se pueda corregir el destino incorrecto con un gesto. El uso de 2 mm de relleno entre destinos es sumamente importante en este caso.

Directrices de tamaño de destinos para controles comunes

• Para los controles comunes, use los tamaños de controles recomendados. El tamaño del control recomendado satisface el tamaño mínimo de 23 x 23 píxeles (13 x 13 DLU), excepto para las casillas de verificación y los botones de radio (su ancho de texto compensa un poco), los controles de número (que no se pueden usar con la entrada táctil, pero son redundantes) y los divisores.

  

  Los tamaños de controles recomendados son fáciles de tocar.

• Para los botones de comando usados para los comandos más importantes o usados con frecuencia, use un tamaño mínimo de 40 x 40 píxeles (23 x 22 DLU) siempre que sea práctico. Al hacerlo, se obtiene una mejor velocidad y precisión, y también es más cómodo para los usuarios.

  

  Siempre que sea práctico, use botones de comando más grandes para comandos importantes o usados con frecuencia.

• Para otros controles:

  • Use destinos de clic más grandes. Para controles pequeños, haga que el tamaño de destino sea mayor que el elemento de interfaz de usuario visible estáticamente. Por ejemplo, los botones de icono de 16 x 16 píxeles pueden tener botones de destino de clic de 23 x 23 píxeles, y los elementos de texto pueden tener rectángulos de selección de 8 píxeles más anchos que el texto y 23 píxeles de alto.

    Correcto:

    

    Incorrecto:

    

    Correcto:

    

    En los ejemplos correctos, los destinos de clic son mayores que los elementos de la interfaz de usuario visibles estáticamente.

  • Use destinos de clic redundantes. Es aceptable que los destinos de clic sean menores que el tamaño mínimo si ese control tiene funcionalidad redundante.

    Por ejemplo, los triángulos de revelación progresiva utilizados por el control de vista de árbol son solo de 6 x 9 píxeles, pero su funcionalidad es redundante con sus etiquetas de elementos asociadas.

    

    Los triángulos de vista de árbol son demasiado pequeños para ser fácilmente táctiles, pero son redundantes en la funcionalidad con sus etiquetas asociadas más grandes.

    Respete las métricas del sistema. No codifique los tamaños de forma rígida. Si es necesario, los usuarios pueden cambiar las métricas del sistema o ppp para adaptarse a sus necesidades. Sin embargo, use esto como último recurso porque los usuarios normalmente no deberían tener que ajustar la configuración del sistema para que la interfaz de usuario se pueda usar.

    

    En este ejemplo, se cambió la métrica del sistema para el alto del menú.

Edición de texto

Editar texto es una de las interacciones más difíciles al usar un dedo. El uso de controles restringidos, valores predeterminados adecuados y la finalización automática eliminan o reducen la necesidad de escribir texto. Pero si la aplicación implica editar texto, puede hacer que los usuarios sean más productivos al acercar automáticamente la interfaz de usuario de entrada hasta un 150 % de forma predeterminada cuando se use la función táctil.

Por ejemplo, un programa de correo electrónico podría mostrar la interfaz de usuario con un tamaño táctil normal, pero acercar la interfaz de usuario de entrada al 150 % para la redacción de mensajes.

En este ejemplo, la interfaz de usuario de entrada se acerca al 150 %.

Diseño de controles y espaciado

El espaciado entre los controles es un factor importante para hacer que se puedan tocar fácilmente. La selección de destinos es más rápida pero menos precisa cuando se usa un dedo como dispositivo señalador, lo que da lugar a que los usuarios pulsen con más frecuencia fuera de su destino previsto. Cuando los controles interactivos se colocan muy cerca unos de otros, pero no se tocan realmente, los usuarios pueden hacer clic en el espacio inactivo entre los controles. Dado que hacer clic en el espacio inactivo no tiene ningún resultado o información visual, los usuarios a menudo no están seguros de qué salió mal.

Ajuste dinámicamente el espaciado en función del dispositivo de entrada usado. Esto es especialmente útil con interfaces de usuario transitorias, como menús y controles flotantes.

Proporcione un mínimo de 5 píxeles (3 DLU) de espacio entre las regiones de destino de los controles interactivos. Si los controles pequeños están demasiado espaciados, el usuario debe pulsar con precisión para evitar pulsar el objeto incorrecto.

Haga que los controles en los grupos sean más fáciles de diferenciar usando más espaciado vertical entre controles que el recomendado. Por ejemplo, los botones de radio con un alto de 19 píxeles son más cortos que el tamaño mínimo recomendado de 23 píxeles. Cuando tenga espacio vertical disponible, puede lograr aproximadamente el mismo efecto que el ajuste de tamaño recomendado agregando un espacio adicional de 4 píxeles al estándar de 7 píxeles.

Correcto:

Mejor:

En el mejor ejemplo, el espaciado adicional entre los botones de radio hace que sean más fáciles de diferenciar.

Puede haber situaciones en las que el espaciado adicional sería deseable al usar la función táctil, pero no al usar el mouse o el teclado. En tales casos, solo use un diseño más amplio cuando se inicie una acción mediante la función táctil.

Elija un diseño que coloque los controles cerca de dónde se van a usar con mayor probabilidad. Mantenga las interacciones de tareas dentro de un área pequeña siempre que sea posible y coloque los controles cerca de dónde se van a usar con mayor probabilidad. Evite los movimientos de mano de larga distancia, especialmente para tareas comunes y para los arrastres.

Tenga en cuenta que la ubicación del puntero actual es la más cercana que un destino puede estar, lo que hace que sea trivial adquirirlo. Por lo tanto, los menús contextuales aprovechan al máximo la ley de Fitts, al igual que las mini-barras de herramientas usadas por Microsoft Office.

Evite colocar controles pequeños cerca del borde de la aplicación o la pantalla. Los objetivos pequeños cerca de los bordes pueden ser difíciles de tocar (los biseles de pantalla pueden interferir con los gestos de borde). Para asegurarse de que los controles sean fáciles de seleccionar cuando se maximiza una ventana, puede hacerlos de al menos en 23 x 23 píxeles (13 x 13 DLU) o colocarlos fuera del borde de la ventana.

Use el espaciado recomendado. El espaciado recomendado es táctil. Sin embargo, si la aplicación puede beneficiarse del ajuste de tamaño y el espaciado más grandes, tenga en cuenta el ajuste de tamaño y el espaciado recomendados para que sean mínimos cuando sea necesario.

Proporcione al menos 5 píxeles (3 DLU) de espacio entre controles interactivos. Al hacerlo, se evita la confusión cuando los usuarios pulsan fuera del destino previsto.

Considere la posibilidad de agregar más espaciado vertical que el recomendado en grupos de controles, como vínculos de comandos, casillas y botones de radio, así como entre los grupos. Hacerlo hace que sean más fáciles de diferenciar.

Considere la posibilidad de agregar más espaciado vertical que el recomendado dinámicamente cuando se inicia una acción mediante la función táctil. Al hacerlo, los objetos son más fáciles de diferenciar, pero sin tener más espacio cuando se usa un teclado o un mouse. Aumente el espaciado en un tercio de su tamaño normal o a, al menos, 8 píxeles.

En este ejemplo, las listas de accesos directos de la barra de tareas de Windows 7 son más amplias cuando se muestran con la función táctil.

Interacción

El uso de los controles correctos es solo una parte de una aplicación optimizada para la función táctil, también debe tener en cuenta el modelo de interacción general que esos controles admiten. Estas son algunas directrices para ayudarle con esto.

• Haga que mantener el puntero sea redundante. La mayoría de las tecnologías táctiles no admiten mantener el puntero, por lo que los usuarios con estas pantallas táctiles no pueden realizar ninguna tarea que requiera mantener el puntero.

• En el caso de las aplicaciones que necesitan entrada de texto, integre completamente la característica de teclado táctil mediante lo siguiente:

  • Proporcionar los valores predeterminados adecuados para la entrada del usuario.
  • Proporcionar sugerencias de autocompletar cuando corresponda.

  Nota:

  Desarrolladores: para obtener más información sobre cómo integrar el teclado táctil, consultar ITextInputPanel.

• Permitir a los usuarios ampliar la interfaz de usuario de contenido si el programa tiene tareas que requieren editar texto. Considere la posibilidad de acercar automáticamente al 150 % cuando se use la función táctil.

• Proporcionar un desplazamiento lateral suave, dinámico y acercamiento siempre que sea necesario. Volver a dibujar rápidamente después de un desplazamiento lateral o zoom para mantener la capacidad de respuesta. Esto es necesario para hacer que la manipulación directa se sienta verdaderamente directa.

• Durante un desplazamiento lateral o un acercamiento, asegúrese de que los puntos de contacto permanezcan debajo del dedo durante el gesto. De lo contrario, el desplazamiento lateral o el acercamiento son difíciles de controlar.

• Dado que los gestos se memorizan, asígneles significados coherentes entre aplicaciones. No proporcione significados diferentes a los gestos con semántica fija. En su lugar, use un gesto adecuado específico de la aplicación.

Flexibilidad

La manipulación directa hace que la función táctil sea natural, expresiva, eficiente y atractiva. Sin embargo, cuando hay manipulación directa, puede haber manipulación accidental y, por tanto, la necesidad de flexibilidad.

La flexibilidad es la capacidad de invertir o corregir fácilmente una acción no deseada. Se hace flexible una experiencia táctil proporcionando la capacidad de deshacer, dando buena información visual, teniendo una separación física clara entre los comandos usados con frecuencia y los comandos destructivos, y permitiendo a los usuarios corregir errores fácilmente. Asociada con la flexibilidad está la característica de impedir que se produzcan acciones no deseadas en primer lugar, lo que se puede hacer mediante controles restringidos y confirmaciones para acciones o comandos de riesgo que tienen consecuencias no deseadas.

• Proporcione un comando Deshacer. Es mejor proporcionar una manera sencilla de deshacer todos los comandos, pero es posible que la aplicación tenga algunos comandos cuyo efecto no se pueda deshacer.

• Siempre que sea práctico, proporcione buena información sobre el dedo hacia abajo, pero no realice acciones hasta que el dedo esté arriba. Al hacerlo, los usuarios pueden corregir errores antes de cometerlos.

• Siempre que sea práctico, permita a los usuarios corregir los errores fácilmente. Si una acción surte efecto en el dedo hacia arriba, permita a los usuarios corregir los errores deslizando mientras el dedo sigue abajo.

• Siempre que sea práctico, indique que no se puede realizar una manipulación directa mediante la acción de resistir el movimiento. Permita que se produzca el movimiento, pero haga que el objeto vuelva a colocarse en su lugar cuando se libere para indicar claramente que se reconoció la acción, pero que no se puede realizar.

• Tenga una separación física clara entre los comandos usados con frecuencia y los comandos destructivos. De lo contrario, los usuarios podrían tocar comandos destructivos accidentalmente. Un comando se considera destructivo si su efecto es generalizado y no se puede deshacer fácilmente o el efecto no es inmediatamente perceptible.

• Confirme los comandos para acciones o comandos de riesgo que tengan consecuencias no deseadas. Use un cuadro de diálogo de confirmación para este propósito.

• Considere la posibilidad de confirmar cualquier otra acción que los usuarios tiendan a realizar accidentalmente al usar la función táctil y que pasan desapercibidas o son difíciles de deshacer. Normalmente, se denominan confirmaciones rutinarias y se desaconsejan en función de la suposición de que los usuarios no suelen emitir dichos comandos por accidente con un mouse o teclado. Para evitar confirmaciones innecesarias, presente estas confirmaciones solo si el comando se inició mediante la función táctil.

  Las confirmaciones rutinarias son aceptables para las interacciones que los usuarios a menudo usan accidentalmente con la función táctil.

  Desarrolladores: se puede distinguir entre eventos de mouse y eventos táctiles mediante la API de INPUT_MESSAGE_SOURCE.