La regla del 12
Hoy hemos contado la nuestra articipación en el diseño de Fever y la regla del 12 como base para el sistema de diseño ha dado que hablar. En este pequeño artículo vamos a explicarla, desde la perspectiva de los sistemas. Empecemos con algo de contexto.
Fever nos llamó para que sistematizásemos su app, diéramos lógica y consistencia a un producto muy bien planteado pero que, como pasa a menudo, había crecido más rápido que su interfaz y tocaba volver a poner orden de diseño.
Durante varios meses trabajamos a dos bandas: con el equipo de diseño para que pudieran interiorizar y hacer propio lo que diseñásemos y al mismo tiempo con el equipo directivo, entendiendo bien las necesidades presentes y futuras, haciéndoles ver cuándo y por qué algunas decisiones de diseño lo eran de producto y cómo debían ser protegidas, escaladas, etc. Fue una buena colaboración y poco a poco han ido aplicando los cambios. Además, y esto nos alegra mucho, Fever acaba de anunciar que ya está en break-even. Muy buena noticia para uno de nuestros clientes.
Pero entremos en materia…
¿Qué es la Regla del 12?
La regla del 12 es una norma que dice que todos los valores numéricos de la interfaz deben ser de 12 o múltiplos de esta cantidad: 24, 36, 48, etc.
¿A qué valores afecta?
En el caso de Fever, y en el de muchos otros proyectos, afecta a tamaños de elementos (botones, campos de texto, fotos, iconos, etc.), a sus agrupaciones (por ejemplo, un grupo de iconos que se muestra como una barra) y también a espacios blancos, matrices… La regla también aplica a los valores cromáticos: colores y sus niveles de opacidad.
¿Hay excepciones?
Siempre puede haber excepciones, pero deberíamos tratar de evitarlas o al menos no empezar por ellas. En el caso de Fever las tipografías, los interletrados e interlineados no se ciñen a esta norma, pues los saltos de tamaño de 12 son exagerados para el uso tipográfico que queríamos.
¿Por qué doce y no diez u ocho?
Las escalas de 12 (6, 12, 24…) son divisibles en pares e impares. No pasa lo mismo con los sistemas basados en 8 o los basados en 10. Que sean divisibles en pares e impares te permite mantener consistencias tanto cuando tienes grupos de tres como de cuatro columnas, o juegos de dos botones o tres, etc. ¿Entendéis la ventaja de la escala de 12?
¿Para qué sirve ajustarse a un número?
Trabajar ajustando tu sistema de diseño a una regla numérica tiene dos grandes ventajas: la armonía visual y la previsibilidad.
Para explicar bien esto es mejor que hablemos de principios de diseño de sistemas. Es un tema del que hemos hablado en varios eventos privados, hemos estudiado en casos ejemplos históricos no digitales McLean, Gira, Vitsoe, Braun, Billy… Y hemos aplicado en multitud de proyectos. De ese trabajo de años hemos sacado una lista de ’10 principios para diseño de sistemas’ que publicaremos en otra ocasión, pero de donde podemos extraer tres que nos ayuden a ilustrar esta idea del 12 como número guía.
Un buen sistema de diseño se basa en una unidad cierta
Todos los sistemas de diseño deben basarse en un tamaño básico y construir sobre él. Ese tamaño, esa unidad mínima debe apoyarse en una certeza, siempre que se pueda.
Un ejemplo: el sistema de diseño de las estanterías Billy de Ikea se construye a partir de los 12x12 centímetros. ¿Por qué ese tamaño y no otro? Porque está pensado para albergar muchas cosas distintas pero de entre todas la más pequeña, que se va a apilar y acumular en la estantería y que necesitará que la estantería la abrace bien, es (o era) la caja de CDs. Ikea diseñó un sistema para que, entre otros usos, el básico fuera tener tu colección de CDs a mano, de manera armónica y ordenadita. Doce de alto, doce de profundo. Y múltiplos de 12 para todas las cajas que también vende Ikea y que encajan perfectamente en las estanterías Billy.
En el caso del sistema McLean, la unidad mínima es el container, que mide el alto y ancho adecuado a un camión y un vagón de tren. Y el ancho del camión a su vez está determinado por el ancho del carril. Ese tamaño luego crece hacia arriba y se descompone hacia abajo en divisores (pallets de carga). Si tenéis ocasión, estudiadlo porque de ahí se puede aprender muchísimo para sistemas digitales.
En el caso de una app como Fever, la unidad de referencia es más difícil de determinar: ¿La foto? Va a sangre, por lo que se adecuará a la resolución de la pantalla. ¿Los iconos? Son de un tamaño algo grande y necesitaremos divisores.
En sistemas digitales como ese, nuestra certeza es la yema del dedo: son interfaces táctiles y todo lo ‘tocable’ debería medir lo que una yema de dedo para ser fácilmente alcanzado (pura Ley de Fitts). Hemos usado 96px como número de referencia para eso, que a su vez, en un botón, nos da 8 casillas para encajar texto, iconos, etc. De ahí nuestro número 12.
Un buen sistema de diseño es geométrico y recursivo
El ojo humano encuentra paz cuando las cosas encajan y ocupan su lugar. Ordenamos la mesa antes de ponernos a estudiar, colocamos las cosas equidistantes, paralelas a los bordes de otras, hacemos que todo encaje en cuadrados, rectángulos, círculos… Tenemos una predisposición innata a la geometría, las simetrías y los ritmos proporcionales. Lo hacemos en arquitectura, en diseño, en cómo ordenamos la casa, el campo y hasta la comida. Es inherente a nuestra condición humana.
Podríamos hablar durante días de todo esto. Es un tema que se lleva horas en nuestras clases, pero vamos a dejarlo en que la percepción de solidez, de lógica y de buen funcionamiento está muy vinculada a estos aspectos. Un buen sistema necesita aplicarlos no sólo por la percepción, sino también porque son optimizadores: las cosas encajan mejor en cajas (de ahí el nombre, ‘encajar’), se aprovechan mejor los espacios (positivos y negativos), se acomoda la vista del usuario y logramos que la posición de las cosas y su uso sea natural y predecible. Por todo eso un sistema de diseño debe tener un patrón geométrico y recursiva fuerte.
Un buen sistema de diseño es predecible
En Tramontana decimos que el sistema de diseño es el lugar donde diseñador y desarrollador se encuentran, donde se abrazan fuerte. Si el diseñador trabaja ajustándose a escalas numéricas, el desarrollador necesita cada vez menos información. Puede anticipar los tamaños de las cosas, los tonos de color, etc.
A medida que el sistema crece, es más sencillo prever cómo serán las cosas porque las geometrías, las escalas y algunas otras normas (que explicaremos otro día) ayudan a anticipar, tanto al equipo que construye como al usuario que consume. Y eso, la anticipación (affordance, diseño intuitivo, etc.) es parte de una buena UX.
Un buen sistema de diseño se vuelve más predecible a medida que crece, facilitando enormemente la tarea a diseñadores, desarrolladores y usuarios.
Los buenos sistemas de diseño se basan en más principios. No son UI Kits ni atomic design. Eso es sólo una pequeña parte de todo lo que importa. Esperamos, sin embargo, que esta mini-introducción te ayude a encaminar mejor tu trabajo seas diseñador, product manager o director de una empresa donde el diseño importa.
No dudes en contactarnos si podemos serte de ayuda para definir el sistema de diseño de tu empresa. Y si el post te ha gustado, por favor, compártelo en redes para que pueda servir a más gente.
