Conceptos básicos de diseño de navegación para aplicaciones de Windows

Encabezado de conceptos básicos de navegación

Si se piensa en una aplicación como si fuera una colección de páginas, el término navegación describe la acción de moverse entre las páginas y dentro de una página. Se trata del punto de partida de la experiencia del usuario, además del modo en el que los usuarios encuentran el contenido y las características que les interesan. Es muy importante y puede ser algo difícil de conseguir.

Contamos con un número elevado de opciones entre las que elegir para la navegación. Podríamos:

ejemplo de navegación 1 Requerir que los usuarios pasen por una serie de páginas en orden.

ejemplo de navegación 2 Proporcione un menú que permita a los usuarios saltar directamente a cualquier página.

ejemplo de navegación 3 Coloque todo en una sola página y proporcione mecanismos de filtrado para ver el contenido.

Aunque no hay ningún diseño de navegación único que funcione para todas las aplicaciones, existen principios y directrices para ayudarte a decidir el diseño adecuado para tu aplicación.

Principios de buena navegación

Empecemos con los principios básicos de diseño de buena navegación:

  • Coherencia: Cumplir las expectativas del usuario.
  • Simplicidad: No hagas más de lo que necesites hacer.
  • Claridad: Ofrece rutas de acceso y opciones claras.

Consistency

La navegación debería ser coherente con las expectativas del usuario. El uso de controles estándar que los usuarios conozcan y de las siguientes convenciones estándar para iconos, ubicación y estilo hará que la navegación sea predecible e intuitiva para los usuarios.

imagen de componentes de la página

Los usuarios esperan encontrar determinados elementos de interfaz de usuario en las ubicaciones estándar.

Simplicidad

Una menor cantidad de elementos de navegación simplifica la toma de decisiones para los usuarios. Ofrecer acceso sencillo a destinos importantes y ocultar los elementos menos importantes ayudará a los usuarios a ir donde quieran, con mayor rapidez.

Primera captura de pantalla de una barra verde con una marca de verificación verde y la palabra Do.

vista de navegación correcta

Presentar los elementos de navegación en un menú de navegación conocido.

ejemplo de cosas que evitar

vista de navegación incorrecta

No sobrecargar a los usuarios con muchas opciones de navegación.

Claridad

Las rutas de acceso claras permiten la navegación lógica para los usuarios. Realizar opciones de navegación obvias y aclarar las relaciones entre páginas debe evitar que se pierdan los usuarios.

Captura de pantalla de una maqueta de aplicación que muestra rutas de acceso claras de navegación para un usuario.

Los destinos están etiquetados con claridad para que los usuarios sepan dónde se encuentran.

Recomendaciones generales

Ahora vamos a tomar nuestros principios de diseño, coherencia, simplicidad y claridad, y los vamos a usar para elaborar algunas recomendaciones generales.

  • Piensa en tus usuarios. Traza rutas habituales que podrían tomar en la aplicación, y en cada página, piensa en por qué está ahí el usuario y dónde podría querer ir.
  • Evita las jerarquías de navegación profundas. Si va más allá de dos niveles de navegación, proporcione una barra de ruta de navegación que muestre al usuario dónde se encuentra y vuelva rápidamente. De lo contrario, se arriesga a dejar al usuario en una jerarquía profunda que tendrá dificultades para salir.
  • Evita el "pogo-sticking". El "pogo-sticking" se produce cuando hay contenido relacionado, pero navegar hasta él requiere que el usuario suba un nivel y después vuelva a bajar.

Uso de la estructura correcta

Ahora que ya conoces los principios generales de navegación, ¿cómo deberías estructurar la aplicación? Hay dos estructuras generales: plana y jerárquica.

Páginas organizadas en una estructura plana

Plana o lateral

En una estructura plana o lateral, las páginas existen en paralelo. Puedes ir de una página a otra en cualquier orden.

Te recomendamos que uses una estructura plana en los siguientes casos:

  • las páginas se pueden ver en cualquier orden;
  • las páginas son claramente distintas entre sí y no tienen una relación primaria-secundaria obvia.
  • Hay menos de 8 páginas en el grupo.
    (Si hay más páginas, a los usuarios les puede resultar difícil comprender el modo en que las páginas son únicas o entender su ubicación actual dentro del grupo. Si no crees que eso es un problema para tu aplicación, organiza las páginas como elementos del mismo nivel. Por otro lado, puedes tener en cuenta la posibilidad de usar una estructura jerárquica para separar las páginas en dos o más grupos pequeños.

Páginas organizadas en una jerarquía

Jerárquica

En una estructura jerárquica, las páginas se organizan en una estructura parecida a un árbol. Cada página secundaria tiene un solo elemento primario, pero un elemento primario puede tener una o más páginas secundarias. Para llegar a una página secundaria, hay que moverse a través del elemento primario.

Las estructuras jerárquicas sirven para organizar un contenido complejo que ocupe una gran cantidad de páginas. La desventaja es que se produce cierta sobrecarga de navegación: cuanto más profunda es la estructura, más clics se necesitan para que los usuarios vayan de una página otra.

Te recomendamos una estructura jerárquica en los siguientes casos:

  • Las páginas deben recorrerse en un orden específico.
  • Hay una relación primaria-secundaria clara entre las páginas.
  • Hay más de 7 páginas en el grupo.

una aplicación con una estructura híbrida

Combinación de estructuras

No es necesario que elijas entre una estructura y otra, ya que muchas aplicaciones bien diseñadas usan ambas. Una aplicación puede usar estructuras planas para las páginas de nivel superior, que pueden verse en cualquier orden, y estructuras jerárquicas para las páginas que tienen relaciones más complejas.

Si la estructura de navegación tiene varios niveles, te recomendamos que los elementos de navegación punto a punto solo se vinculen con los elementos del mismo nivel dentro de su subárbol. Ten en cuenta la ilustración adyacente, que muestra una estructura de navegación con dos niveles:

  • En el nivel 1, el elemento de navegación punto a punto debe proporcionar acceso a las páginas A, B y C.
  • En el nivel 2, los elementos de navegación punto a punto de las páginas A2 solo deben vincularse a otras páginas A2. No se deben vincular a páginas de nivel 2 del subárbol C.

Uso de los controles correctos

Cuando hayas decidido la estructura de las páginas, tendrás que decidir cómo navegarán los usuarios a través de esas páginas. UWP ofrece diversos controles de navegación para ayudar a garantizar una experiencia de navegación coherente y fiable en la aplicación.

Imagen de marco

Marco

Con algunas excepciones, cualquier aplicación que tiene varias páginas usa un marco. Por lo general, una aplicación tiene una página principal que contiene el marco y un elemento de navegación primario, como un control de vista de navegación. Cuando el usuario selecciona una página, el marco la carga y la muestra.

imagen de pestañas y tabla dinámica

Navegación superior

Muestra una lista horizontal de vínculos a páginas del mismo nivel. El control NavigationView implementa el patrón de navegación superior.

Usa navegación superior en estos casos:

  • Quieres mostrar todas las opciones de navegación en la pantalla.
  • Quieres más espacio para el contenido de tu aplicación.
  • Los iconos no pueden describir claramente las categorías de exploración.

imagen de pestañas y tabla dinámica

Pestañas

Muestra un conjunto horizontal de pestañas y su contenido respectivo. El control TabView es útil para mostrar varias páginas (o documentos), a la vez que proporciona a los usuarios la capacidad de reorganizar, abrir o cerrar nuevas pestañas.

Usa pestañas en estos casos:

  • Si quieres que los usuarios puedan abrir, cerrar o reorganizar las pestañas dinámicamente.
  • Esperas que haya un gran número de pestañas abiertas a la vez.
  • Esperas que los usuarios puedan mover fácilmente las pestañas entre las ventanas de la aplicación que usan pestañas, de manera similar a los exploradores web, como Microsoft Edge.

imagen de pestañas y tabla dinámica

Ruta de navegación

Muestra una lista horizontal de vínculos a páginas en cada uno de los niveles superiores. El control BreadcrumbBar implementa el patrón de navegación superior.

Use una ruta de navegación cuando:

  • Quiere mostrar la ruta de acceso a la ubicación actual.
  • Tiene muchos niveles de navegación.
  • Espera que los usuarios puedan volver a cualquier nivel anterior.

imagen de vista de navegación

Navegación izquierda

Muestra una lista vertical de vínculos a páginas de nivel superior. Úsala en estos casos:

  • Las páginas existan en el nivel superior.
  • Existen muchos elementos de navegación (más de 5).
  • No se espera que los usuarios cambien entre las páginas con frecuencia.

Imagen de lista y detalles

Lista/Detalles

Muestra una lista de elementos. Al seleccionar un elemento, se muestra su página correspondiente en la sección de detalles. Úsala en estos casos:

  • no se espera que los usuarios cambien entre elementos secundarios con frecuencia;
  • si desea permitir al usuario realizar operaciones de alto nivel, como eliminar u ordenar, en elementos individuales o grupos de elementos, y también quieres que el usuario pueda ver o actualizar los detalles de cada elemento.

El patrón de lista y detalles es adecuado para las bandejas de entrada de correo electrónico, las listas de contactos y la entrada de datos.

Imagen de hipervínculos y botones

Hipervínculos

En el contenido de una página pueden aparecer elementos de navegación incrustados. A diferencia de otros elementos de navegación, que deben ser coherentes en todas las páginas, los elementos de navegación de contenido incrustado son exclusivos en cada página.

Siguiente: Agregar código de navegación a la aplicación

En el siguiente artículo, Implementación de la navegación básica, se muestra el código necesario para usar un control Frame para habilitar en tu aplicación la navegación básica entre dos páginas.