Mar 05



Web design nu inseamna numai niste poze si machete peste care se construieste un site. Web design presupune stiinta de a crea si organiza intreg continutul unui site astfel incat sa isi atinga scopul propus. Website design se refera la aranjarea in pagina si aspect, navigare si evident SEO (optimizarea pentru a fi vizibil in motoarele de cautare).

Studiile de tip eye tracking (ce urmaresc directia privirii utilizatorilor site-urilor de Internet) au relevat niste trucuri care ajuta la optimizarea web designului:

Web design pentru continut tip text

  1. Textul atrage mai mult decat imaginile. Majoritateautilizatorilor cauta pe site o informatie mai degraba decat o imagine, deci textul pe care il consideri important trebuie sa fie vizibil, usor de gasit in pagina.
  2. Evita blocurile mari de text. Vizitatorii nu se obosesc sa citeasca, de obicei, blocurile mari de text, indiferent de cat de buna este informatia din interior. Te sfatuiesc sa spargi blocurile masive de text in paragrafe.
  3. Titlurile (headings) atrag atentia. Ele pot face diferenta la o scanare sumara a paginii, deci pozitioneaza-le astfel incat sa fie vizibile. Mai mult, creeaza niste titluri de impact, care sa-l faca pe vizitator sa vrea sa citeasca si restul informatiei.
  4. Subtitlurile foloseste-le numai daca sunt relevante. Formatarea se ralizeaza tot prin headings. Vrei sa folosesti subtitluri daca ele contin cuvinte cheie. Ajuta la SEO. Si ai grija ca informatia sa fie interesanta si sa-l ajute pe cititor sa parcurga mai usor continutul.
  5. Paragrafele scurte sunt mai eficiente decat cele lungi. Cum spuneam  la punctul 2, formuleaza frazele concis si inteligibil. Majoritatea internautilor au rabdarea foarte limitata, la fel si concentrarea.
  6. Numerele scrie-le cu cifre. Nu cu litere. Asa cel care scaneaza pagina poate gasi usor datele relevante. Si sa citeasca mai departe in loc sa abandoneze siteul.
  7. Marimea textului influenteaza comportamentul cititorului.  Daca vrei sa il incurajezi sa scaneze rapid continutul, foloseste fonturi de dimensiuni mari. Textul mic in face pe vizitator sa se concentreze mai mult asupra siteului.
  8. Formateaza textul in mod simplu. Nu folosi corpuri de litera exotice si culori multe, deoarece multi vizitatori le asociaza anunturilor publicitare si le ignora.
  9. Preferabil formatarea realizeaz-o din stiluri. Scoate in evidenta numai elementele importante. Foloseste literele ingrosate, cuvintele subliniate, mai rar culorile. Astfel mentii atentia cititorului treaza.
  10. Linkuri (legaturi catre alte pagini) bine construite. Preferabil sa folosesti culoarea albastra, textul din link sa fie subliniat. Din punct de vedere SEO, daca linkul duce catre o alta pagina din siteul tau, vrei vrea sa folosesti un text relevant (nu clic aici). Cine a dat clic mai devreme poate observa ce inseamna obisnuinta, textul nici macar nu era un link, dar formatarea duce in eroare. Daca folosesti un text relevant (un cuvant cheie pentru care vrei sa pozitionezi bine pagina tinta), educi motorul de cautare. Ii zici  ca acel text este descriptiv pentru pagina tinta. Altfel, ce sa creada, ca pagina spre care dai link are legatura cu textul “clic aici”? :) Apropo, cauta pe Google dupa “clic aici” (de data asta poti sa dai clic) si o sa vezi ca Adobe si Quick Time sunt in frunte. Asta pentru ca oricine iti ofera sa descarci Adobe Reader sau Apple Quicktime, de regula foloseste click here pentru linkul de descarcare.
  11. Listele ajuta la parcurgerea continutului. Fie ca sunt numerotate sau doar cu puncte, listele fac informatia usor de citit. Cum ar suna un anunt de genul: “Vand apartament ultracentral, cu imbunatatiri. Trei camere, doua bai, decomandat. Gresie si faianta, parchet. Are termopane la toate camerele. Am montat apometre si am schimbat instalatia sanitara cu tevi de cupru. Pretul de pornire este de 80 de mii de euro, dar se poate negocia, la nevoie accept si credit”. Cam greu de citit, nu? Hai sa vedem cum ar suna altfel, sub forma de lista:
    • Vand 3 camere ultracentral:
    • Decomandat, doua bai
    • G+f, termopane, apometre
    • Instalatie sanitara noua
    • 80 000 euro negociabil, accept credit
  12. Ai observat avantajul unei liste bine folosite?

    Web design – aranjare in pagina (layout)

  13. Majoritatea vizitatorilo se uita initial in coltul din stanga sus al paginii. Este modul de citire al europenilor (de la stanga la dreapta si de sus in jos). Ai face bine sa tii seama de acest aspect, nu incerca sa schimbi un obicei bine inradacinat. Se poate vedea si din imaginea de mai jos, unde zonele rosii sunt cele in care privirea utilizatorilor a zabovit cel mai mult.

    Eyetracking parcurgere pagina Internet

    Eyetracking parcurgere pagina Internet

  14. Dupa coltul din stanga sus, privirea vizitatorilor deseneaza un F pe pagina. In jos si in dreapta. Cauta sa pozitionezi elementele importante in zonele rosii. Desenul poate varia un pic de la site la site, dar este valabil ca regula generala.
  15. Zonele din josul paginii sunt in general doar scanate. Depinde de tine sa pui acolo un “carlig” care sa agate privirea vizitatorului. O lista, un link, un titlu interesant pot prelungi vizita. Dar nu pune elementele importante acolo. Exista regula primului ecran. Se refera la zona din pagina care este vizibila in primul ecran, fara a face scroll. Tine cont de aceasta zona, e locul unde pui toata informatia care conteaza. Si mai tine cont de diferitele browsere de Internet si de rezolutii diferite. LA 800×600 primul ecran e mult mai mic decat la 1600×1050. Ca sa te orientezi, foloseste un motor de tip analytics ca sa obtii statistici despre cele mai dese browsere (programe de navigare pe Internet) folosite si cele mai frecvente rezolutii, in cazul vizitatorilor tai. La nivel mondial, cele mai folosite browsere sunt Microsoft Internet Explorer (67%) si Firefox (21%), urmate de Apple Safari, Google Chrome si Opera.
  16. Nu incarca prea mult pagina cu informatie. Spatiul alb (sau ce culoare are fundalul) e necesar. Cum zicea un designer, pagina trebuie sa “respire”.
  17. Pune meniul sau butoanele de navigare in susul paginii. Fa siteul usor de navigat, poti folosi inclusiv breadcrumbs (se refera la un control de navigare ce iti indica in orice moment unde te afli in structura siteului). Breadcrumbs, firimituri in traducere literala, sunt denumite dupa firimiturile pe care Hansel si Gretel le presarau in urma lor ca sa nu se rataceasca, in basmul fratilor Grimm.
  18. Textul pe o coloana e mai rapid accesat dde privire decat cel pe mai multe coloane. Totusi, decat sa ai randurile de text foarte lungi si greu de citit, mai bine le imparti pe mai multe coloane (ai observat tehnica in cazul ziarelor, nu?).
  19. Web design pentru imagini

  20. Imaginile mari atrag atentia. Mai mult decat imaginile mici. Nu te teme sa folosesti imagini mari, viteza de acces creste mereu, deci se vor incarca. Dar nu uita, utilizeaza imagini daca sunt necesare si relevante.
  21. Chipurile umane atrag privirea. Deci daca ai de ales, alege o fata umana in loc de o imagine abstracta. Ai grija ca imaginea sa fie foarte clara. Studiile au aratat ca fetele de oameni obisnuiti atrag mai mult privirea decat o poza cu un manechin (depinde si de site, evident).
  22. Butoanele sunt cautate cu privirea. Ai grija ca butoanele tale sa fie usor identificat, sa arate bine, iar textul de pe ele sa fie usor de citit. Foloseste stiluri excentrice de butoane numai ca exceptie.
  23. Ai grija la aspectele legate de SEO. Foloseste atributul alt pentru imagini (este textul alternativ care apare daca imaginea nu se incarca.) Motoarele de cautare citesc acest atribut. Ai grija sa denumesti imaginea relevant (nu image64.jpg) si sa-i oferi o descriere relevanta, la randul ei. Corect utilizat, acest atribut alt iti poate face pagina mai vizibila in motoarele de cautare.
  24. Web design – anunturi publicitare

  25. Oamenii tind sa igore bannerele publicitare. Daca vrei sa ai incasari de pe urma lor sau, mai important, daca platesti ca bannerul sa apara pe siteurile altora, atunci ia seama. In engleza se cheama banner blindness.
  26. Cel mai bun loc pentru un anunt publicitar este, ai ghicit, in stanga sus. vezi punctul 12.
  27. Al doilea loc cel mai bun pentru un anunt publicitar este langa un continut vedeta. Adica partea cea mai interesanta, mai citita, a continutului.
  28. Anunturile text sunt mai vizualizate si mai des vizitate decat cele de tip imagine. Utilizatorii le percep mai putin ca si publicitate. Deci sansele sa le acceseze sunt mai mari.

Voteaza acest nume - clic pe stelute:

1 Stea2 Stele3 Stele4 Stele5 Stele (5 voturi, media: 5.00 din 5)
Loading ... Loading ...

Ti-a placut acest articol? Da clic si vei primi cele mai noi articole despre marketing creativ: Clic: vreau sa fiu la curent cu noutatile

Cuvinte cheie: , , ,

3 raspunsuri la “Web design: 25 de trucuri rezultate din ultimele studii”

  1. the marketer a spus:

    lista e bine facuta, dar ce te faci ca multi web developeri/web designeri nu tin cont de elementele astea? Sa ma apuc sa faci design si sa codez in locul lor?

  2. cosmin a spus:

    foarte bun asa. un articol corect.

  3. Sorin a spus:

    @ the marketer:
    Uite ce propun. Daca lucrezi cu web developeri, designeri, ai grija ca practicile de mai sus sa fie explicit specificate in cerintele tale.
    Atunci cand construiesti de la inceput siteul, asezarea in pagina a elementelor trebuie sa fie si ergonomica, nu numai placuta ochiului. Apoi, asigura-te ca elementele de asezare pot fi modificate rapid. Pune un motor de tip analytics si fa modificarile in urma statisticilor. Daca ai buget si timp, cere o testare cu oameni, intr-un mediu unde sa ii poti observa. Si tine seama de sfaturile de webdesign referitoare la tet si imagini pe care sa le transmiti copywriterului, redactorului sau celui care scrie pe site.
    Nu uita, retetele ajuta, dar nu te sfii sa “gusti” si sa modifici ingredientele. Numai realitatea si datele adunate pot sa te ajute sa optimizezi siteul.

Raspunde