Modelo de interfaz de uso y diseño de interacción
Introducción
Este modelo presenta los lineamientos a seguir para realizar la interfaz web de los servicios digitales de forma que esté centrada en el uso que le darán las personas.
Se presenta el maquetado de un servicio en línea de ejemplo (trámite tipo) que contiene la organización recomendada en pasos para procesos completos que incluyen agenda, firma electrónica y pagos.
Objetivos
Este documento define los lineamientos para la presentación y solicitud de información necesaria para realizar un servicio en línea; estos lineamientos promueven la accesibilidad digital, la facilidad de uso, la adaptación a móviles y la estandarización de la interfaz.
Se busca evitar presentaciones distintas que reflejan necesidades de las instituciones. El objetivo es uniformizar la presentación e interacción de forma tal que las personas puedan reconocer servicios en línea del Estado como oficiales, sin necesidad de aprender o recordar la forma en que debe interactuar con ellos cada vez. De esta manera se puede lograr una experiencia digital mejorada, y de una manera centrada en las personas y sus necesidades.
- Los objetivos para contar con un modelo de interfaz de uso y diseño de interacción incluyen:
- Enfoque centrado en el uso: permitir diseñar soluciones basadas en las necesidades reales de las personas, logrando una experiencia satisfactoria.
- Estandarización: ayudar a establecer una guía consistente para todas las interacciones dentro de los servicios en línea, asegurando coherencia visual y funcional.
- Facilitar la comunicación: acuerdo entre diseñadores, desarrolladores y otros interesados, definiendo cómo deben funcionar y lucir los servicios en línea.
- Utilización de maquetado tipo: contar con versiones iniciales de la interfaz de uso para comunicar ideas y validarlas con las distintas partes interesadas antes del desarrollo final.
- Mejorar la experiencia de uso: garantizar que el producto sea fácil de usar, accesible y cumpla con este modelo.
- Documentación: establecer una referencia para futuras realizaciones, mejoras, actualizaciones o rediseños.
- Mejor experiencia de uso: facilitar el uso y aumentar la satisfacción.
- Reducción de costos y tiempo: acelerar los tiempos de diseño y definición de la interfaz y detectar problemas en las fases iniciales del diseño, esto es más económico que corregirlos en producción.
- Accesibilidad: promover que el diseño sea inclusivo, permitiendo a más personas, independientemente de sus capacidades, usar los servicios en línea.
- Adaptabilidad y escalabilidad: facilitar la incorporación de nuevas funciones o la adaptación a otros dispositivos y entornos.
Glosario
Accesibilidad digital: experiencia de uso inclusiva, optimizada para personas con discapacidad.
WCAG: pautas para hacer el contenido web más accesible para personas con discapacidad. Los criterios que se debe cumplir se organizan en niveles A, AA y AAA y están descritos en la web de WCAG.
W3C: consorcio internacional World Wide Web Consortium que define los estándares de internet, tales como HTML, CSS y WCAG.
HTML: (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el estándar más básico de la Web. Define el significado y la estructura del contenido web.
CSS: Hojas de Estilo en Cascada (del inglés Cascading Style Sheets) o CSS es el lenguaje de estilos utilizado para describir la presentación de documentos HTML.
Trámite tipo: conjunto de elementos básicos, modelos de interacción y diseño visual para formularios, que pueden utilizarse como soluciones transversales a todos los organismos del Estado Uruguayo.
Incluye:
- La estandarización del maquetado HTML y CSS necesarios para la creación de formularios en HTML.
- La definición de un modelo único de interacción.
- El diseño visual consistente para la construcción de formularios.
- El orden recomendado para solicitar información usualmente necesaria, tal como datos personales, datos de una solicitud, agenda, pagos y firma digital.
Requisitos que cumplir
Utilización de componentes reutilizables: Formulario y trámite tipo
Los formularios web desarrollados deberán incorporar las definiciones especificadas en el Formulario y Trámite Tipo.
En Trámite Tipo se establece un orden para los pasos más comunes que usualmente son necesarios al usar un servicio digital, por ejemplo: consentimiento informado, datos personales, datos específicos de la solicitud, firma, agenda y pago.
La adhesión o conformidad con Formulario y Trámite Tipo facilitará el cumplimiento del conjunto de criterios de este modelo. Se trata de maquetado HTML y CSS accesible y reutilizable.
El código fuente se encuentra publicado en el git de Agesic, también es posible descargar allí el maquetado de los componentes reutilizables. Para visualizar los ejemplos con su navegador acceda a formulario y trámite tipo en el sitio web de Agesic.
Se encuentra disponible también la Guía para la creación de formularios digitales.
Accesibilidad digital
La accesibilidad digital posibilita el uso de la web de manera inclusiva, independientemente de las capacidades de las personas. Busca optimizar la interfaz contemplando distintas necesidades, tales como las de personas con discapacidad permanente o temporal, personas mayores, personas que no dominan el idioma de origen, entre otros.
En Uruguay, el Programa Accesibilidad en Entornos Digitales busca asegurar el acceso a la información y a los servicios del Estado a todas las personas, de acuerdo con la normativa en accesibilidad digital. Este programa es el responsable de definir los requerimientos técnicos que deben cumplirse.
A modo de resumen se presentan los criterios establecidos:
Validación automática de accesibilidad: validación automática sin errores de WCAG niveles A y AA (o con errores demostrados como falsos negativos) por la herramienta utilizada en el observatorio de accesibilidad digital de Agesic: Total Validator (descarga gratuita de la versión Test)
Validación manual de accesibilidad: cumplir con los criterios de nivel A, AA y los siguientes 7 criterios de nivel AAA:
- Contraste aumentado (criterio 1.4.6).
- Presentación visual (criterio 1.4.8).
- Límites de tiempo (criterio 2.2.6)
- Ubicación (criterio 2.4.8).
- Encabezados de sección (criterio 2.4.10).
- Cambio a petición: (criterio 3.2.5).
- Tamaño del área de interacción (criterio 2.5.5)
Cumplimiento de estándares web: HTML, CSS
Cumplir estándares web ayuda al funcionamiento correcto en distintos dispositivos, navegadores y plataformas.
Los estándares web que deben cumplirse son los siguientes:
- HTML, se valida con el servicio gratuito Markup Validation Service de W3C.
- CSS, se valida con el servicio gratuito CSS Validation Service de W3C
Optimización para móviles
Los servicios digitales del gobierno son utilizados desde dispositivos móviles, especialmente teléfonos celulares. Esta realidad responde a la creciente penetración y accesibilidad de los teléfonos inteligentes en la población, que se han convertido en el canal preferido para acceder a información y realizar trámites en línea. Por ello, es fundamental diseñar los servicios digitales pensando primero en la experiencia móvil, garantizando que sean intuitivos, rápidos y accesibles desde cualquier dispositivo y condición de conectividad. Esta orientación asegura una mayor inclusión digital y mejora la usabilidad, facilitando que todos los ciudadanos puedan interactuar con el Estado de manera eficiente, cómoda y por el canal de su preferencia.
Se presentan los lineamientos a seguir para lograr servicios digitales optimizados para móviles:
Enfoque “Móvil Primero” (Mobile First)
El objetivo es diseñar pensando en ofrecer la mejor experiencia en celulares y luego mejorar la interfaz a medida que el tamaño de la pantalla aumenta.
Los lineamientos para implementar esta estrategia son los siguientes:
Enfoque en la simplicidad y funcionalidad básica
Diseñar solo las funcionalidades principales en la versión móvil para garantizar que las personas puedan completar tareas desde su teléfono celular fácilmente. Evitar sobrecargar la pantalla con opciones innecesarias, la interfaz debe ser minimalista, clara y evitar distracciones.
Se deberá priorizar contenido esencial y mostrar primero la información y funcionalidades más importantes.
Diseño adaptativo y escalable
Se busca que la experiencia de uso sea consistente en todos los dispositivos. Diseñar pensando en dispositivos con pantallas pequeñas, y luego expandir esas funcionalidades a pantallas más grandes.
Optimización de la velocidad de carga
Se busca optimizar la velocidad de carga para mejorar la satisfacción en el uso y prevenir el abandono antes de completar los formularios web en el proceso de un servicio en línea.
Se trata de minimizar los tiempos de espera, especialmente en conexiones de red móviles más lentas, optimizar imágenes y archivos, utilizar compresión de recursos (CSS, JS, imágenes), asegurar tiempo de respuesta adecuado, entre otros.
Optimizar la interacción táctil
Se busca asegurar que los elementos interactivos sean fáciles de usar en pantallas táctiles.
Para ello:
- Los botones deben ser grandes y fáciles de tocar.
- Implementar gestos táctiles básicos, y que sean fáciles de realizar.
- Utilizar teclados específicos (numéricos para campos de números, por ejemplo).
Priorizar la usabilidad de formularios
Facilitar la entrada de datos para reducir el abandono de formularios. Para eso se deberá mantener los formularios lo más cortos y simples posible, minimizar la cantidad de pasos, usar campos con autocompletado y proporcionar retroalimentación inmediata sobre errores. Dividir formularios largos en pasos más pequeños, manejables y temáticos.
Navegación clara y sencilla
Se trata de que las personas puedan encontrar lo que necesitan rápidamente sin confusión y facilitar el acceso a secciones clave.
Para eso se debe usar menús de navegación compactos, como los menús desplegables o de tipo hamburguesa, para ahorrar espacio. Asegurar que las opciones principales sean fácilmente accesibles desde cualquier parte de la aplicación o sitio.
Contenido legible y escaneable
El contenido debe ser fácil de leer y entender en pantallas pequeñas, mejorando la accesibilidad y facilitar la comprensión del contenido.
Se requiere usar tamaños de fuente grandes y legibles sin necesidad de hacer zoom, para ello el tamaño mínimo del texto se sugiere que sea de al menos 16 píxeles o 1 rem en CSS para texto principal. Este tamaño es equivalente a aproximadamente 12 puntos tipográficos y se considera adecuado para el uso en pantallas móviles.
Organizar el contenido en bloques pequeños y que se puedan entender a simple vista, con titulares y subtítulos claros. También evitar el uso de textos largos y densos.
Referencias a normativas
Normativa vigente que regula la accesibilidad digital en Uruguay. El Estado, los Gobiernos Departamentales, los Entes Autónomos, los Servicios Descentralizados y las personas de derecho público no estatales deberán asegurar la accesibilidad para contenidos web. Se presentan los requisitos que deben cumplir los servicios y productos digitales para ser considerados accesibles.
Decreto N°406/022 Decreto reglamentario
Requisitos técnicos de accesibilidad digital Anexo Decreto Reglamentario.
Por consultas comunicarse con: calidadserviciosdigitales@agesic.gub.uy