Mai jos, un mic studiu de caz despre ce poti face cu un search intern – zappos.com.

Zappos.com – un exemplu de search

Motorul de cautare este pozitionat central, in zona de maxima vizibilitate, in imediata vecinatate a logo-ului, fiind populat cu valori implicite.
Valorile default din campul de cautare sunt evident rezultatul unui audit intern pe cele mai cautate cuvinte.
*Peste 50% din cautari au caracter generalist, termenii utilizati fiind comuni, cu trimitere directa la o categorie, o marca/brand sau un detaliu tehnic.

Sub campul de cautare, in spatiul dedicat de obicei linkului cautarii avansate, Zappos ofera sugestii de rafinare directionand cautarea catre argumente semi-tehnice uzuale: marime, profil, cautari populare.

Este evident ca dincolo de pozitionare si culori, valorile implicite si rafinarea sunt generate de un studiu amplu facut pe comportamentul userului – ce cauta, care este anatomia unei cautari, care este filtrul logic al unui potential client…

Rafinare cautare pe detalii tehnice

Rafinarea cautarii prin sugerarea unui traseu logic – “achizitia pantofilor sau a hainelor pornind de la marime sau latime” – este in realitate o cautare avansata construita pe impartirea clientului in 4 categorii majore(femei, barbati, fete, baieti) si puncte de interes(brand, stil, marime, culoare …).
Mai precis, un filtru dinamic, cu grad mare de uzabilitate, indiferent varsta sau sexul potentialului client.

Linia pe care se mizeaza – lucrurile sigure intr-un proces probabil de achizitie sunt cele cu caracter personal. Daca in privinta brand-ului, formei sau culorii sunt inca nesigur, stiu cat port, stiu pentru ce ii vreau si care este profilul piciorului meu(in cazul pantofilor)…

Cautari populare

Zona de cautari populare este construita pe acelasi tipar, rezultat al observatiei comportamentului userului, listing-ul afisat fiind mai degraba generalist, cu evidenta referire la parti generice ce populeaza magazinul.
Fiecare sugestie este insotita de o poza si o explicatie minimala, arhitectura fiind cea care atrage atentia. Termenii comuni des folositi in cautari capata un oarecare rol de tag -  fiind “imbogatiti” ulterior cu explicatii si poze.
Ex: bridal shoes(pantofi de mireasa) – termenul in sine nu este o categorie sau o subcategorie – ci mai degraba un tag – beneficiaza de poza relevanta si explicatie.

Rezultatul documentarii simpliste a termenilor populari este evident o conversie mai mare pe acea zona.

Cautare simpla

La baza, logica unui cumparator fara mare afinitate de brand, sau care iubeste o tipologie nu un nume, este simpla si traseul parcurs poate fi usor descris. Pentru a cumpara pantofi, mergi la raionul in cauza, alegi forma, culoarea … si apoi numarul.
Cum termenii folositi in sugestia default sunt desprinsi din procesul logic de mai sus, orice cautare simpla pe acestia va genera un listing general, defalcat pe scopul utilizarii si materialul folosit.
In esenta, se genereaza categorii formate pe preferintele utilizatorului, rezervandu-se in acelasi timp o coloana distincta pentru brand-uri populare si o mica arie pentru recomandari, cautari de brand si noutati.
Subsolul paginii este populat cu comentarii.

Zappos este un succes in primul rand datorita pasiunii pentru client si atitudine. Dincolo de marfa vandabila, politica de vazari(free shipping both ways), abordarea simplista plina de natural este cea care genereaza venituri.
Facut pentru omul mediu, consumator de produse de calitate, fara valente estetice exceptionale, zappos.com convinge prin firesc.
Si search-ul nu face rabat de la aceasta linie directoare fiind cu siguranta cel mai puternic tool al acestui celebru brand online.

tweet me

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

three-click rule: daca un vizitator nu isi poate atinge tinta din maxim 3 click-uri, cel mai probabil frustrarea pune stapanire pe el si paraseste website-ul/magazinul.

Manager de magazin online fiind, tiparul ideal pe care merita sa proiectezi arhitectura navigarii ar trebui sa foloseasca din plin regula celor trei click-uri. Aici, ultimul lucru pe care ti-l doresti este sa plictisesti userul si ca atare faci eforturi sa il duci cat mai repede acolo unde vrea sa ajunga.

Din nefericire, desi three-click rule se verifica si este 100% functionabila in termeni generali, este extrem de greu de aplicat in ecommerce. Mai precis, intr-un magazin ce ofera un nomenclator de peste 10.000 de produse, toate active, este imposibil sa poti face asta. In peste 90% din cazuri, sunt necesare mai mult de 3 click-uri pentru a ajunge in pagina de produs. Pentru ca exceptand cautarile focusate, numarul mare de intrari te obliga la aplicarea de multiple filtre si paginarea listing-ului. Te sileste sa inventezi, sa scalezi procesul, urmand o linie logica.

Grafic, scenariul “calatoriei” unui user catre product_page arata cam asa, zona de filtrare reprezentand scalabilitatea regulii mai sus mentionate.

In fata unui astfel de traseu posibil, iti pui intrebarea fireasca – parasesc userii magazinul daca nu ajung din 3 click-uri in pagina dorita? Ei bine, nu.
Cat timp fiecare pas al navigarii are un sens, semnalizand corect o etapa logica, fireasca, user-ul in cauza va merge mult mai departe de 3 click-uri.  E un risc asumat, cu argumente pro sustinute de realitate.
Asta nu inseamna ca regula in cauza trebuie ignorata. Nicidecum. Cu cat mai putine click-uri cu atat mai bine.

Si practica o dovedeste.
Spre exemplu, daca vreau sa imi cumpar un mouse Microsoft de la unul din etailerii pe care ii frecventez, trebuie sa fac urmatorii pasi.
emag: periferice > mouse > filtru microsoft > mouse ….
pcfun: periferice ( sau mai mult) > mouse > filtru microsoft > mouse ….

Sau, presupunand ca imi doresc o anumita carte… si nu stiu exact cum se numeste …
amazon: books > business & inventing > economics > carte …

In toate cele 3 cazuri, este un traseu normal si firesc, ma conformez si imi insusesc directia de navigare rapid. Numarul de click-uri este direct influentat de ce anume vreau sa gasesc si in cat timp reusesc sa fac acest lucru. Frustrarea vine din dificultatea procesului in sine, nicidecum din numarul de click-uri. Daca fiecare pas reprezinta o etapa logica si firesc imi este oferita o posibilitate de scurta distanta pana la locul dorit, eu ca user, sunt multumit.

Concluzia este ca three-click rule nu este ceva statutar si definitiv ci mai degraba un tipar de la care se porneste in “desenarea” procesului de navigare. Nu numarul de click-uri este problema reala pentru un user ordinar ci mai degraba daca reuseste sa gaseasca ceea ce cauta intr-un mod elegant, organizat, usor si relativ rapid.

tweet me

Si fie ca este vorba de de homepage, pagina de produs sau pagina de categorie, o reducere trebuie afisata si potentata. Are rolul de  transforma vizitatorul in cumparator si conversia poate fi uimitoare.
Trei argumente altereaza insa gradul de convingere al unei reduceri: pozitionare, aspect si natura.
Mai jos, cateva exemple despre cum folosesc diversi etaileri cele 4 argumente ale unei reduceri.

Amazon.com – in homepage sau listing de categorie, pretul dupa discount este afisat sub forma de text, intr-un cod de culoare diferit de cel standard, fontul fiind bolduit. Vizibilitatea este medie, reducerea nu sparge deloc “monotonia” listing-ului. Etailer-ul in cauza opteaza pentru afisarea si semnalizarea de reducere prin postarea pretului vechi taiat si amplasarea in proximitate a pretului nou, ignorand sistemul procentual. (37% in cazul de fata)

Vexio.ro – pretul dupa discount este afisat sub forma de text, cu un mic suport grafic pe fundal pentru potentare. Vizibilitatea este medie-crescuta. Sublinierea reducerii se face comparativ, prin afisarea pretului vechi taiat, intr-o culoare distinca si amplasarea in proximitate a pretului nou. Sistemul procentual este ignorat.

Emag.ro – pretul dupa discount este afisat sub forma de text, avand in imediata apropiere si procentul cu care se face reducerea. In plus, etailer-ul in cauza grupeaza toate amanuntele argumentului pret intr-o zona restransa, pentru o mai buna focalizare. Sublinierea reducerii se face comparativ, prin utilizarea de contrast si culoare. Taierea si estomparea pretului vechi impreuna cu afisarea procentului intr-o culoare aparte sunt suportul pentru noul pret.

Librarie.net – similar modelului amazon.com, reducerea este enuntata prin afisarea celor 2 preturi, vechi si nou si utilizarea codului de culoare. Sistemul procentual este ignorat.

Thesource.ca – pretul dupa discount este afisat sub forma de text, facandu-se uz de sistemul comparativ vechi-nou, cu suport grafic important pe fundal pentru ambele variante. Potentarea se face atat prin cod de culoare cat si prin folosirea marimii si naturii fontului. Sistemul procentual este ignorat.
Culorile sparg monotonia listing-ului, constrastul semnalizand perfect si atragand atentia vizitatorului asupra “etichetei” in cauza.

Logica unui tipar de afisare se masoara in productivitate. In cazul reducerii, in numar de vanzari ale produsului care face obiectul acestui proces.
Si orice vanzare este influentata de pozitionare, aspect si natura.
Pentru reducere asta inseamna – unde anume o afisez, in ce fel o afisez, o afisez ca numar rezultat sau/si procentual.

tweet me

Exista o regula nescrisa in design-ul web care spune ca jocul proportiilor in elementele folosite este extrem de important pentru usability si va conta foarte mult economia navigatiei. Incipient, la nivel de constructie, din motive de vizibilitate, marimea fontului ales pentru un titlu sau un pret este capitala.
Densitatea paginii, dinamica ei … si cam tot ce intra la capitolul grad de utilizare, vor fi influentate in primul rand de cele 2 elemente.
Asta pentru ca ele vor fi focusate incipient.
Si daca la momentul implementarii viziunea viitorului proprietar implica si notiunea de optimizare pentru motoarele de cautare, atunci unul din cei 2 mici “eroi” va trebui ajustat putin.
Cum? Urmariti cele 3 exemple de mai jos.

target.com
- titlu -  H1, font marime mare, pozitionare excelenta in de vizibilitate maxima, contrast puternic
- pret – font marime mare(22px), culoare puternica, contrast maxim, vizibilitate excelenta

amazon.com
- titlu – H1, font marime medie, pozitionare in cea mai buna zona de focus, vizibilitate buna, contrast puternic
- pret – font marime medie ce prin jocul proportiilor in raport cu ‘vecinii’ de rand iese in evidenta, culoare medie-puternica, contrast bun, vizibilitate excelenta

zappos.com
- titlu – H1, font marime medie-mica, pozitionare in coltul din stanga sus, in zona de maxima vizibilitate, constrast bun
- pret – font marime medie-mica ce prin pozitionare si lipsa de continut in jurul sau iese in evidenta, culoare puternica, vizibilitate excelenta

Toate cele 3 exemple sunt construite pe o reteta de succes, combinand argumentele seo cu usability. Nu in ultimul rand, design-ul simplist si aerisit potenteaza cele 2 caractere principale, dandu-le putere si greutate in economia paginii. Altfel spus, facandu-le imposibil de ratat.

Important de retinut este ca la reteta in cauza s-a ajuns dupa multiple teste. Ca si cum ai face un casting pentru Starsky si Hutch, incercand sa gasesti cei mai buni actori pentru a interpreta cele 2 roluri.
Orice ai construi, testeaza pe useri. Intai cu 5, apoi fa eforturi si mareste numarul. Difersifica profilul userului si testeaza din nou.
Rezultatul va fi definitoriu.

tweet me

Asadar, unde ma duci din cart?

Emag.ro – indiferent de traseul pe care am ajuns in pagina de produs pentru a putea comanda, butonul “Ma intorc in magazin” ma retrimite in homepage.
Butonul respecta codul de culori, este plasat intr-un loc de vizibilitate buna, fiind aproape imposibil de ratat de catre user.

Pc-fun.ro – indiferent de traseul pe care am ajuns in pagina de produs pentru a putea comanda, butonul “Continua cumparaturile” ma retrimite in homepage.
Butonul este plasat intr-o zona cu vizibilitate crescuta dar din motive lesne de inteles se renunta la codul de culoare, folosindu-se varianta b&w.

Marketonline – butonul lipseste, userul obisnuit putand folosi doar meniul de navigatie al site-ului sau butoanele browserului.

Vexio.ro – indiferent de traseul pe care am ajuns in pagina de produs pentru a putea comanda, butonul “Continua cumparaturile” ma retrimite in homepage.
Butonul(text) respecta codul de culori, este plasat intr-un loc de vizibilitate buna, iar fontul are marime inferioara celui uzual din motive usor de intuit.
In plus, in cazul Vexio optiunea de a vizita cart-ul de-a lungul sesiunii de cumparaturi ii apartine exclusiv userului, site-ul in cauza oferind facilitatea de a adauga in cos fara a “vizita” obligatoriu cosul de de cumparaturi.

Amazon.com – butonul lipseste, userul obisnuit putand vizita unul din multiplele produse recomandate in subsolul cosului. Etailer-ul in cauza prefera de redirectioneze userul pe o cale bine prestabilita afisand atat produse din istoria navigatiei userului in cauza precum si produse din aceeasi clasa/categorie. In plus, chiar sub tag-ul Shopping Cart este afisat un buton ce sugereaza vizitarea unei zone de produse similare.

Target.com – prefera sa sugereze directia in care ar putea naviga userul, oferind multiple optiuni printre care se numara homepage, o zona de produse similare sau o zona de oferte speciale.

Exemplele de mai sus nu sunt intamplator selectionate. Toate sunt modele de succes intr-un fel sau altul si subliniaza diverse abordari ale arhitecturii unui magazin online.
Zona de cart este una sensibila, in care se poate profita enorm de mult dar se si poate gresi. Fiecare model ales se bazeaza pe observarea obiectiva si atenta a nisei in cauza si implementarea ca atare.
Subiectiv vorbind, eu nu vad ratiunea transportarii userului in cart(un pas in plus), atata timp cat ii poti comunica printr-un popup (rezident pe ecran 10sec.) ca a adaugat un produs in cos. Este o parere bazata pe argumente logice la fel ca si antiteza ei. Depinde de abordare.

Ideea principala este insa ca odata ce ai hotarat sa trimiti cumparatorul in cart, ar fi bine sa si stii ce anume ii dai mai departe, incotro il trimiti.
Orice operatiune te decizi sa implementezi in timpul procesului de cumparare afecteaza uzabilitatea magazinului tau si acesta e punctul de la care trebuie sa pornesti.

tweet me

La nivel de start-up, structura unui ecommerce ar trebui sa fie ridicata pe cel putin in 5 componente distincte: website, promovare, produse, client service & logistica si contabilitate.

Fiecare element este de fapt o suma(mai mult sau mai putin vizibila) a operatiunilor executate in interiorul unui magazin online, cu o restructurare voita a fluxului. Spre exemplu definitia de vanzare/sales dep. a fost inclusa in componenta client service pe motiv de optimizare iar cea de stoc a fost exclusa total fiind vorba de un start-up.
Departamental elementele pot migra intre componente cu buna stiinta, fiind la indemana oricarui manager sa isi construiasca propriul model.
Totusi, la nivel de pornire, cele 5 elemente de mai sus sunt mandatorii si pe ele trebuie pus accentul daca doresti sa construiesti un ecommerce.
Dupa ce l-ai pornit … sky is the limit!

tweet me

Prima pagina a unui magazin online este vitrina, punctul de plecare al relatiei cu potentialul cumparator. Orice imbunatatire a acestei zone prin evidentierea elementelor cheie ii va creste gradul de utilizare si implicit valoarea business-ului.

La prima vedere, sa construiesti prima pagina a unui ecommerce este usor. Asa ar raspunde, poate 70% din managerii de astfel de proiecte daca i-ai suna.
Nimic mai corect, caci aparent daca ai o structura bine definita, e la indemana sa afisezi vandabilul, promotiile sau un program de fidelizare in zona cea mai fierbinte – mare, vizibil si eventual indeajuns de colorat incat sa indemne userul sa faca ceva…
Problema majora in ceea ce priveste gradul de utilizare este ca oferta ta este imensa si incluzand cate un mic preview la sectiunile importante, vei sfarsi prin a avea o insiruire verticala de produse, promotii, comentarii …samd.
E ca si cum te-ai uita la o vitrina inalta de 5m.

Si fie ca optezi pentru un homepage bazat in mare parte pe vizual sau pe altul ce pune accent pe listing-uri din arii bine delimitate, in termeni de usability, constructia primei pagini ar trebui sa faca uz de elementele de mai jos, tinand cont in acelasi timp ca un user rareori citeste mai mult de 20% din textul afisat pe prima pagina, zonele intens focusate  ‘desenand’ un tipar in F.

homepage usability

• logo-ul este asezat intr-o zona distincta, de maxima vizibilitate
• motto-ul este afisat in titlul paginii
• motorul de cautare este vizibil si indeajuns de mare pentru a cuprinde minim 25 de caractere
• categoriile sunt vizibile, structura arborescenta fiind evidentiata signalistic
• ofertele importante sunt afisate in zona de maxima vizibilitate cu mesajul cheie livrat in clar
• tot continutul dinamic este focalizat pe definitia de call to action
• linkurile text incep cu un cuvant cheie
• imaginile folosite ca vector de comunicare sunt relevante (recomandat este sa folosesti imagini din viata reala a unui produs)
• proportia dintre imagine si text este relativ egala
• numarul de fonturi folosite este maxim 3
• numarul de culori folosite este de maxim 3
• continutul este afisat pe verticala in ordinea importantei
• toata informatia corporatista este grupata intr-o singura zona(contact, despre…)
• design-ul are o tenta explorativa, incurajand userul sa navigheze
• ansamblul nu este aglomerat si reprezinta o previzualizare a continutului
• navigarea este intuitiva, userul putand sa-si dea seama rapid cum ajunge in zona dorita
• homepage nu inseamna pagina de categorie, deci listing-ul de produse ar trebui sa fie rezonabil [3-4 din fiecare categorie aleasa este suficient]
• elementele de securitate (daca exista) sunt afisate
• dimensiunea redusa permite o incarcare rapida
• coordonatele de contact direct sunt vizibile, afisate intr-o zona cu vizibilitate buna

Lista de mai sus este doar un punct de start pentru tot ce inseamna homepage usability. Realitatea cu siguranta cere mai mult, asa ca nu te rezuma la a decora sau a umple prima pagina cu o insiruire de produse.

tweet me

Si chiar daca design-ul are un rol major in estetica raftului, functionalitatea este cea care de cele mai multe ori iti pastreaza vizitatorul pe site, elementele cheie din pagina de categorie fiind cele care cresc gradul de utilizare.

• titlu pagina – titlul paginii trebuie sa fie scurt si concis, reflectand exact numele categoriei – o topica excelenta ar fi {nume categorie: nume magazin}
• numar de produse pe pagina – numarul de produse afisat in mod implicit; intrucat mai toate conexiunile internet din ziua de azi depasesc un anumit standard, modul ideal de afisare ar trebui sa contina cat mai multe produse pe pagina
• imagine – clara, indeajuns de mare {100×100px, 200×200px} pentru a permite o vizualizare decenta la nivel de detaliu; un mic script java de preview poate fi un instrument extrem de util
• pret – pretul trebuie sa fie clar, vizibil, de marime medie si culoare contrastanta; atunci cand este cazul, aceasta este zona in care se va afisa si pretul precedent sau discount-ul
• adauga in cos – desi se prezinta ca un element cheie, nu este imperativa folosirea butonului in cauza; totusi, in cazul utilizatorilor focusati, este un plus binevenit
• sortare dupa pret – posibilitatea de sortare a produselor din pagina in functie de pretul afisat – cum pretul este poate cel mai important amanunt urmarit de potentialul cumparator, concluzia fireasca este sa ii dai posibilitatea aranjarii in ordine crescatoare sau descrescatoare a produselor din categorie
• sortare dupa gradul de noutate – posibilitate de sortare a produselor dupa data introducerii – peste 50% din vizitatorii magazinului tau sunt cumparatori pasivi; rasfoiesc continutul cautand deal-uri de ultim minut, oferte speciale si nu in ultimul rand noutati
• sortare dupa rating – sortare dupa nota obtinuta – in cazul in care ai implementat un sistem de notare a produselor, sortarea dupa rating poate fi un instrument de marketing extrem de folositor, multi dintre potentialii cumparatorii asociindu-se unui  comportament de grup
• sortare alfabetica – sortare alfabetica a produselor – desi aparent inutila, este uimitor cati de multi vizitatori folosesc acest mic tool
• filtrare dupa brand – filtrarea produselor in functie de brandul pe care il reprezinta – un shortcut util pentru cei care au o afinitati pentru o marca anume
• filtrare dupa atribute – filtrarea produselor in functie de atributele detinute – marime, culoare …etc. ; folosind acest filtru ii scurtezi cumparatorului distanta dintre dorinta si achizitie – desi se materializeaza cu precadere in anumite nise, majoritatea cumparaturilor sunt finalizate pe astfel de atribute; probabil cel mai important filtru pentru un magazin online de dimensiune medie sau mare
• breadcrumb – sistem de navigatie ce indica exact locul in care se afla user-ul
• vezi toate produsele – posibilitatea de a vizualiza toate produsele intr-o singura pagina; nu stiu daca este o dorinta universala, dar eu unul sunt inamicul declarat al next-urilor sau al numerelor de pagini; prefer sa astept 5 secunde in plus dar sa am totul intr-o pagina
• vezi X produse pe pagina – posibilitatea de a vizualiza un numar finit de produse intr-o pagina
• navigare paginata – sistem de impartire si afisare a produselor in pagini – daca optezi pentru un numar finit de produse pe o pagina, un element cheie este afisarea intregului sistem de navigatie(numerele de pagini), excluzand butoanele de inainte-inapoi
• pozitionare optiuni de filtrare – afisarea filtrelor atat in partea de sus a paginii de categorie cat si in zona apropiata footer-ului
• noutati – prezentarea noutatilor pentru categoria in cauza – pe langa semnalizarea nominala la nivel de produs, un bun procedeu cu rezultate excelente este crearea unei zone speciale, de noutati, in partea de sus a listing-ului
• cel mai bine vandut – prezentarea topului de vanzari pentru categoria in cauza – la fel ca in cazul noutatilor, afisarea celor mai bine vandute produse nu poate fi decat un plus de marketing
• recomandari – recomandari de produse – deloc de neglijat, o zona concreta de recomandari bazate pe review-uri profesionist construite poate da un boost vanzarilor

Combinand toate elementele cheie de mai sus cu un design estetic, orientat catre o navigare cat mai usoara, vei creste substantial uzabilitatea paginii de categorie, dinamizand si scurtand drumul catre cosul de cumparaturi.

tweet me