Directrices para las interacciones del usuario comunes (aplicaciones de la Tienda Windows)

Crea aplicaciones de la Tienda Windows con experiencias de interacción del usuario intuitivas y distintivas que estén optimizadas para entrada táctil pero que sean funcionalmente coherentes entre los distintos dispositivos de entrada.

Aprovecha las ventajas de las atractivas funcionalidades de interacción de Windows. Estas directrices te ayudarán.

Consulta esta característica como parte de nuestra serie Características de aplicaciones, de principio a fin:  Interacción del usuario: entrada táctil... y mucho más

Diseño para una experiencia táctil

Ante todo, diseña tu aplicación teniendo en mente que el principal método de entrada de los usuarios será táctil. Si usas los controles de la plataforma, la compatibilidad con el mouse, el panel táctil y el lápiz o la pluma no requiere programación adicional, ya que Windows 8 la ofrece de forma gratuita.

Pero ten presente que una interfaz de usuario optimizada para entrada táctil no es siempre mejor que una interfaz de usuario tradicional. Ambas ofrecen ventajas y desventajas exclusivas de la tecnología y la aplicación en cuestión. A la hora de diseñar una interfaz de usuario básicamente táctil, es importante entender las diferencias fundamentales entre entrada táctil (incluido el panel táctil), con pluma o lápiz, con mouse y con el teclado. No des por sentado las propiedades y los comportamientos de los dispositivos de entrada conocidos, ya que, en Windows 8, la entrada táctil no se limita a simular esas funciones.

Al leer estas directrices, descubrirás que la entrada táctil hace necesario un enfoque diferente del diseño de la interfaz de usuario.

Compara los requisitos de la interacción táctil

En la tabla siguiente, se muestran algunas de las diferencias entre los dispositivos de entrada que debes tener en cuenta al diseñar aplicaciones de la Tienda Windows optimizadas para entrada táctil.

FactorInteracciones táctilesInteracciones con mouse, teclado, pluma/lápizPanel táctil
PrecisiónEl área de contacto de la punta de un dedo es mayor que la de una sola coordenada x-y, lo que aumenta las probabilidades de activación no intencional de comandos.El mouse y la pluma/lápiz suministran una coordenada x-y precisa.Es igual al mouse.
La forma del área de contacto cambia durante el movimiento. Los movimientos de mouse y los trazos de la pluma/lápiz suministran coordenadas x-y precisas. El foco del teclado es explícito.Es igual al mouse.
No hay cursor de mouse para ayudar con la selección del destino.El cursor del mouse, el cursor de la pluma/lápiz y el foco del teclado ayudan a seleccionar el destino.Es igual al mouse.
Anatomía humanaLos movimientos de los dedos no son precisos, ya que es difícil realizar un movimiento en línea recta con uno o más dedos. Esto se debe a la curvatura de las articulaciones de la mano y a la cantidad de articulaciones involucradas en el movimiento.Es más fácil ejecutar un movimiento en línea recta con mouse o pluma/lápiz porque la mano que los controla recorre una distancia física menor que el cursor en la pantalla.Es igual al mouse.
Puede ser difícil llegar a algunas áreas de la superficie táctil de un dispositivo de pantalla debido a la posición de los dedos y la sujeción del dispositivo por parte del usuario.El mouse y la pluma o el lápiz pueden llegar a cualquier parte de la pantalla. El teclado permite acceder a cualquier control con el orden de tabulación. La posición de los dedos y la empuñadura pueden ser un problema.
Puede ocurrir que los objetos queden ocultos por la punta de uno o más dedos o la mano del usuario. Esto se conoce como oclusión.Los dispositivos de entrada indirecta no provocan oclusión.Es igual al mouse.
Estado del objetoLa interacción táctil emplea un modelo de dos estados: la superficie táctil de un dispositivo de pantalla se toca (activado) o no se toca (desactivado). No existe un estado de movimiento que pueda desencadenar una respuesta visual adicional.

El mouse, la pluma/lápiz y el teclado exponen un modelo de tres estados: arriba (desactivado), abajo (activado) y movimiento (foco).

El estado de movimiento permite que el usuario explore y aprenda mediante informaciones sobre herramientas asociadas con elementos de la interfaz de usuario. Los efectos de movimiento y foco pueden transmitir qué objetos son interactivos y ayudar, además, a seleccionar el destino.

Es igual al mouse.
Interacción enriquecidaAdmite multitoque: múltiples puntos de entrada (puntas de los dedos) en una superficie táctil.Admite un punto único de entrada.Es igual a la entrada táctil.
Admite manipulación directa de objetos por medio de gestos como pulsar, arrastrar, deslizar, reducir y girar.No admite manipulación directa porque el mouse, la pluma/lápiz y el teclado son dispositivos de entrada indirecta.Es igual al mouse.

 

Nota  

La entrada indirecta tiene la ventaja de más de 25 años de perfeccionamiento. Algunas características, como la información sobre herramientas desencadenada al mantener el mouse sobre un elemento, se diseñaron para explorar la interfaz de usuario específicamente con entrada de panel táctil, mouse, pluma o lápiz y teclado. Con la entrada táctil de Windows, las características de la interfaz de usuario como esta se diseñan para aprovechar la experiencia enriquecida que ofrece la entrada táctil sin afectar a la experiencia del usuario con otros dispositivos.

Usar la información táctil

La información visual adecuada durante las interacciones con la aplicación ayuda al usuario a reconocer y aprender cómo interpreta la aplicación y Windows 8 sus interacciones, y a adaptarse a esa interpretación. La información visual puede indicar interacciones satisfactorias y el estado del sistema relé, mejorar la sensación de control, reducir errores, ayudar a los usuarios a entender el sistema y el dispositivo de entrada, y alentar la interacción.

La información visual es decisiva cuando el usuario usa la entrada táctil para llevar a cabo actividades que requieren exactitud y precisión en lo que respecta a ubicación. Muestra información siempre que se detecte entrada táctil para ayudar al usuario a entender cualquier regla personalizada de selección de destinos que defina la aplicación y los controles correspondientes.

Crea una experiencia de interacción envolvente

Las técnicas siguientes mejoran la experiencia envolvente de las aplicaciones de la Tienda Windows.

Selección de destinos

La selección de destinos se optimiza mediante:

  • Tamaños de destinos táctiles

    Unas directrices claras sobre el tamaño garantizan que las aplicaciones ofrecerán una interfaz de usuario cómoda que contenga objetos y controles cuyos destinos sean fáciles y seguros.

  • Geometría de contacto

    Toda el área de contacto del dedo determina el objeto de destino más probable.

  • Arrastrar

    La selección de destinos de los elementos dentro de un grupo se puede realizar fácilmente si se arrastra el dedo entre ellos (por ejemplo, los botones de radio). El elemento actual se activa cuando se libera el contacto táctil.

  • Inclinación de un lado a otro

    Los elementos que se encuentra muy cerca unos de otros (por ejemplo, hipervínculos) se pueden seleccionar de nuevo presionando el dedo e inclinándolo de un lado a otro sobre los elementos, sin deslizarlo. Debido a la oclusión, el elemento actual se identifica mediante la información sobre herramientas o la barra de estado y se activa al liberar el contacto táctil.

Precisión

Diseña teniendo en cuenta las interacciones descuidadas mediante:

  • Puntos de acoplamiento que permitan detenerse en las ubicaciones deseadas con mayor facilidad cuando los usuarios interactúan con el contenido.
  • "Guías" direccionales que ayuden con el movimiento panorámico vertical y horizontal, incluso cuando la mano se mueve ligeramente en arco. Si deseas obtener más información, consulta las directrices para movimiento panorámico.

Oclusión

La oclusión de dedos y manos se evita mediante:

  • El tamaño y la posición de la interfaz de usuario

    Crea los elementos de la interfaz de usuario lo suficientemente grandes, para que no se cubran por completo con el área de contacto del dedo.

    Coloca los menús y las ventanas emergentes sobre el área de contacto, siempre que sea posible.

  • Información de herramientas

    Muestra información sobre herramientas cuando un usuario mantiene el contacto sobre un objeto con el dedo. Sirve para describir las funciones de los objetos. El usuario puede retirar el dedo del objeto para evitar que se invoque la información sobre herramientas.

    Para objetos pequeños, desplaza la información de herramientas para que no quede cubierta por el área de contacto del dedo. Esto resulta útil para la selección de destinos.

  • Controladores para mayor precisión

    Cuando necesites una mayor precisión (por ejemplo, para la selección de texto), ofrece controladores de selección que se desplacen para mejorar la precisión. Si deseas más información, consulta las directrices para seleccionar texto e imágenes.

Intervalos

Evita los cambios de modo cronometrado en favor de la manipulación directa. Esta simula el control físico, directo y en tiempo real de un objeto. El objeto responde a medida que se mueven los dedos.

Una interacción temporal, en cambio, tiene lugar después de la interacción táctil. Para determinar qué comando se ejecutará, las interacciones temporales suelen depender de umbrales invisibles, como el tiempo, la distancia o la velocidad. Las interacciones temporales no ofrecen una respuesta visual hasta que el sistema ejecuta la acción.

La manipulación directa ofrece una serie de ventajas sobre las interacciones temporales:

  • La información visual instantánea durante las interacciones hace que los usuarios se sientan más comprometidos, seguros de si mismos y con el control.
  • Las manipulaciones directas hacen que sea más seguro explorar un sistema porque son reversibles: los usuarios pueden deshacer fácilmente sus acciones de manera lógica e intuitiva.
  • Las interacciones que afectan directamente a los objetos y mimetizan las interacciones de la vida real son más intuitivas y fáciles de detectar y recordar. No dependen de interacciones oscuras o abstractas.
  • Las interacciones temporales pueden ser difíciles de realizar, ya que los usuarios deben alcanzar umbrales arbitrarios e invisibles.

Además, te recomendamos lo siguiente:

  • Las manipulaciones no deben distinguirse por el número de dedos usados.
  • Las interacciones deben admitir manipulaciones compuestas. Por ejemplo, alejar para ampliar mientras se arrastran los dedos para el movimiento panorámico.
  • Las interacciones no deben distinguirse temporalmente. La misma interacción debe tener el mismo resultado, independientemente del tiempo que se haya tardado en realizarla. Las activaciones temporales introducen retrasos obligatorios para los usuarios y reducen la naturaleza envolvente de la manipulación directa, así como la percepción de la respuesta del sistema.

    Nota  Una excepción a esto es cuando usas interacciones temporales específicas para ayudar en el aprendizaje y la exploración (por ejemplo, pulsar y sostener).

  • Las descripciones y las indicaciones visuales adecuadas tienen un gran efecto sobre el uso de las interacciones avanzadas.

Temas relacionados

Conceptos
Responder a la interacción del usuario
Gestos, manipulaciones e interacciones
Diseño de la interacción táctil
Directrices para deslizar el dedo rápidamente desde el borde
Directrices para zoom óptico y cambio de tamaño
Directrices para panorámica
Directrices para rotación
Directrices para zoom semántico
Directrices para seleccionar texto e imágenes
Directrices para destinos
Directrices para información visual

 

 

Mostrar:
© 2014 Microsoft. Reservados todos los derechos.