5 näidet suurepärase tootelehe kujunduse kohta ja mida saate neist õppida

Intro

E-kaubanduse veebilehte külastades peab kliendile pakutav kogemus olema algusest peale lihtne: silmatorkav, lihtne ja sisuline. Tootelehtede kujundus on üks olulisemaid aspekte üldises kasutajakogemuses, sest need on leheküljed, mis lõpuks muudavad veebilehitsejad klientideks. Seetõttu peaksid teie veebipoe tootelehe kujundamisel olema põhirõhk suunatud esiletõstetud toodetele, kvaliteetsetele piltidele ja üksikasjalikule teabele.

Enamik kliente läbib enne ostu sooritamist toote lehekülje, nii et kui olete loomas uut veebisaiti või optimeerimas oma e-kaubanduse saidi toimivust, siis pidage meeles, et hea disain algab kasutaja vajaduste mõistmisest ja sellekohasest kohandamisest.

Uurime, kuidas kujundada suurepärane tootelehekülg, mõned parimad praktikad tootelehekülje kujundamisel ja millised on peamised omadused, mis muudavad tootelehekülje väärtuslikuks ja atraktiivseks.

Kuidas kujundada toote lehekülge

Kuigi kujundusprotsess võib disainerite lõikes erineda, on teatud asju, mida igaüks peaks silmas pidama, kui ta õpib, kuidas kujundada tootelehekülgi.

1. Kasutage kvaliteetseid pilte

Online-ostude tegemine on täielikult visuaalne ja tootefotosid on iga toote lehekülje jaoks väga oluline. Kuna kliendid ei saa tooteid puudutada ja proovida nagu füüsilises kaupluses, aitavad pildid neil otsustada, kas nad tahavad midagi osta või mitte.

Veenduge, et kasutate optimeeritud pilte ja hoiate neid oma saidi loomisel ajakohasena. Optimeeritud pildid peaksid olema õiget tüüpi, suurusega ja tihendatud, et võimaldada kiiremat lehe laadimisaega. Samuti peaksid teie pildid olema fookuses, neil peaks olema lihtne taust ja nad peaksid andma mitu vaatenurka, et kasutajad näeksid, mida nad saavad.

2. Loo veenev üleskutse tegutsemiseks

Aktiivne keel motiveerib kliente tegutsema, et osta või saada rohkem teavet toote kohta. Tegevuskutsete (CTA) nuppude loomisel ja vormistamisel hoidke need lühikesed ja lühikesed ning arendage uudishimu; teisisõnu, tõhus CTA peaks käivitama kliki.

3. Kirjutage informatiivseid tootekirjeldusi

Me ütlesime, et pildid on suurepärase tootelehe jaoks väga olulised, kuid sama oluline on ka hea tootekirjeldus.

Tootekirjeldused annavad klientidele üksikasjalikku teavet iga toote kohta. Jah, nad peaksid jõudma kiiresti asja juurde, kuid nad peavad sisaldama ka selliseid üksikasju nagu materjalid, värvid ja peamised omadused.

Teie tootepildid ja kirjeldused peaksid töötama koos, et veenda kedagi ostma seda, mida te müüte.

4. Näita läbipaistvat hinnakujundust

Ostuotsus ei sõltu ainult viie tärni hinnanguga tootest, selgest ja veenvast tekstist ning suurepärastest piltidest; otsustavaks teguriks on ka hind. Peaksite **suures kirjas alati näitama selget hinda ** ning vältima mitmetähenduslikke allahindlusi ja peenetähendust.

5. Kaasa sotsiaalsed tõendid

Meid mõjutab sotsiaalne käitumine, nii et kui näeme inimesi, kes ootavad restoranis järjekorras lauda või kui pereliige soovitab mingit toodet, mõjutab meie ostuotsust sageli see, mida teised selle kohta teevad või ütlevad. Veebiostude tegemine ei ole erandiks.

Tegelikult ütlevad 97% klientidest, et veebiarvustused mõjutavad nende ostuotsust, mistõttu on selge, et sotsiaalne tõestus mõjutab soodsalt teie tootelehe konversioone.

6. Olge järjekindel

Lisaks tugevale kujundusele peaks teie veebisait ja iga tootelehekülg olema järjepidev ning sisaldama ühtseid, hästi integreeritud värve ja omavahel sobivaid pilte.

Tagage brändi järjepidevus, kasutades värvipaletti, konkreetseid kirjatüüpe ja harmoonilist hääletooni kirjalikus sisus. Visuaalse järjepidevuse tagamiseks võite kasutada oma veebisaidi jaoks graafilisi malle; see aitab teil luua ainulaadset, ühtset välimust erinevatel tootelehekülgedel ja maandumislehtedel.

(Pildi allikas: Envato Elements)

5 ilusat tootelehe kujunduse näidet ja miks nad töötavad

Nüüd, kui me oleme läbinud e-kaubanduse tootelehe loomise põhitõed, uurime näiteid kaubamärkidest, kes on tootelehe veebidisaini osas õigesti toiminud.

1. Apple

(Pildi allikas: Apple / iPad)

Miks see toimib?

Sellel leheküljel on Apple'i disainimeeskond loonud mõjusa kliendikogemuse, mis ei lase end häirida, keskendudes tootele ja selle ainulaadsetele omadustele. Kopeerimine on lühike ja inspireeriv ning kui kasutajad jätkavad kerimist, jätkub avastamine lühikirjelduste ja tootepiltidega, mis paistavad valgel taustal silma.

Mida on võimalik õppida?

Kui tegemist on piltide, tekstide ja kõigi muude tootelehe kujunduselementidega, on vähem rohkem.

Apple teeb tootelehe koostamisel laitmatut tööd. Iga pilt, valge ruum, sõna ja detail on hoolikalt valitud, nii et üldine väljanägemine jääb puhtaks ja ühtseks ning toob toote esile.

Selline minimalistlik kujundus ei jäta ruumi segadusele, seega valige oma lehe koostamisel lihtne kujundus.

2. Kroonika raamatud

(Pildi allikas: Chronicle Books)

Miks see toimib?

Kuigi see veebisait kasutab kõikides kategooriates eredaid värve, on personaliseerimine selle tootelehekülgede põhirõhk. Chronicle Books teeb kategooriate tuvastamise ülemisest menüüst lihtsaks ning näitab vastavalt sellega seotud ja asjakohast sisu.

(Pildi allikas: Chronicle Books)

Seotud raamatute soovitamine, mida kasutajad saavad lisada oma ostukorvi, ilma et nad lahkuksid lehelt, mida nad parajasti sirvivad, on tõhus viis hoida nende huvi juba kureeritud tootevaliku vastu.

Mida on võimalik õppida?

Personaalne kliendikogemus on tootelehekülgedel võtmetähtsusega, kui soovite tagada, et kasutaja leiab selle, mida ta otsib - ja loodetavasti ka rohkem, et suurendada tema ostukorvi suurust. Mõelge oma toodete peale ja sellele, kuidas seostada teisi tooteid, mis ei pruugi kuuluda samasse kategooriasse, kuid ehk vastavad kliendi laiematele huvidele.

3. Farfetch: Farfetch: Kõik üksikasjadest

Miks see toimib?

Moe e-kaubamaja Farfetch jaoks on hea tootelehekülg detailides. Kliendid saavad ühest kohast selget teavet toote hoolduse, suuruse, hinna, tarnetähtaegade ja disaineri kohta. Seal on isegi võimalus lisada toode soovinimekirja, kui nad ei ole valmis kohe ostma.

Mida on võimalik õppida?

Küsige oma klientidelt, millist teavet nad otsivad, kui nad sirvivad teie - ja teie konkurentide - tootelehekülgi. Te peaksite kohandama oma tootelehekülgedel kuvatavat teavet vastavalt sellistele päringutele, mis aitavad klientidel teha ostuotsuse.

(Pildi allikas: Farfetch)

4. Zara: tehke see kaasahaaravaks

(Pildi allikas: Zara)

Miks see toimib?

Zara veebisaidil ei alga kogemus toote enda lehel. Juba avalehel tunneb kasutaja, et ta on justkui viibinud kõrgmoe-show'l, kus Zara uusima kollektsiooni modellid kõnnivad mööda catwalk'i. Video all on lõputu kerimine, mis võimaldab kasutajal vaadata kaunilt kureeritud toimetuse pilte, mitte otsida tooteid kataloogist.

Zara pakub suurel hulgal tooteid ja uuendab pidevalt laoseisu, kuid tootekategooriaid on vähe. Selline kataloogi lihtsustamine muudab sirvimise lihtsamaks ja võimaldab kasutajatel kitsendada otsingut kuni kümne filtri abil.

(Pildi allikas: Zara / Woman / Party)

Mida on võimalik õppida?

Sellised kaasahaaravad tooteleheküljed nõuavad pingutust, sest pildid on pildistatud toimetuse stiilis, mitte tavalisel taustal. Samuti peate kaaluma, kuidas tootefotod sobivad laiemasse kohapealsesse ja väljaspool veebilehte pakutavasse kogemusse, olgu see siis video avalehel või Instagrami kaudu jagatav pildimaterjal. Tõhusalt rakendatuna võib selline lähenemisviis aidata mitte ainult müüa tooteid, vaid ka luua brändi ja kliendisuhet.

5. Glossier: Hero Your Products

(Pildi allikas: Glossier)

(Pildi allikas: Glossier)

Miks see toimib?

Ilumarketi Glossier puhul on tooted veebilehe kangelased - mis loomulikult hõlmab ka tootelehekülgi. Kõik, mis asub tootepiltide ümber, olgu see siis lühike tekst, kasutajate arvustused, värvipaleti valija või "parima hinnangu" sildid, on mõeldud selleks, et teavitada kasutajat toote enda väärtusest. Pildigaleriid aitavad tutvustada toote erinevaid variante, muutes valiku tegemise lihtsaks. See on ülioluline selliste toodete puhul nagu meik, kus ostjal ei ole võimalust seda esmalt proovida.

Mida on võimalik õppida?

Kui teie toode on staar, ärge kartke seda esiplaanile panna. Kujundajad lasevad end mõnikord häirida kujunduse, brändi ja lisagraafikaga ning unustavad, et toode on müügiargumendiks. Arvamused võivad samuti imet teha, kui teil on vaja oma toodet ellu äratada ja näidata selle väärtuse sotsiaalset tõestust reaalsete kasutajate poolt.

Mis teeb suurepärase tootelehe kujunduse?

Nagu me nägime viie parima toote lehekülje kujunduse vaatlemisel, on hea toote lehekülje koostamisel palju asju, kuid on mõned olulised koostisosad, mida iga toote lehekülg vajab.

Baymard Institute'i uuring soovitab 95 suunist, mida tuleks järgida toote lehekülje kujundamisel, sealhulgas kujundus, tootepildid, pildigalerii, ostuosa, saatmine, tagastamine, kingituste poliitika, tootevariatsioonid, kirjeldused, spetsifikatsioonid, kasutajate arvustused ning ristmüük ja ristnavigatsioon.

Uuring näitas, et ainult 18% 185-st suurima müügitulu saavast USA ja Euroopa e-kaubanduse veebisaidist on "hea" või "vastuvõetav" tootelehekülje tulemuslikkus. Spetsifikatsioonid on nende seas üks levinumaid probleeme.

(Pildi allikas: Baymard Instituut)

Mis on hea disain?

Vaatamata arvukatele viisidele, kuidas saavutada head disaini ja seda määratleda, võivad mõned Saksa tööstusdisaineri Dieter Rams'i põhimõtted teid disainiprotsessis suunata.

1. Hea disain on uuenduslik.
2. See muudab toote kasulikuks ja arusaadavaks.
3. On esteetiline.
4. On tagasihoidlik.
5. On aus.
6. See on kauakestev - kuigi praeguses digitaalses maailmas võib see olla vähem oluline.
7. See näitab tähelepanu detailidele.
8. See on keskkonnasõbralik.
9. See nõuab võimalikult vähe disaini.

Kokkuvõttes tähendab see, et tuleb hoida asi lihtsana, keskenduda põhilisele ja vältida selliste funktsioonide lisamist, mis ei aita kasutatavust parandada.

Toote lehe kujundamise parimad praktikad

Loomulikult on hea disain väga oluline, kuid ükski ettevõte ei saa ellu jääda ilma kasumita. Nii et lisaks visuaalide ja formaatide tundmaõppimisele peate õppima, kuidas kujundada tootelehekülgi, mis suurendavad veebimüüki.

Shopify ja Nielsen Norman Groupi uuringu kohaselt on need parimad tavad, mida järgida, mis aitavad ostjatel otsustada, mida nad tahavad osta.

1. Kirjeldav tootenimi
2. Täpsed tootepildid
3. Üksikasjalik, suurendatud vaade igale tootele
4. Hind ja kui on lisatasusid
5. Selged tootevalikud, mille hulgast valida
6. Kättesaadavus
7. Selgus esemete lisamisel ostukorvi, tagasiside, kui see on lisatud
8. Informatiivne tootekirjeldus

Toote lehe kujunduse mallid

Kui nullist kujundamine ei ole teie tugevus või vajate loomingulisi vahendeid, et alustada, peaksite parima võimaliku tulemuse saavutamiseks kaaluma tootelehe kujundusmalli, veebidisainitööriistade ja veebimallide kasutamist. Tootelehtede kujundusmallide kasutamise eelised hõlmavad protsessi lihtsustamist, aja kokkuhoidu ja järjepidevuse tagamist lehekülgede vahel.

Toote lehe kujunduse kontrollnimekiri

Nüüd oleme uurinud parimaid tavasid ja üldisi kuidas teha, kuid kui teil on vaja kontrollnimekirja, mida järgida, kui te järgmine kord e-kaubanduse toote lehekülge kujundate, siis siin on kokkuvõte kõigest, mida me selles artiklis uurisime.

• Valige kvaliteetsed, optimeeritud pildid
• Kaasa veenvad CTA nupud
• Kirjutage informatiivseid tootekirjeldusi
• Näita nähtavaid tootevariatsioone
• Olge hinnakujunduses läbipaistev
• Näidata sotsiaalset tõestust ja kommentaare
• Lisage saatmisandmed
• Olge oma kaubamärgiga järjepidev

Valmis kujundama tootelehekülge, mis teeb teid uhkeks

Uue tootelehe kujundamine on põnev seiklus. Saate panna tooted särama ja eristuma tuhandetest teistest veebipõhistest võimalustest - see on ülesanne, mida ei tohiks võtta kergekäeliselt.

Ärge unustage lõppkokkuvõttes kasutajat, kes külastab teie e-kaubanduse veebisaiti. Loomulikult on teie toode näituse täht, kuid teie klient on see, kes teeb lõpliku otsuse.