# Dziesięć decyzji projektowych w e-commerce, które mierzalnie podnoszą konwersję

> Nie "więcej białej przestrzeni" i nie "przetestuj kolor przycisku". Konkretne wybory dotyczące hierarchii wizualnej, zdjęć, typografii i mobile, które naprawdę ruszają konwersję w prawdziwych sklepach.

Ryan Badger - 3 listopada 2024 - 7 min czytania

## Decyzje projektowe, które naprawdę ruszają konwersję

Artykuły o designie zwykle należą do jednego z dwóch obozów. "Używaj dużo białej przestrzeni!" (zbyt ogólnie) albo "testuj A/B 47 kolorów przycisku" (zbyt szczegółowo). Żaden nie pomoże komuś, kto patrzy na swój sklep i zastanawia się, czemu konwertuje na poziomie 1,3%.

Ten wpis dotyczy konkretnych decyzji wizualnych, które mierzalnie zmieniają konwersję w sklepach internetowych. Nie gustu. Nie estetyki marki. Wyborów dotyczących układu, hierarchii, koloru i typografii, które albo pomagają ludziom kupować, albo im w tym przeszkadzają.

## 1. Hierarchia wizualna: to, co najważniejsze, powinno wyglądać na najważniejsze

Większość sklepów nadaje wszystkiemu na stronie produktu tę samą wagę wizualną: tekst 16 px, cena 18 px, nagłówki 18 px. Każdy element konkuruje i żaden nie wygrywa. Oko nie ma punktu wejścia.

Rozwiązanie: to, co ma być kliknięte, powinno być największym i najbardziej kontrastowym elementem strony.

- Tytuł produktu: 28-36 px
- Cena: 20-24 px, pogrubiona, wyraźnie wydzielona
- Przycisk Dodaj do koszyka: na mobile na całą szerokość, wizualnie najcięższy element strony
- Opisy, listy specyfikacji, informacje o dostawie: 14-16 px, spokojniejsze

Kiedy patrzysz na swoją stronę produktu z odległości 2,5 metra (tak, dosłownie odchyl się do tyłu), czy widać, jaka jest główna akcja? Jeśli cała strona wygląda jak szara zupa, hierarchia jest zepsuta.

## 2. Biała przestrzeń wokół CTA, a nie wszędzie

"Używaj więcej białej przestrzeni" jest powtarzane jak uniwersalna rada projektowa. Naprawdę liczy się przestrzeń wokół przycisków i kluczowych elementów, a nie przestrzeń dla samej przestrzeni.

- Co najmniej 40-60 px marginesu wokół obszaru Dodaj do koszyka
- Cena w osobnej, czystej przestrzeni, nie ściśnięta innym tekstem
- Zdjęcia produktów z odrobiną miejsca (bez dosunięcia do krawędzi)

Resztę (opinie, informacje o dostawie, produkty powiązane) upakuj ciaśniej. To elementy drugorzędne. Obszar CTA wygrywa tym, że jako jedyny ma przestrzeń do oddychania.

## 3. Spójne zdjęcia produktów biją "lepsze" zdjęcia produktów

Katalog 50 produktów, w którym zdjęcia są trochę inne (różne tła, różne oświetlenie, różne przybliżenia), wygląda amatorsko. Katalog, w którym każde zdjęcie ma ten sam kąt, światło, kadr i tło, wygląda profesjonalnie.

To problem skali, nie jakości. Twoje 5 bestsellerów może mieć dopracowane zdjęcia główne. Cała reszta powinna być fotografowana identycznie, nawet jeśli jest nieco mniej efektowna. Niespójność sygnalizuje "mały, niepewny sklep" bardziej niż niska jakość.

Praktyczna zasada:

- Zdjęcie główne: białe lub jednolite tło, wycentrowane, ten sam kadr w całym katalogu
- Zdjęcia dodatkowe: lifestyle / w użyciu, spójny ton
- Wszystkie zdjęcia w tych samych proporcjach i rozdzielczości

## 4. Kontrast CTA, a nie kolor CTA

"Pomarańczowe przyciski konwertują X% lepiej niż zielone!" Często widzisz takie testowane twierdzenia. W oderwaniu od kontekstu to bzdura. Liczy się **kontrast z otaczającą stroną**. Pomarańczowy przycisk na pomarańczowej stronie jest niewidoczny. Niebieski przycisk na tej samej stronie jest latarnią.

Wybierz kolor o najwyższym kontraście z dominującą paletą twojej strony. Jeśli strona jest biała + czarna + beżowa, twoje CTA powinno mieć jedyny kolor, który nie pojawia się nigdzie indziej.

Dodatkowa uwaga: unikaj przycisków-duchów (tylko obrys, bez wypełnienia) dla głównych CTA. Wyglądają elegancko, ale słabo wypadają w testach konwersji, bo oko odczytuje je jako "drugorzędne". Dla Dodaj do koszyka, Złóż zamówienie i Kup teraz używaj pełnego wypełnienia.

## 5. Rozmiar czcionki i długość linii na mobile

Większość sklepów mobilnych ma tekst zbyt mały i zbyt szeroki. Telefony wyświetlają tekst z większą gęstością pikseli, więc 16 px na desktopie na mobile wydaje się małe.

Dolne granice typografii mobilnej:

- Tekst: minimum 16-18 px
- Długość linii: 40-60 znaków w linii
- Interlinia: 1,4-1,6 rozmiaru czcionki
- Przyciski / pola dotyku: minimum 44 px wysokości (wytyczne dostępności Apple)

Jeśli odwiedzający powiększają palcami opisy produktów, czcionka jest za mała. Testuj na prawdziwym telefonie trzymanym na wyciągnięcie ręki, a nie w emulatorze mobilnym przeglądarki.

## 6. Przyklejony przycisk Dodaj do koszyka na mobile

Przewiń długą stronę produktu na telefonie: zanim przeczytasz opis, przycisk Dodaj do koszyka jest 3 ekrany wyżej. Klienci, którzy zdecydowali się kupić, muszą teraz przewijać z powrotem, co obniża konwersję.

Rozwiązanie: przyklejony przycisk Dodaj do koszyka, który unosi się na dole ekranu mobilnego, gdy oryginalny przycisk zniknie z widoku. Jedno dotknięcie, koszyk się otwiera, bez szukania przewijaniem.

Desktop: przyklejony koszyk staje się opcjonalny (ekran jest większy). Mobile: obowiązkowy.

## 7. Obraz w sekcji hero pokazujący efekt, a nie produkt

Większość sekcji hero pokazuje produkt, odizolowany, na bieli. Dobre jako zdjęcie referencyjne, złe jako hero. Hero musi w 2 sekundy przekazać "jak wygląda życie z tym produktem".

Lepiej: produkt w użyciu, w kontekście, z osobą lub otoczeniem pasującym do twojego kupującego.

- Pielęgnacja skóry: ktoś używa produktu, poranne światło, łazienka
- Meble: mebel w prawdziwym pokoju, zamieszkanym
- Odzież: na ciele, w ruchu, nie na manekinie
- Jedzenie/kawa: w trakcie przygotowywania lub picia, nie zdjęcie produktowe

Hero z produktem w użyciu konwertuje lepiej niż hero z odizolowanym produktem, bo wykonuje za kupującego większą część pracy wyobraźni. Widzi siebie używającego produktu bez konieczności wyobrażania sobie tego.

## 8. Spójne komponenty w całym sklepie

Częsty błąd: strony produktów używają jednego stylu kart, strony kategorii innego, a strona główna trzeciego. Klienci wyczuwają tę niespójność, nawet jeśli nie umieją jej nazwać. Sklepy wyglądają wiarygodnie, gdy te same komponenty pojawiają się konsekwentnie.

Mały system designu dla e-commerce to:

- Jeden komponent karty produktu (na stronie głównej, w siatkach kategorii, w produktach powiązanych i w wynikach wyszukiwania)
- Jeden system przycisków (główny, drugorzędny, trzeciorzędny; tylko te trzy)
- Jeden system stylów nagłówków (H1, H2, H3; stosowany konsekwentnie)
- Jedna paleta kolorów (maksymalnie 3 kolory marki plus skala szarości)
- Jedna skala typograficzna (maksymalnie 3-4 rozmiary)

Większość sklepów robi po 15 wariantów każdego z nich, choć wystarczyłby jeden. Mniej wariantów = bardziej profesjonalny wygląd.

## 9. Pierwszy ekran to reklama przewijania

Widoczny obszar przy pierwszym załadowaniu (nad linią zgięcia) ma jedno zadanie: sprawić, żeby odwiedzający chciał przewijać dalej. I tyle. Nie próbuj domknąć sprzedaży na pierwszym ekranie.

Co jest potrzebne nad linią zgięcia:

- Dla kogo to jest (w jednej linii)
- Czym jest produkt (wizualnie, jedno dobre zdjęcie)
- Jedno wyraźne CTA (Dodaj do koszyka albo Kup teraz)
- Jeden uspokajający sygnał zaufania (ocena + liczba opinii, cytat z prasy albo znany klient)

Co NIE jest potrzebne nad linią zgięcia:

- Wiele CTA konkurujących o uwagę
- Karuzela hero przewijana automatycznie co 3 sekundy (zabójca konwersji; klienci zamierają, gdy treść się rusza)
- Wszystkie zalety produktu
- Galerie opinii

## 10. Usuń karuzelę ze strony głównej

Związane z powyższym, ale warte osobnego punktu: karuzele hero na stronach głównych umarły. Badania konsekwentnie pokazują, że obracające się slajdy hero są klikane w 1-3% przypadków, a istotną uwagę przyciąga tylko pierwszy slajd. Wybierz jedną wiadomość, którą umieściłbyś na slajdzie 1, i daj ją jako statyczne hero. Resztę porzuć.

## Co załatwia Shoprocket

Sklep z motywem ma szablony, które już stosują opisane wyżej wzorce hierarchii, kontrastu i mobile. Jeśli używasz widżetu osadzonego na własnej stronie, projekt otaczającej strony jest w twoich rękach, ale:

- **Szuflada koszyka** (a nie koszyk na osobnej stronie) jest domyślna
- **Przyklejony koszyk na mobile** jest obsługiwany
- **Responsywne zdjęcia produktów** z automatyczną dostawą w WebP i prawidłowymi proporcjami
- **Kreator stron + ponad 40 motywów**, żebyś nie musiał budować systemu designu od zera
- **Haki własnego CSS** pozwalają dopasować osadzenie do twojej strony

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

Czego Shoprocket nie kontroluje: twojego obrazu hero, spójności zdjęć, tekstów i systemu kolorów. To zależy wyłącznie od ciebie.

> **Wskazówka:** Otwórz teraz swój sklep na telefonie. Weź jedną stronę produktu. Czy widzisz Dodaj do koszyka bez przewijania? Czy cena wyraźnie jest drugim co do wielkości elementem? Czy możesz przeczytać opis bez mrużenia oczu? Jeśli odpowiedź na którekolwiek z tych pytań brzmi nie, to pierwsza poprawka projektowa do zrobienia.

## W skrócie

- **Hierarchia:** najważniejszy element powinien wyglądać na najważniejszy. Sprawdź testem odległości 2,5 metra
- **Biała przestrzeń wokół CTA**, a nie wszędzie dla samej przestrzeni
- **Spójność zdjęć** bije jakość zdjęć. Jeden styl w całym katalogu
- **Kontrast CTA, nie kolor.** Wygrywa kolor o najwyższym kontraście z paletą strony
- **Typografia mobile: tekst 16 px+, pola dotyku 44 px+**
- **Przyklejony Dodaj do koszyka na mobile** jest obowiązkowy
- **Obrazy hero pokazują efekt** (produkt w użyciu), a nie produkt na bieli
- **Mały system designu (3 kolory, 4 rozmiary, 3 warianty przycisków)** wygląda bardziej profesjonalnie niż 15 wariantów
- **Pierwszy ekran sprzedaje przewijanie**, nie produkt. Jedna wyraźna wiadomość, jedno CTA
- **Zabij karuzelę na stronie głównej**. Statyczne hero wygrywa

[Zacznij darmowy okres próbny](https://app-v3.shoprocket.io/signup), jeśli chcesz sklep z motywem, który ma te wzorce wbudowane. 14 dni, bez karty.

---

- HTML version: https://v3.shoprocket.io/pl/blog/dziesiec-decyzji-projektowych-w-e-commerce-ktore-podnosza-konwersje
- Language: Polski (pl)
- 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), [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)