Diseño de comandos para aplicaciones de la Tienda Windows

Tienes a tu disposición varias superficies para colocar en ella comandos y controles en la aplicación de la Tienda Windows, como la ventana de la aplicación, las ventanas emergentes, los cuadros de diálogo y las barras. Elegir la superficie correcta en el momento adecuado puede suponer la diferencia entre que una aplicación sea incómoda o vaya como la seda.

Para obtener una versión que puedes descargar de este tema, ve aquí.

Usar el Canvas

Los usuarios podrá completar los escenarios principales con solo usar el Canvas. Siempre que sea posible, permite que los usuarios manipulen directamente el contenido en el Canvas de la aplicación, en lugar de agregar comandos que actúen sobre el contenido.

Por ejemplo, en una aplicación de búsqueda de restaurantes, la búsqueda y la visualización de restaurantes debería realizarse sobre el Canvas al pulsar, realizar un movimiento panorámico o seleccionar contenido.

Usar los botones de acceso

Aprovecha los contratos de botones de acceso y de aplicación para habilitar los comandos de aplicación comunes. Evita duplicar la funcionalidad de contrato de aplicación en el Canvas de la aplicación o en la barra de la aplicación.

• Buscar: permite que los usuarios busquen rápidamente el contenido de la aplicación desde cualquier parte del sistema, incluso desde otras aplicaciones. Y viceversa.
• Compartir: permite que los usuarios compartan contenido de la aplicación con otras personas o aplicaciones, y reciban contenido compartido.
• Dispositivos: permite que los usuarios disfruten de la transmisión de audio, vídeo o imágenes desde la aplicación a otros dispositivos de la red doméstica.
• Configuración: consolida toda la configuración en un solo lugar y permite que los usuarios configuren la aplicación mediante un mecanismo común con el que ya están familiarizados.

Usar la barra de la aplicación

La barra de la aplicación te permite mostrar comandos a los usuarios a petición. La barra de la aplicación muestra comandos relevantes para el contexto del usuario, normalmente la página actual o la selección actual.

La barra de la aplicación no está visible de manera predeterminada. Aparece cuando un usuario desliza rápidamente un dedo desde la parte superior o inferior de la pantalla. La barra de la aplicación también puede mostrarse mediante programación al seleccionar el objeto o hacer clic en él.

La barra de la aplicación es transitoria y desaparece después de que el usuario pulse un comando, pulse el Canvas de la aplicación o repita el gesto de deslizar el dedo rápidamente desde el borde. Si es necesario, puedes mantener visible la barra de la aplicación para facilitar los escenarios de selección múltiple.

Usar menús contextuales

Puedes usar los menús contextuales para acciones del Portapapeles (como cortar, copiar y pegar) o para comandos que se aplican a contenido que no se puede seleccionar (como una imagen en una página web).

El sistema ofrece aplicaciones con menús contextuales predeterminados para el texto y los hipervínculos. Para el texto, el menú contextual predeterminado muestra los comandos del Portapapeles. Para los hipervínculos, el menú predeterminado muestra comandos para copiar el vínculo y para abrirlo.

Colocación de los comandos

Vamos a usar una aplicación ficticia de restaurantes para ilustrar el proceso de organización de los comandos en la barra de la aplicación, centrándonos en un escenario de exploración.

Organizar comandos

El primer paso es identificar todos los comandos de la aplicación y organizarlos por escenario o por ubicación. Esta es la lista de los comandos que se usan con más frecuencia cuando se examinan restaurantes.

• ¿Qué comandos deben aparecer en toda la aplicación?
• ¿Qué comandos deben mostrarse solo en ciertas páginas?
• ¿Qué comandos deben usar botones de acción o ir en la configuración?

Crear conjuntos de comandos

Ahora, agrupamos los comandos en conjuntos. La barra de la aplicación muestra conjuntos de comandos como una unidad, con un divisor entre los conjuntos.

• ¿Qué comandos están relacionados según su funcionalidad?
• ¿Qué comandos alternan distintos tipos de vista?
• ¿Qué comandos deben aparecer cuando se realiza una selección?

Comandos de vista	Comandos de filtrar	Comandos de ordenar

Comandos de seleccionar	Comandos de la vista de mapa	Comandos de nuevo elemento

Crear menús

Después, piensa si los conjuntos de comandos estarían mejor en un menú de comandos.

• ¿La barra de la aplicación está demasiado abarrotada o hay demasiados comandos por incluir?
• ¿Hay algún conjunto que podría tener etiquetas más largas o controles interactivos?

Los menús te permiten presentar más opciones en menos espacio e incluir controles interactivos. En este ejemplo, el menú Ordenar muestra una lista simple que facilita la elección de las opciones. El menú Filtrar muestra un conjunto de controles que permite a los usuarios filtrar los elementos por criterios más complejos.

Colocar comandos en la barra de la aplicación

Existen diferentes maneras de colocar los comandos en la barra de la aplicación y puede haber variaciones en determinadas circunstancias. Estas son las reglas de colocación de comandos que debes seguir siempre que sea posible.

Previsibilidad En la medida de lo posible, usa una selección de ubicación coherente de los comandos y las interacciones en todas las vistas de tu aplicación.

Ergonomía Valora cómo la selección de ubicación de comandos específicos puede mejorar la velocidad o facilidad con la que se puede actuar en un comando.

Estética Limita el número de comandos para evitar que la barra de la aplicación parezca complicada. Elige iconos que sean fáciles de comprender o predecir. Usa etiquetas de texto cortas.

1. Colocar los comandos persistentes a la derecha

   

   Comienza por colocar los comandos predeterminados en el lado derecho de la barra de la aplicación. Si hay pocos comandos, la barra de la aplicación podría quedar con comandos solo a la derecha.

   En este ejemplo de los comandos Examinar, los conjuntos de comandos de vista y de filtrar/ordenar son persistentes.

2. Usar los bordes

   

   Si hay muchos comandos, separa los distintos conjuntos a la derecha o a la izquierda para equilibrar la barra de la aplicación y hacer que los comandos sean ergonómicamente más accesibles.

   Aquí decidimos mover el conjunto de comandos de vista a la izquierda y mantener el conjunto de filtrar/ordenar a la derecha. En este ejemplo, cuando la vista de mapa está activa, los comandos de la vista de mapa aparecen a la derecha del conjunto de comandos de vista.

3. Mostrar y ocultar comandos deshabilitados

   

   Deben ocultarse los comandos que no son relevantes en determinadas circunstancias. Cuando aparezcan, no deben alterar el orden de los comandos persistentes.

   En este ejemplo, cuando la vista de mapa está activa, los comandos de la vista de mapa aparecen a la derecha del conjunto de comandos de vista.

4. Insertar comandos de selección

   

   Los comandos que aparecen cuando el usuario realiza una selección se sitúan en el extremo izquierdo, desplazando los comandos que pudiera haber ahí. Esto hace que los comandos de selección sean más notorios y fáciles de acceder.

   Aquí, el conjunto de comandos de vista desplaza el resto a la derecha para hacerse sitio.

Usar una colocación estándar para los controles comunes

Algunos comandos son comunes y aparecen en muchas aplicaciones. Para crear coherencia e infundir confianza, siga estas directrices para decidir dónde colocar los comandos en la barra de la aplicación.

Comandos de selección Los comandos relacionados con la selección siempre se muestran en el extremo izquierdo, ya sean comandos contextuales que aparecen al seleccionar o comandos que afectan a la selección.

En este ejemplo, antes de que los usuarios seleccione algo, se muestra un comando "Seleccionar todo" a la izquierda. Después de que los usuarios seleccionen algo, se muestran los demás comandos de selección a la izquierda.

Comando de nuevo elemento Si tu aplicación llama a un comando "Nuevo" para crear cualquier tipo de entidad (agregar, crear, redactar), coloca ese comando en el borde derecho de la barra. Así, todos los comandos "Nuevo" tendrán una selección de ubicación coherente y serán fácilmente accesible con los pulgares independientemente de la aplicación o contexto específico.

En este ejemplo, el comando "Nueva crítica" permite al usuario crear una nueva crítica de un restaurante. Otros comandos relacionados con "Nueva crítica" se colocan junto a él a la izquierda.

El glifo + solo debe usarse para representar el comando "Nuevo" y no debe aparecer en ningún otro lugar de la barra de la aplicación.

Comandos de eliminar Usa Eliminar/Nuevo si tu aplicación administra entidades individuales que podrían persistir fuera de tu aplicación, por ejemplo, una aplicación de correo o de cámara. Eliminar/Nuevo deben aparecer siempre en este orden.
Comandos de quitar Usa Quitar/Agregar si tu aplicación administra una lista, por ejemplo, lista de tareas pendientes, lista de ciudades en una aplicación de información meteorológica o una lista de restaurantes incluidos en marcadores. Quitar debe aparecer siempre a la izquierda de Agregar.
Comandos de borrar Usa Borrar si vas a realizar una acción destructiva en todos los elementos posibles. Usa la etiqueta del comando y sé explícito acerca de la acción que realizará el comando, por ejemplo, "Borrar selección".