Totul incepe de la modalitatea in care se livreaza continutul, cum este afisat si in ce masura modul de afisare incurajeaza explorarea. Si indiferent ca pagina de rezultate foloseste un layout de tip list sau grid(sau amandoua), rezultatele sa masoara in numar de conversii venite din search si numar de abandonuri din aceasta zona.

Mai jos, un mic studiu de caz asupra paginii de rezultate provenite dintr-o cautare.
Am folosit 2 cuvinte – mobile phone sau telefon mobil, tocmai pentru a simula o cautare obisnuita, cu siguranta regasita destul de des in istoria acestor magazine.

target.com

• utilizeaza un layout tip grid, cu un singur produs pe rand, asigurand astfel o buna vizibilitate produselor afisate
• fiecare rezultat are afisat pretul, numarul de comentarii, rating-ul, reducerea(daca exista) si promotia(daca exista)
• butonul adauga in cos este prezent
• coloana stanga este folosita exclusiv pentru filtrarea rezultatelor, cu semnalizare numerica a numarului de produse din fiecare categorie ce detine astfel de intrari
• sunt sugerati termeni asemantori pentru o noua cautare
• nu exista un sistem de paginare; toate rezultatele sunt afisate intr-o singura pagina

amazon.com

• utilizeaza un layout tip grid, cu un singur produs pe rand, asigurand astfel o buna vizibilitate produselor afisate
• fiecare rezultat are afisat pretul, numarul de comentarii, rating-ul, reducerea(daca exista), promotia(daca exista) si prezenta in stoc
• butonul adauga in cos nu este prezent
• nu este afisat numarul total al rezultatelor gasite
• coloana stanga este folosita exclusiv pentru filtrarea rezultatelor, cu semnalizare numerica a numarului de produse din fiecare categorie ce detine astfel de intrari
• sunt sugerati termeni asemantori pentru o noua cautare
• exista un sistem de paginare a rezultatelor, prezent doar in zona de footer; cu certitudine pentru a miscora exit-ul din aceasta zona, mizandu-se puternic pe relevanta rezultatelor oferite
• nu exista un sistem de sortare/rearanjare a rezultatelor

emag.ro

• utilizeaza un layout tip grid, cu un singur produs pe rand, asigurand astfel o buna vizibilitate produselor afisate
• fiecare rezultat are afisat pretul, rating-ul, reducerea(daca exista), promotia(daca exista) si disponibilitatea
• butonul adauga in cos este prezent
• relevanta rezultatelor cautarii este semnalizata grafic la nivelul fiecarui produs
• numarul rezultatelor gasite este afisat
• coloana stanga este folosita pentru afisarea categoriilor, fara nici o legetura cu cautarea in sine
• categoriile ce contin produse corespondente cautarii sunt afisate in zona de maxima vizibilitate, deasupra grid-ului
• nu sunt sugerati termeni asemantori pentru o noua cautare
• exista un sistem de paginare a rezultatelor, prezent atat in zona de header cat si footer
• sub fiecare rezultat este afisata o mica lista de date tehnice, tocmai pentru a spori relevanta rezultatului si a scurta distanta pana in cosul de cumparaturi
• nu exista un sistem de sortare/rearanjare a rezultatelor

pcfun.ro

• utilizeaza un layout tip grid, cu un singur produs pe rand, asigurand astfel o buna vizibilitate produselor afisate
• fiecare rezultat are afisat pretul si prezenta in stoc
• butonul adauga in cos este prezent
• coloana stanga este folosita exclusiv pentru afisarea categoriilor, fara nici o legatura cu cautarea in sine
• categoriile ce contin produse corespondente cautarii sunt afisate in zona de maxima vizibilitate, deasupra grid-ului (in acest caz nu este afisat acest amanunt dar la alte cautari similare respectivul filtru si-a facut aparitia)
• nu este afisat numarul rezultatelor gasite
• nu sunt sugerati termeni asemantori pentru o noua cautare
• nu exista un sistem de paginare a rezultatelor, toate rezultatele fiind livrate intr-o singura pagina
• sub fiecare rezultat este afisata o mica lista de date tehnice, tocmai pentru a spori relevanta rezultatului si a scurta distanta pana in cosul de cumparaturi
• nu exista un sistem de sortare/rearanjare a rezultatelor

nota: exista posibilitatea ca printre produsele afisate in urma cautarii sa nu existe niciunul redus sau aflat la promotie si in concluzie argumentele in cauza sa nu fie afisate.

wallmart.com

• utilizeaza un layout tip grid, cu un singur produs pe rand, asigurand astfel o buna vizibilitate produselor afisate
• ofera posibilitatea vizualizarii rezultatelor atat sub forma de list cat si sub forma de grid
• afisarea default contine 48 de produse/pagina dar exista optiunea de a dubla numarul, la 96
• fiecare rezultat are afisat pretul, reducerea(daca exista), promotia(daca exista) si prezenta in stoc – sub diverse forme de disponibilitate
• butonul adauga in cos nu este prezent
• este afisat numarul total al rezultatelor gasite
• coloana stanga este folosita exclusiv pentru filtrarea complexa a rezultatelor, cu semnalizare numerica a numarului de produse din fiecare categorie ce detine astfel de intrari, sortare pe brand, niveluri de pret, rating, si argumente legate de aspect
• nu sunt sugerati termeni asemantori pentru o noua cautare
• exista un sistem de paginare a rezultatelor, prezent atat in zona de header cat ci in cea de footer
• atat in footer cat si in header exista un sistem de rearanjare/sortare a rezultatelor in functie de pret, rating, top vanzari, noutate, alfabet

Toate exemplele utilizate mai sus au notorietate. Ca fac sa nu uz de anumite metode de sortare sau filtrare, ca afiseaza sau nu detalii din istoria sau descrierea unui produs, tine de decizia fiecaruia. Totusi, judecand in ansamblu, va puteti face o imagine corecta vizavi de ce anume ar trebui sa contina pagina de rezultate.
Si fie ca optati optati pentru un model sau altul, tineti minte ca pagina in sine o construiti pentru useri si implicit pentru nivelul lor.
Iar simplu, complicat, firesc, elaborat, detaliat devin cuvinte cheie.

tweet me

Presupunand ca ai doar 60 de secunde pentru a convinge pe cineva ce tocmai ti-a calcat pragul magazinului, ce ii comunici mai intai?

Nielsen spune ca 79% din vizitatorii unui website nu citesc, scaneaza.  Afirmatia este generala si relativ veche(1997) dar se preteaza uimitor in ecommerce. Nu numai pentru ca in esenta si un magazin online este un website, ci pentru ca mai mai mult ca oricand aici abunda informatia.
Vizitatorul este bombardat de un volum imens de text si poze si este extrem de greu sa reuseasca aprofundarea a mai mult de 3-4 mesaje intr-un timp scurt. In concluzie, filtreaza pe cat posibil elementele ‘inutile’ din punctul lui de vedere… oprindu-se la ceea ce considera a fi important.

Si in majoritatea cazurilor definita de important contine:

• imagini mari, clare, sugestive
• paragrafe subliniate si potentate grafic (pret, proprietati produs, reduceri, promotii)
• mesaje scurte, la obiect, semnalizate grafic cat mai puternic
• 2-3 cuvinte puternice din frazele lungi

Piramida Inversata
Realitatea face ca scenariul mai sus descris sa se potriveasca perfect notiunii de piramida inversata, extrem de utilizata in topica constructiei unui articol. In esenta aceasta sustine ca un articol ar trebui inceput cu concluzia, continuat cu datele problemei si incheiat cu detalii minore, generale.

Transpunand acest model in arhitectura unei pagini, in combinatie cu tiparul unui proces de scan(F-shape) vei identifica schema ierarhica(pe scala de importanta) a zonelor unde atentia este distribuita.

Utilitate
La ce foloseste tot acest proces? Nimic mai simplu, iti comunica ce zone din magazinul tau merita cea mai mare atentie, in ce fel se construieste un landing page si ce elemente sa folosesti pentru a capta atentia si a retine userul.

Exemplele de mai jos sunt mai mult decat sugestive.

target.com – foloseste in frontpage un modul tip self-promo, cu continut vizual puternic si sugestiv, imbinat cu un mesaj text simplu si eficient, scos in evidenta prin natura font si culoare; in plus, comunica in zona de body/mijloc principalele categorii informand userul ce contine magazinul in cauza.

gap.com – foloseste in frontpage un modul tip self-promo, cu continut vizual puternic si sugestiv combinat cu un mesaj text ce face trimitere la istoria si awarness-ul brand-ului in cauza; zona de mijloc este utilizata pentru a sublinia o subcategorie.

In ambele cazuri imaginile sunt folosite pentru a da credibilitate mesajului, textul este coerent si simplu, face uz din plin de cuvinte cheie, linkurile sunt comunicate vizibil si intuitiv iar grafica este exceptionala.
Mai mult de atat, indiferent de rapiditatea procesului de scanare o mare parte din mesajul comunicat este retinut, tocmai prin simplitatea lui.
Faceti un test – priviti atent fiecare poza in parte, inchideti ochii si ganditi-va ce anume ati retinut.
Si a durat mai putin de 60 de secunde.
Ati fost convinsi?

tweet me

Asadar, 3 exemple de butoane – tipologie NU CUMPARA | estetica: 0, call 2 action: 0

Toate cele 3 variante si in special primele 2 n-au nimic propriu. Nu semnalizeaza nimic, nu fac uz de un cod de culoare din gama de atentionare si cu greu se straduiesc sa transmita un mesaj. Si acela fiind alterat si subminat pe cat posibil – “apasand aici cumperi” – o actiune primara cu un continut simplu.

Si totusi, posesorii vand iar intrebarea vine firesc – de ce? Mai mult, supravietuiesc si nu simt nevoia de schimbare. Gusta si din profit deseori.  Asta in comparatie cu multe magazine care desi posesoare a unui design impecabil si cu ceva istorie pe piata, plang in fata inbox-ului gol.

IQ, teste
Totul porneste de la userii ce populeaza nisa in care functionezi. De la teste ca sa sa fiu mai exact. Proprietarii ce au avut sansa/curajul sa faca un test live cu 5,10 … useri ordinari, alesi aleator dintr-un segment bine definit, stiu despre ce vorbesc. La propriu, la un moment dat devine dureros sa vezi ca noptile nedormite pentru a scoate ce e mai bun dintr-o idee sunt calcate in picioare in cateva secunde. Caci userul urmeaza o logica proprie, greu de ‘desfacut’.

Ideea sta in faptul ca majoritatea celor care construiesc un business ecommerce pornesc de la premisa unui standard impus de educatie, baza pe care se poate construi procesul de invatare al unei noi tehnologii. Spuneti-i daca vreti IQ…
Si abordarea asta este gresita.
Daca ai studiat nisa in care vrei sa iti cladesti afacerea, atunci cu siguranta ai o buna imagine asupra cui vrei sa vinzi. Iar arhitectura si complexitatea vor fi  construite ca atare.

Daca merge, de ce l-as schimba?
Nimic mai corect. A schimba ceva ce functioneaza este de cele mai multe ori o greseala. Si in realitate, este de 10 ori mai greu sa faci un update la ceva functionabil decat la ceva neproductiv. Pentru ca baza de plecare are alta dimensiune. Unde mai pui ca in cele mai multe cazuri, update-urile nu produc efectul scontat.

Nu agreez deloc exemplele de mai sus si de ceva timp imi pun saptamanal intrebarea cum de mai merg. Pentru ca in principiu contrazic tot ceea ce stiu. De fiecare data descopar un mic amanunt de-a dreptul delicios. Aproape mereu, populeaza zonele comunitate, obisnuita, disponibilitate, fler.

tweet me

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

Amatorii(browsers) sunt cei care nu au bine definita intentia de cumparare, navingand in speranta ca vor gasi ceva placut ochiului, pretabil nevoilor lor. Nu exista presiunea de cumparare, nu sunt definite nevoiele, pe scurt – nu stiu ce vor, naviga de placere. Tinta in cazul lor este sa ii indrepti catre zone cheie in care oferte de ultimul moment pot surescita comportamentul pasiv – “cel mai bine vandut, ulotimele noutati, cel mai apreciat …”
O privire obiectiva pe acest segment incercand sa descifrezi provenienta nu da rezultate concrete. Totusi, cautarea, advertising-ul si nu in ultimul rand content-ul(blog) sau retelele sociale, sunt aici cele mai intalnite surse generatoare de vizitatori.

In preajma evenimentelor, fie ele sarbatori religioase sau evenimente calendaristice(a se citi evenimente cu caracter personal sau cele sociale – 1 mai, 8 martie, anul nou) se profileaza si al 3-lea tip, o combinatie inedita nascuta din imperecherea celor doua modele descrise mai sus – potentialii clienti care vor sa cumpere dar nu stiu ce. Prefer sa le spun Doritorii. Au cateva idei despre ce anume si-ar dori si un draft de buget realizat, dar nu pot nominaliza produsul pentru care vor opta.
Singura optiune clara aici este gama catre care se indreapta.
Ex: as dori sa ii cumpar fiului meu de craciun cateva jucarii care sa ii stimuleze creativitatea.

Focusatii
- au cunostiinte despre segmentul vizat, fiind de cele mai multe ori vorba de o informare prealabila
- dorinta de cumparare este mare, dar influentata de pret, garantii, valoare transport
- executa un studiu de piata inaintea deciziei de cumparare
- utilizeaza instrumentele website-ului pentru a isi atinge tinta

Pentru a oferi un motiv de cumparare acestui segment, design-ul magazinului ar trebui sa raspunda la urmatoarele intrebari:
- este acesta locul in care gasesc ce imi trebuie?
- unde este produsul cautat de mine?
- este intr-adevar cel mai bun pret?
- este sigur site-ul pe care sunt?

Amatorii
- nu stiu ce anume cauta, navigheaza in mod pasiv
- cauta oferte speciale sau deal-uri de ultim moment
- sunt amatori de informatii cu caracter senzational
- sunt amatori de documentatie solid construita si bine documentata – ex: articol de blog care sustine detaliile tehnice ale unui produs

Pentru a muta acest segment in dispozitie de cumparare(buying mode), design-ul unui magazin online ar trebui sa rezolve urmatoarele nelamuriri:
- imi poti rezolva problema sau creea nevoia?
- de ce as cumpara de aici si nu din alta parte?
- ce anume pot capata in plus cumparand de aici?
- ce anume primesc daca ma decid sa cumpar acum?
- pot avea incredere in tine?

Doritorii
- nu au cunostiinte solide despre segmentul vizat
- isi doresc un impact major atat personal cat si al tintei(familie, diversi), in cazul in care este vorba de un cadou
- dorinta de cumparare este mare – nu insista pe ceva anume, preferand chiar un compromis decat sa ramana fara…
- au disponibilitatea de a cumula cumparaturile pentru a atinge bugetul schitat, dapasindu-l cu usurinta atunci cand valoarea este demonstrata
- ignora partial sau chiar total definitia de sezonalitate, investind in achizitie pentru viitor

Pentru a convinge doritorii, design-ul unui magazin ar trebui sa raspunda la urmatoarele intrebari:
- ce este hot acum si care este trendul actual?
- valoarea reprezinta pretul?
- comentariile sunt reale?
- sunt detalii tehnice indeajuns de coerente?
- cat de repede imi poti rezolva nevoia?
- cat de sigur este sa cumpar de la tine?

Concluzii
Daca un vizitator este focusat, condu-l rapid catre tinta, eliminand detaliile conexe ce i-ar putea distrage atentia de la obiectiv.
Daca un vizitator este doritor, scoate in fata argumentele ispititoare si marjeaza pe produsele cu cea mai mare cerere si marja de profit mare. Subliniaza seclectia si detaliile conexe.
Daca un vizitator face parte din segmentul amatori apasa puternic pe pedala promovarii, a autenticitatii si nu in ultimul rand
a senzationalului.

Ce merita retinut este faptul ca toate cele 3 variante de cumparator pun pret pe valoare, raspund coerent la motivatie si fug de elementele generatoare de anxietate.

tweet me

Iata cateva amanunte care iti pot obtine un astfel de avantaj:

- securitate - prezenta unui logo ce ilustreaza un certificat de securitate are un impact mai mult decat favorabil;
- confirmari – in orice proces de achitie din viata de zi cu zi si in special in online userul cauta la fiecare pas confirmarea faptului ca face ce trebuie; ca viitoarea sa achizitie se preteaza perfect pe nevoia sa – un modul vizibil de comentarii poate face minuni / este uimitor cum poate exploda volumul de incredere intr-un produs la vederea comentariilor pozitive(nici cele negative nu fac intr-atat rau pe cat iti inchipui), desi la rece gandind, este greu sa pui pret pe un comentariu facut de un necunoscut.
- brand awarness – brandurile celebre, cu istorie, transporta un volum de incredere inimaginabil; afiseaza-le, iti vor vor pune o noua caramida in piramida numita incredere.
- design – orice layout construit echilibrat, profesionist da credibilitate; prima impresie se formeaza intr-un timp extrem de scurt si este foarte greu de schimbat ulterior; dealtfel, o prima impresie negativa, estompeaza orice detaliu concret din continutul paginii privite.
- ajutor – un bun serviciu helpdesk si un modul de ajutor ce descrie functionarea uzuala a proceselor interne, sunt inestimabile; educa-ti userul si vei elimina convorbile interminabile in care trebuie sa explici ce e cu butonul in cauza…etc; afiseaza-ti ultra-vizibil numerele de contact si da explicatii coerente atat telefonic cat si pe mail / o zona de help trebuie sa fie concreta, palpabila, sa explice la subiect, pe exemple, procesul de comanda, procesul de mesagerie …etc.
- advertising – bombardarea vizitatorului cu mesaje publicitare, fie ele proprii sau externe business-ului, va altera cu certitudine prima impresie; modereaza cantitatea si defineste concret zonele publicitare.
- continut – un continut de calitate genereaza intotdeauna incredere; identifica exact nevoile ce au a facut userul sa te viziteze si livreaza continut pe subiect; pe masura ce reusesti sa focusezi procesul intrebare-raspuns, vei remarca o crestere a increderii si premisa unei familiriatati, a unei relatii personale / shopul tau si clientul vorbesc aceeasi limba.
- sinceritate – trateaza-ti franc vizitatorul prin continut exact; nu denatura calitatile unui produs construind o imagine fals-pozitiva; pana sa plaseze o comanda sau sa puna mana pe telefon trebuie convins sa ramana; atribute de genul ‘cel mai bun ‘ cu greu isi gasesc locul aici; dealtfel, cate produse “cel mai bun” poti avea in nomenclatorul tau ? – cate unul pe fiecare categorie, subcategorie …. esti sigur ca doar atat vrei sa vinzi ?

tweet me

Totusi, pornind de la premisa ca tot setup-ul este facut, nu ar fi placut si util sa o/il si testezi ?
Nu e un secret pentru nimeni ca prima impresie conteaza, ca primele 3-5 secunde sunt hotaratoare.

Fivesecondtest este fix un astfel de tool care te ajuta sa testezi elementele proeminente ale produsului tau.

tweet me