Las listas aportan claridad y estructura a la presentación de los contenidos. A su vez, organizan la información de forma fluida y visualmente atractiva. Este componente mejora la experiencia de la persona usuaria promoviendo el escaneo de la información clave y su efectiva comprensión.
Tipos de ítems
Las listas informativas presentan dos tipos de ítems: con viñeta y con check. Los primeros se utilizan para transmitir información general, y los segundos se utilizan específicamente para requisitos.
Diseño y estructura (contexto de uso)
La lista informativa se compone de un subtítulo y de una serie de ítems organizados verticalmente, separados por un espaciado determinado para facilitar la lectura. Los ítems pueden contener enlaces de texto en caso de ser necesario. En desktop, el ancho máximo de la lista es de 8 columnas, y en mobile ocupa todas las columnas.
Usabilidad
Buenas prácticas
Utilizar listas informativas para piezas de información de texto que no tienen un orden secuencial.
Utilizar listas de ítems con check para informar requisitos necesarios a la persona usuaria. Utilizar listas de ítems con viñeta para dar información general sobre un tema.
Se pueden incorporar enlaces de texto dentro de los ítems de una lista informativa en caso de ser necesario.
Comenzar cada elemento de la lista con mayúscula.
Mantener la redacción del contenido de los ítems de forma consistente. Por ejemplo: siempre usar la misma voz y tono.
Malas prácticas
No utilizar una lista informativa cuando se debe transmitir un orden secuencial de los elementos. Para este caso utilizar
Lista de pasos.
No utilizar variables bold dentro de los ítems de la lista para no agregar carga cognitiva a la persona usuaria.
No incorporar una lista dentro de una lista. Si es necesario separar la información del ítem en párrafos, utilizar una separación entre párrafos (breakpoint).
No cambiar los íconos de los ítems de lista. Siempre deben ser o una viñeta o un check.
No combinar ítems con viñetas y checks dentro de una misma lista.
No combinar listas informativas con listas de pasos.
No utilizar listas con viñetas si no hay más de 2 ítems. En ese caso utilizar un párrafo de texto.
