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 Juan Carlos Ochoa – Subdirector de Gobierno (e) 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 Angélica Herrera – 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 2 Noviembre 2019

Lineamientos para acondicionamiento gráfico de trámites y servicios. Recomendaciones a entidades con trámites – Opción 2. Interfaz Gráfica Mínima

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 ............................................................................................ 4

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

3. Elementos Gráficos - Utilitarios ............................................................ 8

3.1 Logotipos ..................................................................................................... 8

3.2 Componentes Maestros ............................................................................. 8

3.2.1 Header o Encabezado .............................................................................. 9

3.2.2 Pie de página (Footer) ............................................................................. 9

3.2.3 Iframe para interfaz gráfica mínima ..................................................... 10

3.3 Tipografía .................................................................................................... 12 3.3.1 Tipos de Fuente ....................................................................................................... 12 3.3.2 Generalidades de uso .......................................................................................... 14 3.3.3 Diagramación ........................................................................................................... 15

3.4 Colores .................................................................................................... 16

3.5 Botones ................................................................................................... 18

3.6 Alertas .................................................................................................... 36

3.6.1 Mensajes ................................................................................................ 42

3.7 Símbolos e Íconos ................................................................................. 42

3.8 Área de Servicio .................................................................................... 45

4

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.

5

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 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”.

6

Opción de integración Acondicionamiento Gráfico 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 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.

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.

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.

7

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

3.2 Componentes Maestro

3.2.1 Encabezado (Header) No aplica Requerido Requerido Requerido

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

Iframe Interfaz G. Mínima No aplica Requerido No aplica No aplica

3.3 Tipografía No aplica Requerido Requerido Requerido

3.3.1 Tipos de fuente No aplica Requerido Requerido Requerido

3.3.2 Generalidades de uso No aplica Requerido Requerido Requerido

3.3.3 Diagramación No aplica Requerido Requerido Requerido

3.4 Color No aplica Requerido Requerido Requerido

3.5 Botones No aplica Deseable Requerido Requerido

Tipos de los botones No aplica Deseable Requerido Requerido

Estado de los botones No aplica Deseable Requerido Requerido

Jerarquía de los botones No aplica Deseable Requerido Requerido

Etiquetas No aplica Deseable Requerido Requerido

Miga de pan No aplica Deseable Requerido Requerido

Campos de texto No aplica Deseable Requerido Requerido

Tooltips No aplica Deseable Requerido Requerido

Desplegables No aplica Deseable Requerido Requerido

Botones de navegación No aplica Deseable Requerido Requerido

Caja de chequeo (checkbox) No aplica Deseable Requerido Requerido

Lista de chequeo No aplica Deseable Requerido Requerido

Paginación No aplica Deseable Requerido Requerido

Formulario de validación No aplica Deseable Requerido Requerido

Barra de accesibilidad No aplica Deseable Requerido Requerido

Teclados No aplica Deseable Requerido Requerido

Volver arriba No aplica Deseable Requerido Requerido

Contador No aplica Deseable Requerido Requerido

3.6 Alertas No aplica Deseable Requerido Requerido

Tipo de alertas No aplica Deseable Requerido Requerido

Notificaciones No aplica Deseable Requerido Requerido

Fondo para alertas No aplica Deseable Requerido Requerido

3.6.1 Mensajes No aplica Deseable Requerido Requerido

3.7 Símbolos No aplica Deseable Requerido Requerido

3.8 Área de Servicio No aplica Deseable Requerido Requerido

No aplica Deseable Requerido Requerido

Tabla 1. Aplicabilidad de los elementos gráficos por opción de integración del trámite o servicio

8

3. Elementos Gráficos - Utilitarios

3.1 Logotipos 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. Logotipos Gobierno de Colombia y Portal GOV.CO

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

3.2 Componentes Maestros Los componentes maestros son los que definen la estructura de página: Header o Encabezado y Footer o Pie de página. El portal GOV.CO debe contener siempre el logo de GOV.CO, los vínculos a las secciones de trámites y servicios, participación, entidades, buscador, idioma e iniciar sesión. A continuación, se muestran los elementos de pauta para cada uno:

9

3.2.1 Header o Encabezado

Header - Entidades

Header - Home scrolled down

Header - Home scrolled up

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

3.2.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: Footer

10

Footer con hover seleccionado

Gráfica 3.2.2 Pie de página o Footer para entidades 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.2.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:

Importante en Footer o Pie de Página

En el caso de las entidades cuyos trámites serán integrados por la opción DOS: Interfaz gráfica mínima a GOV.CO, el lineamiento gráfico NO deberá incluir este componente. Ver: Área de servicio - Componentes para embebidos

11

Composición gráfica del Iframe

12

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

3.3 Tipografía 3.3.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. NOTA: La tipografía puede ser descargada desde sami.presidencia.gov.co Color de texto para páginas y artículos

13

Color de texto para fotos

Color de texto para páginas y artículos

Gráfica 3.3.1 Tipos de Fuente y estilos

14

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

Gráfica 3.3.2 Tamaños de texto

15

3.3.3 Diagramación Diagramación para noticias y trámites

Diagramación para ejercicios de participación

16

3.4 Colores El manejo del color es muy importante ya que esté indica y comunica acciones importantes 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

Presidencial 03, en el Manual de Imagen de Gobierno.

Gráfica 3.4 Pautas de color

17

18

3.5 Botones Los botones inician acciones específicas en las aplicaciones, y tienen fondos únicos que podrían o no cambiar dependiendo de la aplicación en uso, estos pueden incluir un título o un icono. El sistema provee un número predefinido de estilos de botones para su uso. Tipos 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

Textual: No tienen ícono, describen la acción con palabras y no deben contener más de 3 palabras, salvo en contenidos específicos.

Mixto: Son iguales que un botón de texto pero estos están acompañados de un ícono. También pueden ser contenidos de énfasis alto

De información y agregado:

19

Los botones de información visualizan acciones de forma modal ó amplían la información que se ve previa a su ejecución, que contiene información adicional o funciones relacionadas con elementos de la pantalla, sin embargo, puede usarse en cualquier tipo de vista, generalmente son utilizados en tablas para acceder a información especifica de filas. Cuando no estén en una tabla o formulario, deberá mostrar detalles del proceso o de la configuración de la misma.

Estados de los botones Los botones contarán con tres estados fijos que comunican al usuario las posibles acciones que puede realizar, facilitando la interacción con los diferentes elementos en la navegación como Activo, desactivado y hover. Los estados son de mucha importancia pues comunican al usuario que acciones se encuentran disponibles.

Activado: Significa que el botón está activo y listo para realizar la acción, describe una acción que podría estar en desarrollo.

20

Inhabilitado: Comunica que el botón esta desactivado y que no se puede realizar ninguna acción con él. Describe una acción que ya se desarrolló o que aún no se ha desarrollado.

Desactivado: Es el estado del botón que se activa cuando el cursor esta sobre el botón.

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 a su énfasis ALTO, MEDIO, BAJO.

ALTO Los botones contenidos destacan en la interfaz y tienen la acción más importante, deben ser usados para indicar la acción principal. Si necesita tener más opciones, identifique la acción principal y las demás pueden presentarse en botones con énfasis medio o bajo.

21

Medio Los botones delineados tienen una complejidad y énfasis mas alto que el botón de texto, normalmente indican acciones que son importantes pero que no son la acción primaria en la página. Son aquellos enmarcados con una línea y un texto que describe la acción a realizar.

Bajo: Los botones de texto son etiquetas que se muestran fuera de un contenedor describen la acción que ocurrirá si el usuario entra en el vínculo. Debido a que tiene un énfasis bajo, deben ser usados para acciones con un nivel de importancia menor. Se distinguen por estar en negrita y tener Underline (Subrayado de texto), ó un ícono que deje clara la acción a realizar

Etiqueta 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. Miga de pan Ayuda al usuario a ubicarse dentro de la página durante la navegación, Le permite saber en dónde está y de qué sección viene. Está ubicada debajo del header y deberá aparecer en todas las secciones de GOV.CO después del Home.

22

Comportamiento cuando hayan 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.

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.

23

Campos de texto Son creados para el ingreso de texto de los usuarios, pueden ser específicos que corresponden a variables como nombre, correo o teléfono, y unos más amplios para información abierta. Los campos de texto podrán tener un contador de caracteres. Dependiendo de la complejidad del campo tendrá una descripción de ejemplo.

24

Desplegables Al hacer clic muestra un menú que contiene una lista de opciones. 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 ademas de la lista, como por ejemplo: Teclado o calendario.

25

Visualizaciones especiales

26

Botones de navegación La barra de scroll permite al usuario desplazarse de arriba a abajo en la página y saber en qué parte se cuenta.

27

Caja de chequeo Los términos y condiciones tienen un comportamiento específico y una vez sean leídos se deberán aprobar o rechazar, por medio de una caja de chequeo (checkbox) ubicada a la izquierda del texto

Lista 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 los contenidos en los listados, se dispusieron líneas horizontales en un color claro para poder separar visualmente, algunos contendrán una caja de chequeo en el costado izquierdo y al inicio de la opción.

28

Estados:

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.

29

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. Si los números son muy pequeños puede terminar en un clic accidental en otro botón. Razón por la cual en la sección de botones deben tener un tamaño mínimo de 44 x 44 px para móviles.

30

Formulario de validación Muestran la información de un listado con opción de selección, también pueden encontrarse dentro de los Botones Desplegables. Para separar los contenidos en los listados, se dispusieron líneas horizontales en un color claro para poder separar visualmente, algunos contendrán una caja de chequeo en el costado izquierdo y al inicio de la opción.

Barra de accesibilidad Estas acciones 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. Estos botones son de énfasis alto por lo tanto deben ser botones contenidos

31

32

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

33

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

34

Volver arriba 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. Si los números son muy pequeños puede terminar en un clic accidental en otro botón. Razón por la cual en la sección de botones deben tener un tamaño mínimo de 44 x 44 px para móviles.

35

Contador Este elemento informa al usuario sobre los elementos disponibles o visualizados de un catalogo de preguntas. Hasta el momento solo se ha utilizado para el Mockup de Solicitud de inscripción en el registro de tierras despojadas. Es posible que se encuentren versiones en otros Mockup y que deben ser actualizados a esta versión.

36

3.6 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. Debe ser la única acción disponible cuando estén presentes, 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. Ésta debe requerir retroalimentación, debe ser estática y no puede ser personalizada.

37

Tipos de alertas 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.

38

Hoja de acció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.

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.

39

40

Notificaciones 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.

41

42

3.6.1 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.

3.7 Símbolos e Íconos

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=””

Se pueden visualizar de dos formas contenidos en un círculo o sin borde. Se diferencian de los iconos y botones porque además de no llamar una acción, van en el color del texto HEX: 004884 definido en el manual de imagen presidencia y no ejecutan ninguna acción

43

Iconos Los iconos se comportan de dos formas: Positivo, Negativo y circular. Un icono se compone de un símbolo que tiene una acción asociada y acompaña siempre a un botón.

44

Están diseñados para operaciones del sistema pueden ser usados para acompañar los botones y cumplir función de icono.

45

3.8 Área de Servicio El área de servicio es un espacio que provee acciones que complementan la experiencia del usuario y obtienen información sobre la percepción del usuario o informan al mismo sobre su estado en la página o proceso. Componentes para trámites

46

47

48

49

Componentes para trámites embebidos Debido a su naturaleza, los componentes para el área de servicio para los tramites que han sido embebidos tienen un comportamiento diferente y que se presenta a continuación