Encabezado (Header)
Closed this issue · 22 comments
Encabezado (Header)
Nombre en Obelisco
Encabezado
Tipo de componente
Átomo | Molécula | Organismo | Plantilla
Links
UI Kit | Ficha Figma | Estándares | Storybook
Ejemplos de aplicación en BA
Página home
Requerimientos:
- Compatibilizar componente en UI Kit, Storybook y Estándares teniendo en cuenta el funcionamiento para dispositivo mobile, especificamente el menú desplegable y el buscador.
- Renombrar las secciones de la navegación horizontal del encabezado de forma genérica
Especificaciones
Al momento de solicitar este requerimiento, ya se estaba analizando el componente Encabezado de página. De este requerimiento se desprenden los siguientes:
- Se debe crear un requerimiento o incluir en desplegables para revisar el menú desplegable
- Se suma al requerimiento vigente de encabezados el análisis de la nomenclatura del componente Encabezado de página.
- Se debe sumar al requerimiento vigente de encabezados la mejora de la ficha para estándares, ya que en esta instancia no se revisó en profundidad.
Se creó la brunch del ui kit para trabajar sobre el componente:
https://www.figma.com/file/ToGlPBzfp1gKDmaCwKWtXS/branch/2HkeQSSIeiNL7G1po6I2B1/UI-KIT---Obelisco?type=design&node-id=1022-9648&mode=design&t=zBrXg9dJvFPWBisM-0
Se modificó el nombre de las secciones para que sean genéricas tanto para Desktop como Mobile
Antes:
Después:
Versión Mobile
(1) Se unificó la versión mobile para cuando el usuario está o no logueado y queda una predeterminada que es de la siguiente forma:
(2) Se incluyó el desplegable con las secciones para cuando esté en estado desplegado y se definió que el cerrar sesión sea una sección dentro del mismo.
- Antes:
- Despues:
(3) Se modificó el comportamiento para cuando se selecciona el buscador
- Antes:
- Después
@camilembo a Diseño le queda pendiente lo siguiente
(1) revisar si está creado el requerimiento para menú desplegable.
(2) incluir mejoras en el encabezado de página para el requerimiento que esta vigente.
@lautarorodriguez96 una vez que esté ok esto, hacemos el merge y actualizamos los encabezados de página de las entregas al proveedor de perfil ciudadano.
.
En función de lo que vimos con el equipo de Desarrollo, se realizaron las siguientes modificaciones:
(1) Se incluyó la opción para notificaciones activas tanto desktop como mobile
-
Antes
-
Después
(2) Para mobile, se diferenció la sección de cerrar sesión
-
Antes
-
Después
(2) Para mobile, se reemplazo el exit por un back.
-
Antes
-
Después
Se realizó el merge de UI Kit en Julio 2023
Se reabre esta tarjeta el 04/09/2023 para trabajar el organismo de Encabezado de pagina con sus variantes "secciones visibles" y "desplegable de navegación"
👩🔧 Se comenzó el análisis UX del componente
- Se relevó el componente header de otros design systems, como también el comportamiento de los buscadores dentro del header.
- Se mapearon usos dentro de la web de Buenos Aires. Se conversó con desarrollo sobre las diferencias que existen hoy en el header en las páginas de Angular y de Drupal. Se decidió diseñar con vista a Angular con el máximo de posibilidades y se adaptará a las posibilidades de Drupal.
- Se comenzaron algunas exploraciones de la construcción del componente, especialmente del comportamiento posible del buscador como un botón expandible.
Link al prototipo de cómo funcionaría
📢 Algunos temas para ver en la daily del lunes
- Vicky se llevó ver si es posible el comportamiento "colapsable hacia el costado" del buscador
- Tema "cruz de cerrar": si el buscador va a estar abierto siempre, entonces se puede pensar que la cruz se coloque dentro del buscador y borre el texto ingresado. Si el buscador va a estar oculto y se va a desplegar, la cruz va a servir para cerrar el buscador completo. Estas son dos prácticas que se repiten a través de design systems diferentes, y también se diferencian entre mobile y desktop.
- ¿Por qué el botón de accedé a tu cuenta es fantasma?
- Desplegable de navegación abierto en convivencia con el header
- ¿Es necesario que tenga el margen de la grilla desktop?
👷♀️ Se comenzó la construcción del componente
🖥 DESKTOP
Sin logueo
Es el Header que aparece siempre que no se inicie sesión. Las secciones se pueden ocultar y quedan como opcionales, aunque hoy en día no son necesarias. Esto sucede porque las secciones se relacionan con el perfil del usuario logueado (notificaciones, mis turnos, cerrar sesión) y no con secciones de, por ejemplo, la home (Ej. "trámites", "áreas de gobierno"). En ese caso se deberá evaluar nuevamente la arquitectura y construir el Header acorde a la misma.
Con logueo
Al acceder a la cuenta aparece en el Header un menú desplegable. El botón incluye un ícono y el nombre del usuario. El desplegable se activa y muestra diferentes secciones con opción o no de que sean en cascada. Esta situación se dividió en 2 (menú activo/menú inactivo) solamente por cuestiones de construcción en Figma.
📱 MOBILE
Sin logueo
El Header cuenta con un botón para acceder a la cuenta y un botón que al hacer click despliega como drawer la barra de búsqueda, que consiste en un input de búsqueda y un botón secundario mediano con ícono que dispara la búsqueda.
Con logueo
Al acceder a la cuenta aparece en el Header un menú desplegable con el ícono de perfil. El desplegable se activa y muestra diferentes secciones con opción o no de que sean en cascada.
También se comenzó a trabajar el handoff que incluye los componentes base, las variantes y una demo para ver los prototipos
Se terminó la construcción del componente.
@camilembo queda para revisión
Se recomienda ver el component set en Dev Mode abriendo el Playground
Propiedades del component set
Variantes
- Logueo: con logueo / sin logueo (desktop+mobile)
- Acciones: predeterminado / menú activo / perfil activo / buscador activo (desktop+mobile)
- Tipo: predeterminado (con secciones) / con menú (desktop)
- Dispositivo: desktop/mobile
Propiedades booleanas
- Mostrar secciones
- Mostrar botón buscador
- Mostrar menú
- Mostrar botón acceder
- Mostrar perfil
Notas
Grilla
Se decidió que la grilla no debe quedar alineada con el contenido del cuerpo de la página, sino que tiene que distribuirse en todo el espacio disponible del contenedor del ancho de la página para tener más lugar para sus secciones. Para mantener la consistencia se incorporaron márgenes laterales de 60px y espaciados específicos entre los componentes.
Menú
Se debatió la ubicación del menú desplegable. Las opciones eran colocarlo a la izquierda del desplegable de perfil porque se relacionaría una sección de desplegables, y la otra opción era colocarlo a la derecha del logo en el lugar que ocupan las secciones. Se tomó partido por la segunda decisión, porque si bien ambos se comportan como desplegables, sus funcionalidades en cuanto a la arquitectura y el contenido son distintas. Al mismo tiempo, tiene lógica que el desplegable se ubique donde se encontraban las secciones, ya que su objetivo es anidarlas. El menú desplegable cuenta con secciones en cascadas.
Buscador
El buscador en mobile se comportará diferente al de desktop, desplazándose a modo de colapsable/cajón debajo del header al clickear el botón de la lupa. Además, por cuestiones de accesibilidad y superficie tapeable, se incorporó un botón a la derecha del input con una flecha para "arrancar" la búsqueda.
Botón de acceso a cuenta
Se cambió el ícono (del ícono de perfil al de login) para especificar que es un botón que permitirá el acceso a la cuenta. Para mobile, sólo se conserva el ícono ya que para mantener el absolute position del desplegable de menú, es necesario que todos los botones cuenten con un ancho fijo que en este caso es de 48x48.
Se sube la ficha para revisión @camilembo
También se pueden dejar comentarios en Figma!
Para este componente se diseñaron alrededor de 5 variantes luego de conversar con desarrollo. Las mismas tuvieron que ver con las posibilidades técnicas que tenemos hoy en día con nuestra versión de Bootstrap que posee funcionalidades limitadas, y con el requerimiento de incorporar más enlaces de navegación con subsecciones para que sea un componente escalable.
Para ver todas las versiones y comentarios sobre por qué se descartaron, ver el archivo de Análisis de componentes en Figma.
La última versión implica un header que tendrá 1 o 2 líneas según la cantidad de enlaces a secciones de la web.
@camilembo acá está la ficha actualizada para su revisión
¡Hola! 🤠
Con el nuevo requerimiento de generar 2 variantes para el Header desktop según las versiones de 1 línea y 2 líneas, simplificamos el componente y construimos las 2 variantes. @camilembo
Nuevo Header (desktop)
Con esto, el componente que antes era un "master component" con todas las propiedades editables, ahora es un componente con 2 variantes que comparte propiedades para ambas variantes.
Nueva composición del Header desktop
El Header en mobile quedaría compuesto de la misma forma.
Header mobile
Se incorporó a la ficha un apartado de accesibilidad para el enlace oculto de "Saltar al contenido de la página".
Hoy en día el enlace en Storybook dice "Ir al contenido principal". Se convino con desarrollo que se cambiará el texto más adelante cuando vean el fix.
@camilembo queda para revisión
Para completar el hand-off, puntualmente en referencia al desplegable de perfil, dejamos este resumen de especificaciones para cada uno de los estados del componente.
¡Hola! 😎 Dejo la actualización del Encabezado teniendo en cuenta los requerimientos de diciembre.
Requerimientos
- Actualización del template del componente.
- Sumar un identificador de aviso para las notificaciones de la persona usuaria.
¿Cómo quedó el componente en el UI Kit?
Propiedades del componente
Al ajustar el template del componente en el UI Kit también sumamos lo que faltaba del desplegable de perfil, sobre sus estados.
Por acá dejo el link a la branch: https://www.figma.com/file/ToGlPBzfp1gKDmaCwKWtXS/branch/nYTglsD7EI44sInFFiZIEt/UI-KIT---Obelisco?type=design&node-id=1022%3A9648&mode=design&t=zOB3AtaaD2PYvxZy-1.
¡Holas! 🦭 Según lo que charlamos en la última weekly de Obelisco el día de ayer, actualizamos la ficha del componente para sumar entre el menú interno de navegación el apartado de "Accesibilidad".
En la branch de Encabezado (header) dentro de las fichas encontrarán este cambio.
¿Qué se hizo?
- Actualizamos el nombre del componente entre el listado de componentes: Header (encabezado) > Encabezado (header).
- Sumamos "Accesibilidad" al menú interno de navegación, justo antes de "Usabilidad".
Imagen de la ficha con el cambio
¡Hola! 🐔
Actualizamos el componente aprovechando la actualización general de la guía tipográfica.
¿Qué hicimos?
- Actualizamos los estilos tipográficos del componente.
- Cambiamos la iconografía que quedó fuera de versión por íconos de la librería de Material Design Icons.
- Actualizamos los componentes base del componente final. Antes utilizábamos componentes traídos de la página de Análisis y convivían con las moléculas armadas dentro del UI kit.
- Reorganizamos y actualizamos la nomenclatura de las propiedades del componente.
¿Qué dejamos anotado en la página del componente?
¿Cómo se ve la página del componente en la librería del UI kit?
📢 Nuevo requerimiento
Issues relacionados
Qué
Actualizar el componente según el nuevo estilo de grillas de la v.2 de Obelisco.
Por qué
Para estandarizar tamaños, modulación y visualizaciones de todos los componentes.
Quién lo va a trabajar
Diseñadores
Quién lo va a revisar
PM + SGOs
Criterios de aceptación
- El componente se ajusta a la grilla 4px.
- El componente tiene una medida definida para mobile, tablet y desktop.
- El componente tiene una modulación definida para mobile, tablet y desktop.
- El componente tiene su handoff para desarrollo y está marcado como ready for dev.
- El componente está documentado.
🕰️ Changelog
| CHANGELOG | Descripción |
|---|---|
| Agregado | Sumamos una variante tablet entre los siguientes componentes base: .Navegación-Header, .Subsección-Header; Variante Tablet del Encabezado (header) |
| Arreglado | - |
| Eliminado | - |
| Obsoleto | - |
| Cambiado | - |
✏️ Notas
- [EV]: -