E-ticaret vitrin arayüzü konsepti

Bağlam: ürün kendi sayfasında neden ikinci planda kalır?

Bu konseptte el yapımı seramik ürünler satan varsayımsal bir markayı ele aldık. Ürünleri az sayıda, her biri özenle üretilmiş ve fotoğrafı güzel çekilmiş parçalardan oluşuyor. Böyle bir markanın en değerli varlığı ürünün kendisidir; buna karşın e-ticaret arayüzlerinin çoğu kampanya bantları, açılır pencereler, sayaçlar ve kalabalık menülerle ürünün önüne geçer. E-ticaret vitrin arayüzü konseptinde tersini denedik: arayüz geri çekilsin, ürün konuşsun.

Hedef kullanıcılar

• Hediye arayan: Ne alacağını bilmiyor, bütçesi belli. Göz gezdirmek ve fiyata göre daraltmak ister.
• Markayı tanıyan müşteri: Belirli bir ürünü ya da seriyi arar; aramaya ve yeni gelenlere hızlı ulaşmak ister.
• İlk kez gelen ziyaretçi: Sosyal medyadaki bir görselden gelmiştir, çoğunlukla telefondadır. Markaya güvenmek için ürün ayrıntısını, kargo ve iade koşullarını görmek ister.

Üçünün ortak noktası telefondur. Bu yüzden her ekranı önce dar ekranda, tek elle kullanım düşünülerek kurguladık.

Bilgi mimarisi

Menüde dört başlık bulunur: Mağaza, Seriler, Hikâye ve Yardım. Ürünler kullanım amacına göre az sayıda kategoriye ayrılır; alt kategori açmadık, çünkü ürün sayısı az olan bir mağazada derin menü yalnızca tıklama sayısını artırır. Süzgeçler üç tanedir: kategori, renk ve fiyat aralığı.

Kargo, iade ve bakım bilgileri ayrı sayfalarda durur, ama ürün sayfasında da kısa özetleri görünür. Müşterinin karar anında başka bir sayfaya gidip geri dönmesi gerekmez.

Ekran ekran tasarım kararları

Liste sayfası

Görseller büyük, metin az: ürün adı ve fiyat. Kartın üzerine gelince ikinci görsel görünür. Süzgeçler masaüstünde üstte tek satırda, telefonda alttan açılan bir panelde durur. Sonsuz kaydırma yerine “daha fazla göster” düğmesi kullandık; böylece sayfanın altındaki bilgilere ulaşmak mümkün kalır ve her sayfanın kendi adresi olur.

Ürün sayfası

Görsel ekranın büyük bölümünü kaplar. Sağında ürün adı, fiyat, seçenekler ve sepete ekle düğmesi yer alır; bu blok kaydırma sırasında görünür kalır. Ölçü, malzeme ve bakım bilgisi düğmenin altında açılır başlıklar hâlinde durur. Stokta olmayan ürün gizlenmez; durumu açıkça yazılır.

Sepet ve ödeme yolu

Sepete ekleme sayfayı değiştirmez; yandan açılan bir panel sepeti gösterir. Ödeme adımları tek sayfada, sırayla açılan bölümlerle ilerler. Üye olma zorunluluğu yoktur; hesap açma seçeneği siparişten sonra sunulur. Kargo bedeli ödeme adımında değil, sepette görünür.

Mobil düzen

Telefonda sepete ekle düğmesi ekranın altına sabitlenir. Görseller yatay kaydırılır, süzgeç paneli başparmağın ulaştığı alanda açılır. Form alanlarında doğru klavye türü ve otomatik doldurma kullanılır.

Teknik altyapı

Konsept bir arayüz çalışmasıdır; arkasındaki e-ticaret altyapısından bağımsız düşünüldü. Aynı tasarım, hazır bir e-ticaret platformunun teması olarak ya da ayrı bir ön yüz olarak uygulanabilir.

• Ürün görselleri modern biçimlerde ve birkaç boyutta üretilir; liste sayfasında ilk satırın dışındaki görseller ihtiyaç anında yüklenir.
• Ürün sayfalarında ad, fiyat, para birimi ve stok durumu için ürün yapısal verisi bulunur.
• Süzgeç birleşimlerinin hangilerinin dizine eklenmeye değer olduğu baştan belirlenir; gerisi için standart adres etiketi kullanılır.
• Ödeme, kargo ve fatura bağlantıları seçilen altyapıya göre kurulur.
• Çerez izni, üyelik ve sipariş sırasında işlenen kişisel veriler KVKK kapsamında ele alınır.

Başarıyı nasıl ölçerdik?

Bu çalışma bir konsepttir; gerçek bir mağazanın satış sonucunu göstermez. Gerçek bir projede aşağıdaki hedefleri yayından önce tanımlar, ölçümü buna göre kurardık.

• Liste ve ürün sayfalarında Önemli Web Verileri’nin mobilde “iyi” aralıkta kalması.
• Ürün sayfasından sepete, sepetten ödemeye geçiş oranlarının adım adım izlenmesi.
• Ödeme adımlarında en çok terk edilen noktanın belirlenmesi.
• Süzgeç ve arama kullanımının, hangi ürünlerin bulunamadığını gösterecek biçimde kaydedilmesi.

Benzer bir markada nasıl uygulanır?

Aynı yaklaşım, ürün fotoğrafı güçlü olan ve ürün sayısı yönetilebilir düzeyde kalan markalarda iyi çalışır: seramik, tekstil, mobilya, takı, kozmetik. İşe ürün verisini ve görselleri gözden geçirerek başlarız; tutarsız oranlarda çekilmiş fotoğraflar en iyi ızgarayı bile bozar. Ardından liste, ürün ve sepet ekranlarının tel kafesleri, arayüz tasarımı ve seçilen altyapı üzerinde geliştirme gelir.

Mevcut bir mağaza yeniden tasarlanıyorsa ürün ve kategori adresleri korunur ya da kalıcı yönlendirmeyle taşınır. Sürecin tamamı web tasarım sayfasında, ürün sayfalarının aramada bulunmasına yönelik çalışma SEO çalışmaları sayfasında anlatılıyor.

Benzer bir ihtiyacınız varsa kapsamı birlikte konuşalım; yöntemin tamamı için Web Tasarım sayfasına bakabilirsiniz.