eCommerce UX – Temel Tasarım Stratejileri ve İlkeleri

Yayınlanan: 2022-03-11

Genel perakende ortamı gelişmeye devam ederken ve geleneksel zincirler mücadele ederken, e-ticaret pazarı büyümeye hazırlanıyor. 2021 yılına kadar, küresel e-ticaret satışlarının 4,48 trilyon doları aşması bekleniyor, bu da 2017'deki rakamların iki katından fazla.

Kullanıcı deneyimine çok dikkat eden ve müşteri alışveriş akışı için standart bir e-Ticaret UX tasarım ilkelerine bağlı olan e-ticaret perakendecileri ve tasarımcıları, bu pazar büyümesinden faydalanabilir ve somut finansal getiriler görebilir.

Alışveriş akışı, doğru şekilde uygulandığında daha hızlı satın alma, daha az alışveriş sepetini terk etme ve daha yüksek toplam dönüşümle sonuçlanan genel bir kullanıcı yolculuğudur.

Kullanıcı yolculuğu şunları içerir:

  • Web sitesi keşfi
  • Ürün arama ve göz atma
  • Ürün sayfası
  • Araba
  • Çıkış yapmak
  • Onayla

Bu makale, kullanıcı yolculuğunun bu önemli noktalarını ve e-ticaret tasarımcılarının müşteri deneyimini nasıl keyifli, anlaşılır ve sorunsuz hale getirebileceğini ele alıyor.

E-ticaret ux müşteri yolculuğunun aşamaları
E-Ticaret web sitesi tasarımında kullanıcı yolculuğu aşamaları.

Web Sitesi Keşfi

Markayı Açıkça Konumlandırın

Ziyaretçiler, bir web sitesinin ilk izlenimlerini 50 milisaniye kadar kısa bir sürede oluşturur. Bir e-Ticaret web sitesinin, ne sattığını ve genel pazarda nereye oturduğunu açık ve hızlı bir şekilde göstererek kullanıcının dikkatini çekmesi gerekir.

Örneğin, lüks bir mücevher perakendecisinin web sitesi, büyük olasılıkla, bütçe bilincine sahip büyük bir kutu mağazasının sitesinden çok farklı görünecek ve hissedecektir. Üst düzey elektronik perakendecisi Bang & Olufsen, marka kalitesini zarif yazı tipleri, sofistike bir renk paleti ve şık ürün resimleri kullanarak aktarıyor.

Bir açılış sayfası için e-ticaret ux tasarımı
Bang & Olufsen tarafından yazı tipi, fotoğraf ve kopya kullanılarak marka konumlandırma.

İlgili Harekete Geçirici Mesajları Göster

Kullanıcı ana sayfaya geldiğinde, onları zamanında içerik ve belirli harekete geçirici mesajlarla (CTA'lar) karşılayın. Mevcut sezona veya belirli bir etkinliğe karşılık gelen büyük bir banner resmi ve uygun bir CTA, kullanıcının alışveriş sürecinde bir sonraki adıma geçmesine yardımcı olur. CTA'lar oluştururken, kullanıcıya sırada ne olduğunu açıkça söylemeyen "başla" gibi genel ifadelerden kaçının.

Polaroid, yılbaşı döneminde hediye alışverişi yapan kullanıcılara yardımcı olarak etkili bir CTA oluşturdu. Polaroid, genel bir ifade kullanmak yerine “Hediyeler Dükkanı” kullandı, kullanıcının sitede hediye önerileriyle birlikte bir alana götürüleceğini açıkça belirtti.

e-ticaret harekete geçirici mesaj
Polaroid, ana sayfada hediye alışverişi yapmak için bir CTA gösterir.

SEO için Açılış Sayfalarını Uyarlayın

Kullanıcının arama terimlerini Google gibi arama motorlarından belirli açılış sayfalarına bağlayarak, e-ticaret perakendecileri belirli bir ürünü bulma görevinde olan kullanıcıları yakalayabilir.

Bir kullanıcı bir şey aradığında, satın almak isteyebilecekleri yüksek bir şans vardır. Yaygın ürün arama terimleri için özel bir açılış sayfası oluşturmak, bir perakendecinin bir indirim (ve belki de yeni bir müşteri) yakalama şansını artırır. Kırtasiye şirketi Papier, Google arama sonuçlarında görünen düğün davetiyeleri için özel olarak hazırlanmış bir sayfayla bunu çok iyi yapıyor.

Mobil e-ticaret açılış sayfası
Papier'den düğün kırtasiye malzemeleri için özel açılış sayfası.

Ürün Arama ve Göz Atma

Yerinde Arama Sağlayın

Oldukça basit görünse de, birçok site hala site genelinde genel bir arama sunmuyor veya sunuyorsa, uygun şekilde optimize edilmemiştir. Ancak yerinde arama, sağlam bir e-ticaret alışveriş deneyiminin temelidir.

Invesp'e göre, çevrimiçi alışverişlerin %60'ı dürtüsel değildir . İnsanlar genellikle ne aradıklarını bilirler ve sorgularını bir e-Ticaret web sitesindeki bir arama çubuğuna (ürün adı veya model numarası gibi) yazmak, menü seçenekleri arasında gezinmekten çok daha hızlıdır.

Tahmine dayalı arama veya otomatik tamamlama gibi ek özellikler, kullanıcıların seçenekleri hızlı bir şekilde görmelerine yardımcı olur. Apple, bu taktiği, ürünlere ve önerilen popüler aramalara hızlı bağlantılarla dinamik olarak güncelleyen bir arama alanıyla kullanır.

e-ticaret arama alanı
Apple tarafından arama uygulaması.

Keşif Modunda Ziyaretçilere İlham Verin

Birçok müşterinin satın almak için aklında belirli bir ürün olsa da, tüm ziyaretçiler bu kadar emin değildir. Nielsen Norman'a göre, biri "tarayıcı" olan beş tür e-ticaret müşterisi vardır. Tarayıcılar mutlaka belirli bir şey aramazlar. Bunun yerine, ilginç bir şey bulup bulmadıklarını görmek için yavaş yavaş etrafa bakıyorlar.

e-Ticaret web siteleri , alışveriş yapan kişiye yeni veya en çok satan ürünleri göstererek ve ürün kategorilerini kolayca ve hızlı bir şekilde görmelerini sağlayarak keşif modunda destekleyebilir.

Etsy, hem gezinmede hem de ana sayfa içeriğinde genel ürün kategorilerini net bir şekilde göstermenin yanı sıra şu anda neyin popüler olduğunu göstererek tarayıcılarla etkileşime girer.

e-ticaret ux - ürün keşfi
Etsy, kategorileri görüntülemenin yanı sıra kullanıcıların nelerin popüler olduğunu keşfetmelerine yardımcı olur.

Filtreleri ve Yönlü Aramayı Kullanın

Yönlü arama, filtrelemeyi kullanır ve kullanıcıların aynı anda birden çok özniteliği seçmesine izin vererek bir adım daha ileri götürür.

Filtre oluştururken, seçenekleri boyut, renk veya fiyat gibi genel kriterlerle sınırlamak yerine, satılan ürünlere özel kategoriler için belirli filtreler ekleyin. Bu filtreler, giysiler için uygun veya kumaş, yazı tipleri veya davetler için fırsat ve gadget'lar için ekran boyutu veya işlemci gibi şeyler olabilir.

Bir kullanıcı filtreleri uyguladığında, hangi filtrelerin uygulandığı kullanıcı arayüzünde hemen görünür olmalıdır. Kullanıcı ayrıca uygulanan filtreleri kolayca kaldırabilmelidir.

ASOS, her kategori için ayrıntılı bir filtre yelpazesi gösterir ve hangi filtrelerin uygulandığını açıkça gösterir.

Mobil e-ticaret filtreleme
ASOS tarafından kategoriye özel filtreler.

Ürün Sayfası

Birincil İşlemleri Belirgin Bir Şekilde Görüntüleyin

Kullanıcı, alışveriş sepetine bir ürün yerleştirmek gibi önemli bir şeyi nasıl yapacağını asla merak etmemelidir. "Sepete ekle" veya "şimdi satın al" gibi birincil işlemleri düğmeler olarak görüntüleyin ve bunları, içeriğin geri kalanına göre ekranda belirgin bir konuma yerleştirin.

Ev geliştirme perakendecisi Lowe's, sayfadaki en göze çarpan şeylerden biri olan büyük, yeşil bir düğme ile kullanıcının sepetine nasıl ürün ekleyeceğini bilmesini sağlar.

e-ticaret ux en iyi uygulamaları, belirgin bir şekilde görüntülenen birincil işlem
Lowe's, "Sepete Ekle"nin birincil eylemini büyük bir yeşil düğme olarak gösterir.

Detaylı Ürün Bilgisi Sağlayın

Alıcıların ürünü anlamasına yardımcı olmak için yüksek kaliteli, profesyonel fotoğraflar ve ayrıntılı açıklamalar gösterin.

Kullanıcıya ihtiyaç duyduğu kadar doğru miktarda bilgi vermek için aşamalı açıklama ve görsel hiyerarşi kullanın. Onlara en önemli bilgileri hemen verin, ardından daha fazla bilgi edinmek isteyen kullanıcılar için ayrıntıları sayfanın aşağılarına ekleyin.

Uzun açıklamaları bölümlere ayırın; örneğin, genel bakış, boyutlar/boyutlar, ayrıntılı özellikler ve nakliye bilgileri. Myprotein'in yaptığı gibi, ek bölümler için genişlet/daralt navigasyonunu kullanmak, kullanıcının bunalmış hissetmesini önlemeye yardımcı olur.

Mobil e-ticaret ux - ürün açıklaması
Ürün açıklaması, Myprotein'de bir dizi genişletilebilir bölümde düzenlenmiştir.

Müşteri Güveni Oluşturun

Müşterileri nakliye seçenekleri, ürün mevcudiyeti ve iade politikaları hakkında tahminde bulunmaktan kaçının. Tüm bu bilgilerin hazır olduğundan emin olmak, müşteri güvenini ve güvenini oluşturur ve belirsiz bir müşteriyi satın almaya yönlendirmeye yardımcı olabilir. Bir şeyi iade edip etmeyeceklerini ve nasıl iade edebileceklerini bilmek, daha bilinçli kararlar vermelerine yardımcı olur.

ASOS, her ürün adının altındaki bir bağlantıdan erişilen bir modal kullanarak her ürün sayfasında önemli nakliye ve iade bilgilerini açıkça gösterir.

e-ticaret ux - nakliye ve iade politikası
ASOS, ürün detay sayfasından bağlantı verilen bir modda nakliye ve iade bilgilerini gösterir.

Sosyal Kanıt Ekle

Sosyal kanıt, insanların başkalarının davranışlarından etkilendiği anlamına gelen bir kavramdır. Kavram, Dr. Robert Cialdini'nin (etki biliminde önde gelen bir araştırmacı) ikna ilkelerinin bir parçasıdır ve işe yaradığı kanıtlanmıştır.

e-Ticaret perakendecileri, müşteri puanları, incelemeler ve yorumlar ekleyerek alıcı güvenini sosyal kanıtlarla destekleyebilir. Amazon'daki ürünler genellikle binlerce incelemeye sahiptir ve kullanıcılar bunları yıldız derecelendirme düzeyine göre sıralayabilir.

e-ticaret ux müşteri yorumları
Amazon'da ürün incelemeleri.

Alışveriş kartı

Net Bir Sipariş Özeti Göster

Alıcı satın alma işlemini tamamlamadan önce, satın alınan ürünleri, her bir öğenin miktarını ve fiyatını ve sipariş toplamını içeren net ve kısa bir sipariş özeti gösterin. Kullanıcının güncellemek veya silmek isteyebileceği öğeleri düzenlemesine izin verin ve bir gönderi özeti ekleyerek kargo ücreti sürprizlerinden kaçının.

Modist, hem net bir sipariş özeti hem de bir makbuz gösterir. Kullanıcı, seçtikleri öğeleri kolayca yönetebilir (istek listesine taşıma, kaldırma, miktarı değiştirme) ve hem özeti hem de nakliye ve vergilerin ayrıntılı dökümünü görebilir.

Mobil e-ticaret ux alışveriş çantası
Modist'te siparişe genel bakış ve ayrıntılı döküm.

Çıkış yapmak

Kullanıcıların Misafir Olarak Çıkış Yapmasına İzin Verin

Anlık satın almalar, e-ticarette harcanan tüm paranın neredeyse %40'ını temsil ediyor. Alıcıların misafir olarak çıkış yapmasına izin vererek, bir hesap oluşturma veya giriş yapma gibi ekstra engelleri ortadan kaldırın. Misafir olarak çıkış işlemi sırasında, bir hesap oluşturmak için basit bir entegrasyon, bazı misafirleri hesap kullanıcılarına dönüştürebilir.

Aesop, kullanıcıların misafir olarak kolayca çıkış yapmalarına olanak tanırken, aynı zamanda oturum açma veya kayıt olma seçeneği de sunar. Tek bir formda birden fazla seçeneğin sağlanması, hızlı bir şekilde ödeme yapmak isteyenler için olası satın alma engellerini ortadan kaldırırken, kaydolmak isteyen kullanıcılara da bunu yapma şansı verir.

e-ticaret ux oturum açma
"Misafir olarak devam et" seçeneği ile Ezop oturum açma ekranı.

Ödeme İşlemi Sırasında Görsel Geri Bildirim Sağlayın

Bir ilerleme çubuğu eklemek, müşterilerin ödeme sürecinde nerede olduklarını ve tamamlamaları gereken ne kadar kaldığını anlamalarına yardımcı olur.

Apple, kullanıcıya süreçteki her adımı gösterir ve ilerleme bağlantılarını kullanarak adımlar arasında gezinmesine olanak tanır. İlerleme kaydedilir, böylece kullanıcı adımlar arasında hareket ederken hiçbir şey kaybetmez.

e-ticaret ux ödeme ilerleme çubuğu
Apple'ın adım adım bir ödeme ilerleme çubuğu vardır.

Ortak Ödeme Yöntemlerini Kullanın

Büyük kredi kartlarıyla ödemeye izin vermenin yanı sıra, PayPal gibi diğer popüler ödeme yöntemlerini eklemek, kredi kartı bilgilerini vermek istemeyen alıcılar için dönüşümü artırabilir.

Hollanda'da iDEAL genellikle e-ticaret işlemleri için kullanılır ve Hollandalı tüketicilerin %60'ı yakın zamanda yaptığı bir satın alma işleminde bunu kullanmıştır. Giyim perakendecisi Scotch & Soda, alıcıların iDEAL ve PayPal ile ödeme yapmasına olanak tanır.

e-ticaret ödeme seçenekleri
Scotch & Soda'nın ödeme sürecinde farklı ödeme yöntemleri.

Sipariş onayı

Satın Alma İşleminden Sonra Ayrıntılı Sipariş Onayı Görüntüle

Müşteri satın alma işlemini tamamladıktan sonra, başarılı ödeme işlemini ve adres, teslimat yöntemi ve beklenen teslimat tarihi gibi teslimat ayrıntılarını içeren bir onay verin.

Amazon için bu onay e-postası konsepti, sipariş numarasını gösterir, satın alınan ürünlere genel bir bakış sunar ve bir sevkiyat tarihi ve gelecekteki satın alımlar için bazı öneriler sunar.

e-ticaret ux sipariş onayı
Drew Christiano tarafından sipariş onayı e-posta konsepti.

E-posta ile Sipariş ve Gönderim Güncellemelerini Gönderin

Onay ekranına ek olarak, bir onay e-postası göndermek, kullanıcının satın alma durumu hakkında bilgilendirilmesine yardımcı olur. Tüm müşterilerin e-posta onayı alması gerekirken, bu özellikle kullanıcıların misafir olarak check-out yaptığı ve web sitesinde geçmiş siparişlerini kontrol etmek için bir hesapları olmadığı durumlarda yararlıdır.

Teslimatta gecikme gibi siparişte herhangi bir değişiklik olursa, bir güncelleme gönderin. Ürün gönderildiğinde, takip numarasıyla birlikte bir e-posta güncellemesi gönderin.

Özet

Bu makaledeki ilkeler, her e-Ticaret tasarımcısının izlemesi gereken kullanıcı yolculuğu temas noktalarına ilişkin bir temel sağlar, ancak bu yalnızca başlangıçtır. Mobil e-Ticaret UX hakkında daha fazla bilgi için, Mobil Deneyim için e-Ticaret'i ziyaret edin veya açılış sayfası tasarımı hakkında daha fazla bilgi edinin Etkili Açılış Sayfaları Nasıl Tasarlanır.

Büyüyen e-ticaret pazarı, perakendeciler için birçok fırsatı temsil ediyor. UX'in önemini kabul edenler ve e-Ticaret kullanıcı yolculuğu için en iyi uygulamaları takip edenler rekabetçi kalabilir ve kârlılıklarını olumlu yönde etkileyebilir.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

  • Öne Çıkan e-Ticaret Trendleri ve Tasarıma Etkileri (İnfografik ile)
  • Mobil Deneyim için e-Ticaret UX
  • eCommerce UX – En İyi Uygulamalara Genel Bir Bakış (Infografik ile)
  • E-Ticaret Web Sitesi Tasarımı İçin En İyi Kılavuz
  • e-Ticaret Yeniden Tasarlandı: Küçük Değişiklikler Büyük UX İyileştirmelerini Nasıl Yaptı?