Los sistemas de diseño son herramientas que ayudan a que una organización con servicios digitales diversos o de gran tamaño mantenga la coherencia y la calidad, al tiempo que se reducen costes y se mejoran los procesos de implementación. Te contamos qué son, qué te pueden aportar, y cómo empezar a utilizarlos.
La situación en muchas entidades locales
En el contexto de las entidades locales (también en otras de mayor tamaño) es normal que no haya una unidad centralizada que controle y coordine todos los servicios digitales. O si existe, que tenga recursos para asegurar una experiencia e imagen consolidada a lo largo de las distintas webs o secciones que inevitablemente acaban surgiendo.
Lo común es que haya una web principal (ej. la web corporativa), algunas secundarias (ej. la sede electrónica), unos cuantos pequeños sites para usos puntuales (ej. el site de los museos municipales), y servicios de terceros que se han integrado (ej. herramienta de contratación de pistas deportivas). Además de las apps móviles…
Hay excepciones de organizaciones que se imponen la regla de una única web, pero muchas veces hay razones para romperla (conseguir desplegar distintos servicios en un mismo entorno retrasaría mucho la puesta en marcha de los mismos además de aumentar el alcance presupuestario del conjunto).
En este contexto se puede dar una falta de coherencia en cuanto a la experiencia de usuario a distintos niveles:
- arquitectura de la información: menús, jerarquía, navegación…
- contenido: diseño de la información, utilidades, tono y estilo de escritura…
- visual: logos, estilos visuales de los elementos de interfaz, recursos visuales…
Esta falta de coherencia en la experiencia genera problemas de usabilidad dificultando las tareas del ciudadano (buscar y encontrar información, comprender la estructura la información, saber moverse por la web, realizar sus trámites…).
¿Qué técnicas y metodologías podemos utilizar para neutralizar o minimizar estos problemas?
En el sector del diseño digital se ha desarrollado en los últimos años una tendencia: la creación de sistemas de diseño. En este post explicaremos qué es un sistema de diseño y cómo pueden mejorar la gestión y calidad de los productos digitales de una organización pública (pudiendo aplicarse a entidades de diferentes tamaños).
Qué es un sistema de diseño
Como puedes leer en muchos sitios un sistema de diseño va más allá de una guía de estilo clásica o una librería de patrones y componentes de interfaz. Si echas un vistazo a muchos de los sistemas de diseño publicados por distintas organizaciones, verás que se reducen a alguno de estos dos elementos. Probablemente la reflexión sobre principios que rigen el sistema no se está compartiendo, pero como elemento fundacional del sistema, son la clave.
Una definición que nos gusta en Populate es que un sistema de diseño es un conjunto de principios que gobiernan el despliegue de las interfaces de una marca:
- Principios: Aquellas intenciones esenciales que queremos que formen parte de la personalidad de nuestra organización, una forma determinada de hacer las cosas. Esto contempla qué personalidad visual tendremos, pero también el tono de nuestros mensajes, características de las interacciones…
- Gobierno: cómo se relacionan y organizan los diferentes elementos que tenemos que movilizar.
- Despliegue: cómo se implementan las reglas. Aquí entrarían en acción las librerías de componentes y las guías de estilo.
- Interfaces: las distintas interfaces que utilizan nuestros usuarios para relacionarse con nosotros. No solo una web, no solo una app. Nuestros servicios de atención telefónica, nuestras dependencias físicas, nuestros folletos impresos… Idealmente todo debería regirse por este sistema de diseño que lleve la coherencia a todos los rincones en los que nuestra marca se materializa.
Javier Cañada, un diseñador español, tiene una definición que también hacemos nuestra:
“Un sistema de diseño es un conjunto de reglas que organizan, dan consistencia y armonía a un entorno complejo y variable de contenido y funcionalidad. Para que un sistema sea tal, es importante que cumpla algunas premisas: que sea escalable, que su unidad mínima se base en una certeza, que sea recursivo en sus formas y proporciones, que regule no sólo la forma y comportamiento de los objetos sino también las relaciones entre ellos, que sea eficiente, predecible y sometedor. Esto es, que una vez definido, obligue a todo contenido o funcionalidad a existir bajo sus propias reglas.” (Fuente)
Principios de diseño
Antes de ponerse a desarrollar una arquitectura de información o un lenguaje visual merece la pena hacerse algunas preguntas anteriores para sentar unas reglas generales, unos principios que emanen de la personalidad de nuestra marca u organización, y que nos ayuden a tomar las decisiones de diseño.
Dieter Rams definió un decálogo de principios de diseño que es ya un clásico. Son generales y aplican a cualquier cosa que se deba diseñar:
- El buen diseño es innovador
- El buen diseño debe ser útil
- El buen diseño es estético
- El buen diseño es discreto
- El buen diseño es comprensible
- El buen diseño debe ser honesto
- El buen diseño es duradero
- El buen diseño es minucioso hasta el último detalle
- El buen diseño es sostenible
- El buen diseño debe ser su mínima expresión
Acercándonos al entorno de la administración pública, el Government Digital Service de Reino Unido también ha definido sus principios (Consulta el detalle en su web - en inglés: Government design principles.):
- Start with user needs
- Do less
- Design with data
- Do the hard work to make it simple
- Iterate. Then iterate again
- This is for everyone
- Understand context
- Build digital services, not websites
- Be consistent, not uniform
- Make things open: it makes things better
En los recursos que compartimos al final de este artículo podrás ver otros ejemplos de distintos tipos de organizaciones. Pueden ser buenos puntos de partida para reflexionar sobre los principios de lo que queremos partir para construir nuestros servicios.
Por qué necesitas establecer un sistema de diseño
Cuando hay que delegar en distintos equipos y productos el despliegue de productos digitales tener un sistema de diseño servirá de guía para que exista coherencia, continuidad y se utilicen los mismos patrones en distintos contextos. Las mismas soluciones frente a problemas comunes que se repiten en sitios diferentes.
El sistema de diseño contendrá reglas que ayudarán a contestar de forma automática a muchas preguntas de diseño: ¿qué estructura le debemos dar a esta página? ¿dónde ponemos la navegación? ¿cómo es un menú? ¿qué jerarquía de navegación y contenido se debe establecer? ¿de qué color debe ir este botón? ¿qué estilo aplicamos a una portada de sección?
El sistema irá de lo general a lo específico e irá cubriendo distintas capas, y proporcionará herramientas para los distintos perfiles que construyen un producto digital. Simplificando tendríamos:
- Guía de Estilo: catálogo visual de elementos para ser utilizado por diseñadores para componer nuevas páginas o nuevos productos.
- Librería de componentes: componentes de interfaz para ser utilizados por los desarrolladores, de forma que se reutilicen los elementos, ahorrando tiempo y eliminando la posibilidad de interpretaciones ligeramente diferentes de la guía de estilo.
- Patrones, Plantillas…: los componentes son elementos individuales; los patrones o plantillas combinaciones de esos elementos básicos - página de contenido, portada de sección, formulario, página de ayuda, menú…
Con estos bloques, un tercero que no haya participado en el proceso de diseño inicial podrá aplicar el diseño a una nueva aplicación, o construir un nuevo sitio de contenido que encaje con el sitio padre.
Además, para el propio equipo que implementa una web principal será una herramienta que obliga a implementar buenas prácticas: reutilización, estandarización, documentación… con el consiguiente ahorro en el proceso de creación.
Cómo empezar
¿En qué momento tiene sentido comenzar a construir un sistema de diseño? Cuando vayas a renovar un producto principal, como tu web corporativa. El sistema de diseño no es algo a construir de forma aislada, como un producto en si mismo. Debe ser una generalización, una extracción de un producto que exista y que funcione. Por tanto, lo lógico será ir construyéndolo en paralelo.
A medida que se va diseñando se debe ir documentando y creando la guía de estilo y la definición de los componentes en librerías, que a su vez ayudará en este proceso. La guía y libreria de componentes se deberán ir puliendo, como una planta que cultivas y que necesita distintas atenciones según su fase de crecimiento. De cara a la finalización de una primera versión estable y su publicación, se deberá hacer una revisión, ajuste y estandarización de los elementos.
Por último, hay que tener claro que un sistema de diseño es un ser vivo que debe evolucionar y completarse con el tiempo. Sería muy ambicioso pensar que resolveremos la mayoría de casos de uso a la primera; con el uso surgirán nuevos y observaremos cosas que hay que ajustar y corregir para que funcionen mejor.
Sistemas de diseño en administraciones locales
En el contexto presupuestario de una entidad local construir un sistema de diseño puede parecer algo ambicioso, sobre todo si observamos algunos de los ejemplos más conocidos, que son de administraciones nacionales con un alcance mucho mayor. Pero no por ello debemos desechar la idea de afrontar un proyecto de este tipo: se puede adaptar el alcance y fasear para afrontarlo poco a poco.
Un sistema de diseño es una inversión: gastar un poco más ahora para asegurar proyectos de mayor calidad a medio plazo y ahorros en su implementación y mantenimiento.
Un sistema de diseño también nos “empujará” en la dirección de los rediseños iterativos: en vez de rediseñar de cero, al tener una base sólida, se podrán ir haciendo mejoras parciales en un enfoque de mejora continua.
Recursos
Os dejamos algunos recursos (todo en inglés de momento, iremos actualizando): sistemas de diseño de varias organizaciones, libros, guías…
Adminstraciones públicas
Local
Regional
Nacional
Empresas
Artículos, libros y guías
- State of Design Systems 2018
- Design systems, style guides, pattern libraries. What the hell is the difference? (de dónde hemos tomado la imagen que ilustra este post)
- Design Systems Book
- Design Systems Repo
En Populate, creadores de Gobierto, somos expertos en diseño de producto digital. Si quieres que te ayudemos a plantear la estrategia y ejecución de un sistema de diseño para tu organización, hablemos.
