Dissenyar una web que funcioni: estructura, jerarquia i ritme

Desprès d’anys dins del món del disseny encara em trobo fent-me la mateixa pregunta: què és exactament el que fa que una pàgina web tingui un disseny funcional?

No és que un web sigui visualment potent o no. He vist webs impecables que no serveixen gaire i webs discretes que resolen la feina de la gent cada dia sense que ningú se n’adoni. Per a mi la diferència no està en l’acabat visual. Està en si la pàgina entén per què hi ha algú al davant. Això és, al final, del que parlem quan parlem d’usabilitat web: no d’una capa que s’aplica al final, sinó de si una persona pot fer el que ha vingut a fer.

Jo no treballo una web com un lloc on col·locar informació. La treballo com un recorregut de decisions. I hi ha tres coses que determinen si aquest recorregut es pot fer o no: que la pàgina permeti alguna cosa, que s’entengui sense esforç i que es llegeixi amb un cert ritme. Funcional, intuïtiva i amb ritme.

Abans, però, hi ha una decisió que les condiciona totes tres i que sovint es pren massa de pressa: l’estructura.

Abans del disseny

Quin objectiu té el client? Quantes pàgines fan falta? Quina depèn de quina i què ha de poder trobar algú que arriba sense saber res? Quines seccions ha de tenir i quin ordre hauriem d’establir? Són alguns exemples de preguntes que ens fem desprès d’investigar i de tenir context de la marca.

Aquesta part no la faig sola, i val la pena dir-ho perquè crec que és una de les raons que fan que després funcioni. El mapa el treballem en equip: hi entra qui porta l’estratègia, qui porta el SEO i GEO, qui escriurà els continguts i qui ho haurà de desenvolupar. Aquesta coordinació continua durant tot el projecte, especialment en la relació entre disseny i desenvolupament.

Jo hi aporto la mirada de disseny, que normalment es concreta en una sola pregunta:

Això que sobre el paper sembla ordenat, s’entendrà dins d’una pantalla?

El mapa web no és un tràmit previ. És el que decideix si més endavant es podrà dissenyar bé. Una estructura on tot penja del mateix nivell obliga cada pàgina a explicar-se sola, perquè no hi ha context que l’acompanyi. I una estructura amb massa nivells obliga a navegar molt per arribar enlloc.

Que una empresa tingui tres divisions no vol dir que qui busca un producte pensi en tres divisions: potser pensa en el problema que vol resoldre, o en el sector on treballa, o en el material. L’estructura d’una pàgina web, i la del lloc sencer, haurien de sortir d’aquí.

De la mateixa decisió depèn després la navegació web: els menús, els recorreguts i el fet que en tot moment se sàpiga on s’és. Un menú no és una llista de seccions, és la promesa visible de com està ordenat tot el que hi ha a sota. Quan aquesta promesa no coincideix amb l’estructura real, la persona es perd encara que el disseny sigui impecable.

Cada pàgina hauria de poder respondre una pregunta concreta que algú es fa de debò. Si no hi ha pregunta, probablement aquella pàgina és una secció d’una altra. I també hem de tenir en compte que des de qualsevol punt s’hauria de poder arribar al que es busca en pocs passos i sabent en tot moment on s’és.

Funcional: cada pàgina hauria de saber què permet

La majoria de webs no existeixen perquè algú les contempli. Hi arribem amb alguna intenció: comparar dos productes, entendre si una empresa fa el que necessitem, trobar un telèfon, comprovar una mida. Quan una pàgina no sap quina acció habilita, acaba acumulant contingut per criteri intern —el de qui ha insistit més— en comptes de per criteri d’ús.

Per això la primera pregunta que em faig davant de qualsevol pantalla no és què hi ha de sortir, sinó què ha de poder fer aquí una persona. I immediatament després: quantes coses li estem demanant alhora.

Aquesta segona pregunta és la que més sovint es passa per alt. Decidir consumeix atenció, i l’atenció no és il·limitada. Quan una pàgina presenta sis crides amb el mateix pes, no en guanya cap: guanya el dubte.

Per a mi, reduir opcions no és amagar informació. És ordenar-la en el temps.

Un criteri que aplico sempre: hauria de poder dir quina és l’acció principal d’una pàgina, quina és la secundària i què faig amb la resta. Si la resposta és que tot és igual d’important, encara no tinc una pàgina: tinc una llista de continguts.

Intuïtiva: entendre sense haver de pensar

Quan observo com es fa servir una web, el que veig és que, abans de llegir-la, la gent l’escaneja. És un comportament àmpliament estudiat en usabilitat web: Nielsen Norman Group fa anys que documenta que els usuaris tendeixen a escanejar el contingut abans de llegir-lo amb deteniment. En pocs segons decideixen si han arribat al lloc correcte, sovint abans d’haver llegit cap frase sencera.

La mida, el contrast, la posició i l’espai comuniquen importància per si sols. Per això tracto la jerarquia visual com una qüestió de comunicació, no d’estètica. Quan el que destaca visualment coincideix amb el que la persona necessita primer, la pàgina s’entén sola. Quan no coincideix, el lector ha de fer una feina extra per esbrinar què és important, i aquesta feina la paga amb atenció que ja no dedicarà al contingut.

Hi ha una versió molt habitual d’aquest desajust: destacar el que volem destacar nosaltres en comptes del que resol el dubte de qui està mirant. És una jerarquia decorativa. Funciona en una presentació i deixa de funcionar el dia que algú intenta fer servir la pàgina de debò.

Després hi ha els patrons. On s’espera trobar la navegació, què sembla clicable, com es comporta un enllaç, què vol dir una icona. Un disseny web intuïtiu no és el que inventa formes noves d’interactuar: és el que fa servir les que la persona ja coneix perquè pugui dedicar l’atenció al contingut i no a la interfície. Es pot innovar en la interacció —de vegades val molt la pena— però té un cost real en experiència d’usuari i hauria de venir acompanyat d’un benefici concret.

El filtre que faig servir és senzill. En arribar a qualsevol pantalla, la persona hauria de saber tres coses sense preguntar-les:

• On és.
• Què hi pot fer.
• Què passarà si ho fa.

Ritme visual: la part que no es nota fins que falta

Aquesta és la part de la qual es parla menys i la que més em ve del meu costat gràfic.

Llegir una pàgina és una experiència que passa en el temps, com escoltar alguna cosa. I hi ha una regla que val per a totes dues: si tot sona igual de fort, deixes de distingir. Una pàgina on cada secció té la mateixa densitat, la mateixa alçada i el mateix pes visual es llegeix com un llistat. No hi ha res mal fet i, tot i així, s’abandona a mitja lectura.

Quan parlo de ritme visual em refereixo a l’alternança entre blocs que concentren informació i blocs que respiren. L’espai en blanc no és espai que sobra: és el que fa llegible el que té al costat. Ve del disseny editorial i a la pantalla funciona exactament igual. Un bloc dens precedit d’aire s’assimila; el mateix bloc enganxat a un altre de dens es salta.

Hi ha també una cadència pròpia del scroll. Una pàgina no es veu d’un cop, es va descobrint, i per a mi cada secció hauria de donar una raó per continuar baixant. Quan tres seccions seguides fan la mateixa promesa amb decoració diferent, la persona ho nota encara que no ho sàpiga verbalitzar, i marxa.

I després hi ha el punt d’inflexió: el moment en què la pàgina deixa d’explicar i comença a demanar. La seva posició no és arbitrària. Depèn de si ja hem donat prou perquè demanar tingui sentit.

Segons el que he anat veient, demanar massa aviat és un dels motius més freqüents pels quals un formulari ben dissenyat no s’omple. El formulari està bé. El lloc on el vam posar, no.

Totes aquestes decisions continuen sent les mateixes encara que les eines canviïn. La IA m’ajuda cada vegada més a explorar, provar i produir alternatives dins del procés de disseny, però això no modifica el criteri amb què les valoro. És una idea que ja vaig desenvolupar quan parlava de com integrar la IA en el disseny UX/UI sense perdre criteri ni visió d’usuari.

Intel·ligència artificial i disseny web: què està canviant

No podia escriure sobre com dissenyo una web sense parlar de la IA, perquè està canviant una part important de la feina. No tant els principis amb què decideixo si una pàgina funciona, sinó la velocitat amb què puc produir possibles respostes.

Ara és molt fàcil generar una estructura, diverses versions d’una mateixa pantalla, alternatives de jerarquia o una primera proposta de continguts. Jo ho aprofito. El problema apareix quan aquesta facilitat per produir es confon amb haver explorat millor el problema.

Deu propostes generades en un minut poden tenir colors, composicions i recursos diferents i, al mateix temps, estar prenent exactament les mateixes decisions. Explorar no és acumular alternatives. És entendre quines decisions podem prendre de manera diferent i per què ens convindria fer-ho.

Això es nota especialment en l’estructura. Puc demanar a una IA que proposi un mapa web i obtenir una resposta ordenada en segons. Però, si no coneix prou bé el projecte, els usuaris i la informació real, omplirà els buits amb patrons plausibles. Les mateixes eines de disseny amb IA estan evolucionant precisament cap a treballar amb més context real —components, sistemes i regles— per evitar resultats massa genèrics.

Passa el mateix amb la funció d’una pàgina. La IA pot proposar seccions, botons, arguments i recorreguts, però això no significa que sàpiga quina decisió hauria de tenir més pes. Pot donar-me cinc CTA raonables; la feina de decidir quin és principal, quin ha d’esperar i quin no hauria d’existir continua depenent d’entendre què necessita la persona en aquell moment.

També pot reproduir patrons d’interacció coneguts i construir una jerarquia visual aparentment clara. Però una interfície no és intuïtiva perquè segueixi una convenció o perquè el resultat sembli familiar. Ho és quan aquesta convenció encaixa amb el context, el contingut i les expectatives concretes de qui l’ha d’utilitzar.

I amb el ritme passa una cosa semblant. Generar composicions atractives és cada vegada més fàcil, però això no garanteix que una pàgina tingui una cadència que ajudi a entendre-la. Una successió de seccions visualment impecables pot continuar sent monòtona si totes fan la mateixa funció, tenen el mateix pes o demanen exactament el mateix.

Per això intento utilitzar la IA per obrir possibilitats, no per donar per resoltes les decisions. Em serveix per provar, comparar, enriquir, qüestionar una primera idea o arribar abans a una representació que pugui revisar. Però el que em continua interessant és el mateix que abans: si l’estructura respon a una manera real de buscar, si cada pàgina sap què permet, si la jerarquia ajuda a entendre i si el ritme acompanya el recorregut.

La IA també està canviant què passa abans que una persona arribi a una web: com busca, compara i descobreix empreses. Aquesta altra part del problema la treballem des de la visibilitat en respostes d’IA i el GEO. Aquí, però, m’interessa el que passa un cop entrem en el terreny del disseny: com decidim millor quan generar opcions és cada vegada més fàcil.

La usabilitat web no és una capa que s’afegeix al final

Per separat, cadascuna d’aquestes coses es queda curta.

Una pàgina amb bon ritme però sense una funció clara és agradable i no serveix per a res. Una pàgina funcional sense ritme s’abandona abans d’arribar al punt on hauria de passar alguna cosa. I una pàgina molt intuïtiva pot conduir amb una claredat exemplar cap a enlloc. Totes tres, a més, depenen d’un mapa que tingui sentit.

Per això no les tracto com a fases, i per això no entenc la usabilitat web com una revisió que es fa al final, quan ja està tot dissenyat. La usabilitat és el resultat de decisions que s’han pres molt abans: on va cada pàgina, què permet fer, què destaca i com es llegeix. Quan es revisa al final, el que es pot arreglar són detalls; el que està mal decidit d’origen ja no es toca.

Quan reviso un disseny em faig les tres preguntes sobre la mateixa decisió: què permet fer, com s’entén i com es llegeix. Si una decisió millora una de les tres i empitjora les altres dues, normalment no és una bona decisió.

El que he anat entenent

El disseny que funciona gairebé mai crida l’atenció sobre si mateix. Això, al principi, em costava d’acceptar: hi dediques hores i el millor resultat possible és que ningú en digui res.

Amb el temps he anat canviant el que considero un bon senyal. Ja no és que una pàgina sembli impressionant en una pantalla gran. És que algú la faci servir sense adonar-se que hi ha hagut cap decisió pel mig, arribi on volia arribar i no recordi el camí.

Quan això passa, normalment és perquè les quatre coses estaven al seu lloc: el mapa, la funció, l’ordre i el ritme.