• Ecommerce și designul interfeței cu utilizatorul (UI)

Ecommerce UI Design: Cum să creezi pagini de colecție de produse captivante (6 tactici aplicabile)

  • Felix Rose-Collins
  • 7 min read
Ecommerce UI Design: Cum să creezi pagini de colecție de produse captivante (6 tactici aplicabile)

Introducere

Paginile de colecție de produse sunt, din păcate, adesea trecute cu vederea atât de designeri, cât și de copywriteri. În timp ce se depun multe eforturi pentru a crea pagini de produs și pagini de destinație extrem de atrăgătoare, paginile de colecție sunt lăsate deoparte și rămân jalnic de neinteresante.

Să analizăm șase modalități practice de a crea pagini de colecție de produse care să atragă, să inspire acțiune și să conducă traficul și conversiile.

Asigurați-vă că fotografia principală a produsului este atrăgătoare

Primul obstacol de design pe care trebuie să-l depășească paginile de colecție de produse este să se asigure că fotografia principală este atractivă și interesantă. Dacă nu captați atenția cumpărătorului imediat după ce a aterizat sau după câteva derulări, probabil că l-ați pierdut.

Începeți prin a lua în considerare tot ceea ce știți despre publicul țintă. Ce le place? De ce le plac produsele dumneavoastră? Ce anume le place la produsele dumneavoastră? Cum puteți pune aceste caracteristici în prim-plan?

Apoi, începeți să vă gândiți la aspect. Imaginile trebuie să fie mărite? Au nevoie de un fundal vibrant sau neutru? Câte produse ar trebui să arătați la rând?

În mod ideal, veți testa mai multe variante de design A/B. Uneori, cele mai mici schimbări pot face cea mai mare diferență.

Uită-te la această pagină de colectare a hainelor pentru copii. Produsele în sine sunt drăguțe și atrăgătoare, așa că nu este nevoie să fie afișate într-un mod deosebit de inedit. Eticheta "nou sosit" diferențiază clar anumite produse și se asigură că cumpărătorul le observă.

Faceți cunoștință cu Ranktracker

Platforma All-in-One pentru un SEO eficient

În spatele fiecărei afaceri de succes se află o campanie SEO puternică. Dar, având în vedere că există nenumărate instrumente și tehnici de optimizare din care puteți alege, poate fi greu să știți de unde să începeți. Ei bine, nu vă mai temeți, pentru că am exact ceea ce vă poate ajuta. Vă prezentăm platforma Ranktracker all-in-one pentru un SEO eficient

Am deschis în sfârșit înregistrarea la Ranktracker absolut gratuit!

Creați un cont gratuit

Sau Conectați-vă folosind acreditările dvs.

Așezarea unor astfel de produse pe un fundal neutru este o modalitate excelentă de a le face să iasă în evidență.

mamasandpapas

Sursa: mamasandpapas.com

O altă modalitate de a face ca fotografia principală de pe o pagină de colecție să fie atrăgătoare este de a arăta articolul în uz. Dacă vă uitați la această pagină de sere de tip "lean-to-greenhouses", veți vedea cum acest lucru poate fi realizat fără efort. Fiecare imagine este complet diferită, într-o paletă de culori diferită și prezintă articolul dintr-un unghi diferit. Au făcut să fie ușor să vă imaginați produsul în propria casă.

greenhouseemporium

Sursa: greenhouseemporium.com

Faceți cunoștință cu Ranktracker

Platforma All-in-One pentru un SEO eficient

În spatele fiecărei afaceri de succes se află o campanie SEO puternică. Dar, având în vedere că există nenumărate instrumente și tehnici de optimizare din care puteți alege, poate fi greu să știți de unde să începeți. Ei bine, nu vă mai temeți, pentru că am exact ceea ce vă poate ajuta. Vă prezentăm platforma Ranktracker all-in-one pentru un SEO eficient

Am deschis în sfârșit înregistrarea la Ranktracker absolut gratuit!

Creați un cont gratuit

Sau Conectați-vă folosind acreditările dvs.

Aceasta este o tactică foarte bună dacă doriți să facilitați clientului să vadă cum va arăta produsul final și să îl ajutați să își imagineze un întreg stil de viață.

Asigurați-vă că filtrele nu sunt prea distractive

Pentru a fi utile, paginile de colecție au nevoie de filtre. Nu se poate aștepta ca clienții să navigheze prin pagini și pagini de produse pentru a găsi un anumit articol. Este puțin probabil ca aceștia să fie conștienți de amploarea ofertei dvs. și este posibil să nu aibă timp pentru a face cumpărături îndelungate.

Filtrele ar trebui să vă clasifice produsele în moduri semnificative. Prețul, dimensiunea și materialul sunt doar câteva dintre cele mai frecvente filtre care pot fi utilizate. Luați în considerare produsele în sine și care sunt factorii de diferențiere.

Cu cât produsul este mai complex, cu atât mai multe filtre ar trebui să existe. De asemenea, puteți oferi filtre utile, cum ar fi "nu pentru începători" sau "numai pentru profesioniști", dacă acestea îi vor ajuta pe clienți să selecteze articolul potrivit.

De asemenea, filtrele nu ar trebui să distragă prea mult atenția. Ar trebui să fie ușor de accesat, dar să nu ocupe o mare parte din pagină și să nu interfereze în niciun fel cu experiența de navigare.

Aruncați o privire la această pagină de colecții de plăci de terase compozite. Filtrele sunt furnizate în stânga și găsesc echilibrul potrivit între a fi ușor de observat și a nu încurca. Rețineți că acestea sunt, de asemenea, pliabile, astfel încât cantitatea mare de informații nu va copleși un client.

De asemenea, acestea au fost ordonate într-un mod logic - majoritatea oamenilor vor dori să restrângă culorile și materialele înainte de a intra în detalii mai specifice, cum ar fi dimensiunea.

Ovaeda

Sursa: Ovaeda.com

Puteți implementa cu ușurință o soluție similară care nu va ocupa mult spațiu, dar care va îmbunătăți semnificativ experiența utilizatorului și va permite clienților să își restrângă alegerea în câteva secunde.

Afișați descrieri scurte ale produselor la trecerea peste

Gândiți-vă la paginile de colectare a produselor ca la un centru de informații. Aici sunt afișate toate produsele dintr-o anumită categorie. Cu cât sunteți mai util, cu atât este mai probabil ca un client să convertească.

Încercați să nu-i faceți pe cumpărători să dea clic pe un articol, să citească descrierea produsului și apoi să dea clic înapoi. Aceștia trebuie să-și piardă timpul derulând pentru a afla de unde au rămas. Sau, dacă continuă să deschidă produse în file noi, în curând vor fi copleșiți de numărul de articole pe care încearcă să le compare.

Cu cât puteți afișa mai multe informații utile pe pagina de colectare, cu atât mai bine. Prin adăugarea unei descrieri simple și scurte a produsului atunci când cineva trece cu mouse-ul peste un produs, puteți ajuta clienții să compare produsele chiar în acel moment.

Această pagină de colectare a colecției de calciu bariatric face o treabă excelentă. Aveți o scurtă descriere a produsului, care vă spune ce vitamine și minerale puteți găsi în produs. Beneficiile sunt, de asemenea, evidențiate: are un gust grozav, promovează sănătatea imunitară și așa mai departe.

Bariatricfusion

_Sursa: Bariatricfusion.com _

Observați cât de scurte sunt descrierile. Le puteți citi în câteva secunde și puteți continua să comparați produsele.

Atunci când aplicați această tactică, luați în considerare cu atenție descrierea de pe ecran. Aceasta nu trebuie să fie aceeași cu descrierea de pe pagina produsului. Aceasta ar trebui să discute pe scurt beneficiile sau caracteristicile cheie ale articolului, diferențiindu-l în mod clar de celelalte produse de pe pagină.

Concentrează-te mai degrabă pe informare decât pe promovarea unei vânzări. Clienții sunt mai predispuși să convertească dacă sunt încrezători în alegerea lor.

Aruncați în unele dovezi sociale

Dovada socială este un instrument excelent pentru a face paginile mai atractive și mai utile. Acestea le vor arăta clienților dvs. că sunteți de încredere, de încredere și că produsele dvs. sunt de bună calitate. Acest lucru este deosebit de important pentru clienții noi care nu sunt încă familiarizați cu marca dvs. și care pot fi mai ezitanți în a se converti.

Dovada socială se prezintă sub mai multe forme, dar ratingurile cu stele sunt cele mai utile dovezi pe care le puteți pune pe paginile de colectare. Acestea vor servi mai multor scopuri:

  • să evalueze calitatea produsului individual
  • arată câți clienți au cumpărat-o și și-au făcut timp să o analizeze
  • ajutați clienții să ia decizii de cumpărare mai rapide

Clasificarea prin stele este ușor de încorporat. Consultați pagina colecției de palete de farduri de ochi de la Sephora. Acestea sunt ușor de reperat și afișează toate informațiile relevante: câte recenzii există și care este satisfacția generală față de articol. De asemenea, puteți vedea clar că una dintre aceste palete este mult mai populară decât celelalte.

sephora

Sursa: sephora.com

Un alt semnal excelent de dovadă socială pe care să îl încorporați în paginile de colecție sunt notificările de vânzare în timp real.

Consultați această pagină de autocolante personalizate pentru laptop. În timp ce navigați, un pop-up discret apare în colțul din dreapta jos, care vă spune cine a făcut o achiziție pe site, de unde este și ce a cumpărat.

Aceasta este o modalitate excelentă de a adăuga un pic de FOMO la tacticile dvs. de marketing. Clienților li se vor arăta alte articole, articole care sunt în mod clar populare pentru că cineva tocmai le-a cumpărat. De asemenea, va trimite semnale puternice de încredere și credibilitate.

Asigurați-vă că pop-up-ul nu este prea ostentativ sau că nu distrage atenția. De asemenea, încercați să le spațiați astfel încât să nu înceapă să deranjeze cumpărătorii.

vinylstatus

Sursa: vinylstatus.com

Afișați mai multe vizualizări de produse

Cu cât clienții pot vedea mai bine un produs, cu atât cresc șansele ca aceștia să convertească. Cu cât afișați mai multe imagini ale unui articol pe pagina de colecție, cu atât mai mult angajament și interes veți genera.

Puteți încorpora mai mult de o imagine în câteva moduri. Puteți permite derularea printr-o galerie de produse sau puteți afișa o fotografie diferită la trecerea pe ecran.

Această pagină de îmbrăcăminte pentru băieți de la H&M prezintă o galerie de produse care poate fi derulată. Puteți vedea toate fotografiile care sunt prezentate pe pagina individuală a produsului direct din pagina colecției, astfel încât nu trebuie să dați click în altă parte.

hm

Sursa:hm.com

Dacă preferați să afișați doar o fotografie diferită la trecerea peste, consultați această pagină de colecție de îmbrăcăminte de plajă pentru femei pentru inspirație. Brandul arată în mod inteligent spatele articolului la hover, astfel încât să puteți vedea întreaga piesă fără a fi nevoie să deschideți o altă pagină. Aceasta este o tactică excelentă pentru mărcile de îmbrăcăminte.

simplybeach

Sursa:simplybeach.com

Atunci când alegeți dacă doriți să adăugați o galerie sau o fotografie de tip hover, luați în considerare natura articolului. Câte fotografii trebuie să vadă un cumpărător? Și care ar trebui să fie aceste fotografii?

Puteți arăta produsul utilizat sau puteți prezenta fotografiile clienților, dacă acestea sunt mai susceptibile de a atrage un nou cumpărător. Puteți arăta articolul de aproape sau chiar să prezentați specificațiile produsului.

Afișarea articolelor vizualizate recent

Recomandările de produse sunt, de obicei, rezervate paginilor de produse individuale. Acesta este, de asemenea, locul în care mărcile vor plasa caruselul "vizionat recent".

Cu toate acestea, dacă îl afișați pe pagina colecției, puteți să le reamintiți ușor clienților articolele pe care le-au văzut și le-au apreciat deja. Economisiți-le timpul și efortul de a se întoarce prin istoricul lor de a avea numeroase file deschise în același timp.

Consultați pagina de pantofi de alergare pentru bărbați Adidas. Imediat ce vizualizați un produs individual, veți avea o funcție "recent vizualizat" în partea de jos a paginii colecției, ceea ce vă ajută să nu pierdeți din vedere articolele care v-au stârnit interesul.

adidas

Faceți cunoștință cu Ranktracker

Platforma All-in-One pentru un SEO eficient

În spatele fiecărei afaceri de succes se află o campanie SEO puternică. Dar, având în vedere că există nenumărate instrumente și tehnici de optimizare din care puteți alege, poate fi greu să știți de unde să începeți. Ei bine, nu vă mai temeți, pentru că am exact ceea ce vă poate ajuta. Vă prezentăm platforma Ranktracker all-in-one pentru un SEO eficient

Am deschis în sfârșit înregistrarea la Ranktracker absolut gratuit!

Creați un cont gratuit

Sau Conectați-vă folosind acreditările dvs.

Sursa: adidas.com

Același carusel este prezentat și pe paginile individuale ale produselor, ceea ce permite o experiență de navigare personalizată.

De asemenea, puteți recomanda produse clienților pe baza articolelor pe care le-au vizualizat, la fel ca pe paginile de produse.

Încheiere

Luați în considerare care dintre aceste tactici de proiectare a paginilor de colecție de produse puteți implementa pe propriile pagini. Poate că toate cele șase pot juca un rol în creșterea ratelor dvs. de conversie.

Întotdeauna aveți în vedere natura produsului (produselor) dumneavoastră și punctele nevralgice ale publicului dumneavoastră. Ce caută aceștia și cum îi pot ajuta eforturile dumneavoastră de design să găsească acel lucru?

Felix Rose-Collins

Felix Rose-Collins

Ranktracker's CEO/CMO & Co-founder

Felix Rose-Collins is the Co-founder and CEO/CMO of Ranktracker. With over 15 years of SEO experience, he has single-handedly scaled the Ranktracker site to over 500,000 monthly visits, with 390,000 of these stemming from organic searches each month.

Începeți să utilizați Ranktracker... Gratuit!

Aflați ce împiedică site-ul dvs. să se claseze.

Creați un cont gratuit

Sau Conectați-vă folosind acreditările dvs.

Different views of Ranktracker app