Encabezado
Se encuentra al comienzo de la página, justo debajo del header y está formado por:
- Migas de pan, que nos indican el recorrido de la persona usuaria hasta la página actual.
- Título del turno o inscripción.
- Una breve descripción del turno o inscripción.
- La modalidad del turno o incripción identificada con la etiqueta respectiva.
Columna derecha
La columna derecha permite incorporar componentes complementarios al turno o inscripción, que se destacan por ser accionables por la persona. Con el uso opcional de los componentes, se puede incluir un destacado lateral, un mapa o ambos componentes, la elección depende de la modalidad del servicio.
Destacado lateral
Permite resaltar la acción principal del servicio, para que las personas puedan continuar el trámite.
Usar cuando:
- Para completar la reserva o inscripción, se debe ingresar y seguir los pasos en el sistema de Trámites a Distancia de BA (TAD) u otro sitio.
- Se necesita destacar una o varias llamadas a la acción, puede incluir 1 CTA o 2 CTA, botón de descarga, 1 enlace o 1 acceso.
No usar cuando:
- Hay que continuar el trámite a través de un llamado telefónico, indicar en el contenido de la pantalla a que número de teléfono y en que horario tiene que llamar la persona usuaria.
- Se deba chatear con Boti para seguir los pasos de trámite, indicar en el contenido de la pantalla las referencias para que la persona usuaria empiece la conversación.
Mapa
Permite mostrar la ubicación física del turno o incripción, en caso se deba complementar el servicio en una dirección concreta.
Usar cuando:
- La ubicación es relevante para la gestión del trámite.
- El servicio, curso o trámite, requiere presencialidad.
No usar cuando:
- El trámite es completamente digital.
- No se puede indentificar una sede específica.
Uso combinado
Se recomienda utilizar ambos componentes, cuando el servicio tiene modalidad virtual y presencial.
Orden recomendado:
- Destacado lateral
- Mapa
Bloque de información
En esta sección, se encuentran la descripción donde se amplía la información de la bajada del encabezado del turno o inscripción. Esta sección incluye título, párrafos, subtítulos y enlaces para organizar los detalles del servicio como ser días y horarios.
Buenas prácticas
Organizar la información desde lo general a lo particular, en forma ordenada a través de títulos y subtítulos.
Puede incluir enlace para redirigir a otras pantallas del sitio BA.
El título y el subtítulo es opcional y puede omitirse en caso de no ser necesario.
Malas prácticas
No debe quitarse la opción de incluir texto, para ampliar la información del turno o inscripción.
No respetar las pautas de escritura UX y escribir para la accesibilidad, para mantener consistencia con el resto del contenido del sitio BA.
No aplicar los parametros del estilo de tipografía, para seguir los lineamientos de Obelisco, nuestro sistema de estándares y diseño.
Requisitos del turno o inscripción
Se incluirá esta sección en caso de ser necesario, se encuentran cada uno de los requisitos necesarios para realizar el turno o incripción. Para mostrarlos, se utiliza una lista informativa con check siguiendo los lineamientos de Obelisco, nuestro sistema de estándares y diseño.
Buenas prácticas
Las listas de requisitos llevan únicamente un subtítulo y contenido, cualquier elemento adicional debe ir fuera del componente.
El subtítulo de la lista de requisitos es opcional y puede omitirse en caso de no ser necesario.
Malas prácticas
No debe modificarse el componente de lista para incluir elementos externos.
No utilizar variables bold dentro de los ítems de la lista para no agregar carga cognitiva a la persona usuaria.
Pasos del turno o inscripción
En este bloque la persona usuaria podrá ver cada uno de los pasos organizados en secuencia que deberá realizar para completar el trámite. Para mostrarlos, se utiliza una lista de pasos siguiendo los lineamientos de Obelisco, nuestro sistema de estándares y diseño.
Buenas prácticas
Utilizar títulos claros y concisos. Usar verbos o frases de acción para indicar a la persona usuaria lo que sucederá en cada paso.
Usar la menor cantidad de pasos posibles para no abrumar a la persona usuaria. Si luego en el flujo verá más información, limitar la lista de pasos a una síntesis del proceso a realizar.
Malas prácticas
No utilizar este componente si el proceso tiene sólo un paso.
No utilizar el componente sólo con el título. Siempre debe contener, aunque mínima, una bajada explicativa.
No incluir componentes como listas informativas, bulleteados y botones dentro de la lista de pasos. La bajada debe consistir sólo en un párrafo de texto, y si es necesario puede poseer enlaces dentro del mismo.
Costos del turno o inscripción
Se utiliza para ingresar datos breves, de una sola línea, como nombres, dirección de correo electrónico o números de teléfonos.
Buenas prácticas
Mantener un máximo de 2 costos con subtítulo y descripción por fila.
Conservar el sentido de lectura de izquierda a derecha. Antes de pasar a una 2da fila, la 1era fila debe ocupar un máximo de 6 columnas (2 ítems).
Cuando el trámite es gratuito, el valor del monto cambia por “Gratuito” y no es necesario sumar una descripción del concepto.
Malas prácticas
No apilar costos de forma vertical donde no se siga la estructura de bloque y/o no se respete el sentido de lectura de izquierda a derecha.
La descripción de los costos no debe sobrepasar las 3 columnas de ancho, que es el límite de tamaño máximo para cada ítem.
Información adicional
Se utiliza para ingresar datos breves, de una sola línea, como nombres, dirección de correo electrónico o números de teléfonos.
Buenas prácticas
Utilizar listas informativas para piezas de información de texto que no tienen un orden secuencial.
Utilizar texto plano cuando no es posible generar más de 1 ítem para la lista informativa.
Malas prácticas
No utilizar variables bold dentro de los ítems de la lista para no agregar carga cognitiva a la persona usuaria.
Al utilizar una lista informativa, no incluir más de 7 ítems en la misma.
Preguntas frecuentes
Para mostrar preguntas frecuentes se utilizan colapsables de selección única siguiendo los lineamientos de Obelisco, nuestro sistema de estándares y diseño.
Buenas prácticas
Mantener títulos breves y claros. El encabezado es lo primero que capta la atención de la mayoría de las personas usuarias. Es fundamental que el contenido del colapsable se exprese de manera clara para que las personas usuarias puedan decidir si desean expandirlo o no.
Cada colapsable puede tener un máximo de 800 caracteres (contando espacios) para su descripción.
Malas prácticas
No utilizar un colapsable para el contenido que es necesario que esté visible. No ocultarlo dentro de un colapsable.
No utilizar más de 5 colapsables para sumar información. En todo caso, lo recomendable es buscar otros componentes que se adapten mejor al contenido o hacer bajadas sencillas de título y texto.
No utilizar más de una sección de colapsables.
Contenidos
Para mejorar la experiencia al volcar la información en cada una de las secciones del template de turnos e inscripciones, es importante tener en cuenta que se trata de una página flexible y no de una estructura rígida, por lo que la información dentro del template es adaptable.
Estilo de texto
Al momento de llenar cualquier campo de texto del template se deben respetar los siguientes parámetros:
- No utilizar negrita (ejemplo) en ningún texto.
- Todos los campos de texto dentro del cuerpo del template pueden ir acompañados de un enlace/hipervínculo (ejemplo), a excepción de: los títulos (incluyendo el del Encabezado), los subtítulos, la descripción del trámite y la normativa.
Título
Estos títulos son independientes a los componentes dentro del template y sirven para dividir e identificar cada una de las secciones y su contenido. Utilizan la etiqueta H2.
Cantidad de caracteres
Existen secciones dentro del template de trámites que cuentan con un máximo de caracteres por la capacidad del espacio/componente (véase Encabezado como ejemplo), sin embargo, la gran mayoría de campos de texto no tienen un límite definido más allá de respetar la propuesta de contenido y no sobrecargar ninguna de las secciones.
Además, cada una de las secciones que está compuesta por un componente sigue los lineamientos establecidos en Obelisco, nuestro sistema de estándares y diseño.