Conceptos básicos de diseño de navegación para aplicaciones de Windows
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.
Tiene un gran número de opciones para realizar la navegación. Podría:
Requerir que los usuarios pasen por una serie de páginas en orden.
Proporcione un menú que permita a los usuarios saltar directamente a cualquier página.
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.
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.
Presentar los elementos de navegación en un menú de navegación conocido.
No agote 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.
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 están y vamos a salir rápidamente. De lo contrario, corre el riesgo de que el usuario se encame en una jerarquía profunda que tendrá dificultades para salir.
- Evite "pogo-sticking". Pogo-sticking se produce cuando hay contenido relacionado, pero navegar a él requiere que el usuario suba un nivel y 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.
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.
(Cuando hay más páginas, puede ser difícil que los usuarios comprendan cómo las páginas son únicas o comprender su ubicación actual dentro del grupo. Si no cree que se trata de un problema para la aplicación, continúe y haga que las páginas sean del mismo nivel. De lo contrario, considere la posibilidad de usar una estructura jerárquica para dividir las páginas en dos o más grupos más pequeños).
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.
Combinación de estructuras
No tienes que elegir una estructura ni la otra; 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. XAML proporciona una variedad de controles de navegación para ayudar a garantizar una experiencia de navegación coherente y confiable en la aplicación.
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.
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.
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.
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.
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.
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.
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, Implementar navegación básica, se muestra el código necesario para usar un Frame control para habilitar la navegación básica entre dos páginas de la aplicación.
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de