# Zece decizii de design ecommerce care cresc măsurabil conversia

> Nu „folosește mai mult spațiu alb”, nu „testează culoarea butonului”. Alegerile concrete de ierarhie vizuală, fotografie, tipografie și mobil care mută cu adevărat conversia în magazine reale.

Ryan Badger - 3 noiembrie 2024 - 7 min de citit

## Deciziile de design care mută cu adevărat conversia

Articolele despre design cad de obicei în două tabere. „Folosește mult spațiu alb!” (prea vag) sau „Fă A/B test la 47 de culori de buton” (prea granular). Niciuna nu ajută pe cineva care se uită la magazinul lui și se întreabă de ce convertește cu 1,3%.

Articolul acesta e despre deciziile concrete de design vizual care mută măsurabil conversia în magazinele de ecommerce. Nu gust personal. Nu estetica brandului. Alegerile de layout, ierarhie, culoare și tipografie care fie îi ajută pe oameni să cumpere, fie le stau în cale.

## 1. Ierarhia vizuală: lucrul cel mai important trebuie să arate cel mai important

Majoritatea magazinelor dau aceeași greutate vizuală tuturor elementelor de pe pagina de produs: text de 16px, preț de 18px, titluri de 18px. Fiecare element concurează; niciunul nu câștigă. Ochiul nu are un punct de intrare.

Soluția: lucrul pe care vrei să se dea clic trebuie să fie cel mai mare și cel mai contrastant element din pagină.

- Titlul produsului: 28-36px
- Prețul: 20-24px, aldin, clar delimitat
- Butonul Adaugă în coș: pe toată lățimea pe mobil, elementul cel mai „greu” vizual din pagină
- Descrieri, liste de specificații, informații de livrare: 14-16px, mai discrete

Când te uiți la pagina de produs de la 2,5 metri (da, chiar, dă-te înapoi), poți spune care e acțiunea principală? Dacă toată pagina arată ca o supă gri, ierarhia ta e stricată.

## 2. Spațiu alb în jurul CTA-ului, nu peste tot

„Folosește mai mult spațiu alb” e scos la înaintare ca sfat universal de design. Ce contează de fapt este spațiul alb din jurul butoanelor și al elementelor-cheie, nu spațiul alb de dragul lui.

- Cel puțin 40-60px de padding în jurul zonei Adaugă în coș
- Prețul într-un spațiu curat al lui, neaglomerat de alt text
- Imaginilor de produs să li se dea loc (nu margini zero, de la un capăt la altul)

Înghesuie tot restul (recenzii, informații de livrare, produse similare) mai strâns. Sunt secundare. Zona CTA câștigă fiind singura cu loc de respirat.

## 3. Fotografia de produs consecventă bate fotografia „mai bună”

Un catalog de 50 de produse în care pozele sunt toate ușor diferite (alte fundaluri, altă lumină, alt nivel de zoom) arată amatorește. Un catalog în care fiecare poză are același unghi, aceeași lumină, același cadraj, același fundal arată profesionist.

Aceasta este o problemă de volum, nu de calitate. Primele tale 5 produse de top pot avea fotografii principale rafinate. Tot restul ar trebui fotografiat identic, chiar dacă puțin mai puțin spectaculos. Inconsecvența sugerează „magazin mic și nesigur” mai mult decât o face calitatea scăzută.

Regulă practică:

- Fotografia principală: fundal alb sau simplu, centrată, același cadraj în tot catalogul
- Fotografiile secundare: lifestyle / în utilizare, ton consecvent
- Toate fotografiile cu același raport de aspect și aceeași rezoluție

## 4. Contrastul CTA-ului, nu culoarea CTA-ului

„Butoanele portocalii convertesc cu X% mai mult decât cele verzi!” Vezi des afirmația asta „testată”. Luată izolat, e un nonsens. Contează **contrastul cu pagina din jur**. Un buton portocaliu pe un site cu tema portocalie e invizibil. Un buton albastru pe același site e un far.

Alege culoarea cu cel mai mare contrast față de paleta dominantă a site-ului. Dacă pagina ta e albă + neagră + bej, CTA-ul trebuie să fie singura culoare care nu apare în altă parte.

Punct secundar: evită butoanele „fantomă” (doar contur, fără umplere) pentru CTA-urile principale. Arată elegant, dar au rezultate slabe la conversie pentru că ochiul le citește ca „secundare”. Folosește umplere solidă pentru Adaugă în coș, Plasează comanda, Cumpără acum.

## 5. Dimensiunea textului și lungimea rândului pe mobil

Majoritatea magazinelor pe mobil au text prea mic și prea lat. Telefoanele afișează textul la densitate mai mare de pixeli; ce înseamnă 16px pe desktop pare mic pe mobil.

Pragul minim de tipografie pe mobil:

- Textul de bază: minim 16-18px
- Lungimea rândului: 40-60 de caractere pe rând
- Înălțimea rândului: 1,4-1,6x dimensiunea fontului
- Butoane / zone de atingere: înălțime minimă de 44px (recomandarea de accesibilitate Apple)

Dacă vizitatorii fac pinch-to-zoom pe descrierile produselor tale, textul e prea mic. Testează pe un telefon real, ținut la distanța brațului, nu în emulatorul de mobil al browserului.

## 6. Buton Adaugă în coș fix (sticky) pe mobil

Derulează în jos pe o pagină lungă de produs pe mobil: până ai citit descrierea, butonul Adaugă în coș e la 3 ecrane distanță, mai sus. Clienții care au decis să cumpere trebuie acum să deruleze înapoi, iar rata de conversie scade.

Soluția: un buton Adaugă în coș sticky care plutește în partea de jos a ecranului de mobil odată ce butonul original iese din vizor. O atingere, coșul se deschide, fără căutat prin derulare.

Pe desktop: coșul sticky devine opțional (ecranul e mai mare). Pe mobil: nenegociabil.

## 7. Imagine hero care arată rezultatul, nu produsul

Majoritatea secțiunilor hero arată produsul, izolat, pe alb. Bine pentru o poză de referință; greșit pentru un hero. Hero-ul trebuie să comunice „cum e viața cu asta” în 2 secunde.

Mai bine: produsul în uz, în context, cu o persoană sau un decor care corespunde cumpărătorului tău țintă.

- Îngrijirea pielii: cineva care o folosește, lumină de dimineață, baie
- Mobilier: piesa într-o cameră reală, locuită
- Îmbrăcăminte: pe un corp, în mișcare, nu pe manechin
- Mâncare/cafea: în timp ce e pregătită sau savurată, nu o poză de produs

Hero-ul cu produsul în uz convertește mai bine decât cel cu produsul izolat pentru că face mai mult din munca de imaginație în locul cumpărătorului. Se poate vedea folosindu-l, fără să fie nevoie să și-l imagineze.

## 8. Componente consecvente în tot magazinul

O greșeală frecventă: paginile de produs folosesc un stil de card, paginile de categorie altul, iar prima pagină un al treilea. Clienții simt inconsecvența, chiar dacă nu o pot numi. Magazinele inspiră încredere când aceleași componente apar consecvent.

Un mic sistem de design pentru ecommerce înseamnă:

- O singură componentă de card de produs (folosită la produsele recomandate de pe prima pagină, în grilele de categorii, la produsele similare, în rezultatele căutării)
- Un singur sistem de butoane (primar, secundar, terțiar; doar acestea trei)
- Un singur sistem de stiluri pentru titluri (H1, H2, H3; aplicate consecvent)
- O singură paletă de culori (maximum 3 culori de brand, plus scala de gri)
- O singură scală tipografică (maximum 3-4 dimensiuni)

Majoritatea magazinelor fac 15 variante din fiecare când una ar ajunge. Mai puține variante = aspect mai profesionist.

## 9. Primul ecran este reclama pentru derulare

Zona vizibilă la prima încărcare (deasupra liniei de plutire) are o singură treabă: să-l facă pe vizitator să vrea să deruleze. Atât. Nu încerca să faci vânzarea în primul ecran.

Ce trebuie să fie deasupra liniei de plutire:

- Pentru cine este (într-o singură linie)
- Ce este produsul (vizual, o imagine bună)
- Un CTA clar (Adaugă în coș sau Cumpără acum)
- Un semnal de încredere liniștitor (rating + număr de recenzii, un citat din presă sau un client notabil)

Ce NU trebuie să fie deasupra liniei de plutire:

- Mai multe CTA-uri care se bat pentru atenție
- Un carusel hero care avansează automat la 3 secunde (ucide conversia; clienții îngheață când conținutul se mișcă)
- Toate beneficiile produsului
- Galerii de mărturii

## 10. Scoate caruselul de pe prima pagină

Strâns legat de punctul anterior, dar merită un punct separat: caruselele hero de pe prima pagină sunt moarte. Studiile arată constant că slide-urile hero rotative sunt apăsate în 1-3% din cazuri, iar atenția semnificativă o primește doar primul slide. Alege mesajul pe care l-ai pune pe slide-ul 1; pune-l ca hero static. Renunță la restul.

## Ce rezolvă Shoprocket

Magazinul cu teme vine cu șabloane care urmează deja tiparele de mai sus de ierarhie vizuală, contrast și mobil. Dacă folosești embedul widgetului pe propriul site, tu controlezi designul paginii din jur, dar:

- **Sertarul coșului** (nu coș pe pagină întreagă) este implicit
- **Coș sticky pe mobil** suportat
- **Imagini de produs responsive** cu livrare automată WebP și rapoarte de aspect corecte
- **Editor de site + peste 40 de teme**, ca să nu trebuiască să construiești sistemul de design de la zero
- **Cârlige de CSS personalizat** te lasă să stilizezi embedul ca să se potrivească site-ului tău

```
<!-- 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>
```

Ce nu controlează Shoprocket: imaginile tale hero, consecvența fotografiilor, textele, sistemul tău de culori. Acestea îți aparțin, să le faci bune sau să le strici.

> **Sfat:** Deschide-ți magazinul pe telefon chiar acum. Ia o pagină de produs. Vezi butonul Adaugă în coș fără să derulezi? Este prețul clar al doilea cel mai mare element? Poți citi descrierea fără să miști ochii? Dacă la oricare răspunsul e nu, aceea este prima corectură de design de făcut.

## Pe scurt

- **Ierarhie:** elementul cel mai important trebuie să arate cel mai important. Verifică cu testul de la 2,5 metri
- **Spațiu alb în jurul CTA-ului**, nu peste tot de dragul lui
- **Consecvența fotografiei** bate calitatea fotografiei. Un singur stil în tot catalogul
- **Contrastul CTA-ului, nu culoarea.** Culoarea cu cel mai mare contrast față de paleta paginii câștigă
- **Tipografie pe mobil: text de 16px+, zone de atingere de 44px+**
- **Adaugă în coș sticky pe mobil** este nenegociabil
- **Imaginile hero arată rezultatul** (produs în uz), nu produsul pe alb
- **Un sistem de design mic (3 culori, 4 dimensiuni, 3 variante de buton)** arată mai profesionist decât 15 variante
- **Primul ecran vinde derularea**, nu produsul. Un mesaj clar, un CTA
- **Scoate caruselul de pe prima pagină**. Hero-ul static câștigă

[Începe o perioadă de probă gratuită](https://app-v3.shoprocket.io/signup) dacă vrei un magazin cu teme care are aceste tipare integrate. 14 zile, fără card.

---

- HTML version: https://v3.shoprocket.io/ro/blog/zece-decizii-de-design-ecommerce-care-cresc-masurabil-conversia
- Language: Română (ro)
- 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), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/desimt-e-parduotuves-dizaino-sprendimu-didinanciu-konversija.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), [Русский](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)