Compartir a través de


Integrar una aplicación de banda ancha móvil con otros componentes de Windows

Puede usar Windows 10 superficies de interfaz de usuario (UI) para mejorar la experiencia general de la aplicación de banda ancha móvil.

Para obtener instrucciones de diseño de experiencia del usuario adicionales para el diseño, navegación, comandos, animaciones, interacción táctil, ajuste y escalado, contratos y funcionalidades, iconos y notificaciones, controles de interfaz de usuario, itinerancia de aplicaciones a la nube y aspectos básicos, consulta Index of UX guidelines for UWP apps.

Este tema contiene las siguientes secciones:

Configuración de la aplicación

Puede usar la configuración de la aplicación para incluir la configuración de las aplicaciones. Algunos ejemplos de estos son los siguientes:

  • Inicio y cierre de sesión

  • Ver y editar el perfil de usuario

  • Cambio de la dirección de facturación

  • Ver y editar opciones de pago

  • Ver y establecer preferencias de marketing

Error en la experiencia del usuario

General

La aplicación de banda ancha móvil puede tener una serie de casos de error que se deben tratar correctamente. Algunos ejemplos comunes son los siguientes:

  • Falta el dispositivo o se desconecta Aparece cuando falta un dispositivo como una SIM o un dongle o se desconecta.

  • Dispositivo bloqueado Aparece cuando un dispositivo conectado está bloqueado para el usuario.

  • Se perdió la conectividad a Internet Aparece cuando no se detecta ninguna conexión de red.

  • Varios dispositivos están conectados Aparece cuando se conecta un adaptador integrado y un dongle externo. Se recomienda un error de barra de notificación para estos casos.

  • Errores de validación de campos de formulario Aparece cuando un usuario escribe información incorrecta en un formulario. Los errores de validación deben mostrarse en línea para que el usuario sepa el campo con el que está asociado el error.

Para obtener instrucciones sobre cómo presentar errores, consulte Diseño de la interfaz de usuario. En el ejemplo siguiente, se muestra una barra de notificación en la parte superior de la página.

Captura de pantalla de una barra de notificación en la que se muestran errores.

Errores en el uso de datos

Los siguientes casos de error deben mostrarse en la página de información general de las siguientes maneras:

  • Cuando el usuario esté cerca de la expiración del plan: use una barra en la parte superior de la pantalla para indicar que el plan del usuario está cerca de la expiración.

  • Cuando el uso supera el límite de datos Las barras de datos deben estar llenas y también debe haber un mensaje en línea que describa el problema e indique al usuario qué hacer al respecto. Como alternativa, el mensaje de uso sobre límite de datos puede estar en una barra de notificación en la parte superior de la página.

  • Cuando el plan haya expirado: use una barra en la parte superior del cuadro de resumen para describir el problema y las acciones que el usuario puede realizar. En este caso, no se muestra el uso de datos, el ciclo de facturación ni la información móvil.

  • Itinerancia internacional: indique itinerancia en la parte inferior de la sección de resumen.

Vistas de aplicación

La aplicación debe ser adaptable y ser capaz de ajustarse a una serie de diseños, entre los que se incluyen:

  • Horizontal

  • Vertical

  • En paralelo con otra aplicación

  • Lleno

  • Teclado hacia arriba

    Nota Cuando el teclado táctil esté arriba, asegúrese de que los elementos como los campos de formulario se desplazan correctamente.

En los ejemplos siguientes se muestra cómo se ven algunas páginas en paralelo con otra aplicación.

Captura de pantalla de la página de aterrizaje de una aplicación de banda ancha móvil que se muestra en paralelo con otra aplicación.

Captura de pantalla de la página de servicios de una aplicación de banda ancha móvil que se muestra en paralelo con otra aplicación.

Asegúrate de que la aplicación sea accesible a través de vistas de la aplicación, incluido el modo de contraste alto y la preparación del lector de pantalla. Para obtener más información sobre cómo hacer que la aplicación sea accesible, consulta Accesibilidad en aplicaciones para UWP con JavaScript.

Puntos de inicio

La aplicación de banda ancha móvil está disponible para los usuarios en la vista Todas las aplicaciones, en Windows Administrador de conexiones o a través de una notificación del sistema.

Diagrama que muestra varios puntos de entrada para iniciar una aplicación de banda ancha móvil.

Inicio desde Windows Administrador de conexiones

Captura de pantalla del inicio de una aplicación de banda ancha móvil con Windows Administrador de conexiones.

Puede conectarse a la aplicación de banda ancha móvil mediante Windows Administrador de conexiones. La aplicación debe abrirse en la página de aterrizaje con información de uso de datos y cuenta. Después de conectarse, Windows Administrador de conexiones muestra la cuenta actual y el uso de datos.

Captura de pantalla de Windows Administrador de conexiones mostrar información de uso de datos y cuentas.

Inicio automático desde el administrador de conexiones durante un flujo de compra del portal cautivo

Cuando el usuario está conectado a una red del portal cautivo en la que se redirige el tráfico web, Windows le proporciona la opción de iniciar automáticamente su aplicación si está instalada. La aplicación debe abrirse en la página Planes que proporciona información sobre cómo comprar acceso a Internet.

Iniciar aplicación desde el icono en la vista Todas las aplicaciones

La aplicación debe admitir a los usuarios que tienen varias cuentas simultáneas (por ejemplo, mediante dos adaptadores de banda ancha móviles USB externos). Cuando la aplicación se inicia desde un icono, la aplicación debe permitir que los usuarios seleccionen la cuenta que quieren usar.

Si la aplicación se suspendió o ya se está ejecutando, debería mostrar la última página usada. Si la aplicación aún no se estaba ejecutando o suspendió la información no está disponible, la aplicación debe abrirse en la página de aterrizaje.

Notificaciones de iconos y notificaciones del sistema

En el menú Inicio , los iconos son la representación principal de una aplicación. Los usuarios inician sus aplicaciones a través de esos iconos, que pueden mostrar contenido nuevo, relevante y adaptado a través de notificaciones. Esto hace que el menú Inicio se sienta vibrante y permite al usuario ver las novedades de un vistazo. Una aplicación también puede comunicar eventos críticos para el tiempo al usuario a través de notificaciones del sistema, tanto si el usuario está en otra aplicación, en la pantalla Inicio o en el escritorio. La metodología para diseñar y entregar notificaciones del sistema estrechamente paralelas a las de los mosaicos, lo que reduce la curva de aprendizaje.

Captura de pantalla del icono de una aplicación de banda ancha móvil en la pantalla Inicio de Windows.

Una notificación del sistema puede contener texto e imágenes, pero no admite acciones secundarias como botones. Piense en la notificación del sistema como similar a una notificación de globo de Windows del área de notificación de la barra de tareas. Al igual que las notificaciones de globo, aparece una notificación del sistema en la esquina inferior derecha de la pantalla. Cuando un usuario pulsa o hace clic en la notificación del sistema, la aplicación asociada se inicia en una vista relacionada con la notificación. Este es el único mecanismo por el que una aplicación puede interrumpir a un usuario de otra aplicación. El usuario puede activar, descartar o ignorar las notificaciones del sistema. El usuario puede deshabilitar todas las notificaciones del sistema de una aplicación.

Captura de pantalla de una notificación del sistema para una aplicación de banda ancha móvil.

Una notificación del sistema solo debe usarse para obtener información de alto interés para el usuario y normalmente implica alguna forma de participación del usuario. Es una buena opción para las alertas de correo electrónico entrantes, las solicitudes de chat de mensajería instantánea y las noticias de última hora. Sin embargo, es muy importante que, cuando considere la posibilidad de usar una notificación del sistema, se da cuenta de que, debido a su naturaleza transitoria, es posible que el usuario nunca lo vea. Al usar notificaciones del sistema para el uso por encima del límite de los datos o las alertas móviles, considere la posibilidad de mostrar la información en el icono y en las vistas de la aplicación en caso de que el usuario final pierda la notificación del sistema.

Pantalla de presentación

Puedes usar la pantalla de presentación para promocionar la personalización de marca. Para obtener más información sobre la pantalla de presentación, consulta Agregar una pantalla de presentación.

Captura de pantalla de la pantalla de presentación de una aplicación de banda ancha móvil que promueve la personalización de marca.

Resumen rápido

Diseño adecuado para las notificaciones de operador:

  • Use las notificaciones del sistema y del icono para alertar a los usuarios de mensajes importantes e de alto interés relacionados con la cuenta y el plan de servicio del suscriptor.

  • Personalice los colores del fondo del sistema y los iconos y el logotipo en función de las directrices de su marca.

  • Incluya notificaciones de operador de SMS o USSD importantes y alertas relacionadas con la cuenta y el plan de servicio del suscriptor directamente en la página de aterrizaje.

Diseño inadecuado para las notificaciones de operador:

  • No muestre notificaciones del sistema para obtener información que no sea en tiempo real (como anuncios promocionales).

  • No muestre mensajes de chat de usuario a usuario y promociones y anuncios mixtos junto con notificaciones y alertas del operador, ya que los usuarios finales pueden perder notificaciones de operador importantes.

Recursos adicionales

Diseño de la experiencia del usuario de una aplicación de banda ancha móvil