Claudiu Murariu - Strategie & Analiză Web

Zilele trecute, in căutarea unui articol salvat în bookmarks, am dat de următorul mesaj:

Update 26 mai 2008: imobiliare.ro au schimbat azi pagina de eroare 404. Versiunea noua poate fi gasita la adresa www.imobiliare.ro/404

Iniţial am crezut că este vorba despre o glumă a celor de la imobiliare.ro însă mesajul părea cât se poate de serios. Cu uşurinţă, pot cataloga această eroare 404 ca fiind printre cele mai lipsite de inspiraţie dintre toate intâlnite pînă acum… pînă acolo încât şi neimplementarea ei ar fi fost o decizie mai bună.

In primul rând mesajul: “Eroare incomensurabil de gravă şi periculoasă” poate speria orice utilizator care îl ia în serios. Pentru a da o mână de ajutor în această direcţie site-ul oferă şi următoarea explicaţie: A aparut o eroare in cursul procesarii comenzii dvs. Care comandă?!?!

Lucrurile au devenit şi mai “amuzante” atunci când dezvoltatorii acestui site au hotărât că noi nu avem ce căuta pe site-ul lor - oricum nu am gasit ce căutam - motiv pentru care linkul “Pagina Precedentă” e doar o scurtătură către butonul de back din browser. In cazul meu, venind direct din bookmark, acest link nu funcţiona. Bineinţeles că şi titlul paginii este, nimeni altul decât favoritul: Untitled Document.

Erorile 404 se intâmplă pe aproape orice site care a adunat măcar căteva luni de activitate. Motivele sunt diverse, de la greşeli de scriere pînă la articole şi pagini şterse sau mutate. Cele mai frecvente erori 404 le-am întâlnit în cazul site-urilor care decideau să-şi schimbe politica de construcţie a linkurilor din motive de optimizare pentru motoarele de căutare.

Paginile customizate 404 au rolul de a convinge măcar o parte din vizitatorii care ajung pe ele să rămână în continuare pe site. Bineînteles, exemplul celor de la imobiliare.ro nu este unul demn de urmat. Iată câteva elemente de bază recomandate a fi folosite în paginile de eroare 404:

• Un mesaj prietenos care să explice utilizatorului motivele posibile eroarea întâmpinată.
• Elemente de navigare în site care să îl ajute să găsească informaţia dorită (meniu, scurtături frecvente)
• Nu în ultimul rând un formular de căutare pentru a-i facilita utilizatorului calea cea mai scurtă către informaţia dorită.

Cei de la Smashing Magazine au făcut o compilaţie a celor mai creative, dar şi “user friendly” pagini de erori customizate 404, de unde e şi următorul exemplu:

O altă sugestie ar fi de a oferi posibilitatea utilizatorului de a raporta sursa linkului care l-a condus în pagina cu eroare. Remedierea linkurilor defecte se face prin redirectari 301 către pagina pe care utilizatorul se aşteaptă să o gasească, în cazul în care aceasta este lesne de identificat.

Pentru a seta erori 404 customizate se adăugă urmatoarea linie in fişierul .htaccess din folderul rădăcină al site-ului pe care il administrezi:

ErrorDocument 404 /pagina_cautata_nu_a_fost_gasita.html

Atenţie la calea către template-ul erorii 404, căci folosirea adresei absolute sub forma http://www.site.ro/pagina_cautata_nu_a_fost_gasita.html nu e corectă (întoarce cod 200 (OK) in loc de cod 404 (Page not Found))

Pe majoritatea site-urilor pe care le monitorizez, ţin evidenţa tuturor erorilor 404 pe care le intâmpină utilizatorii. Mă folosesc de un mic truc de Google Analytics, după cum urmează:

In primul rând verific dacă în template-ul paginii de eroare este setat codul de tracking. In cazul noului script ga.js acesta va arăta astfel:

<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXXX-X");
pageTracker._initData();
pageTracker._trackPageview();
</script>

Citesc intr-o variabilă URL-ul paginii pe care se află utilizatorul (cea cu eroarea 404) şi apoi modific linia

pageTracker._trackPageview();

din codul de mai sus în lina

pageTracker._trackPageview('404_<?php echo $variabila_URL; ?>');.

Astfel in statisticile Google Analytics, in cadrul sectiunii “Top_content”, vor putea fi vizualizate toate URL-urile accesate de utilizatori prin care au ajuns in pagini de eroare 404. Aceste pagini vor fi uşor de identificat, numele lor incepând cu “404_“.

Ţinând evidenţa tuturor erorilor 404 vei fi de cele mai multe ori cu un pas in faţa motoarelor de căutare în a le descoperi. Ai astfel posibilitatea de a le corecta în timp util prin intermediul redirectărilor 301 către pagini exsitente şi relevante din site.

Cu cât mai multe linkuri către site-ul tău, cu atât mai bune poziţionări în motoarele de cautare. Nu e păcat să pierdem din linkuri pe erori “incomensurabil de grave si periculoase“?.

Codul din header-ul unui site este ignorat de foarte mulți programatori web, dar modul în care este construit acesta are relevanță atât din punct de vedere SEO cât si uzabilitate. Cu cât este mai optimizat și bine structurat cu atât va oferi mai puține bătăi de cap în viitor.

Înainte chiar de a ajunge la header, trebuie asigurat ca documentul HTML are setat un DOCTYPE care va ajuta browserele sa indetifice ce tip de cod (X)HTML se folosește, evitându-se astfel erorile de randare a paginii mai ales în ultimele versiuni de browsere. Următoare sugestie de constructție a DOCTYPE-ului ține de versiunea XHTML 1.0.

Ca și element obligatoriu pentru header, conform standardelor W3C, este doar tagul <title>. Inițial, acest tag era folosit doar de către browsere pentru a afișa numele paginii, însă ulterior a fost preuat și de motoarele de căutare pentru titlul rezultatelor. Pentru descrierea rezultatelor din căutări, Google și celelalte motoare folosesc meta description atunci când este setat, iar când nu, afișează elemente relevante aleatorii și truncate din conținutul paginii respective. Nici unul din marile motoare de căutare nu mai folosește meta keywords.

Astfel primele două linii imediat din header ar trebui să fie title și meta description, pentru a ne asigura ca spiderii motoarelor de căutare nu întâmpină nici o dificultate în a accesa această informație.

Un aspect de care ține foarte puțină lume cont este localizarea site-ului. Cât timp motorul de căutare nu are nici un indiciu că site-ul este scris într-o anumită limbă și oferă infromații în special într-o anumită țară există riscul ca acel site să fie inclus în cu totul altă categorie decât cea dorită. De exemplu, am întâlnit cazuri de site-uri care după campanii de optimizare au obținut rezultate foarte bune, dar în Republica Moldova și nu România. Pentru a evita astfel de cazuri și pentru a ne asigura că sunt indexate și diacriticele, următoarele două linii din header ar trebui să fie:

De asemenea a nu se uita setarea elementelor de localizare din Google Webmaster Tools.

Am văzut nenumărate cazuri în care în continuare se pun indicii cu privire la modul de indexare a site-ului. Ideal este ca aceste indicii sa fie oferite în fișierul robots.txt, pentru a ține headerul cât mai compact și pentru a scurta timpul de încărcare a paginii. Oricum aceste indicii ar trebui folosite doar în cazul în care se dorește neindexarea unei anumite pagini sau a modului de navigare prin linkurile din pagina respectivă. Sugestii de implementare pentru meta robots, în astfel de cazuri, se găsesc pe Robotstxt.

Acum că am terminat cu motoarele de căutare putem trece la partea de uzabilitate a header-ului. E drept că utilizatorul nu vede informația scrisă în header, dar modul în care este structurată îl afectează direct.

Unul din factorii relevanți este timpul de încărcare a paginii. Pentru fiecare fisier de CSS din header și pentru fiecare fișier de functii javascript, browserul va apela serverul web. Cu cât sunt mai multe astfel de apleuri cu atât pagina se va încărca mai greu. Recomandarea este de maxim 2 fișiere pentru stilurile CSS (maxim 8 kB fiecare) și maxim 2 fișiere cu funcții Javascript cât mai optimizate din punct de vedere al dimensiunii fișierelor.

E foarte important a nu se folosi cod CSS inline sau Javascript embeded in header. Toate aceste definitii de stiluri sau functii de javascript trebuie externalizate cat mai mult posibil. Motoarele de căutare indexează tot codul (deci informație irelevantă) din o anumită pagină însă nu și din fișierele de stiluri și funcții. Această regulă este valabilă chiar și în cazul în care trebuiesc definite stiluri separate pentru Internet Explorer. Sintaxa corectă de cod pentru acest caz este:

O ultimă linie de cod pe care o recomand a fi adaugată in header este cea care definește iconul paginii web, deși acest element ține mai mult de estetică și nu e folosit de toate browserele.

Pentru majoritatea dezvoltatorilor cu care am lucrat programarea unui site incepe cu tag-ul <body>, singurele probleme pe care și le pun despre <head> fiind cele de validare ale codului HTML.

Voi v-ați pus vreodata problema optimizării header-ului? Mai cunoașteți și alte trucuri?

Sunt 3 nume mari de părerea cărora trebuie ţinut cont de fiecare dată când ne dorim un site cu uzabilitate sporită:

Pareto
Principiul lui Pareto ne spune ca 80% din consecinţe sunt provocate de 20% dintre cauze. Această este şi o regulă de bază în afaceri: 80% din vânzări provin de la 20% din clienţi, dar poate fi aplicată şi în design şi uzabilitate. De exemplu îmbunătăţiri majore pot fi de cele mai multe ori obţinute prin identificarea şi mărirea atenţiei acordate celor 20% dintre utilizatori, consumatori, activităţi online, produse sau servicii care reprezintă 80% din contribuţia la profitul tău.

Fitts
Publicată în anul 1954, leagea lui Fitts ne propune un model al mişcărilor făcute de un utilizator, ce prezice timpul necesar pentru a te repoziţiona din zona A în zona B, ca fiind o funcţie între distanţa către zona respectivă şi dimensiunea zonei. Aplicând această lege putem înţelege mai bine modul prin care poziţionăm conţinutul relevant şi important pentru utilizator în locuri cât mai strategice pentru a mări accesibilitatea şi rata de click-uri în site.

Cliffhanger
Oamenii nu suportă incertitudinea. Avem tendinţa de a afla răspunsuri la problemele nerezolvate în cel mai scurt timp posibil. Efectele Cliffhanger se bazează pe acest fapt. Filmele, scenariile de teatru, articole de presă ce se folosesc de acest efect au un final neaşteptat, lăsând spectatorul sau cititorul într-o situaţie dificilă. Unele spoturi publicitare sunt realizate în acest fel, folosindu-se de întrebări fără răspuns sau provocatoare, utilizatorii fiind astfel “forţaţi” să citească advertorialul, să dea click pe banner sau pe link.

Din păcate, nu am avut eu onoarea de a-l intervieva pe Avinash Kaushik, omul care a transformat Google Analytics în unul din cele mai reuşite unelte de analiza a traficului web - faptul că e gratuit nu trebuie omis nici el.

Privilegiul i-a aparţinut Adrianei Iordan, Manager Web Marketing la Avangate, companie în cadrul căreia împlinesc şi eu o lună de când lucrez. E drept că am citit acest interviu cu câteva zile înainte de a ajunge online fiind plăcut surprins de amabilitatea şi promptitudinea lui Avinash Kaushik.

Din tot interviul, două idei mi-au atras atenţia în mod deosebit:
1. Pagina de home nu mai e sub controlul tău. Aparţine de Google, Yahoo şi MSN. Oricare dintre primele 50 de pagini ale site-ului tău din punct de vedere al numărului de vizitatori trebuie tratate la fel de serios ca şi homepage-ul. Asigură-te că vizitatorii tăi înţeleg despre ce e vorba în site-ul tău indiferent de poziţionarea lor în structura lui.

2. 90% din investiţia pe care o faci pentru o bună cunoaştere a datelor despre publicul site-ului tău trebuie făcută în personal… Având în vedere că nu cunosc nici o companie din România care să aibă personal doar pe web analytics, aş indrăzni să duc mai departe vorbele lui Avinash în următoarea afirmaţie:

• Investeşte 10% din bugetul pentru comunicare online în analizarea traficului pe website.ul tău. Din aceşti 10%, doar 1 procent de investit în unelte web de analiză, iar restul în analişti bine pregătiţi sau oameni care să-şi dezvolte aceste aptitudini în cadrul companiei.

Nu vreau să fiu înţeles greşit. 10% este o cifră foarte mică pentru a se investi în analiza traficului. Dar e un început bun. Odată cu rezultatele ce nu vor întârzia să apară, va creşte şi cifra investită.

Oricum, Avinash Kaushik nu se opreşte doar la aceste două idei. Interviul complet îl găsiţi aici.

Timp de mai bine de 10 ani, începând cu anul 1995, a vorbi despre modele de comerţ online însemna să vorbeşti despre Amazon. Fiecare magazin online, trend observat mai târziu şi în România, avea tendinţa să implementeze modele observate la Amazon.com, pe bună dreptate căci respectivele modele erau testate şi iar testate şi dovedite a funcţiona.

Săptămâna trecută însă Amazon a oferit o surpriză, deşi unii spun că aşteptată, şi a făcut un update major de design. Noul facelift a fost făcut în urma testărilor îndelungi cu utilizatori din Statele Unite şi din celelalte ţări unde Amazon face comerţ online.

Prima modificare care mi-a sărit în ochi a fost dispariţia taburilor folosite ca meniu de navigare. Jacob Nielsen considera această metodă total inadecvată, căci taburile ar trebui folosite nu pentru a trimite utilizatorul în zone din website cu conţinut diferit ci pentru a arăta acelaşi tip de conţinut sub forme diferite. Dar cum Amazon deja devenise numărul 1 în vânzări online, chiar şi el declara că odată ce acest tip de meniu va fi preluat de magazine online la nivel mondial e posibil să devină standard de navigare.

Alte modificări operate de Amazon:

• Listarea tuturor categoriilor de produse în colţul stânga sus. Vechea platforma oferea un acces mai puţin facil la categorii… dar să nu uităm, Amazon a fost lansat ca magazin online de cărţi. Restul categoriilor au venit mai târziu şi şi-au dovedit succesul abia acum în ultimii ani. Astfel au apelat la un design centrat pe nevoile utilizatorilor.

• Au scos în evidenţă shoping cart-ul şi lista produselor salvate. Un alt element pe care s-au centrat e ceea ce ei numesc “wish list”. Personal nu am văzut pe nici o platformă din România acest modul şi nici nu sunt sigur de potenţialul lui având în vedere diferenţele culturale, dar oricum ar fi interesant de încercat. Această opţiune de listă cu produse dorite se salvează pe website în contul utilizatorlui şi poate fi vizualizată de oricine pe baza adresei de email a celui care a realizat respectiva listă. Cu alte cuvinte, nu mai trebuie să ne gândim foarte mult la ce îşi doreşte un amic de ziua lui, căci găsim cadourile râvnite în “wishlistul” salvat de el.

• Linkuri şi shortcut-uri către ofertele zilnice de pe Amazon oferite contextual.

• Nu în ultimul rând, noua faţă a Amazonului, şî noua gamă de culori transpune portalul în tendinţele web 2.0.

Interesant va fi să vedem dacă şi acum, ca şi cu 10 ani în urmă, vom vedea schimbări majore şi în celelalte platforme de comerţ online. Vom vedea modificări similare la platformele din România? Pariul meu va fi pentru modificări în timp, şi oricum doar după ce se vor obişnui şi utilizatorii cu ele. Atunci va deveni imperativă folosirea lor şi în celelalte portaluri de comerţ online.

Pentru cei ce nu ştiu, GYM este “SEO slang language” şi e o prescurtare pentru cei 3 mari. Google, Yahoo şi Microsoft. Cei doi din urmă (la propriu din punct de vedere al market share) au suferit upgradeuri majore în ultimul timp pentru a putea fi un concurent real pentru cel dintâi, Google.

Yahoo.
Acum cîteva zile au lansat One Search, un upgrade bine venit însă cu ceva întârziere faţă de principalul concurent Google (ce a suferit modificări majore în vara acestui an). Filozofia Yahoo e simplă: “Oamenii nu-şi doresc să caute, ei vor să găsească”. S-au axat pe îmbunătăţiri majore ale algoritmului de căutare şi au introdus în premieră (din punct de vedere ale implementării căci idei similare au mai fost) Search Assist. Deşi nu e cunoscut modul de funcţionare al acestui nou algoritm, un lucru e clar: una din variabile, probabil şi principala, o reprezintă căutările anterioare legate de un anumit cuvînt cheie. Pentru companii această unealtă reprezintă o reursă de nepreţuit, căci

Modul în care eşti căutat pe internet este o bună metodă de a cuantifica poziţionarea ta în mentalul consumatorilor.

Alte trăsături ale noului Yahoo: includerea fotografiilor din baza publică de date a Flickr în rezultatele de căutare, oferind astfel fotografii de calitate mult mai mare în funcţie de anumite căutări, includerea elementelor multimedia (foto,video) în paginile cu rezultate de căutare, asistenţă în cazul căutării unei adrese, unui restaurant, sau în cazul planificării unei vacanţe (nothing that Google can’t do).

Un alt upgrade major îl reprezintă pagina de start pentru căutare. Cam târziu au înţeles cei de la yahoo faptul că utilizatorii îşi doresc pentru această pagină doar un singur câmp şi un buton de search. Nimic altceva. Din păcate, întotdeauna va fi mai uşor de scris google.com decât search.yahoo.com.

Live
În conferinţa de presă din 26 septembrie Microsoft anunţa sfidător aproape: “We are as good as Google”. Pe ce s-au bazat ei când au declarat acest lucru? Pe noul lor sistem propus de vertical search. Acest termen desemnează acele motoare de căutare care tind să se specializeze pe un anumit segment. Microsoft a lansat astfel 4 tipuri de vertical search pentru a concura Google: Entertainment (image and video), Shopping, Health and Local. Astfel s-au prezentat cu câteva tweakuri noi, îmbunătăţiri de uzabilitate, dar şi baze de date incomplete mai ales în cazul motorului de căutare pentru shopping.

Alte îmbunătăţiri sunt de ordin vizual, loc în care atît Yahoo cât şi Live cîştigă teren.

Ca şi concluzie lucrurile stau în felul următor: Google is the king, dar un rege într-un stat democratic unde Live si Yahoo pot oricînd să încerce să-l dea jos de pe tron. Nu prea curând însă, căci vocea poporului nu va fi fără importanţă. Oricum, atunci cînd mai apelaţi la servicii de SEO nu uitaţi să cereţi optimizare şi pentru Yahoo şi Live… aşa, pentru orice eventualitate… asta în cazul în care apelaţi la tehnici mai puţin ortodoxe. Cât timp purtăm pălării albe ;), lucrurile ne vor zâmbi indiferent de motorul de căutare folosit.

Astăzi am realizat, cu ruşine chiar, ca am uitat unele din numele celor care au fost şi sunt principalii vectori profesionali, demni de urmat, în domeniul strategie şi analizei web. În acelaşi timp chiar am fost invidios când am aflat că Adriana Iordan de la Gecad ePayment îl va intervieva pe Avinash Kaushik omul din spatele Google Analytics.

Dar să revenim la lista celor mai mari evanghelisti (dacă aţi şti cât de mult urăsc numele ăsta, dar nici că aş şti unul mai bun) din domeniul strategiei şi analizei web:

1. Avinash Kaushik - Consultant Independent şi pentru moment Evanghelist Analytics la Google. Autorul cărţii “Web Analytics: An hour a day” şi a blogului denumit simbolic Occam’s Razor

2. Jeremiah Owiang - Strategist web şi consultant pentru un număr impresionant de firme din topul forbes 500. Bogul lui: Web strategy by Jeremiah.

3. Guy Kawasaki - Evanghelist marketing, iniţiatorul unei afaceri web cu cea mai mică investiţie şi anume de 12.000 de dolari. Autorul cărţii “The art of the start” şi a blogului “How to change the world“.

4. Jacob Nielsen - Practic omul care a inventat termenul de usability. Oferă un newsletter gratuit cu informaţii mai mult decât utile oricărui designer sau proprietar de site-uri. Nu are blo, şi nici feeduri RSS fiind mai mult decât fidel “old media” însă site-ul lui este o adevărată comoară e informaţii www.useit.com

5. Steve Krug - autorul cărţii “Don’t make me think. A common Sense Approach to Web Usability” şi unul din liderii de opinie în ceea ce priveşte consultanţa în uzabilitate.

6. Ultimul dar nu şi cel din urmă, Rand evanghelist SEO. Dacă ceva nou apare în acest domeniu, probabil că echipa lui de la SEOmoz va fi prima care să experimenteze ca apoi să povestească şi publicului rezultatele.

Spre plăcuta mea surprindere, bila albă se duce către un site românesc, o unealtă des folosită de webmasteri, şi care avea nevoie disperată de o nouă faţă, de o noua structurare a informaţiei, şi poate cel mai important, de o îmbunătăţire a uzabilităţii. E vorba de www.rotld.ro. Auzisem de la colegi că a suferit un upgrade major, însă abia azi am avut nevoie de serviciile acestui site. Rapiditatea cu care am schimbat DNS/urile unui domeniu, uşurinţa de navigare - acum sunt necesare doar numele domeniului si a DNS-urilor, restul paşilor fiind realizaţi de portal - şi micile abordări AJAX, m-au convins să aplaud acest site.

De cealaltă parte a baricadei se află un site internaţional, cu un public uriaş, care avea nevoie de un upgrade cel puţin la fel de disperat. Ei bine, acesta s-a întâmplat, dar departe de a satisface nevoile publicului. Site-ul: www.formula1.com suferă în continuare de lacune în navigare şi, poate cel mai important, de o abordare New Media şi Social Networking. Aceste lacune au fost deplânse de publicul larg al acestui sport. Poate doar transmisii live a curselor ar mai fi putut anula din aceste lipsuri, lucru care, evident, nu s-a întâmplat.

Procentul vizitatorilor ce au părăsit siteul tău fără a vizita o altă pagină reprezintă rata de bounce şi este, poate, cea mai influentă informaţie statistică în ceea ce priveşte calitatea unui site.

Iată două situaţii şi concluziile aferente ce putem trage din urma ratei de bounce.
1. Rata mare de bounce a vizitatorilor veniţi de pe motoare de cautare.
Deşi motorul de cautare a considerat că informaţia de pe site-ul găsit este definitorie pentru un anumit cuvânt cheie, vizitatorul odată intrat pe pagină nu reuşeşte să acceseze informaţia dorită. Următorul pas pe care îl va întreprinde va fi să se intoarcă la motorul de căutare şi să acceseze o altă pagină, cel mai probabil a concurenţei. Intr-o astfel de situaţie, categoric, site-ul are nevoie de un studiu de uzabilitate şi optimizarea aferentă.

2. Rata mare de bounce a vizitatorilor veniţi de pe site-urile partenere, de pe urma bannerelor publicitare.
Una din cele mai frecvente greşeli pe care am întâlnit-o o reprezintă necorelarea dintre informaţia oferită de bannerul publicitar şi pagina către care acesta ne trimite. Deşi gaseşte cel putin de interes informaţia văzută pe banner, odată accesat linkul aferent, vizitatorul fie nu găseşte produsul promovat, fie găseşte exact aceeaşi cantitate de informaţie şi nimic mai mult. În mod normal, primul pas pe care îl va face, va fi să părăsească site-ul, uneori chiar enervat de timpul pierdut. Soluţia în cazul de faţă este evidentă: poziţionarea cât mai vizibilă pe pagina accesată a produsului sau serviciului promovat, cu link către o zona ce va răspunde nevoilor de informare a vizitatorilor.

O definiţie mai tehnică a termenului “Bounce Rate”. o găsim pe wikipedia.