Directrices para diseñar una interfaz de usuario informativa

Applies to Windows and Windows Phone

Diseña una interfaz de usuario informativa que enseñe a los usuarios cómo funciona tu aplicación de la Tienda Windows.

Qué hacer y qué no hacer

  • Usa la interfaz de usuario informativa para presentar a un usuario nuevo lo que puede hacer la aplicación.
  • Úsala para ofrecer sugerencias sobre nuevas características o detalles concretos sobre los cambios que se han realizado en la aplicación tras una actualización.
  • Integra la interfaz de usuario informativa con tareas concretas.
  • No bloquees la interacción con la interfaz de usuario de la aplicación.

Instrucciones de uso adicionales

En algunos casos, la mejor manera de ayudar a los usuarios a interactuar con tu aplicación de la Tienda Windows es que la interfaz de usuario de la propia aplicación les enseñe a usarla. Usamos el término interfaz de usuario informativa para hacer referencia a este tipo de guía. Un buen ejemplo es el uso de un elemento de la interfaz de usuario, como texto en línea o un control flotante, para indicar al usuario cuándo debe usar una interacción táctil para realizar una tarea.

Ten en cuenta que la interfaz de usuario informativa no es un sustituto de un diseño esmerado. Si la usas con demasiada frecuencia o fuera de contexto, puedes interrumpir el flujo de la aplicación y mermar su efectividad. Antes de agregar una interfaz de usuario informativa, explora otras formas de presentar tu aplicación a los usuarios. Consulta los temas relacionados para obtener más información sobre los diseños, la navegación y los controles.

Aquí te mostramos algunos ejemplos en los que la interfaz de usuario informativa puede ayudar a los usuarios:

  • Ayudar a los usuarios a descubrir interacciones táctiles. En la siguiente captura de pantalla se muestra la UI informativa en la que se enseña a un jugador a usar los gestos táctiles en el juego, Cut the Rope.

    Captura de pantalla de juego que muestra un mensaje de la UI informativa, "Slide acress to cut the rope"

  • Causar una excelente primera impresión. Considera la opción de usar la interfaz de usuario informativa para presentar a un usuario nuevo lo que puede hacer la aplicación. Por ejemplo, cuando Momentos especiales se inicia por primera vez, la interfaz de usuario informativa pide al usuario que comience a crear películas.

    Pantalla de inicio de la aplicación Momentos especiales

  • Guiar a los usuarios para que den el siguiente paso en una tarea complicada. En la aplicación Windows Mail, una sugerencia en la parte inferior de la bandeja de entrada dirige a los usuarios a Configuración para acceder a mensajes más antiguos.

    Captura de pantalla recortada de la aplicación Windows Mail que muestra un mensaje de la UI informativa

    Cuando el usuario hace clic en el mensaje, el control flotante Configuración de la aplicación aparece en el lado derecho de la pantalla y permite al usuario completar la tarea. En estas imágenes se muestra la aplicación Mail antes y después de que un usuario haga clic en el mensaje de la interfaz de usuario informativa.

    AntesDespués
    Captura de pantalla de la aplicación Windows MailCaptura de pantalla de la aplicación Windows Mail con un control flotante de configuración extendido

     

  • Introducir cambios en la interfaz de usuario. Si realizaste muchos cambios en la interfaz de usuario en la versión más reciente de tu aplicación, es posible que a los usuarios les interese recibir sugerencias sobre las nuevas características o detalles específicos sobre los cambios en la aplicación.

Principios del diseño de la UI informativa

  • Sencillo ante todo. Introduce un concepto básico cada vez y usa imágenes siempre que sea posible. Considera la opción de agregar una sección Ayuda al control flotante Configuración en tu aplicación de la Tienda Windows para tratar las características complejas.
  • Enseñar en contexto. Integra la interfaz de usuario informativa con la tarea que ayuda a completar al usuario. Es más probable que un usuario retenga un concepto si se presenta cuando más lo necesita.
  • No bloquear la interacción. Asegúrate de que los usuarios puedan seguir interaccionando con la aplicación mientras se muestra la interfaz de usuario informativa. La interfaz de usuario informativa debería ayudar a los usuarios en lugar de suponer una molestia o un estorbo.
  • Informar y luego desaparecer. Quita la interfaz de usuario informativa tan pronto como deje de ser relevante o permite que el usuario la omita. También, en la mayoría de los casos, los usuarios solamente necesitan que la interfaz de usuario informativa se muestre una sola vez. Evita mostrar la misma interfaz de usuario informativa de manera repetida.
  • Usarla con moderación. A menudo un diseño esmerado y una sección de Ayuda pueden informar al usuario de todo lo que necesiten saber para disfrutar de la aplicación. Considera la amplitud de opciones de diseño antes de agregar la interfaz de usuario informativa a tu aplicación.

Temas relacionados

Para diseñadores
Principios de diseño de Microsoft
Diseño
Controles
Directrices para ayuda de la aplicación
Para desarrolladores (HTML)
Creación de una interfaz de usuario (JavaScript)
Para desarrolladores (XAML)
Creación de una interfaz de usuario (C#/C++/VB)

 

 

Mostrar:
© 2014 Microsoft