Disseny gràfic

Interfície, marca i accessibilitat: com decideixo el que es veu.

El mètode de l'altra banda de la pantalla: per a qui s'està dissenyant, quines regles es comproven i per què el sistema de marca acaba al codi i no en un PDF.

UX disseny centrat en les persones, heurístiques
UI retícula i tipografia, tokens
Accessibilitat WCAG 2.2 nivell AA, contrast

El sistema viu al codi

Un manual de marca és un document que algú ha de recordar respectar. Un sistema de disseny és el lloc d'on surt el color de debò.

Aquesta web serveix d'exemple i es pot comprovar mirant-la. El taronja de la casa està mesurat sobre una fotografia pròpia, i viu en tres variants perquè el taronja viu no arriba al contrast mínim per a text: a sobre seu el text va en tinta, i el text taronja sobre blanc fa servir sempre la variant fosca. Això no és una recomanació escrita en una pàgina: són tres variables, i qualsevol peça que no les faci servir es nota.

El mateix amb la retícula i amb la lletra. Una sola família tipogràfica, el contrast el donen els pesos i la versaleta espaiada, i dues columnes sempre iguals: rètol a l'esquerra, text a la dreta. Quan les regles són tan poques, es poden complir; quan són un document de quaranta pàgines, s'incompleixen el primer dimarts.

I hi ha decisions que són negatives: ni cantonades arrodonides, ni ombres difuses, ni targetes. El que separa dos blocs és un filet d'un píxel o l'aire que hi ha entremig. Decidir què no hi va és la meitat del sistema.

Accessible no és una capa que s'afegeix al final

Gairebé tot el que fa una web accessible es decideix quan encara no hi ha res dibuixat.

El contrast es decideix en triar la paleta; l'ordre de lectura, en muntar la retícula; la mida del que es prem, en dibuixar el botó. Si això es deixa per al final, no hi ha accessibilitat: hi ha pedaços. La norma internacional de referència, les WCAG, està escrita justament com a criteris comprovables, i això permet tractar l'accessibilitat com qualsevol altre requisit: es compleix o no es compleix, i es pot verificar.

Aquí el nivell de treball és AA. A la pràctica vol dir text amb contrast suficient sobre el seu fons, focus visible en recórrer amb el teclat, objectius de premuda amb mida mínima, res que depengui només del color per entendre's i moviment que s'apaga quan el sistema diu que es redueixi. Aquesta web respecta aquesta última preferència als ecos de la portada, que es queden quiets si el navegador ho demana.

I hi ha una part legal que val més no descobrir tard: l'accessibilitat dels productes i serveis digitals està regulada a la Unió Europea, i al sector públic espanyol hi ha un reial decret que l'exigeix des del 2018.

Glossari d'interfície i marca.

Els termes de l'ofici, amb un cas on s'apliquen i el text públic que els defineix.

UX · Experiència d'ús Tot el que percep algú en fer servir un producte: si entén on és, si aconsegueix el que venia a fer i què se'n endú de record. Comença abans de la primera pantalla i continua després de tancar-la. Exemple: Un formulari de contacte té bona experiència si diu què passarà després d'enviar-lo, no si té l'ombra bonica. Font: The Definition of User Experience, Nielsen Norman Group
UI · Interfície La part visible i manejable: retícula, tipografia, color, estats i controls. És on es materialitzen les decisions d'experiència, i on es noten quan no s'han pres. Exemple: Dues columnes sempre iguals, una sola família tipogràfica i el pes com a jerarquia: la pàgina nova es munta amb les peces que ja existeixen en lloc d'inventar-se un bloc seu. Font: Human Interface Guidelines, Apple
Disseny centrat en les persones · ISO 9241-210 Un mètode normalitzat en quatre activitats que es repeteixen: entendre el context d'ús, especificar els requisits de les persones, produir solucions i avaluar-les amb usuaris reals. Exemple: Abans de dibuixar el portal d'un empleat cal saber si l'obrirà al mòbil amb guants posats o assegut a una oficina. La resposta canvia la mida de tot. Font: ISO 9241-210:2019
Heurístiques d'usabilitat · Les deu de Nielsen Deu regles generals —visibilitat de l'estat, control de l'usuari, consistència, prevenció d'errors…— que serveixen per revisar una interfície sense muntar cap laboratori. Exemple: És la llista amb què reviso una marca o una pantalla que ja existeix: en una tarda es veu què se salva, què s'ajusta i què toca refer. Font: 10 Usability Heuristics for User Interface Design, Nielsen Norman Group
WCAG 2.2 · Accessibilitat web La norma del W3C amb els criteris d'accessibilitat del contingut web, organitzats en tres nivells: A, AA i AAA. Està escrita com a criteris comprovables, així que es pot verificar en lloc d'opinar. Exemple: El nivell de treball aquí és AA: contrast, focus visible en tabular, mida mínima del que es prem i res que s'entengui només pel color. Font: Web Content Accessibility Guidelines 2.2 (W3C)
Contrast La relació de luminància entre un text i el seu fons. Les WCAG demanen 4,5:1 per a text normal i 3:1 per a text gran i per als límits dels controls, en nivell AA. Exemple: El taronja de marca no val per a text sobre blanc perquè no arriba a 3:1; per això existeix una variant fosca que sí que compleix. La paleta sencera està comprovada, i si es toca un color cal tornar a mesurar. Font: WCAG 2.2 · criteris de contrast (Quick Reference, W3C)
ARIA · WAI-ARIA 1.2 El vocabulari que dona paper, estat i propietats a un component quan l'HTML no hi arriba. La seva primera regla és no fer-lo servir: si existeix l'element natiu, l'element natiu guanya. Exemple: El visor de fotografies de la galeria és un diàleg natiu del navegador, no un muntatge amb capes: el que el sistema ja sap fer no es reimplementa. Font: Accessible Rich Internet Applications 1.2 (W3C)
Tokens de disseny Les decisions visuals guardades com a valors amb nom —color, mida, espai, tipografia— perquè una sola font alimenti la web, l'aplicació i el material imprès. El nom diu el paper, no el color. Exemple: La variable es diu «accent», no «taronja». Si algun dia la marca canvia de color, el que cal canviar és un valor i no una convenció mental repartida per quaranta fitxers. Font: Design Tokens Format Module (W3C Community Group)
Sistema de disseny El conjunt de tokens, components i regles d'ús que fa que dues peces fetes per gent diferent semblin de la mateixa casa. No és una carpeta de plantilles: és el que es fa servir per construir. Exemple: La guia d'aquesta web es genera des dels tokens i les peces reals, així que no es pot desincronitzar del CSS: si canvia el codi, la guia canvia amb ell. Font: Material Design · Foundations (Google)
Rendiment percebut · Core Web Vitals Les mètriques que mesuren com se sent una pàgina en carregar-la i fer-la servir: quan apareix el contingut principal, quant tarda a respondre i quant salta la maqueta mentre carrega. Exemple: Les mides de cada fotografia van escrites al marcatge perquè el mosaic no salti en carregar. És una decisió de disseny, tot i que sembli de programació. Font: Web Vitals (web.dev, Google)
Marca registrada El dret exclusiu sobre un signe distintiu per a uns productes o serveis, que neix del registre davant l'oficina corresponent: la nacional a Espanya o la de la Unió Europea per a tot el mercat interior. Exemple: Val més comprovar que el nom està lliure abans de dibuixar el logotip, no després d'imprimir les targetes. El registre el tramita un agent o el titular mateix; el disseny no el substitueix. Font: Llei 17/2001, de Marques (BOE)

Preguntes.

UI i UX són el mateix?

No. L'experiència és si la persona aconsegueix el que venia a fer; la interfície és amb què ho fa. Es pot tenir una interfície preciosa que resol malament el problema, i això continua sent mal disseny.

L'accessibilitat limita el disseny?

Limita les decisions dolentes. El contrast mínim descarta les combinacions que molta gent no arriba a llegir, el focus visible obliga a dibuixar un estat que existia igualment, i la mida mínima del que es prem arregla el mòbil de tothom. La restricció ordena; no treu.

Cal un manual de marca?

Cal que les regles siguin on es construeix. Un document serveix per explicar-les a qui arriba, però si el color només viu al PDF, a la tercera peça ja hi ha tres taronges diferents. Les regles van en variables, i el document les explica.

Com comproves el contrast?

Mesurant cada parella de color contra el llindar que demana la norma abans de donar-la per bona, i repetint la mesura cada vegada que es toca un valor de la paleta. És una comprovació, no una impressió.

Dissenyes també les pantalles del que programes?

Sí, i és l'avantatge que sigui la mateixa persona: la pantalla es pensa sabent què costa programar cada decisió, i el sistema visual acaba dins el producte en lloc de quedar-se a la portada.

Fonts.

Normes, guies i textos legals en què es recolza el de dalt, amb el seu organisme i la seva data.

On continuar.

Parlem?

Mirem les teves pantalles?

Ensenya'm el que tens i et dic què se salva, què s'ajusta i què toca refer.

Escriu-me