El patró F és el més utilitzat en blogs, articles i pàgines amb gran quantitat de contingut textual. Per què? Perquè el nostre ull, de manera natural, segueix aquest recorregut:
Així dibuixa la famosa forma de “F”. Aquest comportament reflecteix el nostre costum digital: primer escanegem i, si alguna cosa ens enganxa, ens hi quedem. Exemples del patró F en acció:
1. Medium
Medium aplica el patró F perquè està pensat per a una lectura prolongada. A la portada, primer escaneges el títol i la descripció dels articles principals, acompanyats d’imatges alineades a l’esquerra. Després, la mirada baixa per la columna, recorrent altres titulars i resums. Aquest esquema facilita l’exploració de temes, millora l’experiència de lectura i augmenta el temps de permanència, una mètrica clau per al seu èxit.
2. Wikipedia
A la Viquipèdia, el patró F és evident: text principal a la part superior, imatges alineades a la dre ta que complementen la informació i paràgrafs addicionals a sota. Aquesta disposició guia la mi rada d’una manera ordenada, manté la jerarquia visual i aporta claredat en continguts extensos.
3. El País
A El País, la mirada segueix el patró F de forma molt clara. Primer fixes la vista en la imatge prin cipal, després en el titular destacat i, a continuació, baixes per la columna esquerra, on s’agrupen altres titulars. Alguns d’aquests titulars apareixen amb més jerarquia visual per captar l’atenció i guiar-te cap a les notícies prioritàries. Aquest disseny et permet escanejar ràpidament un entorn ple d’informació, mentre el mitjà ressalta el que considera més rellevant.
El patró Z segueix una trajectòria en forma de “Z”:
S’utilitza en pàgines amb poc text i un objectiu clar, com registrar-se, comprar o descarregar. Per això és comú en landing pages, homepages minimalistes i campanyes orientades a la conversió.
Vegem com es fa servir el patró Z:
1. Trello
El recorregut comença al logo, segueix cap als botons “Inicia sessió” i “Obtenir Trello Gratis”, baixa cap al missatge central amb un títol clar i un CTA destacat, i acaba en informació secun dària.
L’objectiu no és llegir gaire, sinó entendre la proposta i registrar-te en segons.
2. Holded
Holded aplica el patró en “Z” de manera evident. El recorregut visual comença amb una imatge que et capta l’atenció, continua amb un titular acompanyat d’una breu explicació i un CTA, i baixa en diagonal cap a un segon bloc amb un altre titular, la seva descripció i un nou CTA, per acabar amb una imatge. Aquest esquema els permet mostrar com funciona el seu servei de manera simple, visual i sense sobrecarregar-te.
3. Dropbox
Dropbox organitza la seva pàgina seguint la mateixa lògica: a la part superior col·loca el logotip i a la part dreta destaca el botó “Començar”, just a sota hi trobem un titular amb un missatge breu acompanyat del seu CTA, i a la dreta una imatge que reforça la proposta. El resultat és un recorregut visual senzill i ordenat que elimina distraccions i centra l’atenció en la conversió.
Tant el patró F com el Z són mapes invisibles que seguim sense adonar-nos-en. I aquí hi ha la clau: si entens com mires una pàgina, pots guiar el teu recorregut.
Comprendre aquests patrons no és només teoria de disseny: és una manera pràctica de posar-te a la pell de l’usuari, anticipar la seva mirada i donar-li just el que ha vingut a buscar. Amb aquestes idees al cap, atreveix-te a experimentar i observa com responen els teus usuaris.
I si prefereixes recórrer aquest camí acompanyat, estem preparats per construir-lo amb tu.
