Pasar al contenido principal

Panel

Los paneles son agrupaciones de elementos que tienen una relación entre si. Por definición no son accionables, sino que dependen de otros elementos que tengan dicha funcionalidad.

Tipos de paneles

Panel chico simple

Sirven para mostrar información sobre una temática particular. No son accionables, es por eso que no poseen ningún tipo de fondo que actúe como contenedor de la información.

Panel chico simple

Panel chico con accionables o enlace

Además de brindar información, las personas usuarias tienen la posibilidad de realizar algún tipo de acción correspondiente al contexto en el que se presente el panel.

Panel chico con accionablesPanel chico con enlace

Panel chico con lista de enlaces

Sirven para listar contenido relacionado y efectuar alguna acción determinada, como por ejemplo: descargar un archivo o abrir la información en una nueva pestaña.

Panel chico con lista de enlaces

Panel chico con lista de descargas

Puede utilizarse para descargas de archivos relacionados al contenido principal y poder darle más visibilidad y jerarquía que con una lista de enlaces.

Panel chico con lista de descargas

Diseño y estructura (contexto de uso)

Contenedores y fondos

Los paneles pueden estar contenidos con un fondo únicamente si están compuestos de al menos un elemento que permita el llamado a la acción. En el caso de los paneles simples, sería incorrecto el uso de fondos ya que pueden generar confusión a las personas usuarias por su similitud a un componente tipo tarjeta.

Por definición el componente de paneles no tienen ningún estado (hover, active, focus), ya que su función es agrupar diferentes elementos y relacionarlos entre si.

Contenedores y fondos

Grupo de paneles

Los paneles pueden agruparse entre sí para informar sobre determinado contenido. Estos grupos tienen que ser de un máximo de 3 paneles chicos, para que la estructura conformada sea armoniosa y el contenido detallado en la descripción no se desborde.

Además, los grupos de paneles tiene disponer del mismo elemento para llamar a la acción. No debe utilizarse, en un mismo grupo, diferentes tipos de botones en cada panel.

Grupo de paneles

En el caso de que haya menos de 3 paneles, no se debe modificar su tamaño y debe mantener la estructura del componente, ó si el contenido es de suma relevancia también se pueden utilizar 2 destacados conjunto ó 1 destacado banner.

Grupo de paneles

Al utilizar un grupo de paneles chicos simples, la recomendación es agruparlos dentro de un contenedor y utilizar un titular para dar la sensación a las personas usuarias de que esa información esta allí para comunicar algo que destaca por sobre el resto.

Recordar que no se debe agregar un fondo a los paneles simples individualmente ya que puede generar confusión con la funcionalidad de las tarjetas.

Grupo de paneles

Paneles con listas

Los paneles con listas se utilizan en el "sidebar" de la interfaz para brindarle a las personas usuarias información adicional y complementaria.

Paneles con listas

Imágenes en paneles

El uso de imágenes en los paneles chicos es opcional. La imagen es un refuerzo visual que ayuda a las personas usuarias a entender el contexto o reforzar la información. En caso de utilizar imágenes recordar siempre completar el atributo alt="..."

Imágenes en paneles

Usabilidad y accesibilidad

Buenas prácticas

Utilizar el mismo componente para llamar a la acción en un grupo de paneles chicos.
Agregar el atributo alt="..." a las imágenes de los paneles
Agrupar los paneles chicos simples en un mismo contenedor permite que las personas usuarias lo perciban como material o información destacada.
Utilice los paneles tipo lista, siempre en el sidebar o como último contenido dentro de una página. Ubicarlos en otra sección puede perjudicar la comprensión y la continuidad de la lectura de las personas usuarias.

Malas prácticas

No utilice fondos en paneles chicos simples ya que pueden confundir a las personas usuarias y asociar el mismo comportamiento que tienen las tarjetas.
No utilice contenedores de colores que generen problemas de accesibilidad con respecto al contraste que tiene el fondo con el texto. Además tiene que asegurarse de que no haya una competencia jerárquica con respecto a resto de los elementos dentro de los paneles.
No utilice más de 3 paneles chicos en una misma fila. Esto puede generar desbordamientos de texto que impidan una interfaz simple y limpia.
Logo del sistema de diseño Obelisco
Los contenidos de buenosaires.gob.ar están licenciados bajo Creative Commons Reconocimiento 2.5 Argentina License.