Pasar al contenido principal

Acceso

Los accesos funcionan como puntos de ingreso a diferentes secciones y pueden agruparse cuando hay una similitud en su contenido.

Tipos de acceso

Acceso sin borde

Se utilizan para componer organismos donde se establezcan múltiples accesos dentro de un mismo contenedor.

Acceso con borde

Se utilizan para acceder a secciones de mayor relevancia. Principalmente se usan en compañía de otros accesos generando agrupaciones de una misma temática.

Acceso con descripción

La descripción es una variable del acceso para agregar información adicional que puede servirle a la persona usuaria a comprender mejor la acción a realizar.

Acceso con ícono

El ícono sirve como referencia visual para complementar al título del acceso y así ayudar a la persona usuaria a tomar una decisión.

Tamaños

Diseño y estructura (contexto de uso)

Acceso completo simple

La primer sección visualiza la información relevante para el usuario y la segunda sección esta compuesta por el acceso grande.

Título del acceso

Descripción del acceso

info
Acceso grande

Título del acceso

Descripción del acceso

Acceso grande

Acceso completo con lista de accesos

La primer sección visualiza la información donde el usuario va a hacer foco, la segunda sección esta compuesta por los accesos chicos que dirigen al usuario a otra pantalla y la tercera sección esta compuesta por el acceso grande el cual permite visualizar la información total que no se muestra en la previsualización de este organismo.

Acceso completo con categorías

Tiene el mismo comportamiento que el “Acceso completo con listas de accesos”, solo que se pueden sumar diferentes categorías a los accesos chicos.

Título del acceso

Descripción del acceso



Acceso grande

Disposiciones

Es una agrupación de accesos que tienen cercanía en cuanto a la similitud de acción. Pueden utilizarse tanto vertical como horizontalmente.

Simple vertical

Para la implementación del componente se desarrolló la clase "list-group" que permite organizarlo y adaptarlo correctamente en forma de lista.

completar

Simple horizontal

Para la correcta distribución y visualización del componente, se deben utilizar la combinación de las clases: "list-group" y "list-group-row".

completar

Lista ancho completo

Para lograr una distribución y visualización adecuadas de un componente en forma de lista con ancho completo, se deben utilizar las clases "access-deck" y "max-cards-1". Estas clases están diseñadas para permitir un máximo de 4 accesos dispuestos horizontalmente.

Ejemplo de uso: "max-cards-4".

completar

Lista ancho por acceso

Para lograr una distribución y visualización adecuadas de un componente en forma de lista con un ancho por acceso, se deben utilizar las siguientes clases: "access-deck", "access-column" y "max-cards-1". Estas clases están diseñadas para permitir un máximo de 4 accesos dispuestos horizontalmente.

Ejemplo de uso: "max-cards-4".

completar

Usabilidad

Buenas prácticas

Intentá incluir hasta 7 accesos en el organismo de “Acceso completo con lista de accesos” para que le sea más fácil a las personas usuarias de escanear con la vista todos los elementos.
Recomendamos limitarse a una línea de texto para el título y la descripción de los accesos.
Para el uso de los accesos horizontales se recomienda utilizar un máximo de 4 accesos en un ancho de 12 columnas y 3 accesos para una grilla de 8 columnas.

Malas prácticas

No utilizar puntos suspensivos para truncar el texto de los accesos.
No darle funcionalidad a los accesos. Únicamente sirven para redirigir al usuario a otra sección o pantalla del sistema.
No utilizar mas de un ícono en el componente, esto puede generar confusión a la persona usuaria.
Logo del sistema de diseño Obelisco
Los contenidos de buenosaires.gob.ar están licenciados bajo Creative Commons Reconocimiento 2.5 Argentina License.