# Dönüşümü ölçülebilir biçimde artıran on e-ticaret tasarım kararı

> 'Daha fazla boşluk kullanın' değil, 'düğme renginizi test edin' değil. Gerçek mağazalarda dönüşümü gerçekten hareket ettiren görsel hiyerarşi, fotoğraf, tipografi ve mobil tercihler.

Ryan Badger - 3 Kasım 2024 - 7 dk okuma

## Dönüşümü gerçekten hareket ettiren tasarım kararları

Tasarım yazıları genellikle iki kampa ayrılır. "Bol boşluk kullanın!" (fazla belirsiz) ya da "47 düğme rengini A/B test edin" (fazla ayrıntılı). İkisi de mağazasına bakıp neden %1,3 dönüştürdüğünü merak eden birine yardımcı olmuyor.

Bu yazı, e-ticaret mağazalarında dönüşümü ölçülebilir biçimde değiştiren belirli görsel tasarım kararlarıyla ilgili. Zevk değil. Marka estetiği değil. İnsanların satın almasına yardım eden ya da engel olan yerleşim, hiyerarşi, renk ve tipografi tercihleri.

## 1. Görsel hiyerarşi: en önemli şey en önemli görünmeli

Çoğu mağaza ürün sayfasındaki her şeye eşit görsel ağırlık verir: 16px gövde metni, 18px fiyat, 18px başlıklar. Her öğe yarışır; hiçbiri kazanmaz. Gözün bir giriş noktası yoktur.

Çözüm: tıklanmasını istediğiniz şey sayfadaki en büyük, en yüksek kontrastlı şey olmalı.

- Ürün başlığı: 28-36px
- Fiyat: 20-24px, kalın, net biçimde ayrılmış
- Sepete Ekle düğmesi: mobilde tam genişlik, sayfadaki görsel olarak en ağır öğe
- Açıklamalar, özellik listeleri, kargo bilgisi: 14-16px, daha sessiz

Ürün sayfanıza 2,5 metre uzaktan baktığınızda (evet, gerçekten geriye yaslanın) birincil eylemin ne olduğunu söyleyebiliyor musunuz? Tüm sayfa gri bir çorba gibi görünüyorsa hiyerarşiniz bozuk.

## 2. Boşluk her yerde değil, CTA'nın çevresinde

"Daha fazla boşluk kullanın" evrensel bir tasarım ipucu gibi ortaya atılır. Gerçekten önemli olan, kendi başına boşluk değil, düğmelerin ve kilit öğelerin çevresindeki boşluktur.

- Sepete Ekle alanının çevresinde en az 40-60px dolgu
- Fiyatın, diğer metinlerle sıkışmadan kendi temiz alanında durması
- Ürün görsellerine nefes alacak alan verilmesi (kenardan kenara, boşluksuz değil)

Geri kalan her şeyi (yorumlar, kargo bilgisi, ilgili ürünler) daha sıkı yerleştirin. Bunlar ikincil. CTA alanı, nefes alan tek şey olarak kazanır.

## 3. Tutarlı ürün fotoğrafçılığı, "daha iyi" ürün fotoğrafçılığını yener

Fotoğrafların hepsinin biraz farklı olduğu (farklı arka planlar, farklı ışık, farklı yakınlaştırma) 50 ürünlük bir katalog amatör görünür. Her fotoğrafın aynı açıda, aynı ışıkta, aynı kadrajda ve aynı arka planda olduğu bir katalog profesyonel görünür.

Bu bir kalite sorunu değil, bir hacim sorunu. En çok satan 5 ürününüzün cilalı kahraman çekimleri olabilir. Geri kalan her şey, biraz daha az gösterişli olsa bile, aynı şekilde çekilmeli. Tutarsızlık, düşük kaliteden daha fazla "küçük, güvenilmez dükkân" sinyali verir.

Pratik kural:

- Birincil fotoğraf: beyaz veya düz arka plan, ortalanmış, katalog boyunca aynı kadraj
- İkincil fotoğraflar: yaşam tarzı / kullanım halinde, tutarlı ton
- Tüm fotoğraflar aynı en-boy oranı ve çözünürlükte

## 4. CTA rengi değil, CTA kontrastı

"Turuncu düğmeler yeşilden %X daha yüksek dönüşüm sağlar!" Bu test edilmiş iddiayı sık görürsünüz. Tek başına saçmalık. Önemli olan **çevresindeki sayfayla kontrast**. Turuncu temalı bir sitedeki turuncu düğme görünmezdir. Aynı sitedeki mavi düğme bir fener gibidir.

Sitenizin baskın paletiyle en yüksek kontrastı yapan rengi seçin. Sayfanız beyaz + siyah + ten rengiyse CTA'nız başka yerde görünmeyen tek renk olmalı.

İkincil nokta: birincil CTA'lar için hayalet düğmelerden (yalnızca çerçeveli, dolgusuz) kaçının. Zarif görünürler ama gözün "ikincil" olarak algılaması nedeniyle dönüşümde kötü sonuç verirler. Sepete Ekle, Siparişi Ver, Hemen Satın Al için dolgulu düğme kullanın.

## 5. Mobilde yazı boyutu ve satır uzunluğu

Çoğu mobil mağazada metin fazla küçük ve fazla geniş. Telefonlar metni daha yüksek piksel yoğunluğunda gösterir; masaüstünde 16px olan şey mobilde küçük hissettirir.

Mobil tipografi tabanı:

- Gövde metni: en az 16-18px
- Satır uzunluğu: satır başına 40-60 karakter
- Satır yüksekliği: yazı boyutunun 1,4-1,6 katı
- Düğmeler / dokunma hedefleri: en az 44px yükseklik (Apple'ın erişilebilirlik yönergesi)

Ziyaretçiler ürün açıklamalarınızı büyütmek için parmaklarını kullanıyorsa yazınız çok küçük. Tarayıcının mobil emülatöründe değil, gerçek bir telefonda kol mesafesinde test edin.

## 6. Mobilde sabit Sepete Ekle

Mobilde uzun bir ürün sayfasını aşağı kaydırın: açıklamayı okuduğunuzda Sepete Ekle düğmesi 3 ekran yukarıda kalmıştır. Satın almaya karar vermiş müşterilerin şimdi geri kaydırması gerekir, bu da dönüşüm oranını düşürür.

Çözüm: asıl düğme ekran dışına kaydığında mobil görünüm alanının altında yüzen sabit bir Sepete Ekle. Tek dokunuş, sepet açılır, kaydırarak arama yok.

Masaüstü: sabit sepet isteğe bağlı olur (görünüm alanı daha büyük). Mobil: pazarlık konusu bile değil.

## 7. Ürünü değil sonucu gösteren ana görsel

Çoğu ana bölüm, ürünü beyaz zeminde izole olarak gösterir. Referans fotoğrafı için iyi; ana görsel için yanlış. Ana görselin 2 saniyede "buna sahip olunca hayat nasıl" sorusunu iletmesi gerekir.

Daha iyisi: ürün kullanımda, bağlamında, hedef alıcınıza uyan bir kişi veya ortamla.

- Cilt bakımı: biri kullanıyor, sabah ışığı, banyo
- Mobilya: parça gerçek bir odada, yaşanmış
- Giyim: bir vücutta, hareket halinde, manken değil
- Yiyecek/kahve: hazırlanırken veya tadılırken, ürün çekimi değil

Kullanımdaki ürün görseli, izole ürün görselinden daha iyi dönüşüm sağlar çünkü alıcı adına hayal gücü işinin daha büyük kısmını yapar. Hayal etmek zorunda kalmadan kendilerini kullanırken görebilirler.

## 8. Mağaza genelinde tutarlı bileşenler

Yaygın bir hata: ürün sayfaları bir kart stili, kategori sayfaları farklı bir stil, ana sayfa ise üçüncü bir stil kullanıyor. Müşteriler adını koyamasalar bile bu tutarsızlığı hisseder. Mağazalar aynı bileşenler tutarlı biçimde göründüğünde güvenilir görünür.

Küçük bir e-ticaret tasarım sistemi şunlardan oluşur:

- Tek bir ürün kartı bileşeni (ana sayfada öne çıkanlarda, kategori ızgaralarında, ilgili ürünlerde, arama sonuçlarında kullanılan)
- Tek bir düğme sistemi (birincil, ikincil, üçüncül; yalnızca bu üçü)
- Tek bir başlık stili sistemi (H1, H2, H3; tutarlı biçimde uygulanmış)
- Tek bir renk paleti (en fazla 3 marka rengi, artı gri skala)
- Tek bir yazı ölçeği (en fazla 3-4 boyut)

Çoğu mağaza, biri yeterliyken her birinin 15 varyasyonunu yapar. Daha az varyasyon = daha profesyonel görünüm.

## 9. İlk ekran, kaydırmanın reklamıdır

İlk yüklemede görünen alanın (kaydırmadan görünen kısım) tek bir işi var: ziyaretçiyi kaydırmak istemeye sevk etmek. Hepsi bu. İlk ekranda satışı yapmaya çalışmayın.

Kaydırmadan görünen kısımda gerekenler:

- Bunun kimin için olduğu (tek satırda)
- Ürünün ne olduğu (görsel olarak, tek güzel bir görsel)
- Tek bir net CTA (Sepete Ekle veya Alışverişe Başla)
- Güven veren tek bir sinyal (puan + yorum sayısı, ya da basın alıntısı, ya da bilinen bir müşteri)

Kaydırmadan görünen kısımda GEREKMEYENLER:

- Dikkat için yarışan birden fazla CTA
- Her 3 saniyede bir otomatik ilerleyen bir ana karusel (dönüşüm katili; içerik hareket edince müşteriler donar)
- Ürünün tüm faydaları
- Müşteri yorumu galerileri

## 10. Ana sayfanızdaki karuseli kaldırın

Yukarıdakiyle ilgili ama kendi maddesini hak ediyor: ana sayfa karuselleri öldü. Çalışmalar, dönen ana slaytların %1-3 oranında tıklandığını ve yalnızca ilk slayta ciddi dikkat gösterildiğini tutarlı biçimde gösteriyor. 1. slayta koyacağınız tek mesajı seçin; onu sabit bir ana görsel olarak koyun. Gerisinden vazgeçin.

## Shoprocket neleri halleder

Temalı mağaza vitrini, yukarıdaki görsel hiyerarşi, kontrast ve mobil kalıpları zaten izleyen şablonlarla gelir. Kendi sitenizde widget gömmesi kullanıyorsanız çevreleyen sayfanın tasarımı sizin kontrolünüzde, ama:

- Varsayılan olarak **sepet çekmecesi** (tam sayfa sepet değil)
- **Sabit mobil sepet** desteklenir
- Otomatik WebP teslimatı ve doğru en-boy oranlarıyla **duyarlı ürün görselleri**
- Tasarım sistemini sıfırdan kurmak zorunda kalmamanız için **site oluşturucu + 40+ tema**
- Gömmeyi sitenize uyacak şekilde temalamanızı sağlayan **özel CSS kancaları**

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

Shoprocket'ın kontrol etmedikleri: ana görselleriniz, fotoğraf tutarlılığınız, metinleriniz, renk sisteminiz. Bunları kurmak ya da bozmak sizin elinizde.

> **İpucu:** Mağazanızı şu an telefonunuzda açın. Bir ürün sayfası seçin. Sepete Ekle düğmesini kaydırmadan görebiliyor musunuz? Fiyat net biçimde ikinci en büyük şey mi? Açıklamayı gözlerinizi kısmadan okuyabiliyor musunuz? Bunlardan herhangi birinin cevabı hayırsa, yapılacak ilk tasarım düzeltmesi bu.

## Özetle

- **Hiyerarşi:** en önemli öğe en önemli görünmeli. 2,5 metre testiyle kontrol edin
- **CTA çevresinde boşluk**, kendi başına her yerde değil
- **Fotoğraf tutarlılığı**, fotoğraf kalitesini yener. Katalog boyunca tek stil
- **CTA rengi değil, kontrastı.** Sayfa paletinize karşı en yüksek kontrastlı renk kazanır
- **Mobil yazı: 16px+ gövde, 44px+ dokunma hedefleri**
- **Mobilde sabit Sepete Ekle** pazarlık konusu değil
- **Ana görseller sonuçları gösterir** (kullanımdaki ürün), beyaz zeminde ürünü değil
- **Küçük tasarım sistemi (3 renk, 4 boyut, 3 düğme varyantı)** 15 varyanttan daha profesyonel görünür
- **İlk ekran kaydırmayı satar**, ürünü değil. Tek net mesaj, tek CTA
- **Ana sayfa karuselini kaldırın**. Sabit ana görsel kazanır

Bu kalıpların yerleşik olduğu temalı bir mağaza vitrini istiyorsanız [ücretsiz denemeyi başlatın](https://app-v3.shoprocket.io/signup). 14 gün, kart gerekmez.

---

- HTML version: https://v3.shoprocket.io/tr/blog/donusumu-artiran-on-eticaret-tasarim-karari
- Language: Türkçe (tr)
- 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), [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), [中文](https://v3.shoprocket.io/zh/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md)