Diseños de comandos

Tienes a tu disposición varias superficies para colocar en ella comandos y controles en tu aplicación de la Tienda, como el lienzo de la aplicación, las ventanas emergentes, los cuadros de diálogo y las barras de la aplicación. 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.

En aplicaciones de la Tienda, los comandos son elementos interactivos de la interfaz de usuario que el usuario puede utilizar para realizar una acción. Un comando se distingue de un elemento de navegación porque este último mueve al usuario a una página distinta, mientras que un comando permite llevar a cabo una acción en la página actual. Los elementos de navegación hacen que la aplicación sea utilizable. Los comandos la hacen útil.

Para más información sobre las distintas superficies de comandos en las aplicaciones, consulta Diseñar la interfaz de usuario.

Tipos de comando

Filtro

Los comandos de filtro quitan u ocultan el contenido dentro de un conjunto de datos, según ciertos criterios. Por ejemplo, es posible que un usuario decida ver solo aquellos juegos de la Tienda Windows que se encuentren bajo la categoría "Aventura".

 

 

Tabla dinámica

Los comandos de tabla dinámica reorganizan el contenido dentro de un conjunto de datos y ofrecen una vista distinta de los datos en función de la tabla dinámica. Por ejemplo, es posible que un usuario decida organizar las canciones por álbum, por artista o por canción.

 

 

Ordenación

Los comandos de ordenación cambian el orden en que se muestra el contenido dentro de un conjunto de datos. Por ejemplo, es posible que un usuario elija destinos en una aplicación de viajes en función de la popularidad de los destinos.

 

 

Vista

Los comandos de vista cambian el estilo o el método en que se muestra el contenido. Por ejemplo, en una aplicación que busca hoteles, es posible que un usuario vea los hoteles en el mapa en lugar de en una lista.

 

 

Sugerencias

Puedes colocar comandos para sugerencias en el lienzo si crees que beneficiarán a los usuarios. Por ejemplo, en la aplicación Correo en Windows 8.1, hay un comando "ellipses" que muestra opciones adicionales. Al hacer clic en él muestra la barra de la aplicación, además de los métodos convencionales de Windows que muestran una barra de la aplicación.

 

 

Puedes diseñar estas sugerencias para que coincidan con el estilo de tu aplicación. Esta aplicación de noticias usa la misma sugerencia de barra de la aplicación con un icono de menú que muestra una página con opciones de menú.

 

 

Otros

Cualquier elemento interactivo de la interfaz de usuario que permita al usuario realizar una acción dentro de la vista actual se considera un comando. A continuación se muestran algunos ejemplos.

 

 

Colocación de los comandos

Usar el lienzo

Si un comando (o un menú de comandos) es esencial y se necesita constantemente para completar tareas en escenarios principales, puedes ponerlo en el lienzo. Por ejemplo, en la aplicación Correo de Windows 8.1, los comandos principales, como responder, nuevo y eliminar aparecen en el lienzo cuando se selecciona un correo.

 

 

Barra de la aplicación inferior

A veces no quieres que los comandos desordenen el lienzo y afecten la capacidad del usuario para consumir el contenido de la aplicación. Usa la barra de la aplicación para mostrar comandos a los usuarios a petición. La barra de la aplicación inferior muestra comandos relevantes para el contexto del usuario, normalmente la página o la selección actuales.

La barra de la aplicación inferior funciona bien para comandos de selección única y múltiple. Puedes programar la aplicación para que la barra aparezca cuando el usuario selecciona objetos.

 

 

Directrices sobre la ubicación de comandos

Puedes ubicar los comandos en distintas posiciones en la barra de la aplicación, pero debes considerar lo siguiente:

• 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.

Recomendamos estas directrices para la ubicación de comandos:

Ubica los comandos predeterminados o persistentes 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.

 

Usa 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. En este ejemplo, decidimos mover el conjunto de comandos de vista a la izquierda y mantener el conjunto de filtrar/ordenar a la derecha. Cuando la vista de mapa está activa, los comandos de la vista de mapa aparecen a la derecha del conjunto de comandos de vista.

 

Muestra y oculta comandos deshabilitados. Estos son comandos no relevantes en ciertas circunstancias. Cuando aparezcan, no deben alterar el orden de los comandos persistentes. En este ejemplo, la vista de mapa está activa y los comandos de la vista de mapa aparecen a la derecha del conjunto de comandos de vista.

 

Inserta 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. En este ejemplo, el conjunto de comandos de vista desplaza el resto a la derecha para hacerse sitio.

 

Ubicación de comandos comunes

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

Ubica los comandos de selección 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.

 

Ubica comandos de nuevo elemento en el extremo derecho de la aplicación. Los comandos de nuevo elemento pueden ser agregar, crear, componer o cualquier otro comando que cree una nueva entidad. Estos comandos deben ser fácilmente accesibles con los pulgares. 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.

 

Ubica comandos de eliminar a la izquierda de los comandos de nuevo elemento. 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.

 

Ubica comandos de eliminar a la izquierda de los comandos de agregar. 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/Agregar deben aparecer siempre en este orden.

 

Ubica comandos de borrar a la izquierda de los comandos de nuevo elemento. 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".

 

Para ver ejemplos de colocación de comandos en la barra de la aplicación inferior, consulta la galería de aplicaciones de la Tienda Windows.

Agrupación de comandos en menús

A veces resulta más eficiente agrupar varios comandos en un menú de comandos. Los menús permiten presentar más opciones en menos espacio. Los menús pueden incluir controles interactivos.

En este ejemplo, el orden de comandos se muestra en un menú simple que facilita al usuario elegir una opción de ordenación. El comando para filtrar muestra un conjunto de controles que permite al usuario filtrar los elementos por criterios más complejos.

 

Menús contextuales

Los menús contextuales suelen tener acciones del Portapapeles, por ejemplo, cortar, copiar y pegar. Estos menús también pueden tener comandos que se aplican al contenido que no puede seleccionarse, 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.

Los usuarios invocan menús contextuales al mantener presionado el contenido en dispositivos táctiles o al hacer clic con el botón derecho en el contenido usando el mouse.

 

 

Nota  

Aprovechar los accesos

Cuando diseñes una aplicación de la Tienda Windows, obtienes cuatro comandos muy útiles en los accesos: buscar, compartir, dispositivos y configuración. Los usuarios invocan los accesos al deslizar rápidamente desde el borde derecho de la pantalla o al apuntar el cursor del mouse hacia el extremo superior o inferior derecho de la pantalla.

 

 

Buscar: permite que los usuarios busquen rápidamente el contenido de la aplicación desde cualquier parte del sistema, incluso desde otras aplicaciones.
Compartir: permite que los usuarios compartan contenido de la aplicación con otras personas o aplicaciones, y reciban contenido compartido.
Inicio: lleva al usuario a la pantalla Inicio. Las aplicaciones no interactúan con este acceso. El comportamiento es automático y siempre el mismo.
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.

 

Evita duplicar la funcionalidad de contrato de aplicación en el lienzo de la aplicación o en la barra de la aplicación.

Temas relacionados

Directrices sobre barras de la aplicación

Directrices sobre menús contextuales

Directrices sobre comandos del Portapapeles

Accesos y contratos