layout, F-shape si eyetracking

In peste 90% din cazuri, vizitatorul scaneaza continutul unei pagini web in cateva secunde. Ochii se plimba dupa un tipar ciudat, sortand aparent haotic informatia afisata, indiferent de natura acesteia. Apoi da click!

Pe timpul scolii, fara sa vrei, un mic proces ti s-a intiparit in minte – ordinea in care preiei vizual informatia de pe un mediu – fie el carte, ziar, pc, tv …etc. Cu timpul, gratie educatiei si autosugestiei, ai cultivat acest proces transformandu-l intr-unul propriu … dar foarte putin personalizat.
Dealtfel, nu este greu sa realizezi ca paginarea unei carti, layout-ul unui ziar, transmisia unui meci sau aspectul unei pagini web exploateaza procesul in cauza.

In termeni de navigatie web si in special de online shopping, lucrurile sunt putin diferite, traiectoria pe care o descriu ochii in scanarea unei pagini semanand izbitor de mult cu un F, desenat de 3 operatiuni majore:

• userul scaneaza printr-o miscare orizontala de la stanga spre dreapta partea superioara a continutului, cuprinzand o zona generoasa de informatie;
• userul isi muta privirea in jos, oprindu-se din nou pentru o noua scanare orizontala – zona cuprinsa este mult mai mica decat precedenta;
  (este momentul in care exista deja o parere generala a fost construita)
• intr-un final, userul utilizeaza butonul de scroll, parcurgand aria verticala-stanga pentru a-si face o parere concreta despre locul in care se afla.

Tiparul descris mai sus este o mica parte a unui studiu si face uz de heatmap generat prin eyetracking, privirea a 232 de useri fiind urmarita in vizitarea a zeci de mii de pagini web.
Scopul este lesne de inteles – constructia layout-ului ideal si dispunerea elementelor in asa fel incat sa aiba cat mai multa vizibilitate.

Studiul in sine nu aduce ceva nou, ci doar subliniaza importanta unui layout bine gandit, construit pe actiunile executate de un user intr-o pagina web.
Dealtfel, multe nume celebre din ecommerce fac uz de ceva vreme de aceasta informatie aparent minora, atat in frontpage cat si in cea de produs.
Cateva exemple mai jos:

Amazon.com – F layout – index

Wallmart.com – F layout – index

Amazon.com – F layout – pagina de produs

Cabelas.com – F layout – pagina de produs

Implicatiile unui tipar in F in web design sunt evidente si arata importanta constructiei speciale a layout-ului pentru acest mediu.
Cand te apuci sa construiesti layout-ul pentru viitorul tau magazin, trebuie sa ai in minte ca:

• userul nu citeste text-ul in intregime, cuvant cu cuvant – mai precis, nu in momentul in care intra pe pagina; prima operatiune este de scanare si daca informatia este coerent dispusa exista o sansa in a ramane… si a citi.
• primele 2 paragrafe trebuie sa contina intotdeauna cea mai importanta informatie
• cele 2 paragrafe au nevoie de o “subliniere” prin cuvinte puternice

Doar ca nota de subsol, acelasi studiu mai spune ca majoritatea userilor au citit/retinut cu precadere al 3-lea cuvant dintr-o fraza.

Expunerea informatiei este probabil cea mai importanta etapa in constructia unui ecommerce, caci cum, unde si cat sunt primii 3 pasi pentru un succes.
Pe acest principiu, de cele mai multe ori, exemplele castigatoare au cateva ingrediente comune: simplitate, claritate si layout F-shape.

tweet me