Un sistema de diseño para la administración pública aragonesa: nuestro trabajo en DESY

DESY es el sistema de diseño del Gobierno de Aragón, probablemente el primer sistema de diseño de una administración pública en España y el primero publicado en abierto.

A partir de nuestro trabajo en este Design System, reflexionamos sobre cuáles son los básicos sobre los que se construye un sistema de diseño y las peculiaridades que implica hacerlo en un entorno de servicios para toda la ciudadanía.

El punto de partida: un pequeño caos

Si trabajas en una gran empresa o institución, o has diseñado o desarrollado productos digitales para una organización con muchos departamentos y tareas diferenciadas, probablemente te habrás encontrado con cierto nivel de caos: aplicaciones desarrolladas por varias manos, en diferentes momentos y con criterios de lo más diversos.

Lo mismo ocurría hace un par de años en el Gobierno de Aragón. La administración aragonesa contaba con una disparidad de sistemas visuales, patrones de navegación y de decisiones tomadas en la construcción de sus interfaces digitales. Como en cualquier otra gran organización, hay multitud de herramientas digitales, desarrolladas por empresas distintas y en etapas y momentos diferentes: tramitación, ayudas o tasas, información a la ciudadanía, notificaciones, aplicaciones de uso interno… Cada una de ellas con su propio sistema, algunos desfasados y poco intuitivos.

El desarrollo de cada una de ellas suponía reinventar la rueda cada vez, con el consecuente consumo de recursos. Cuando en 2019 nos enfrentamos al diseño de SEDA, una aplicación para crear y gestionar el catálogo de servicios de la administración, propusimos ordenar este pequeño caos. La solución era evidente: un sistema de diseño que permitiera construir herramientas apoyadas en un único repositorio de componentes y plantillas que diera consistencia a la experiencia de las personas que se acercan a la administración en un contexto digital. Aunque hasta mayo de 2020 no se haría realidad, estaba naciendo DESY, el sistema de diseño del Gobierno de Aragón.

Esa fue nuestra propuesta para Servicios Digitales de Aragón, una apuesta que el equipo acogió con entusiasmo y a la que han contribuido numerosas personas y departamentos del Gobierno de Aragón.

¿Qué es un sistema de diseño?

Si ya sabes qué es un sistema de diseño, puedes saltarte esta parte e ir directamente a cuáles son las peculiaridades de diseñar uno para la administración. Pero si quieres una breve introducción, podríamos resumir un sistema de diseño a través de tres patas fundamentales: librería de componentes, reglas y framework de desarrollo.

• Librería de componentes. Las interfaces están compuestas por pequeñas piezas, botones, iconos, textos, campos, etc. A estas pequeñas piezas las llamamos componentes, y las organizamos y clasificamos en una librería para que se puedan conocer y usar fácilmente. Definir cuántos componentes son necesarios y cómo funcionan es fundamental al diseñar el sistema.
  
  Los componentes se unen para formar bloques más complejos, que a su vez se unen para formar páginas. Como si se tratara de piezas de Lego, nos permiten construir casi cualquier cosa de manera controlada. Pero, para ello, necesitamos algo más que las piezas en sí, necesitamos saber cómo se relacionan y se unen, necesitamos unas reglas.
• Reglas. Son las normas que regulan el uso de los componentes. Estas reglas pueden influir en cualquier aspecto del sistema, desde aspectos visuales, jerarquía, interacción, lenguaje, usabilidad, accesibilidad… Estas reglas son como la gramática de un lenguaje, que permite establecer cuál es la relación entre los distintos elementos para que su uso sea coherente. Cuanto más definidas estén las reglas, más clara será la aplicación del sistema, pero cuantas más reglas tengamos, más difícil será aprender el “lenguaje”. La clave está en encontrar el equilibrio.
• Framework de desarrollo. Un sistema de diseño en un contexto digital solo tiene sentido si se ofrece en el formato en que se van a crear finalmente las interfaces, es decir, el código. Todos los componentes tienen que estar definidos a nivel visual y a nivel de código para conseguir que la transición entre el diseño y el desarrollo del producto digital sea lo más eficiente posible.

Lo que las personas usuarias ven. O mejor dicho, no ven

Las interfaces digitales de la Administración tienen un gran impacto global: miles de personas las usan cada semana, millones de usos a lo largo de un año. Pero cada persona quizás solamente usa herramientas como cita previa o pago de tasas una vez al año o una vez en la vida.

Es por eso que el diseño de la interfaz de usuario (UI) debería siempre responder a varios principios u objetivos.

• Uso de estándares. Es interesante que las decisiones de diseño sean lo más globales posibles para ayudar a reducir el tiempo que el usuario tiene que dedicar a aprender cómo se usan las cosas. Por ejemplo, si tenemos que incorporar un buscador en una herramienta del Gobierno de Aragón, su funcionamiento no debería ser diferente al de cualquier otro buscador web, es decir, en esencia, debería resultar similar al buscador de una tienda online o de un periódico digital.
• Consistencia y coherencia. Estamos hablando de aplicaciones que, aunque son usadas por diferentes departamentos y áreas para ofrecer servicios muy diferentes entre sí, son proporcionadas por la misma administración. Por eso el usuario debe percibirlas como una unidad. Eso no significa que todas las webs y aplicaciones hayan de ser exactamente iguales, pero sí entendidas como parte de un mismo sistema y que las interacciones sean iguales entre herramientas.
• Sencillez. Algunos sistemas de diseño comerciales - Por ejemplo, el del Banco Santander o el de Atlassian - contienen tanto elementos funcionales como decorativos, pero en la administración el objetivo no es “vender” sino conseguir que la persona usuaria consiga hacer lo que quiere hacer. DESY es minimalista y acotado a propósito, ya que es la única manera de asegurar que la gente que trabaje con él lo aprenda rápido y lo use de manera correcta. Buscamos que sea fácil de usar y comprender, no que aporte novedad ni que sea especialmente atractivo. Cuanto más acotado, más potente y menos posibilidades de “liarla”. Así de simple.

Creando un sistema de diseño para la Administración

Ya lo hemos mencionado: algunas empresas pueden permitirse tener sistemas de diseño más complejos, que evolucionen rápido y trasladen en gran medida sus valores de marca, a veces, incluso con departamentos dedicados a ello.

Cuando trabajamos para la Administración, guían otros principios: como el “menos y mejor”, trabajar en abierto y que todo funcione en todas las escalas. Es por eso que:

• DESY es un sistema de diseño atemporal. Está diseñado para que pueda seguir funcionando dentro de varias décadas. Una empresa puede tener un equipo dedicado en renovar el sistema, pero en la administración las transformaciones siempre cuestan más, así que cuanto más duradero sea el sistema, mejor.
• DESY se adapta a todo tipo de dispositivos. Desde el principio se ha desarrollado para que funcione en la mayor variedad de pantallas, dispositivos e interfaces posibles: desde un móvil de última generación a una gran pantalla, pasando por un portátil de 11 pulgadas o un lector de tarjetas.
• DESY permite avanzar en accesibilidad. La ley obliga a las administraciones a que sus webs y aplicaciones cumplan con el estándar doble AA y en algunas partes, el triple AAA. Es decir, los estándares de accesibilidad en la administración son mucho más exigentes que en la empresa privada, para asegurar el acceso a los servicios y productos por parte de toda la población, sin excepciones. El framework de DESY se diseña con esto en mente, siendo una parte fundamental del proceso de diseño y desarrollo.
• DESY es un sistema en abierto. Todo el sistema está publicado en: https://desy.aragon.es/desy-html/index.html, que no es solo un manual de uso estático, una biblioteca, sino el lugar desde el que acceder a los diferentes repositorios y librerías de desy en html, angular o adobe xd, para que tanto equipos de desarrollo como de diseño puedan utilizarlo.

Un sistema que crece en profundidad, no en extensión

En los últimos dos años, como parte del equipo de Servicios Digitales de Aragón, hemos trabajado mucho en la conceptualización y gestación de DESY, pero eso no significa que esté terminado. Es una herramienta en pleno crecimiento que sigue evolucionando desde la Administración, con varias personas encargándose de desarrollar toda la parte técnica. En los próximos años, como parte del nuevo contrato de Transformación Digital de la Administración Pública, el equipo de Fractal vamos a continuar colaborando en esta tarea.

Para cualquier empresa o entidad, contar con un sistema de diseño significa apostar por un uso óptimo de los recursos, apoyar el trabajo de las personas que diseñan y desarrollan productos y servicios digitales, y garantizar la accesibilidad y usabilidad para las personas que los utilizan. Si crees que tu organización puede beneficiarse de tener su propio sistema de diseño, escríbenos.