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.

⬛ Link a Figma

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.

⬛ Link a Figma

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.

Image Added

Flujo gráfico de la creación de items y sub items por contexto de topbar y sidebar:

Image Added

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, el aria-label es opcional.

Vea también las consideraciones de tipografía y color.

⬛ Link a FigmaCSS:

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

1. 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.

2. 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.