La regla del 12
Hoy hemos contado nuestra participació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.
Página del manual del sistema de Fever App donde se explica la Regla del 12
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.
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 establece que todos los valores numéricos de la interfaz deben ser de 12 o múltiplos de esta cantidad: 24, 36, 48, 60...
¿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.