Diseñar la interfaz de usuario (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente
Aprende sobre el diseño de las aplicaciones de Windows en tiempo de ejecución y cómo se diferencian de las aplicaciones tradicionales. Puedes usar varias superficies para tu aplicación de Windows en tiempo de ejecución, como la ventana de la aplicación, controles flotantes, cuadros de diálogo y barras de la aplicación. Elegir la superficie correcta en el momento adecuado puede marcar la diferencia entre una aplicación incómoda y una que vaya como la seda.
La página de la aplicación o Canvas
La página de la aplicación, a veces llamada Canvas, es la base de la interfaz de usuario. El Canvas incluye todo el contenido y los controles. Siempre que sea posible, debes integrar los elementos de la interfaz de usuario en esta superficie básica. Por ejemplo, en lugar de usar una ventana emergente para mostrar un error, puedes mostrar, ocultar o cambiar el mensaje de error fácilmente mediante animaciones integradas. Al presentar la interfaz de usuario integrada, los usuarios pueden sumergirse por completo en la aplicación y permanecer en contexto.
.png "Página de la aplicación (o Canvas)")
Puedes crear tantas páginas de la aplicación como necesites para admitir tus escenarios de usuario. Consulta Planear aplicaciones de la Tienda Windows y Diseño de navegación para obtener más información sobre cómo diseñar páginas de la aplicación que admitan escenarios de usuario.
Windows: cambiar el tamaño de la interfaz de usuario
Los usuarios pueden cambiar el tamaño de tu aplicación para usar otra aplicación o cambiar el tamaño de otra aplicación para usar la tuya. Puedes diseñar la aplicación de modo que el contenido fluya de forma dinámica para optimizar la experiencia de los usuarios cuando cambien el tamaño de tu aplicación.
.png "Pantalla completa") |
Pantalla completa La aplicación rellena toda la pantalla. |
|
Tamaño cambiado El tamaño de la aplicación se ha cambiado a una parte de toda la pantalla. Otras aplicaciones pueden llenar el área restante de la pantalla. |
.png "Tamaño cambiado, aplicación estrecha")
.png "Tamaño cambiado, aplicación ancha")
Consulta Directrices sobre la experiencia del usuario para diseño y escalado para más información.
Teclado táctil y panel de escritura a mano
El teclado táctil (y el panel de escritura a mano de Windows) proporciona una interfaz de usuario secundaria de comandos para la entrada de texto. Este panel aparece cuando un usuario toca un campo de entrada editable (o cuando hace clic en un icono de teclado en la barra de tareas del escritorio de Windows). El panel se descarta cuando el foco deja de encontrarse en el campo de entrada.
El teclado táctil permite la entrada y edición de texto para tabletas y teléfonos, es decir, para diseños que no tienen un teclado de hardware ni otros dispositivos de teclado periféricos. El panel de escritura a mano de Windows permite escribir y editar texto en los diseños basados en lápiz.
De forma semejante a los estados de visualización mencionados antes, puedes diseñar tu aplicación para que el contenido fluya de forma dinámica con el objetivo de optimizar la experiencia del usuario cuando se muestren el teclado táctil o el panel de escritura a mano.
Consulta Directrices para el teclado táctil y el panel de escritura a mano para obtener más información sobre cómo admitir estos modos de entrada de texto.
Barras de la aplicación
Fuera de la página de la aplicación, la barra de la aplicación es la interfaz de comandos principal de la aplicación. Úsala para presentar la navegación, los comandos y las herramientas a los usuarios. En Windows Phone, el menú está oculto de manera predeterminada y se muestra al pulsar los puntos suspensivos. En Windows, la barra de la aplicación está oculta de manera predeterminada y se muestra cuando el usuario desliza rápidamente el dedo desde el borde superior o inferior de la pantalla. La barra de la aplicación tapa el contenido de la aplicación y el usuario la puede descartar de la misma manera en que se muestra o interaccionando con la aplicación.
.png "Barra de la aplicación en el borde inferior de la pantalla")
Consulta el tema sobre el diseño de comandos para obtener más información sobre el diseño de comandos y revisa las directrices para barras de la aplicación para obtener instrucciones sobre la experiencia del usuario.
Windows: accesos
Los accesos son un conjunto específico y coherente de botones que son comunes a todas las aplicaciones: buscar, compartir, dispositivos, configuración e inicio. Consideramos que se trata de acciones básicas que todos los usuarios realizan prácticamente en cada aplicación que usan.
- Buscar Los usuarios pueden buscar contenido de la aplicación o contenido web desde cualquier punto del sistema.
- Compartir Los usuarios pueden compartir contenido de la aplicación con personas o servicios.
- Dispositivos Los usuarios pueden conectarse a dispositivos y enviar contenido, hacer streaming de medios e imprimir.
- Configuración Los usuarios pueden configurar la aplicación según sus preferencias y acceder a la ayuda del usuario.
- Inicio Los usuarios pueden ir directamente a la pantalla Inicio.
.png "Aplicación con accesos")
Consulta estas directrices para más información: búsqueda, uso compartido, configuración de la aplicación y ayuda de la aplicación.
Menús contextuales
El menú contextual, también llamado menú emergente, muestra acciones que el usuario puede realizar en el texto o los elementos de la interfaz de usuario de una aplicación. Puedes usar hasta cinco comandos en cada menú de contenido, como Cortar, Copiar o Abrir con. Este límite ayuda a mantener el menú contextual sencillo, fácil de leer y directamente relevante para el texto o el objeto sobre el que puede actuar el comando.
.png "Menús contextuales")
No utilices menús contextuales como interfaz de comando principal para una aplicación. Para eso está la barra de la aplicación. Consulta las directrices para menús contextuales para más información.
Cuadros de diálogo de mensaje
Los cuadros de diálogo de mensaje son cuadros de diálogo que requieren expresamente la interacción del usuario. Atenúan la ventana de la aplicación y piden al usuario una respuesta para poder continuar. Usa los cuadros de mensaje sólo cuando quieras detener la actividad del usuario y pedirle una respuesta.
.png "Cuadro de diálogo de mensaje")
En el ejemplo anterior de Windows, la ventana de la aplicación está atenuada y el usuario debe pulsar uno de los dos botones para descartar el cuadro de diálogo. Esto quiere decir que el mensaje del cuadro de diálogo no se puede ignorar.
Consulta las directrices para cuadros de diálogo de mensaje para más información.
Controles flotantes
Los controles flotantes muestran una UI temporal y que se puede descartar, relacionada con la acción que está realizando el usuario en ese momento. Por ejemplo, puedes usar controles flotantes para pedir al usuario que confirme una acción, mostrar un menú desplegable desde un botón de la barra de la aplicación o mostrar más detalles sobre un elemento. La diferencia entre los controles flotantes y los cuadros de diálogo de mensaje es que un control flotante solo debe mostrarse en respuesta a una pulsación o un clic del usuario, y siempre se descarta cuando el usuario pulsa fuera de él. Un cuadro de diálogo de mensaje solo debe mostrarse cuando sea necesario interrumpir al usuario y pedirle algún tipo de interacción.
.png "Control flotante")
En el ejemplo anterior de Windows, la aplicación sigue activa y el usuario puede pulsar el botón o pulsar fuera del control flotante para descartarlo. Esto quiere decir que el mensaje del control flotante se puede ignorar. Consulta Directrices para controles flotantes para obtener más información.
Notificaciones del sistema (o pancartas)
Una notificación del sistema (también llamada pancarta en Windows Phone) es una notificación que se muestra a los usuarios cuando la aplicación está en segundo plano. Es útil para mantener a los usuarios al tanto de información que quieren conocer en tiempo real (pero no ocurre nada si no la leen). El usuario pulsa en la notificación del sistema para cambiar a tu aplicación y obtener más información.
Ten en cuenta que los usuarios pueden encontrarlas molestas e incómodas, por lo que debes pensar bien dónde quieres mostrarlas. Consulta las directrices para notificaciones del sistema para más información.
Iconos
.png "Iconos en la pantalla Inicio") |
Los iconos aparecen en la pantalla Inicio (en Windows, reemplazan los accesos directos de la aplicación que se mostraban en la pantalla del escritorio y en el antiguo menú Inicio). Los usuarios pulsan el icono de tu aplicación para iniciarla. Consulta las directrices para iconos para más información. |
Errores
Los errores de una aplicación pueden comunicarse a través de tres superficies principales. El desarrollador de la aplicación elige la superficie correcta según el contenido y las consecuencias del error.
| Para mostrar: | Usa esta superficie: |
|---|---|
Un error no crítico específico de un elemento de la aplicación. La aplicación no puede solucionar el problema, pero el usuario sí. Interacción del usuario: el usuario puede seguir interaccionando con la aplicación, los componentes del sistema y otras aplicaciones sin descartar el error. Ejemplo: el usuario especifica una cadena no válida en un cuadro de entrada de texto y después vuelve a escribirla. |
Texto en línea en el Canvas
|
Un error no crítico que se aplica a toda la aplicación. La aplicación no puede solucionar el problema, pero el usuario sí. Interacción del usuario: el usuario puede seguir interaccionando con la aplicación, los componentes del sistema y otras aplicaciones sin descartar el error. Ejemplo: no se puede sincronizar el correo en este momento. |
Texto en la parte superior de la página
|
Un error no crítico pero significativo que se aplica a toda la aplicación y la aplicación puede sugerir una solución. Interacción del usuario: el usuario puede responder a la petición o seguir interaccionando con la aplicación, los componentes del sistema y otras aplicaciones sin descartar el error. |
Barra de advertencias y errores
|
Un error crítico que se aplica a toda la aplicación e impide que el usuario utilice la aplicación. Interacción del usuario: el usuario no puede seguir interaccionando con la aplicación a menos que descarte el error. Sin embargo, el usuario puede interaccionar con componentes del sistema y usar otras aplicaciones. |
Cuadro de diálogo de mensaje
|
No uses controles flotantes, notificaciones del sistema ni superficies de interfaz de usuario personalizadas para mostrar errores.
Errores: texto en línea
En general, el error en línea es la primera opción de superficie. Un texto de error en línea envía mensajes en el contexto de las acciones actuales de los usuarios o de la propia página de la aplicación actual. Un error en línea no requiere una acción explícita del usuario para descartar el mensaje. El mensaje desaparece automáticamente cuando ya no corresponde.
| Debes | Alinear el mensaje con el control o elemento con el que se relacione el mensaje. |
| Diseñar el mensaje con suficiente espacio alrededor para aumentar la intensidad focal. |
En el siguiente ejemplo de Windows se muestra un mensaje de error en línea asociado con un cuadro de texto específico.
.png "Mensaje de error en línea asociado con un cuadro de texto específico")
| No debes | Incluir acciones o comandos en el mensaje. |
En el siguiente ejemplo de Windows, una barra de advertencias y errores sería una mejor elección.
.png "Acción que sería más adecuada como un error o una barra de advertencia")
Errores: barra de errores o advertencias
Usa una barra de errores o advertencias para notificar al usuario los errores y advertencias importantes, y para instarle a que realice una acción. Los mensajes de error informan al usuario que ocurrió un problema, explican por qué sucedió y proporcionan una solución para que el usuario pueda resolver el problema. Los mensajes de advertencia alertan al usuario de una condición que podría causar un problema en el futuro.
| Debes | Colocar la barra en la parte superior de la pantalla, para instar al usuario para que la tenga en cuenta y tome medidas. |
| Aplicar color a la barra con la paleta de la aplicación. | |
| Usar el mismo color y diseño para todas las barras de advertencias y errores. |
.png "Barra de errores")
| No debes | Mostrar barras con diferentes colores o glifos (como un escudo o signo de exclamación) basados en la gravedad percibida. |
| Usar un glifo 'X' para cerrar la barra; en lugar de eso, usa un botón con la etiqueta Cerrar. | |
| Usar una barra de errores y advertencias para mensajes informativos. |
El mensaje del siguiente ejemplo de Windows es meramente informativo y no se requieren acciones. En este caso, se debería haber usado un mensaje en línea en la parte superior de la pantalla.
.png "Uso inadecuado de la barra de errores o advertencias")
Errores: cuadros de diálogo de mensaje
Usa sólo un cuadro de diálogo de mensaje si se necesita un mensaje modal, que impida al usuario interactuar con la aplicación.
| Debes | Usar un cuadro de diálogo de mensaje si el usuario debe realizar una acción antes de seguir usando la aplicación. |
El siguiente ejemplo de Windows es un uso adecuado de un cuadro de diálogo de mensaje de error porque los usuarios no pueden usar la aplicación a menos que tengan una cuenta activa.
.png "Uso adecuado de un cuadro de diálogo de mensaje de error")
| No debes | Usar un cuadro si el usuario puede ignorar el mensaje. |
En el siguiente ejemplo, no hay nada del error que pueda requerir que bloquees al usuario hasta que lo solucione. Una barra de errores o advertencias habría sido una mejor elección.
.png "Uso inadecuado de un cuadro de diálogo de mensaje de error")
Temas relacionados
Directrices para barras de la aplicación
Directrices para configuración de la aplicación
Directrices para uso compartido de contenido
Directrices sobre controles flotantes
Directrices para cuadros de diálogo de mensaje
Directrices para menús contextuales