Revisar i validar el disseny abans de lliurar-lo: proves d'estrès i persones usuàries

Fins ara has après a prendre bones decisions de disseny. Aquesta lliçó tracta d'una cosa diferent: comprovar que aquestes decisions resisteixen abans de lliurar-les. Un disseny es pot veure impecable a 1440 píxels, amb textos curts i sense errors, i ensorrar-se amb zoom, amb un nom llarg o sense color. La majoria d'aquestes proves es fan a Figma o en un prototip en pocs minuts, i detecten els problemes quan corregir-los només costa moure unes capes. A la lliçó següent veuràs com deixar per escrit el resultat a les anotacions per a desenvolupament.

Què es pot comprovar en el disseny i què no

Revisar en el disseny no substitueix l'auditoria del producte construït (que s'estudia al nivell 4), però filtra una gran part de les barreres. Convé saber on són els límits:

Es pot comprovar en el disseny	Necessita el producte construït o un prototip en codi
Contrast del text i dels components; informació que depèn només del color	El que anuncia realment el lector de pantalla
Mida i separació dels objectius	Que tot funcioni amb el teclat i sense trampes de focus
Adaptació a 320 px i amb text ampliat	El comportament real del zoom del navegador
Ordre de lectura i de focus previst	L'ordre del codi i on va el focus en obrir i tancar
Existència de tots els estats, etiquetes visibles, noms decidits	Missatges d'estat anunciats i temps reals
Coherència de menús, noms i icones entre pantalles	Compatibilitat amb les tecnologies de suport concretes

Sis proves d'estrès per a qualsevol pantalla

1. La prova dels 320 píxels

Duplica cada pantalla clau en un marc de 320 px d'amplada. És el que veurà en un ordinador de 1280 px qui aplica un zoom del 400 %, l'escenari d'1.4.10 Reajustament dels elements. Comprova que no hi ha desplaçament horitzontal (tret de taules, mapes o similars), que hi ha totes les funcions de la versió d'escriptori i que la suma de capçalera fixa, bàner de galetes i botó de xat no ocupa mitja pantalla, perquè llavors també taparia el focus (2.4.11).

2. La prova del text que creix

Com vas veure al curs N2-C3, la persona pot ampliar el text al 200 % (1.4.4) o augmentar l'espaiat (1.4.12: interlineat d'1,5 vegades la mida de lletra, espai després del paràgraf de 2 vegades, entre lletres de 0,12 i entre paraules de 0,16). Simula-ho: augmenta els estils de text d'un marc duplicat i fes servir contingut real i llarg. Noms com «María de los Ángeles Fernández-Villaverde», tràmits com «Sol·licitud d'ajuts per a la rehabilitació energètica d'edificis residencials» i les traduccions a l'anglès, al castellà, al basc o al gallec, que poden ocupar més que el text original. Si fas servir auto layout (el sistema de Figma que ajusta els contenidors al contingut) i evites les alçades fixes, el disseny creixerà en lloc de retallar text.

3. La prova sense color

Passa el disseny a escala de grisos: a Figma amb un connector de simulació de visió o, a l'ordinador, amb els filtres de color del sistema (a Windows, Configuració, Accessibilitat, Filtres de color). Es distingeixen els enllaços del text, la pestanya seleccionada, els camps amb error, les sèries d'un gràfic i els estats d'un interruptor? Repassa també les instruccions: «prem el botó verd de la dreta» depèn del color i de la posició, i 1.3.3 Característiques sensorials demana no basar la comprensió només en aquestes característiques.

4. El recorregut de teclat sobre paper

Numera, en l'ordre en què haurien de rebre el focus, tots els elements interactius de la pantalla. Comença per l'enllaç de salt. Pregunta't a cada número: es veu l'estat de focus dissenyat?, queda tapat per alguna cosa fixa?, què passa en prémer-lo i on va el focus després? Si la seqüència salta d'un costat a l'altre de la pantalla, el problema és la composició, no la numeració.

5. La lectura lineal

Llegeix la pantalla de dalt a baix com ho faria un lector de pantalla: només text, en ordre, sense veure la composició. Fes després una segona lectura només amb els encapçalaments. S'entén què és cada bloc? Hi ha botons d'icona sense nom decidit, imatges sense decidir si són decoratives o informatives, enllaços «Mostra'n més» repetits?

6. La prova dels estats oblidats

Per a cada pantalla, dibuixa o almenys enumera: buit (sense resultats, carretó buit), carregant, error d'enviament, èxit, llista molt llarga, sessió a punt de caducar i sense connexió. Són les pantalles que més s'obliden i les que més barreres acumulen, perquè s'improvisen durant el desenvolupament.

Infografia · Procés

Sis proves d'estrès abans de lliurar un disseny

Es fan a Figma o en un prototip, pantalla per pantalla, en menys d'una hora

1. 1Pas 1: 320 píxelsSense desplaçament horitzontal, amb totes les funcions i sense elements fixos que tapin
2. 2Pas 2: Text que creixText al 200 %, espaiat d'1.4.12 i contingut real llarg o traduït
3. 3Pas 3: Sense colorEn escala de grisos, enllaços, estats, errors i gràfics continuen sent clars
4. 4Pas 4: Recorregut de teclatNumera l'ordre de focus: cada element amb focus visible i sense tapar
5. 5Pas 5: Lectura linealLlegeix només el text en ordre i després només els encapçalaments
6. 6Pas 6: Estats oblidatsBuit, carregant, error, èxit, sessió que caduca i sense connexió

Llegeix la infografia com a text

Procés de sis passos per revisar cada pantalla clau abans de lliurar-la a desenvolupament. Pas 1, 320 píxels: duplicar el marc a 320 px i comprovar que no hi ha desplaçament horitzontal, que hi ha totes les funcions i que res de fix no tapa el contingut. Pas 2, text que creix: text al 200 %, espaiat d'1.4.12 i contingut real llarg o traduït. Pas 3, sense color: en escala de grisos, enllaços, estats, errors i gràfics continuen sent clars. Pas 4, recorregut de teclat: numerar l'ordre de focus i comprovar que cada element té focus visible i no queda tapat. Pas 5, lectura lineal: llegir només el text en ordre i després només els encapçalaments. Pas 6, estats oblidats: buit, carregant, error, èxit, sessió que caduca i sense connexió.

Eines: útils, però no decideixen per tu

Els connectors de Figma que veuràs a la lliçó següent (comprovadors de contrast, simuladors de visió, marcadors d'ordre de focus) automatitzen les comprovacions mecàniques. Fes-los servir, però recorda el que no poden saber: si el text alternatiu té sentit, si un encapçalament descriu el seu bloc, si l'ordre té lògica o si un missatge d'error ajuda. Un informe sense avisos del connector vol dir que no hi ha errades de contrast detectables, no que el disseny sigui accessible.

Provar amb persones, també en el disseny

Les proves d'estrès detecten problemes, però no substitueixen veure persones amb discapacitat fent servir la interfície. Tingues en compte:

• Els prototips de Figma no són fiables amb lector de pantalla: no generen la semàntica real del producte. Per provar amb persones cegues o que fan servir el teclat, cal un prototip en HTML o una versió primerenca del producte. Amb baixa visió, discapacitat cognitiva o persones grans sí que es pot provar un prototip navegable, ampliat si cal.
• Les simulacions no són experiència: tapar-se els ulls o fer servir unes ulleres que emboiren serveix per sensibilitzar, no per validar un disseny, perquè no reprodueix la perícia de qui fa servir cada dia la seva tecnologia de suport.
• Contacta-hi a través d'associacions de persones amb discapacitat i compensa'n el temps. Cinc sessions ben preparades amb tasques reals («demana cita per renovar el DNI de la teva filla») revelen més que un mes de debat intern. El curs N7-C4 tracta a fons la recerca amb persones usuàries; la guia del W3C sobre implicar les persones usuàries en l'avaluació és un bon punt de partida.

Convertir-ho en rutina

• Inclou l'accessibilitat a la revisió de disseny de cada pantalla, no en una revisió a part al final.
• Defineix quan un disseny està acabat: contrast validat, estats dibuixats, focus i objectius comprovats, les sis proves superades i anotacions fetes.
• Revisa la implementació: quan desenvolupament lliura, compara el resultat amb el disseny i les seves anotacions, amb el teclat i amb zoom, igual que revises marges i colors. Els consells del W3C per dissenyar amb accessibilitat serveixen de guió ràpid.

Resum

• En el disseny es pot comprovar el contrast, el color, els objectius, el reflow, l'ordre previst, els estats i la coherència; el comportament real amb les tecnologies de suport necessita codi.
• Sis proves d'estrès: 320 px, text que creix amb contingut real, sense color, recorregut de teclat, lectura lineal i estats oblidats.
• Els connectors automatitzen el que és mecànic; un informe sense avisos no vol dir disseny accessible.
• Prova amb persones amb discapacitat: prototip en HTML per al lector de pantalla i el teclat, contacte a través d'associacions i tasques reals.
• Fes de la revisió una rutina: definició d'acabat i revisió de la implementació.