Navigation
| Iframe | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Navbar
| Iframe | ||||||||
|---|---|---|---|---|---|---|---|---|
|
App Bar
| Iframe | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Counter
| Iframe | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Drawer
| Iframe | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Menu
| Iframe | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Pagination
| Iframe | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Tabs
UI Shell
El shell de la interfaz de usuario está formado por tres componentes: el encabezado, el panel izquierdo y el panel derecho. Los tres se pueden usar de forma independiente, pero los componentes fueron diseñados para trabajar juntos.
Header
Este componente es parte de UI Shell y contempla el más alto nivel de navegación. El header se utiliza para la navegación con más jerarquía dentro del software, es recomendado tener a primera vista las acciones más necesarias, o con más prioridad para el usuario, este menu puede activar los paneles izquierdo y derecho. El header se compone de varios elementos:
Identificador
Logo del producto
Nombre del producto
Navegación
Links: muestra la navegación en nivel 1 (máximo 6 elementos)
Dropdown: muestra la navegación en un segundo nivel de detalle (máximo 4 elementos)
Acciones
Buscar: despliega el input de búsqueda
Notificaciones: Despliega un dropdown de notificaciones con link relacionado.
Administración: Aquí se debe desplegar todo lo que esté relacionado a la administración del software por parte del cliente.
Usuario: es donde el usuario encontrará todas las opciones que estén relacionados a las preferencias de usuario.
Mobile
Tanto el menú de navegación principal como los items del sidebar se unen en el menú de navegación móvil, donde muestra la hamburguesa.
Sidebar
Este panel izquierdo es parte de la carcasa del UI Shell. El panel izquierdo contiene navegación secundaria y se coloca debajo del encabezado y se fija a la izquierda. Tanto los enlaces como los submenús se pueden usar en la navegación lateral y se pueden mezclar.
Use el panel izquierdo si hay más de cinco elementos de navegación secundarios, o si espera que un usuario cambie entre elementos secundarios con frecuencia. Los submenús se indican con el icono de caret down y se expanden cuando se hace clic, empujando los otros elementos hacia abajo en el panel. Para contraer el submenú, el usuario debe hacer clic nuevamente en el encabezado del menú en el panel izquierdo.
Consideraciones de accesibilidad
Las etiquetas deben ser claras y concisas.
Los títulos deben ser únicos y describir claramente el contenido de la página.
Evite nombres de menú muy largos para facilitar la comprensión y la perceptibilidad.
No use la misma palabra o frase al comienzo de un conjunto de elementos de menú.
Use una identificación única para cada elemento del menú.
Vea también las consideraciones de tipografía y color.
Cómo se construye el menú de navegación
En una URL dentro del sitio, se configurarán los accesos y nombres de topbar y sidebar de navegación.
Funciones de la vista
Agregar item al menú
Generará un nuevo item al final de la lista de items.
Llevará al usuario a la posición de scroll del nuevo item añadido y activará el input para escribir el “Nombre a mostrar” del item a añadir.
Campos del item
Nombre a mostrar: Campo alfanumérico que sirve para mostrar el nombre del acceso dentro del topbar de navegación. El input sólo debe admitir un máximo de 25 caracteres.
Tipo: Campo desplegable con selección única que mostrará las opciones:
Acceso directo
Menú desplegable
Destino: Campo alfanumérico que sirve para indicar la URL destino del botón. Este campo sólo estará habilitado si el “Tipo” de item es “Acceso directo”, en caso contrario, debe estar deshabilitado.
Permisos de visualización: Campo desplegable con buscador y selección múltiple con referencia a la lista de registros de “Roles” dentro del Tenant y la Unidad de Negocio activa del usuario.
Agrear sub item: el cuál puede agregarse como menú desplegable o sidebar, y tiene los siguientes campos:
Nombre a mostrar
Tipo
Acceso directo
Menú desplegable
Destino
Permisos de visualización
Guardar
Que al ser pulsado, guarde los cambios pero no los modifique.
Restaurar
Que al ser pulsado, revierta todos los cambios hasta la última versión guardada.
Publicar
que al ser pulsado, verifique que se hayan ejecutado cambios.
Si se ejecutaron cambios, muestra modal de confirmación.
Si NO se ejecutaron cambios, publica la última versión guardada.
Flujo gráfico de la creación de items y sub items por contexto de topbar y sidebar:
Más componentes de navegación
Breadcrumbs
El componente de breadcrumbs (también conocido como migas de pan) es un patrón de navegación secundario que muestra la jerarquía entre el contenido o rastrea la ruta de un usuario. Las migas de pan permiten a los usuarios moverse rápidamente a un nivel principal o paso anterior. Se debe poder hacer clic en todos los enlaces de una ruta de exploración.
Las migas de pan son muy efectivas en productos y experiencias que tienen una gran cantidad de contenido organizado en una jerarquía de más de dos niveles. También son altamente efectivos en flujos que contienen múltiples pasos, operando de manera similar a un indicador de progreso. Las migas de pan siempre se tratan como secundarias y nunca deben reemplazar por completo la navegación primaria.
Consideraciones de accesibilidad
Los breadcrumbs deben permanecer en el mismo orden y ubicación en cada página web.
El texto del enlace debe ser claro, reflejar la ubicación de la ruta de navegación de forma precisa y fácil de entender para todos los usuarios.
El enlace al elemento de página actual en los breadcrumbs debe tener el atributo
aria-label. Si la página actual no es un enlace, elaria-labeles opcional.
Vea también las consideraciones de tipografía y color.
CSS:
| Code Block | ||
|---|---|---|
| ||
font-family: Nunito;
font-style: normal;
font-weight: normal;
font-size: 9px;
color: #9E9E9E;
:hover
color: #2C2C2C;
text-decoration: underline; |
Tabs o pestañas
Utilice pestañas para permitir a los usuarios navegar fácilmente entre vistas dentro del mismo contexto.
Formato
Etiqueta de pestaña
Cada etiqueta de pestaña describe el contenido que contiene. Las etiquetas son concisas y no usan más de dos palabras. Tenga en cuenta que en los anchos móviles y durante la traducción, la longitud de los caracteres de una etiqueta afectará la experiencia. No utilice iconos en las etiquetas de las pestañas.
Numero de pestañas
En la mayoría de los escenarios, no debe usar más de seis pestañas. Esto mantiene una interfaz de usuario ordenada y reduce la carga cognitiva para los usuarios. Si se necesitan más de seis pestañas, considere otros patrones de navegación, como una navegación lateral.
Orden
El orden de tabulación debe ser coherente en toda la experiencia. Las pestañas con contenido relacionado deben agruparse unas junto a otras.
Consideraciones de accesibilidad
Cada pestaña debe tener un título único que describa claramente el contenido del panel de pestañas. Esto es particularmente útil para los usuarios de tecnologías de asistencia para que tengan la información necesaria para navegar de manera eficiente por el contenido.
Los autores de contenido deben asegurarse de que el contenido que se agrega al panel de pestañas sea accesible. Por ejemplo, si agrega una imagen al panel, debe incluir texto alternativo para aprobar las pruebas de accesibilidad.
