Sistemas de Diseño. 1de3 - El Contador de Bytes

Crear nuevos productos digitales suele ser lento, lentísimo o eterno lo cual lo suele convertir en caro, carísimo e incluso obscenamente caro ¿Os suena?

En una empresa medio-grande, suelen intervenir muchos roles; alguien que tenga la visión, alguien que estudie la viabilidad de mercado y técnica, que piense en la experiencia del usuario, la usabilidad del producto, en la arquitectura de la información, copywriters, traductores… Alguien que lo diseñe; como producto o servicio, y como interacciona con el usuario (interfaces de usuario)… ¡Ah, y además hay que programarlo! ¡Madre mía!

La parte más cara es el desarrollo, que es donde el producto toma vida. Así que les debería llegar unos requisitos funcionales y no funcionales clarísimos, entre ellos la Interfaz de usuario.

¿Qué tiene que ver todo esto con los sistemas de diseño?

Pues que si conseguimos que tanto desarrolladores como los diseñadores dispongan de unos principios, fundamentos claves, una paleta de componentes UI con los que nos vamos a comunicar e interactuar con los usuarios, patrones, ejemplos y sobre todo un gobierno. Es más que probable que se incremente la eficiencia, y por tanto costará menos tiempo y por lo tanto menos pasta.

¿Qué es un Sistema de diseño?

Pues una documentación centralizada, un portal web, en el que se encuentran las herramientas para diseñar e implementar un producto digital. En este deberíamos encontraremos:

Unos principios que deberemos cumplir, cada elemento que creemos deberá ser fiel a ellos. Un ejemplo típico es que el diseño sea A11y (Accesibilidad), que cada componente que se haga tenga en cuenta los principios de accesibilidad
Los fundamentos: es la anatomía, se definen los estilos; tipografías, colores, Grid en Desktop o móvil, espaciados, iconos, animaciones…
El sistema: este punto se debe centrar en el gobierno, creo que es de los puntos más importantes. Definiremos los roles, procedimientos de creación, modificación y evolución, PKIs (Pobre gran olvidado), las herramientas…
Componentes: Este es que nos gusta a todos, son la colección de componentes, los botones, Cards, Checkboxes, … Deberá disponer de una documentación de cuando se utiliza, su comportamiento, sus estados y variaciones. Se suele jerarquizar con la filosofía Atomic Design, de la que os hablaré más adelante.
Guías: Es la entrada para acelerar la comprensión y resolver dudas sobre la puesta en marcha y el día a día. Encontraremos los patrones (soluciones más comunes), usos, voz y tonos y ejemplos con sus indicaciones hacia que principios, fundamentos y componentes utilizar.
UIKit, StarterKit: Normalmente son los descargables, tanto para diseño; los archivos Sketch, Xd, Figma, así como las librerías de componentes generadas para las distintas tecnologías, Angular, React, Vue, Stencil…

Ventajas

Ya he comentado que la reducción de los tiempos de entrega es una de sus principales ventajas y por lo tanto, reducción de costes, pero no debemos olvidarnos de estas otras.

Dará una consistencia a nuestros productos. Los componentes sobre los que interaccionaran los usuarios están estandarizados, son predecibles y fáciles de entender. ¡Los distintos productos seguirán una misma filosofía! ¡Serán reconocibles y sin deformaciones!
Y cohesión, cuanto más cosas en común dispongamos, y más relacionadas estén, más rápido y barato será construir interacciones, especialmente las complejas.
Escalabilidad. Varios grupos de diseñadores y desarrolladores pueden trabajar en distintos productos o mantenimientos con una única fuente de verdad. ¡No es genial!
Experiencias de alta calidad (usabilidad y UX). Si cumplimos lo anterior, y el gobierno es bueno, debe de asegurarse que se cumplen UX y usabilidad en los procesos, mejorará la calidad del producto y su ecosistema sin ninguna duda.
Equipo sincronizado y alienado. Todos bajo el mismo vocabulario.
Disponer de una métrica. Tenemos que medir el rendimiento de los componentes en las distintas páginas y aplicaciones para mejorar el producto y conocer como ayudar a nuestros clientes.

Desventajas

Es un cambio de mentalidad y siempre cuesta en las organizaciones.
El gobierno debe ser bueno o acabará siendo un caos. Es mejor que lo lleven los expertos en el dominio, un equipo dedicado. Somos seres limitados:
- Ley de Miller: Las personas pueden recordar hasta 7 elementos distintos en su memoria de trabajo
- Ley de Hick: El tiempo que se tarda en adoptar una decisión aumenta a medida que se incrementa el número de opciones