Bannerele rotative în magazinele online

Bannerele rotative (caruselele de imagini) sunt destul de folosite în magazinele online de la noi. Administratorii de e-shop-uri le folosesc pentru a comunica oferte, promoții sau alte informații importante pe care doresc să le scoată în evidență. 

Aceast articol analizează de ce caruselele de imagini sunt adesea ineficiente la conversia vizitatorilor în clienți și ce poți face pentru a îmbunătăți experiența utilizatorilor în magazinul tău online.

Fashioup.ro – Banner cu rotație automată pe mobile

Popularitatea bannerelor rotative este dată în primul rând de mentalitatea răspândită că Mai mult înseamnă mai bine. Într-o perioadă, au devenit foarte utilizate, înlocuind bannerele statice folosite până în acel moment. 

În prezent, administratorii de magazine online au început să renunțe la bannerele rotative din cauză că nu sunt atât de eficiente precum par. Din contră, chiar pot încurca sau frustra potențialul client, în special cele cu rotație automată.

În general, caruselele:

  • Se găsesc pe pagina principală, în prima parte a ecranului (above-the-fold). Ocupă destul de mult spațiu din el. 
  • Includ mai multe bannere (imagini cu text), afișate pe rând
  • Oferă userului posibilitatea să navigheze de la un banner la altul

Unele carusele se rotesc automat, ceea ce înseamnă că se trece de la un slide la altul, fără ca userul să facă vreo acțiune. 

Avantajul pe care îl au este că pot cuprinde mai multe informații și oferte, fără a ocupa mult spațiu. Cu toate acestea, deși ai crede că informația comunicată pe ele va fi văzută de majoritatea vizitatorilor acelei pagini, lucrurile nu stau chiar așa. 

Vei afla, în cele ce urmează, ce probleme pot cauza bannerele rotative și cum trebuie implementate pentru a avea performanțe ok.

Sunt eficiente bannerele rotative?

În cazul unui studiu care a studiat interacțiunea cu bannerele rotative, derulat de universitatea Notre-Dame, doar 1% din vizitatorii unui site au dat click pe bannerul rotativ static. Dintre aceste clickuri, 84% au fost date pe bannerul de pe prima poziție. 

O rată de interacțiune mult sub așteptări, nu? 

Rată interacțiune pentru cei 1% care au dat click pe bannerul rotativ. Prima poziție are majoritatea clickurilor.

În cazul bannerelor cu rotație automată, interacțiunea a fost mai ridicată (8.8%), iar primul slide a primit 40% din clickuri. Numărul de click-uri a scăzut progresiv pe măsura ce pozițiile au avansat. 

Dacă te gândești să implementezi astfel de bannere la tine în magazin, e bine să știi că atât cele rotative statice, cât și cele cu rotație automată, aduc o serie de riscuri și probleme.

Numeroase studii de uzabilitate au demonstrat că, adesea, conținutul afișat pe bannerele rotative, mai ales pe cele care se rotesc singure, nu este văzut de utilizatori. 

Norman Nielsen Group

Mai mult, bannerele rotative nu ajută la conversie și suferă la partea de interacțiune. 

Bannerele cu rotație automată 

În foarte multe cazuri, bannerele se rotesc singure, fără ca utilizatorul să interacționeze cu ele. Prin această implementare, administratorii magazinelor online își doresc să afișeze cât mai multe informații sau oferte potențialilor clienți. Din păcate, tocmai aceasta implementare poate cauza probleme și determina pe utilizatori să nu observe informații importante. 

Banner cu rotație automată pe mobile – Roxannes.ro

De exemplu, un studiu de uzabilitate realizat de Jacob Nielsen a avut o sarcină simplă pentru vizitator. Acesta trebuia să determine dacă există o promoție activă pentru mașini de spălat în magazinul online al Siemens. Oferta era foarte vizibilă pe bannerul cu rotație automată de pe homepage. Cu toate astea, după ce a petrecut destul de mult timp pe site căutând oferta, utilizatorul a ajuns la concluzia ca nu există o asemenea promoție. Conținutul din bannerul principal a fost ignorat total. 

Ce probleme creează bannerele cu rotație automată?

Bannerele cu rotire automată reduc vizibilitatea conținutului. Studiile Nielsen de eye-tracking arată că doar 27% dintre utilizatori se uită peste reclamele animate. Așadar, dacă bannerul tău rotativ seamănă cu o reclamă animată, șansele sunt ca userii să sară rapid peste el, fără să vadă vreo informație. 

Asta se întâmplă deoarece userii au banner blindness. Mai exact, din cauză că au fost bombardați ani la rândul de reclame, au învățat să le ignore și nu le mai observă. 

Bannerele cu rotație automată pe mobil oferă un control redus și enervează utilizatorii. Chiar dacă pe desktop poți opri rotirea automată atunci când userul ajunge cu cursorul peste banner, pe mobil nu ai această opțiune. 

Banner cu rotație automată pe pagina de categorie, pe varianta mobile – Notino.ro

Utilizatorii sunt iritați de elementele care se mișcă singure și asupra cărora nu au control. O regula de aur în UX este că utilizatorul trebuie să se simtă în permanență în control. 

Utilizatorii nu au timp să citească informația de pe banner. Rotirea automată va face ca un banner să fie vizibil doar câteva secunde. Prin urmare, unii utilizatori nu vor apuca să citească ce scrie pe el. 

Dacă nu lași suficient timp între slide-uri, utilizatorul nu are timp să citească sau dă click aiurea. Cred că ți s-a întâmplat și ție să vezi cu coada ochiului o ofertă pe un banner rotativ, și chiar în momentul în care vrei să dai click pe ea, se schimbă bannerul și aterizezi pe altă ofertă. Asta înseamnă că ai ajuns pe o pagină unde nu ți-ai dorit și a fost necesar să faci o acțiune în plus să ajungi de unde ai plecat. 

Bannerele rotative statice (tip carusel)

În cazul acestor bannere, utilizatorul este în controlul navigației. Dacă doresc să vadă o altă ofertă, vizitatorii pot trece de la un slide la altul, având opțiuni de navigare. Deși sunt o opțiune mai puțin disruptivă, vizibilitatea informației de pe bannerele care nu sunt pe prima poziție este foarte mică. 

Trebuie să ții cont că unele bannere nu vor fi văzute deloc. Userii scrolează rapid peste imaginile mari, astfel e posibil sa vadă doar primul banner, sau poate nici pe acesta.

Norman Nielsen Group

Alternativa la bannerele rotative –  Bannerele statice 

Deși caruselul de imagini este varianta mai modernă a clasicelor bannere statice, adesea acestea din urmă sunt o alternativă mai bună deoarece:

  • Conținutul este vizibil în permanentă
  • Designerii și oamenii de marketing vor fi mai atenți la ce informație comunică pe aceste bannere încât să aibă un impact
  • Nu încurca utilizatorii la navigare 
  • Userul nu este copleșit de multitudinea de alegeri și se poate concentra pe un singur mesaj
Elefant.ro are un banner principal static care promovează campania actuală. Acesta este vizibil în permanență.

Pentru a avea performanțe mai bune, scoate în evidență pe acest banner campania sau promoția pe care o ai în vigoare. Dacă ai mai multe campanii care se desfășoară simultan, alege una care se adresează majorității vizitatorilor. O altă variantă este să scoți în evidență cele mai populare categorii de produse. 

Orice ai alege să afișezi, asigură-te că:

  • Banner-ul este în ton cu designul site-ului
  • Informația este lizibilă
  • Butonul de call to action este clar și evident

Cum să implementezi corect un banner rotativ din punct de vedere al experienței utilizatorului

Dacă totuși varianta cu bannerul static nu te mulțumește și vrei să implementezi un banner rotativ în magazinul tău online, ține cont de următoarele recomandări:

1. Evită bannerele cu rotație automată pe dispozitivele mobile  

Banner rotativ static pe Notino.ro. Chiar dacă pe desktop, după interacțiune pornește rotația automată, pe mobil bannerul este static, cu control manual al navigației.

Pe device-urile mobile este dificil să îți dai seama de intenția utilizatorului. Nu există hover, userul nu navighează cu mouse-ul. Așadar, nu poate opri rotația când dorește, ceea ce creează frustrare. În plus, vizibilitatea bannerelor este redusă, după cum am explicat mai sus. 

2. Ordonează slide-urile după ordinea priorității

Deoarece primul banner este cel mai vizibil, conținutul important e bine sa fie afișat aici. Acesta va fi observat de mai mulți oameni decat slide-urile ulterioare, chiar dacă bannerul se rotește automat.  

3. Comunică informațiile din carusel și în alte secțiuni ale site-ului

Notino.ro – Informațiile importante din banner sunt comunicate și în alte secțiuni alte site-ului

Deoarece mulți oameni nu observă conținutul de pe bannerele rotative, informațiile importante comunicate acolo trebuie să fie accesibile și în alte secțiuni ale site-ului. De exemplu, nu comunica niciodată că transportul este gratuit doar pe un banner rotativ, fără să afișezi acest beneficiu și în altă parte. În general, e mai sigur să pleci de la premisa ca majoritatea oamenilor nu vor vedea informația din bannerele de pe homepage.

Beneficiul transportului gratuit comunicat în bannerul rotativ static de pe homepage este comunicat și pe pagina produsului – Notino.ro

Unii utilizatori nici nu așteaptă să se încarce pagina și încep deja să caute produsele care îi interesează. Asta înseamnă că deschid imediat meniul sau bara de căutare și astfel nu mai văd deloc bannerele de pe pagina principală. 

4. Elementele de navigație pentru bannerul rotativ trebuie să fie vizibile și clare

Dacă folosești săgeți sau bulleturi pentru controlul manual al navigației, asigură-te că acestea sunt vizibile și nu au un design prea discret. 

Chiar dacă folosești un design discret care indică slide-urile, nu renunța la săgeți. Acestea sunt mai ușor de înțeles de toți utilizatorii, chiar și de cei cu mai puțină experiența de navigare în magazinele online. 

Cropp.com – bannerul cu rotație automată (cu 6 slide-uri) nu are navigație intuitivă. Pe mobile rotația automată nu este oprită.

Pentru a încuraja navigarea și interacțiunea cu bannerul rotativ, poți arată câte puțin din bannerul ce urmează.

5. Asigură-te că informația este lizibilă, chiar și pe mobil 

O problemă des întâlnită în rândul magazinelor online este că se folosește același banner atât de desktop, cât și pe mobil. De cele mai multe ori acesta nu este realizat cu device-urile mobile în minte. Prin urmare, textul ajunge să fie prea mic sau înghesuit și nu este lizibil de pe telefoanele mobile. 

Ideal este să încarci bannere diferite pentru desktop și mobil, fiecare fiind optimizat pentru device-ul unde va fi afișat. De asemenea, link-urile sau butoanele de pe banner trebuie să fie destul de mari și să se discearnă de imaginea din fundal. 

6. Dacă bannerul este cu rotație automată, oprește rotația când userul interacționează cu el

Atunci când utilizatorul începe să interacționeze cu bannerul și preia controlul navigaței, rotația automată nu-și mai are rostul. Ba mai mult, chiar încurcă și frustrează userul dacă nu este oprită. Atunci când vizitatorul este cu mouse-ul peste banner, pune pe pauză rotația automată.

7. Evită fragmentarea mesajului pe mai multe bannere

Dacă informațiile din slide-urile bannerelor rotative au sens doar dacă sunt văzute toate și userii văd doar primul sau doar unul dintre ele, pot interpreta greșit ceea ce li se comunică. 

Designerii și oamenii de marketing sunt creativi și uneori folosesc aceste bannere pentru a comunica o poveste. Dacă aceasta poveste are logică doar dacă un user parcurge toate bannerele, atunci există o problemă. Sunt foarte puțini cei care vor parcurge conținutul de pe fiecare slide, cei mai mulți îl vor vedea doar pe primul sau nici pe acesta. 

8. Testează timpul de rotație

În cazul în care folosești bannere care se rotesc singure, durata în care un slide este vizibil trebuie să fie suficientă încât să permită citirea textului. O regula bună este o secundă pentru 3 cuvinte. 

Concluzie

✔️ cartersoshkosh.ro – afișează un singur banner principal static cu campania în vigoare

Deși aparent bannerele rotative par o soluție bună pentru a comunica mai multe oferte fără a ocupă mult spațiu, ele sunt adesea ineficiente în a face cunoscut mesajul. 

Personal, recomand evitarea bannerelor cu rotație automată, deoarece pot cauza multe probleme dacă nu sunt implementate corect. Pe mobil sunt un adevărat dezastru din punct de vedere al experienței utilizatorului. 

Dacă totuși îți dorești să testezi astfel de bannere pe site-ul tău, oprește rotație automată pe dispozitivele mobile și ține cont de recomandările de implementare de mai sus. 

Ca încheiere ține minte următorul sfat: Keep it simple și nu complica lucrurile unde nu e cazul. 

Avatar
Autor

Oana Chiriac este Marketing Manager la Blugento și activează în zona de eCommerce & marketing digital de peste 8 ani. În prezent, oferă și consultanță pentru magazinele online în vederea optimizării UX și a ratei de conversie.

Scrie un comentariu