# Dešimt e. parduotuvės dizaino sprendimų, kurie išmatuojamai padidina konversiją

> Ne „naudokite daugiau tuščios erdvės“, ne „testuokite mygtuko spalvą“. Konkretūs vizualinės hierarchijos, fotografijos, šrifto ir mobiliųjų sprendimai, kurie tikrai pakeičia konversiją tikrose parduotuvėse.

Ryan Badger - 2024 m. lapkričio 3 d. - 7 min. skaitymo

## Dizaino sprendimai, kurie tikrai pakeičia konversiją

Dizaino straipsniai paprastai skirstomi į dvi stovyklas. „Naudokite daug tuščios erdvės!“ (per neapibrėžta) arba „A/B testuokite 47 mygtukų spalvas“ (per smulku). Nė vienas nepadeda žmogui, žiūrinčiam į savo parduotuvę ir svarstančiam, kodėl ji konvertuoja 1,3 %.

Šis įrašas yra apie konkrečius vizualinio dizaino sprendimus, kurie išmatuojamai keičia e. parduotuvių konversiją. Ne skonis. Ne prekės ženklo estetika. Maketo, hierarchijos, spalvų ir tipografijos pasirinkimai, kurie arba padeda žmonėms pirkti, arba trukdo.

## 1. Vizualinė hierarchija: svarbiausias dalykas turi atrodyti svarbiausias

Dauguma parduotuvių suteikia vienodą vizualinį svorį visam produkto puslapiui: 16 px pagrindinis tekstas, 18 px kaina, 18 px antraštės. Kiekvienas elementas konkuruoja; nė vienas nelaimi. Akiai nėra įėjimo taško.

Sprendimas: tai, ką norite, kad paspaustų, turi būti didžiausias, didžiausio kontrasto dalykas puslapyje.

- Produkto pavadinimas: 28-36 px
- Kaina: 20-24 px, paryškinta, aiškiai atskirta
- Mygtukas „Į krepšelį“: per visą plotį mobiliajame, vizualiai sunkiausias puslapio elementas
- Aprašymai, specifikacijų sąrašai, siuntimo informacija: 14-16 px, ramesni

Kai pažiūrite į savo produkto puslapį iš 8 pėdų atstumo (taip, tiesiogine prasme atsilošę), ar galite pasakyti, koks pagrindinis veiksmas? Jei visas puslapis atrodo kaip pilka sriuba, jūsų hierarchija sugedusi.

## 2. Tuščia erdvė aplink CTA, o ne visur

„Naudokite daugiau tuščios erdvės“ nešiojamas kaip universalus dizaino patarimas. Iš tikrųjų svarbi tuščia erdvė aplink mygtukus ir svarbiausius elementus, o ne tuščia erdvė pati dėl savęs.

- Bent 40-60 px atitraukimo aplink „Į krepšelį“ zoną
- Kaina savo švarioje erdvėje, ne užgožta kito teksto
- Produkto nuotraukoms duota vietos (ne be paraščių, kraštas į kraštą)

Visą kitą (atsiliepimus, siuntimo informaciją, susijusias prekes) spauskite arčiau. Jie antriniai. CTA zona laimi būdama vienintelė, turinti erdvės kvėpuoti.

## 3. Nuoseklios produktų nuotraukos lenkia „geresnes“ produktų nuotraukas

50 produktų katalogas, kuriame visos nuotraukos šiek tiek skirtingos (skirtingi fonai, skirtingas apšvietimas, skirtingas artinimas), atrodo mėgėjiškai. Katalogas, kuriame kiekviena nuotrauka tokio paties kampo, apšvietimo, iškarpos ir fono, atrodo profesionaliai.

Tai apimties, o ne kokybės problema. Jūsų 5 perkamiausi gali turėti nušlifuotas pagrindines nuotraukas. Visa kita turėtų būti fotografuojama identiškai, net jei kiek mažiau efektingai. Nenuoseklumas signalizuoja „maža, nepatikima parduotuvė“ labiau nei žema kokybė.

Praktinė taisyklė:

- Pagrindinė nuotrauka: baltas ar vientisas fonas, centruota, ta pati iškarpa visame kataloge
- Antrinės nuotraukos: gyvenimo būdo / naudojimo, nuoseklaus tono
- Visos nuotraukos tokio pat formato santykio ir skiriamosios gebos

## 4. CTA kontrastas, o ne CTA spalva

„Oranžiniai mygtukai konvertuoja X % geriau nei žali!“ Šį išbandytą teiginį girdite dažnai. Atskirai paimtas, tai nesąmonė. Svarbus yra **kontrastas su aplinkiniu puslapiu**. Oranžinis mygtukas oranžinės temos svetainėje yra nematomas. Mėlynas mygtukas toje pačioje svetainėje yra švyturys.

Rinkitės spalvą, kuri turi didžiausią kontrastą su dominuojančia jūsų svetainės paletė. Jei jūsų puslapis baltas + juodas + gelsvai rudas, jūsų CTA turėtų būti ta viena spalva, kurios niekur kitur nėra.

Antrinis punktas: venkite „vaiduoklių“ mygtukų (tik kontūras, be užpildo) pagrindiniams CTA. Jie atrodo elegantiškai, bet konversijoje testuojami prastai, nes akiai signalizuoja „antrinis“. Naudokite pilną užpildą mygtukams „Į krepšelį“, „Pateikti užsakymą“, „Pirkti dabar“.

## 5. Šrifto dydis ir eilutės ilgis mobiliajame

Daugelyje mobiliųjų parduotuvių tekstas per mažas ir per platus. Telefonai rodo tekstą didesniu pikselių tankiu; tai, kas 16 px kompiuteryje, mobiliajame atrodo mažai.

Mobiliosios tipografijos apatinė riba:

- Pagrindinis tekstas: bent 16-18 px
- Eilutės ilgis: 40-60 simbolių eilutėje
- Eilučių tarpas: 1,4-1,6x šrifto dydžio
- Mygtukai / palietimo taikiniai: bent 44 px aukščio („Apple“ prieinamumo gairė)

Jei lankytojai skečia pirštais, kad padidintų jūsų produktų aprašymus, jūsų šriftas per mažas. Testuokite tikrame telefone ištiestos rankos atstumu, o ne naršyklės mobiliajame emuliatoriuje.

## 6. Prilipęs „Į krepšelį“ mobiliajame

Slinkite žemyn ilgu produkto puslapiu mobiliajame: kol perskaitote aprašymą, mygtukas „Į krepšelį“ yra 3 ekranų aukštyje aukščiau. Klientai, kurie jau nusprendė pirkti, dabar turi slinkti atgal, o tai mažina konversijos rodiklį.

Sprendimas: prilipęs „Į krepšelį“, kuris plūduriuoja mobiliojo vaizdo srities apačioje, kai originalus mygtukas išslenka iš ekrano. Vienas palietimas, krepšelis atsidaro, jokios paieškos slenkant.

Kompiuteryje: prilipęs krepšelis tampa nebūtinas (vaizdo sritis didesnė). Mobiliajame: nederamas.

## 7. Pagrindinis vaizdas, rodantis rezultatą, o ne produktą

Dauguma pagrindinių (hero) sekcijų rodo produktą, atskirtą, ant balto. Tinka kaip atskaitos nuotrauka; netinka kaip hero. Hero turi per 2 sekundes perteikti „koks gyvenimas su tuo“.

Geriau: produktas naudojamas, kontekste, su žmogumi ar aplinka, atitinkančia jūsų tikslinį pirkėją.

- Odos priežiūra: kas nors ja naudojasi, rytinė šviesa, vonios kambarys
- Baldai: gaminys tikrame kambaryje, gyvenamas
- Drabužiai: ant kūno, judantys, ne manekene
- Maistas / kava: ruošiama ar mėgaujamasi, ne produkto nuotrauka

Hero su naudojamu produktu konvertuoja geriau nei hero su atskirtu produktu, nes atlieka daugiau vaizduotės darbo pirkėjui. Jie mato save jį naudojant, nereikia įsivaizduoti.

## 8. Nuoseklūs komponentai visoje parduotuvėje

Dažna nesėkmė: produktų puslapiai naudoja vieną kortelės stilių, kategorijų puslapiai kitą, titulinis puslapis trečią. Klientai šį nenuoseklumą junta, net jei negali jo įvardyti. Parduotuvės atrodo patikimos, kai tie patys komponentai pasirodo nuosekliai.

Mažą e. prekybos dizaino sistemą sudaro:

- Vienas produkto kortelės komponentas (naudojamas titulinio puslapio išskirtinėse, kategorijų tinkleliuose, susijusiose prekėse, paieškos rezultatuose)
- Viena mygtukų sistema (pagrindinis, antrinis, tretinis; tik šie trys)
- Viena antraščių stilių sistema (H1, H2, H3; taikoma nuosekliai)
- Viena spalvų paletė (daugiausia 3 prekės ženklo spalvos, plius pilkų atspalvių skalė)
- Viena šriftų skalė (daugiausia 3-4 dydžiai)

Dauguma parduotuvių kiekvieno sukuria po 15 variantų, kai pakaktų vieno. Mažiau variantų = profesionalesnis įspūdis.

## 9. Pirmasis ekranas yra slinkimo reklama

Matoma sritis pirmą kartą įkėlus (virš lenkimo linijos) turi vieną darbą: priversti lankytoją norėti slinkti. Tik tiek. Nebandykite parduoti pirmame ekrane.

Kas reikalinga virš lenkimo linijos:

- Kam tai skirta (vienoje eilutėje)
- Kas yra produktas (vizualiai, viena gera nuotrauka)
- Vienas aiškus CTA („Į krepšelį“ arba „Pirkti“)
- Vienas raminantis pasitikėjimo signalas (įvertinimas + atsiliepimų skaičius, arba spaudos citata, arba žinomas klientas)

Kas NEREIKALINGA virš lenkimo linijos:

- Keli CTA, konkuruojantys dėl dėmesio
- Pagrindinė karuselė, automatiškai persijungianti kas 3 sekundes (konversijos žudikas; klientai sustingsta, kai turinys juda)
- Kiekviena produkto nauda
- Atsiliepimų galerijos

## 10. Pašalinkite karuselę iš titulinio puslapio

Susiję su aukščiau, bet verta atskiro punkto: titulinio puslapio pagrindinės karuselės mirė. Tyrimai nuosekliai rodo, kad besikeičiantys hero skaidrės paspaudžiamos 1-3 %, ir tik pirmoji skaidrė sulaukia reikšmingo dėmesio. Pasirinkite vieną žinutę, kurią dėtumėte į 1 skaidrę; padėkite ją kaip statinį hero. Likusių atsisakykite.

## Ką tvarko „Shoprocket“

Temų parduotuvė pateikiama su šablonais, kurie jau laikosi aukščiau aprašytų vizualinės hierarchijos, kontrasto ir mobiliųjų modelių. Jei naudojate valdiklio įterpimą savo svetainėje, aplinkinio puslapio dizainą valdote jūs, bet:

- **Krepšelio stalčius** (ne viso puslapio krepšelis) yra numatytasis
- **Prilipęs mobilusis krepšelis** palaikomas
- **Prisitaikančios produktų nuotraukos** su automatiniu WebP pristatymu ir tinkamais formato santykiais
- **Svetainių kūrimo įrankis + 40+ temų,** kad dizaino sistemos nereikėtų kurti nuo nulio
- **Individualaus CSS kabliukai** leidžia pritaikyti įterpimą pagal jūsų svetainę

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

Ko „Shoprocket“ nekontroliuoja: jūsų pagrindinių vaizdų, jūsų fotografijos nuoseklumo, jūsų teksto, jūsų spalvų sistemos. Tai jūsų pačių reikalas padaryti ar sugadinti.

> **Patarimas:** atidarykite savo parduotuvę telefone dabar. Paimkite vieną produkto puslapį. Ar matote „Į krepšelį“ neslinkdami? Ar kaina aiškiai antras pagal dydį dalykas? Ar galite perskaityti aprašymą nežvairuodami? Jei bent į vieną atsakymas „ne“, tai yra pirmas taisytinas dizaino dalykas.

## Trumpai

- **Hierarchija:** svarbiausias elementas turi atrodyti svarbiausias. Patikrinkite 8 pėdų testu
- **Tuščia erdvė aplink CTA,** o ne visur dėl savęs
- **Fotografijos nuoseklumas** lenkia fotografijos kokybę. Vienas stilius visame kataloge
- **CTA kontrastas, o ne spalva.** Didžiausio kontrasto spalva palyginti su puslapio paletė laimi
- **Mobilusis šriftas: 16 px+ tekstas, 44 px+ palietimo taikiniai**
- **Prilipęs „Į krepšelį“ mobiliajame** yra nederamas
- **Hero vaizdai rodo rezultatus** (naudojamas produktas), o ne produktą ant balto
- **Maža dizaino sistema (3 spalvos, 4 dydžiai, 3 mygtukų variantai)** atrodo profesionaliau nei 15 variantų
- **Pirmasis ekranas parduoda slinkimą,** o ne produktą. Viena aiški žinutė, vienas CTA
- **Nužudykite titulinio puslapio karuselę**. Statinis hero laimi

[Pradėkite nemokamą bandomąjį laikotarpį](https://app-v3.shoprocket.io/signup), jei norite temų parduotuvės su įdiegtais šiais modeliais. 14 dienų, be kortelės.

---

- HTML version: https://v3.shoprocket.io/lt/tinklarastis/desimt-e-parduotuves-dizaino-sprendimu-didinanciu-konversija
- Language: Lietuvių (lt)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-design-entscheidungen-die-conversion-messbar-steigern.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [English](https://v3.shoprocket.io/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Español](https://v3.shoprocket.io/es/blog/diez-decisiones-de-diseno-ecommerce-que-mejoran-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/dix-decisions-design-ecommerce-qui-augmentent-la-conversion.md), [עברית](https://v3.shoprocket.io/he/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/sepuluh-keputusan-desain-ecommerce-yang-terukur-menaikkan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/dieci-scelte-di-design-ecommerce-che-aumentano-la-conversione.md), [日本語](https://v3.shoprocket.io/ja/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Norsk](https://v3.shoprocket.io/nb/blogg/ti-designvalg-nettbutikk-som-loefter-konverteringen.md), [Nederlands](https://v3.shoprocket.io/nl/blog/tien-ontwerpkeuzes-webshop-die-conversie-verhogen.md), [Polski](https://v3.shoprocket.io/pl/blog/dziesiec-decyzji-projektowych-w-e-commerce-ktore-podnosza-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/dez-decisoes-de-design-que-aumentam-a-conversao-no-ecommerce.md), [Română](https://v3.shoprocket.io/ro/blog/zece-decizii-de-design-ecommerce-care-cresc-masurabil-conversia.md), [Русский](https://v3.shoprocket.io/ru/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/donusumu-artiran-on-eticaret-tasarim-karari.md), [中文](https://v3.shoprocket.io/zh/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md)