1

Estrategia de Integración Digital del Estado Guía técnica de integración de Trámites y Servicios a

GOV.CO ANEXO 1. Acondicionamiento gráfico de Trámites y

Servicios

2

Ministerio de Tecnologías de la Información y las Comunicaciones Viceministerio de Economía Digital Dirección de Gobierno Digital Equipo de trabajo Sylvia Cristina Constaín Rengifo – Ministra de Tecnologías de la Información y las Comunicaciones Jehudi Castro Sierra - Viceministro de Economía Digital Claudia Patricia Pico Quintero – Directora Gobierno Digital Grace Quintana – Subdirectora de Gobierno Adriana Vargas Tamayo – Equipo GOV.CO Edson Gomez – Equipo GOV.CO Rebeca Becerra – Equipo GOV.CO Francisco Moreno – Equipo GOV.CO Alejandro Caballero – Equipo GOV.CO Diana Clavijo – Equipo GOV.CO Juliana Cardona – Equipo GOV.CO Felipe Ramos – Equipo GOV.CO Carolina Escobar – Equipo GOV.CO Luisa Medina – Equipo GOV.CO Carlos León – Equipo GOV.CO Senen Niño – Equipo GOV.CO Natalia Albañil – Equipo GOV.CO

Versión Observaciones

Versión 1 Septiembre 2019 Lineamientos para acondicionamiento gráfico de trámites y servicios

Comentarios, sugerencias o correcciones pueden ser enviadas al correo electrónico: gobiernodigital@mintic.gov.co Manual de Gobierno Digital

Este manual de la Dirección de Gobierno Digital se encuentra bajo una Licencia Creative Commons Atribución 4.0 Internacional.

3

Tabla de contenido

1. Introducción ..................................................................................................................... 5

2. Acondicionamiento gráfico según opción de Integración de Trámites y Servicios en

GOV.CO ........................................................................................................................... 5

3. Elementos Gráficos ......................................................................................................... 8

3.1 Logotipos y Encabezado ................................................................................................. 8

3.2 Pie de página (Footer) ...................................................................................................... 8

3.3 Iframe ................................................................................................................................. 9

3.4 Tipografía ................................................................................................................... 10 3.4.1 Tipos de fuente ..................................................................................................................................... 10 3.4.2 Generalidades de uso ........................................................................................................................... 10

3.5 Color ................................................................................................................................ 11

3.6 Botones ........................................................................................................................ 13 3.6.1 Principios de los botones ...................................................................................................................... 13 3.6.2 Estado de los botones ........................................................................................................................... 13

3.6.2.1 Activo (Enabled) ............................................................................................................................ 13 3.6.2.2 Desactivado .................................................................................................................................... 14 3.6.2.3 Hover ............................................................................................................................................... 14

3.6.3 Jerarquía de los botones ....................................................................................................................... 14 3.6.3.1 Alto (énfasis) .................................................................................................................................. 15 3.6.3.2 Medio (énfasis) .............................................................................................................................. 15 3.6.3.3 Bajo (énfasis) ................................................................................................................................. 15

3.6.4 Tipos de botones .................................................................................................................................... 16 3.6.4.1 Simbólico ........................................................................................................................................ 16 3.6.4.2 Textual ............................................................................................................................................. 16 3.6.4.3 Mixto ................................................................................................................................................ 17

3.6.4.4 De información y agregado .............................................................................................................. 17

3.7 Etiquetas ..................................................................................................................... 17

3.8 Botones de navegación .............................................................................................. 17 3.8.1 Miga de pan ............................................................................................................................................ 17

3.9 Campos de texto ........................................................................................................ 18

3.10 Desplegables ............................................................................................................... 19

3.11 Caja de chequeo (checkbox) ..................................................................................... 20 11.1 Listas de chequeo ................................................................................................................................... 21

Estados ......................................................................................................................................................... 21

3.12 Símbolos ...................................................................................................................... 22 3.12.1 Tipos de símbolo ................................................................................................................................. 22

3.13 Barra de accesibilidad .............................................................................................. 23

3.14 Paginación .................................................................................................................. 24 3.14.1 Estados de la barra de paginación ..................................................................................................... 25

4

3.15 Teclados ...................................................................................................................... 25

3.16 Formulario de validación ......................................................................................... 26

3.17 Barra de scroll ........................................................................................................... 26 Tipos de barra .................................................................................................................................................. 26

3.18 Tooltips ....................................................................................................................... 27

3.19 Alertas ......................................................................................................................... 27 Definición ........................................................................................................... Error! Bookmark not defined. 19.1 Tipos de alertas ....................................................................................................................................... 28

De información ........................................................................................................................................... 28 Hojas de acción ........................................................................................................................................... 29 Mantenimiento ............................................................................................................................................ 30

Notificación ..................................................................................................................................................... 31

3.20 Mensajes ..................................................................................................................... 31

5

1. Introducción El presente documento, Anexo a la Guía técnica de Integración de trámites, define los lineamientos y recomendaciones para que las entidades públicas adelanten el proceso de acondicionamiento gráfico de trámites y servicios en su integración al Portal Único del Estado GOV.CO, de cara a una experiencia de navegación unificada para los ciudadanos, extranjeros y en general todos los usuarios que ingresen a realizar los trámites a través de esta plataforma. Para lograrlo, las entidades públicas deberán aplicar los lineamientos que aquí se describen según el tipo de integración de cada uno de los trámites y servicios de su oferta institucional, respondiendo siempre a unos criterios de usabilidad, accesibilidad, estandarización, en elementos gráficos alineados a la interfaz de GOV.CO y aquellos definidos en la Directiva Presidencial 03 de 2019. Este proceso está orientado a brindar servicios al ciudadano por medios digitales de manera ágil y flexible, aplicando modelos tecnológicos que permitan integrar los trámites y servicios al Portal GOV.CO, de conformidad con lo establecido en la Directiva Presidencial 02 de 02 de abril 2019 y demás guías y normas relacionadas.

2. Acondicionamiento gráfico según opción de Integración de Trámites y Servicios en GOV.CO

Los trámites y servicios que prestan las entidades públicas en Colombia presentan diferentes niveles de madurez en materia de digitalización, razón por la cual, para lograr su integración de forma gradual y evolutiva al portal GOV.CO, se han definido 4 opciones técnicas para su acondicionamiento e integración cuyo detalle y especificaciones se presentan en la Guía técnica de integración.

Pues bien, para el proceso de acondicionamiento e integración de trámites en cada una de las opciones mencionadas se requiere la unificación de los elementos visuales que se presentan al ciudadano homogenizando su experiencia en la interacción digital con la oferta institucional proveniente de las diferentes entidades públicas y sus plataformas o sistemas de información.

A continuación, se describen de manera general las opciones de integración y el acondicionamiento gráfico requerido:

Opción de integración Acondicionamiento Gráfico

Opción 1. Publicación de la ficha Informativa Consiste en la publicación a través del Portal GOV.CO de la ficha informativa del trámite o servicio que la entidad ha registrado en el Sistema Único de Información de Trámites SUIT que administra el Departamento Administrativo de la Función Pública dando acceso al ciudadano a la información del trámite, requisitos, pasos, enlaces y recursos de apoyo.

La interfaz gráfica en esta opción está definida y aplicada directamente desde el portal GOV.CO al efectuar la presentación de la ficha informativa del trámite. Por estar limitada la integración a sólo la ficha, la entidad no requiere efectuar acondicionamiento gráfico del trámite que presente de manera digital. No obstante, al tratarse de una opción transitoria de integración que en algunos casos enlaza a la realización del trámite desde la plataforma de la entidad, ésta a discreción podrá aplicar algunos o todos los elementos gráficos que se relacionan en el presente anexo. Esto hasta tanto

6

Opción de integración Acondicionamiento Gráfico realice la integración del trámite o servicio al portal a través de las opciones de mayor madurez. La entidad deberá garantizar que desde la plataforma o página que presenta el trámite en la entidad existen enlaces actualizados que redireccionen al ciudadano hacia el portal GOV.CO.

Opción 2. Interfaz Gráfica Mínima Consiste en embeber el formulario o página, que actualmente aloja el trámite, en el Portal GOV.CO a través de iframes, para lo cual la entidad suministrará credenciales de acceso, lectura y escritura que permitan tomar el formulario con los elementos de interfaz requeridos para la integración de imagen, cabezales, pies y otros elementos gráficos del portal GOV.CO. El resultado final para poder realizar la integración en el Portal GOV.CO, es la URL del sitio a embeber. Está opción técnicamente está concebida para ser utilizada en un iframe o un elemento HTML que permita insertar o incrustar un documento HTML dentro de otro principal.

La característica de “interfaz gráfica mínima” surge del hecho de que tiene exclusivamente los elementos gráficos imprescindibles, permitiendo de esta forma integrarse a la imagen, cabezales, pies, herramientas de navegación y otros elementos gráficos del Portal GOV.CO en el que se alojará. Por lo anterior, esta opción requiere acondicionamiento gráfico por parte de la Entidad sobre la plataforma actual del trámite a embeber, aplicando como mínimo los lineamientos gráficos estandarizados por GOV.CO señalados como requeridos en la tabla 1. que se presenta en esta sección y cuya especificación se detalla en los capítulos subsiguientes de este documento.

De otra parte, desde el Portal GOV.CO se configura el iframe que enmarcará el trámite embebido cuya composición gráfica se presenta en la sección “iframe para interfaz gráfica mínima”.

Opción 3. Uso de Servicios de Intercambio de Información WEB/API En esta opción la entidad habilita a GOV.CO para acceder a el (los) Servicio(s) digital(es) que cumpla(n) con el marco de interoperabilidad y el lenguaje común de intercambio de información, permitiendo la solicitud, gestión, resolución y entrega del resultado del trámite entre el Portal GOV.CO y los sistemas de información de la entidad.

Esta opción de integración contempla que la capa de presentación de trámite (front end) está desarrollada y desplegada directamente en el Portal GOV.CO por tanto, el acondicionamiento de la interfaz gráfica del trámite en los 4 pasos o momentos clave del mismo se garantiza desde allí siguiendo para ello los lineamientos gráficos que se presentan y detallan en este Anexo.

Opción 4. Desarrollo Web integrado a GOV.CO Es una opción en la que algunos o todos los subprocesos de un trámite que la entidad va a acondicionar o transformar digitalmente, es modelado, automatizado, administrado y optimizado a través de formularios web estandarizados y/o plataformas BPM (Business Process Management) disponibles en la entidad, incluyendo preferiblemente el uso de los servicios ciudadanos digitales (autenticación, interoperabilidad y

Esta opción de integración está concebida para desarrollos nuevos de trámites y servicios que se integrarán a GOV.CO, por lo que su diseño e implementación debe considerar de manera nativa la interfaz gráfica estandarizada para el portal GOV.CO cuyos lineamientos se presentan y detallan en este Anexo.

7

Opción de integración Acondicionamiento Gráfico

carpeta ciudadana) habilitados por el Ministerio de la Tecnologías de la Información así como los estándares y soluciones tecnológicas compartidas disponibles.

De conformidad con el acondicionamiento gráfico requerido para cada una de las opciones de integración, se presenta en la tabla 1. la relación de elementos gráficos que aplican de manera obligatoria o deseable para los trámites y servicios a integrar al portal GOV.CO.

No. ELEMENTO GRÁFICO OPCIÓN 1. Publicación

Ficha Informativa

OPCIÓN 2. Interfaz gráfica

Mínima

OPCIÓN 3. Uso de Servicios de

intercambio de información

OPCIÓN 4. Desarrollo

Web integrado a GOV.CO

3.1 Logotipos y Encabezado (Header) No aplica Requerido Requerido Requerido

3.2 Pie de página (Footer) No aplica Requerido Requerido Requerido

3.3 Iframe No aplica Requerido No aplica No aplica

3.4 Tipografía No aplica Requerido Requerido Requerido

3.4.1 Tipos de fuente No aplica Requerido Requerido Requerido

3.4.2 Generalidades de uso No aplica Requerido Requerido Requerido

3.4.3 Comportamiento No aplica Requerido Requerido Requerido

3.5 Color No aplica Requerido Requerido Requerido

3.6 Botones No aplica Deseable Requerido Requerido

3.6.1 Principios de los botones No aplica Deseable Requerido Requerido

3.6.2 Estado de los botones No aplica Deseable Requerido Requerido

3.6.3 Jerarquía de los botones No aplica Deseable Requerido Requerido

3.6.4 Tipos de los botones No aplica Deseable Requerido Requerido

3.7 Etiquetas No aplica Deseable Requerido Requerido

3.8 Botones de navegación No aplica Deseable Requerido Requerido

3.8.1 Miga de pan No aplica Deseable Requerido Requerido

3.9 Campos de texto No aplica Deseable Requerido Requerido

3.10 Desplegables No aplica Deseable Requerido Requerido

3.11 Caja de chequeo (checkbox) No aplica Deseable Requerido Requerido

3.12 Símbolos No aplica Deseable Requerido Requerido

3.13 Barra de accesibilidad No aplica Deseable Requerido Requerido

3.14 Paginación No aplica Deseable Requerido Requerido

3.15 Teclados No aplica Deseable Requerido Requerido

3.16 Formulario de validación No aplica Deseable Requerido Requerido

3.17 Barra de scroll No aplica Deseable Requerido Requerido

3.18 Tooltips No aplica Deseable Requerido Requerido

3.19 Alertas No aplica Deseable Requerido Requerido

3.19.1 De información No aplica Deseable Requerido Requerido

3.19.2 Hojas de acción No aplica Deseable Requerido Requerido

3.19.3 Mantenimiento No aplica Deseable Requerido Requerido

8

No. ELEMENTO GRÁFICO OPCIÓN 1. Publicación

Ficha Informativa

OPCIÓN 2. Interfaz gráfica

Mínima

OPCIÓN 3. Uso de Servicios de

intercambio de información

OPCIÓN 4. Desarrollo

Web integrado a GOV.CO

3.19.4 Notificación No aplica Deseable Requerido Requerido

3.20 Mensajes No aplica Deseable Requerido Requerido Tabla 1. Aplicabilidad de los elementos gráficos por opción de integración del trámite o servicio

3. Elementos Gráficos

3.1 Logotipos y Encabezado El uso de logotipos estará reglado por los lineamientos suministrados por la Guía del sistema gráfico del Gobierno de Colombia relacionada en la Directiva 03 del 02 de abril de 2019 , vigente y aplicable y se requiere la validación del uso de los logotipos correspondientes a cada Entidad. Para el caso de los trámites integrados bajo la opción 2. Interfaz gráfica mínima, la entidad deberá ubicar en el encabezado únicamente su logotipo con las especificaciones y dimensiones la siguiente relación: 256 x 50 Pixeles, ubicado en la parte superior izquierda de la pantalla y ajustarse dependiendo del tipo de pantallas

Gráfica 3.1.1: Logotipos

Fuente: Guía del sistema gráfico del Gobierno de Colombia

3.2 Pie de página (Footer) El pie de página de los trámites y servicios integrados en GOV.CO estará compuesto gráficamente como se muestra a continuación:

Gráfica 3.2.1: Pie de página o Footer para entidades

9

NOTA: Para facilitar la incorporación de estos elementos gráficos, se entregará a futuro el recurso digital (código HTML) que permita su incorporación automática en los desarrollos actuales que soportan los trámites y servicios de las entidades públicas, el cual estará disponible en la Biblioteca de GOV.CO en la categoría Sistema de Diseño. Este pie de página o footer que contiene la información de la entidad se empleará para trámites y servicios así como para la integración de sitios web de entidades descrito en el documento Acondicionamiento gráfico Opción de integración 1 de dominios a GOV.CO, el cual podrá encontrarse mayor detalle y especificación gráfica.

3.3 Iframe para interfaz gráfica mínima Para los trámites que sean integrados a través de la opción 2: Interfaz gráfica mínima, se hará uso del iframe o recurso html, cuya configuración y despliegue estará a cargo del Ministerio de tecnologías de la Información y comunicaciones. La composición gráfica se describe a continuación:

Gráfica 3.3.1: Composición gráfica del Iframe

10

Gráfica 3.3.2: Composición gráfica del Iframe con Trámite embebido

3.4 Tipografía 3.4.1 Tipos de fuente Las fuentes a utilizar serán Work Sans y sus estilos de acuerdo a la Guía del sistema gráfico del Gobierno de Colombia y en conjunto con la fuente Montserrat para facilitar la accesibilidad de algunos de los contenidos, por el contraste entre las dos tipografías.

Gráfica 3.4.1: Tipos de Fuente y estilos

3.4.2 Generalidades de uso

11

El uso de las fuentes Montserrat y Work Sans está sujeto a la sección en la que se encuentre.

Gráfica 3.4.2: Tamaños de texto

3.5 Color El manejo del color es muy importante ya que esté indica y comunica acciones e interacciones con el sistema así como atrae la atención de los usuarios en su recorrido visual por la interfaz, por lo tanto, se necesita ser muy estrictos en su uso. Nota: La paleta utilizada por GOV.CO está alineada por la que se presenta en la Directiva

12

Presidencial 03, de acuerdo a la Guía del sistema gráfico del Gobierno de Colombia. Vale la pena resaltar el color Blanco (#FFFFFF) como color de fondo para las interfaces de los trámites y servicios.

Gráfica 3.5.1: Paleta de colores

13

3.6 Botones 3.6.1 Principios de los botones Los íconos diseñados deben ser distintivos, apilables y consistentes, principios que garantizan la uniformidad de la interacción.

Gráfica 3.6.1: Características de los botones 3.6.2 Estado de los botones Los estados comunican al usuario que acciones se encuentran disponibles. Se contarán con tres estados fijos: activo, desactivado y hover.

Gráfica 3.6.2: Estados de los botones

3.6.2.1 Activo (Enabled) Significa que el botón está activo y listo para realizar la acción, describe una acción que podría estar en desarrollo.

14

Gráfica 3.6.3: Estado Activo

3.6.2.2 Desactivado Comunica que el botón esta inhabilitado por lo que no se puede realizar ninguna acción.

Gráfica 3.6.4: Estado Desactivado

3.6.2.3 Hover Es el estado que se activa cuando el cursor esta sobre el botón.

Gráfica 3.6.5: Estado Hover

3.6.3 Jerarquía de los botones Los botones se comportan de manera diferente dependiendo de la relevancia de la acción, por lo tanto, deberán ser usados de acuerdo con su énfasis: alto, medio, bajo.

15

Gráfica 3.6.6: Jerarquía según énfasis

3.6.3.1 Botones con énfasis alto Estos botones se representan con una figura con un color sólido. Se destacan en la interfaz por indicar la acción principal en la pantalla. No debe haber más de 1 botón principal, ya que este indica la opción deseada para continuar los procesos.

Gráfica 3.6.7: Visualización énfasis alto

3.6.3.2 Botones con énfasis Medio Los botones delineados indican una importancia intermedia. Se representan enmarcados con una línea exterior y un texto que describe la acción a realizar.

Gráfica 3.6.8: Visualización énfasis medio

3.6.3.3 Botones con énfasis Bajo Los botones de texto indican al usuario acciones que pueden realizar en la interfaz sin distraerlo ó acaparar la atención. Se distinguen por estar en negrita y tener underline (Subrayado de texto), ó un ícono que deje clara la acción a realizar.

16

Gráfica 3.6.9: Visualización énfasis bajo

3.6.4 Tipos de botones Una vez se asigna el énfasis de los botones, se procede a contemplar la posibilidad de integrar un elemento gráfico que facilite la comprensión de la acción como un ícono, un símbolo (Ej: Una flecha en el botón de descarga. Una casa en el botón Home, entre otros.). Existen tres tipos: Simbólico, Textual, Mixto y De información. 3.6.4.1 Simbólico Tienen un ícono que representa gráficamente la acción y se acompaña también de un título que describe la acción del botón. Éstos también obedecen a los estados y énfasis mencionados anteriormente

Gráfica 3.6.10: Tipo de botón simbólico

3.6.4.2 Textual Describen la acción con palabras. Para mejor entendimiento de las acciones principales (botones contenidos) no deben contener frases de más de 3 palabras, en el caso de los botones sin contenedor y en contenidos específicos, se pueden usar hasta 5 palabras siendo claros en la redacción para que la indicación sea clara.

Gráfica 3.6.11: Tipo de botón textual

17

3.6.4.3 Mixto Contienen los dos elementos anteriores: texto e ícono.

Gráfica 3.6.12: Tipo de botón mixto

3.6.4.4 De información y agregado Los botones de información visualizan acciones de forma modal o amplían la información que se ve previa a su ejecución. Puede usarse en cualquier tipo de vista, generalmente son utilizados en tablas para acceder a información específica que pueda encontrarse oculta.

Gráfica 3.6.13: Tipo de botón de información y ver más información

3.7 Etiquetas Las etiquetas son piezas de meta data que proveen acceso a categorías específicas del contenido así que apoyan la navegación con clasificación adicional de contenido.

Gráfica 3.7.1: Tipos de etiquetas

3.8 Botones de navegación 3.8.1 Miga de pan Ayuda al usuario a identificar la ruta de navegación por la cual se accede a la pantalla en la cual se encuentra, asi como presentar accesos rápidos a secciones anteriores. Esta se ubica debajo del header y deberá aparecer en todas las secciones de GOV.CO después del primer click después del Home.

18

Gráfica 3.8.1: Miga de pan primer nivel

Comportamiento cuando haya 3 niveles de navegación. Si la navegación supera los 3 niveles y el título de la página en la que se encuentra el usuario tiene más de 3 palabras mostrará puntos suspensivos y deberá comprimirse y mostrarse de la siguiente forma.

Gráfica 3.8.2: Miga de pan tres niveles de navegación

3.9 Campos de texto Estos campos disponen un espacio para el ingreso de datos en forma de texto diligenciados por los usuarios. Los campos de texto podrán tener un contador de caracteres. Dependiendo de la complejidad del campo tendrá una descripción de ejemplo.

19

Gráfica 3.9.1: Descripción campos de texto con sus estados

3.10 Desplegables

• Son campos que contienen un listado que presenta opciones. Al hacer clic muestra un menú exponiendo la lista al usuario.

• El menú debe permanecer abierto hasta que el usuario seleccione una opción o haga clic sobre el ícono desplegar.

• Para separar los contenidos estos menús cuentan con líneas horizontales que dividen los contenidos.

• Para mejorar la accesibilidad el menú deberá informar a los usuarios que utilicen lectores de pantalla.

• Cuenta con otros modos de desplegable además de la lista, como por ejemplo: Teclado o calendario.

20

Gráfica 3.10.1: Botones desplegables

3.11 Caja de chequeo (checkbox) Los check boxes, permiten seleccionar una opción determinada.

21

Es importante tener presente el check box que permite la aceptación de términos y condiciones, ya que tienen un comportamiento específico porque este implica que anteriormente sean leídos y comprendidos.

Gráfica 3.11.1: Check box aceptación términos y condiciones

Para unificar la experiencia de los usuarios en esta actividad específica, la entidad podrá acatar la siguiente la estructura sugerida para el mensaje que allí se dispone:

1. Botón: Checkbox 2. Texto: Verbo (acción) – Entidad – Uso de datos personales – Términos y condiciones

(linkeado a los términos y condiciones) Ejemplo texto: Autorizo al Ministerio de Transporte para el uso de mis datos personales según los Términos y condiciones. Ver Gráfica 3.11.1. 3.11.1 Listas de chequeo Muestran la información de un listado con opción de selección, también pueden encontrarse dentro de los Botones Desplegables. Para separar visualmente los contenidos en los listados, se dispusieron líneas horizontales y una caja de chequeo en el costado izquierdo al inicio de la opción.

Gráfica 3.11.2: Listas de chequeo

Estados de la lista de chequeo:

22

Gráfica 3.12.3: Estados de las listas

3.12 Símbolos Son elementos que no poseen acción al interactuar con ellos y cuyo propósito es solamente informar o hacer énfasis, generando un impacto más contundente en el usuario. Deben ir acompañados en el código con un texto alternativo alt=”” 3.12.1 Tipos de símbolo Son dibujos ilustrativos que apoyan el contenido y hacen énfasis visual en las opciones. Se pueden visualizar de dos formas contenidos en un círculo o sin borde.

23

Gráfica 3.12.1: Tipos de símbolos

3.13 Barra de accesibilidad Esta barra contiene las acciones que facilitan la navegabilidad y la experiencia para usuarios con condiciones especiales. Permitirán aumentar o disminuir el tamaño de los textos, cambiar el contraste de todo el portal, cambiar el idioma, solicitar apoyo del centro de relevo y realizar un scroll up inmediato.

Gráfica 3.13.1: Botones de accesibilidad

La barra de accesibilidad tiene varios estados y comportamientos. Se muestran a continuación

24

Gráfica 3.13.2: Comportamiento barra accesibilidad

3.14 Paginación La paginación es un método de división de contenido de forma discreta, presentándolo de forma agradable y donde el usuario tiene el control sobre la cantidad de información que desea ver. Si se ubica en la posición incorrecta los usuarios pueden perderlo, por lo que se sugiere agregar este elemento en el inicio y fin de la página, ofreciendo al usuario flexibilidad en el acceso. Esta también debe ajustarse según la cantidad de registros que el usuario desee observar, y selección en la opción Mostrar registros

Gráfica 3.14.1: Barras de paginación

25

3.14.1 Estados de la barra de paginación

Gráfica 3.14.2: Comportamiento barras paginación

Gráfica 3.14.2: Selección, Mostrar registros.

3.15 Teclados Permite el ingreso de datos numéricos para interacciones de escritorio, y en el caso de interacciones móviles cada sistema operativo desplegará su propio teclado.

26

Gráfica 3.15.1: Teclado numérico

3.16 Formulario de validación Se visualizan cuando el usuario necesita presentar credenciales de autenticación para ingresar a una sección. Allí, registra sus datos y envía el formulario haciendo clic en un botón, donde la información será validada.

Gráfica 3.16.1: Modal inicio de sesión

3.17 Barra de scroll La barra de scroll permite al usuario desplazarse de arriba abajo, o de derecha a izquierda, en páginas, tablas, visualizaciones, embebidos, entre otros. Tipos de barra Se pueden visualizar de dos formas.

27

Gráfica 3.17.1: Barra de desplazamiento. Esta visualización gráfica, aplica para la versión horizontal

3.18 Tooltips Estos elementos permiten dar información adicional sobre una opción, deben contener textos cortos. En lo posible, es mejor no utilizarlos pues pueden generar confusión. La primera opción sería revisar el texto usado en la opción que se encuentra en la interfaz para presentar opciones lo suficientemente claras.

Gráfica 3.18.1: Visualización tooltip

3.19 Alertas Las alertas son elementos de comunicación que interrumpen la navegación y solamente pueden ser utilizadas en situaciones importantes como confirmar cambios, notificar a los usuarios sobre problemas o situaciones anormales en la página, entre otros. Cuando se ejecuten no deben haber mas acciones disponibles, para esto se requiere que estén sobrepuestas a un fondo con desenfoque (background blur) que impida ver el contenido de la página y centre la atención en la alerta. IMPORTANTE Una alerta está pensada para todos los formatos de orientación de la aplicación, tanto horizontal como vertical, la información debe ser optimizada para evitar el desplazamiento (scroll) dentro de la misma. Sobre los títulos de alerta y mensajes Los textos para las alertas podrán ser tomados de la “Matriz de Mensajes”, disponibles en la Biblioteca de GOV.CO

28

Si requiere un mensaje no identificado en la “Matriz de mensajes” tenga en cuenta lo siguiente: 1. 150 Caracteres máximo 2. Incluir una acción, máxima dos, teniendo en cuenta la jerarquía de los botones. 3. Suministre una instrucción clara con una acción concisa. Especificaciones del fondo que bloquea la pantalla detrás de las alertas:

• Transparencia: 100% • Brillo: -25% • Cantidad de desenfoque: 20% • Opacidad: 0% • Color: #000000

3.19.1 Tipos de alertas De información Es un tipo de alerta que aparece cuando se debe informar al usuario sobre el resultado de una acción, presenta solamente un botón que ejecuta la acción de cierre, no puede contener más botones, de lo contrario emplee una Hoja de acción.

29

Gráfica 3.19.1: Tipos de alertas

Hojas de acción Permite al usuario tomar decisiones sobre los contenidos de la acción, o pedir confirmación antes realizar una operación irreversible. No puede tener más de dos botones y no tiene botón de cierre.

30

Gráfica 3.19.2: Alertas con acción

Mantenimiento Esta alerta está pensada para el caso en el que la página este en mantenimiento. Solo puede contener el botón que cierra la ventana emergente.

Gráfica 3.19.3: Alerta informativa

31

Notificación Comunican al usuario cuando un proceso tiene una novedad que puede ser resultado de un proceso o un error en la lógica del procedimiento. Solo tienen un botón con el cual se cierra o se elimina la notificación.

Gráfica 3.19.4: Notificaciones del body

3.20 Mensajes La comunicación verbal y gráfica de la interfaz, hace parte fundamental del entendimiento de las acciones a realizar por parte de los usuarios. Para esto se ha configurado la “Matriz de mensajes GOV.CO”, una herramienta que permitirá estandarizar: notificaciones, alertas y comunicaciones generales de los trámites. Es importante hacer referencia a la Guía de Lenguaje Claro para Servidores Públicos de Colombia del Departamento Nacional de Planeación, que ayudará en la configuración no solo de los mensajes, sino en general de todas las comunicaciones con los usuarios.