Panelizar el área: navegar por los contenidos del grupo
Insertá accesos directos en un área para que el usuario pueda acceder a los contenidos principales del grupo.
En esta página
Para panelizar un área, el usuario debe tener rol maquetador.
El «panelizer»
Vimos que si necesitamos crear un grupo —por ejemplo, el grupo «Contenidos digitales»—:
- Creamos un contenido área con el título «Contenidos digitales», que tiene su propia url, www.argentina.gob.ar/contenidosdigitales.
- Con el área creamos a la vez el grupo «Contenidos digitales».
- Y luego creamos los contenidos del grupo (noticias, servicios, páginas, otras áreas etc.).
Lo que nos resta hacer es que desde el contenido área www.argentina.gob.ar/contenidosdigitales un usuario pueda «entrar» a los contenidos del grupo, navegar por ellos.
A tal fin, tendremos que poner en el área accesos directos a las principales secciones temáticas del grupo (de acuerdo con la lógica de la pirámide invertida, su segundo nivel de navegación) o a sus contenidos destacados.
Como cada grupo puede tener diferentes grados de complejidad (un organismo es más complejo que un programa, un programa es más complejo que un tema), los accesos directos deben ser insertados y configurados a mano en el área.
Hacés esta tarea en la opción «panelizer» del menú de edición del área, por ello decimos que «panelizamos» el contenido.
En otra sección de estos estándares te sugerimos armar un wireframe y un mockup antes de crear cualquier sección nueva en Argentina.gob.ar. En el primero de manera simplificada, en el segundo con una vista muy similar a la versión final, planificás y probás los accesos que vas a tener que panelizar en el área.
El maquetador puede insertar los accesos en el panelizer mediante dos tipos de componentes:
- atajos,
- listado.
Los atajos
Un atajo es un acceso directo que puede apuntar a un contenido de Argentina.gob.ar o a un sitio externo.
De acuerdo con la metáfora de la pirámide invertida, los atajos de un área permiten pasar de un nivel superior (el grupo) a sus contenidos del nivel inmediatamente inferior.
Así, los atajos en la home de un organismo dirigen a los usuarios a sus suborganismos, programas, productos y públicos.
En las landing pages de programas, productos y públicos, los atajos dirigen a los usuarios a sus subsecciones temáticas.
Como excepción, los atajos pueden apuntar a contenidos específicos muy destacados, como los trámites más visitados.
La presencia, cantidad, disposición y orden de los atajos en un contenido área indica a los usuarios cómo es la estructura del sitio, cuál es la jerarquía de sus contenidos e invita al usuario a ingresar a ellas, en especial si están en la parte superior del área.
Evitá insertar atajos en cualquier otro contenido que no sea área.
No uses atajos para apuntar a cualquier contenido. Reservá su uso para apuntar a la página principal de una sección completa que merece ser destacada sobre otras.
Los atajos se insertan por bloques de a varios; cada bloque es un grupo de atajos.
Los atajos de un mismo grupo comparten una misma visualización y apuntan a contenidos que tienen información del mismo tipo o están en un mismo nivel de importancia.
Por ejemplo, en la home de Contenidos digitales hay tres bloques o grupos de atajos:
- un primer bloque con atajos visualización superior que apuntan a secciones destinadas a cada rol de usuario de backend (nuestros públicos),
- otro bloque con atajos visualización destacado con ícono que apuntan a temas (la página principal de estos estándares o de la sección de markdown)
- un último bloque con atajos visualización panel vertical que apuntan a recursos destacados, como tablas buscador o mapas.
Para poner atajos en un área, deberás insertar por panelizer el módulo llamado grupo de atajos.
Cada atajo siempre informa en su título el nombre del contenido de destino. Para redactarlo, tomá como referencia lo que vimos en el apartado destinado a los títulos.
Además de asignar a cada atajo un título y la url de destino, deberás asignar al grupo de atajos una de las siguientes visualizaciones en orden de importancia:
- superior,
- atajo destacado,
- panel vertical
- botón (para insertar varios botones en bloque) y
- atajo simple.
Si insertás varios grupos de atajos en una misma landing, evitá repetir en todas la misma visualización. Distribuí la atención y el interés con diferentes visualizaciones acordes con la importancia del destino del atajo.
En el ejemplo de nuestra home te mostramos que usamos tres visualizaciones diferentes que respetan el orden de importancia de la pirámide invertida (más importante arriba —superior—, menos importante abajo —panel vertical—).
Superior
El atajo superior muestra cada atajo como un enlace, con un fondo de color.
El recurso solo puede estar ubicado debajo del encabezado del contenido que presenta el título y la descripción. El color de fondo del bloque adoptará el tono del color de fondo del encabezado.
El grupo de atajos superior no es visible en otra parte del área, y en esa parte del área no se puede insertar ningún otro tipo de recurso que no sea el grupo de atajos superior.
El recurso puede tener de 2 a 6 accesos, que se disponen en hasta dos hileras de tres columnas cada una.
Dada su ubicación privilegiada (arriba), usá esta configuración para:
- apuntar a los contenidos más visitados del grupo, o
- apuntar a las secciones principales del grupo; por ejemplo, temas, programas o públicos.
Atajo destacado
El atajo destacado presenta cada atajo como una tarjeta cliqueable con título y, de manera opcional, una breve descripción que lo complementa.
La parte superior de la tarjeta puede tener una imagen (destacado con imagen) o un ícono tomado de la librería de Poncho con fondo de color (destacado con ícono).
Imágenes e íconos no se pueden mezclar en un mismo grupo.
Es deseable que escribas siempre la descripción o bajada aunque no sea obligatoria, para que al usuario no le quede ninguna duda de qué encontrará tras hacer clic.
El grupo puede tener hasta 16 atajos destacados dispuestos en hileras y columnas. Cada hilera puede tener de una a cuatro columnas.
Panel vertical
El panel vertical presenta cada atajo como un recuadro o panel cliqueable con ícono, título y, de manera opcional, una breve descripción que lo complementa.
Es deseable que escribas siempre la descripción o bajada aunque no sea obligatoria, para que al usuario no le quede ninguna duda de qué encontrará tras hacer clic.
El grupo puede tener hasta 12 paneles verticales dispuestos en hileras y columnas. Cada hilera puede tener de una a 6 columnas.
Botón
El botón presenta cada atajo como un botón cliqueable con título.
En otra sección explicamos los diferentes tipos y usos de los botones.
Creá botones con un grupo de atajos cuando necesites insertar varios botones uno junto a otro.
Atajo simple
El atajo simple presenta cada atajo como una tarjeta blanca cliqueable con título y, de manera opcional, una breve descripción que lo complementa.
Es deseable que escribas siempre la descripción o bajada aunque no sea obligatoria para que al usuario no le quede ninguna duda de qué encontrará tras hacer clic.
De manera opcional se le puede agregar un ícono a color de la librería de Poncho.
El grupo puede tener hasta 16 atajos simples dispuestos en hileras y columnas. Cada hilera puede tener de una a cuatro columnas.
El listado
Con el recurso listado podés presentar de manera dinámica listas de:
- todos los contenidos publicados de un tipo en particular (noticias, servicios, páginas, páginas de libro, etc.);
- pertenecientes a un grupo en particular;
- ordenados cronológica o alfabéticamente,
- con una visualización común de todos los accesos directos del listado.
Cada vez que un usuario de backend publica un contenido que cumple con los criterios, se muestra en el listado en el orden y con la visualización que se haya configurado.
Ejemplos de contenidos listables:
- noticias de un organismo, ordenadas en cronología inversa (primero la más nueva, última la más antigua);
- servicios (trámites) de un organismo, ordenados alfabéticamente;
- páginas de un grupo que presenta los cursos que dicta un organismo, ordenadas cronológicamente por fecha de dictado;
- páginas de un organismo que presenta una serie de temas de un grupo, ordenadas alfabéticamente.
Los accesos se pueden visualizar como atajos simples sin ícono (una tarjeta con título y eventual bajada) o como atajo destacado con imagen (tarjeta con la imagen destacada del contenido, el título, eventual bajada y fecha de publicación —ideal para noticias—).
Los accesos se disponen en hileras de 4 columnas cada una. La cantidad de accesos dependerá de lo que liste.
Por lo general, los listados de noticias solo presentan las últimas 4 con la opción de agregar un botón "Ver todas".
Otros contenidos pueden demandar listas más largas. El Glosario de salud, por caso, presenta decenas de entradas ordenadas alfabéticamente.
Por ejemplo, la home de Anmat tiene dos listados de noticias:
- un listado «Alertas y retiros ANMAT» con los retiros de medicamentos, que son contenidos «noticia» que pertenecen al grupo «Alertas Anmat»,
- un listado «Novedades» con las noticias institucionales, que son contenidos «noticia» que pertenecen al grupo «Anmat».
Cada listado presenta los contenidos «noticia» de un solo grupo, decisión del organismo para no mezclar información destinada a población en general con otra de carácter institucional.
Como son grupos diferentes, pueden tener los mismos usuarios o diferentes.