E-Ticaret UI Tasarımı
Ürünü bulmaktan ödemeye kadar akıcı arayüz
Ziyaretçi ürünü bulur ama varyantı seçemez, kargo bilgisini arar, sepette vazgeçer. Sorun genelde tek bir ekranda değil, adımlar arasındaki kopukluktadır. Listeleme, filtre, ürün sayfası, sepet ve ödeme ekranlarını tek bir satın alma akışı gibi tasarlıyoruz.
- Filtre ve listeleme düzeni
- Varyant seçimi ve stok
- Sepetten ödemeye kesintisiz akış
- Mobil öncelikli ekran düzeni
Birlikte çalıştığımız markalar
E-Ticaret UI Tasarımı kimler için?
Ürün sayısı artan mağazalar
Katalog büyüdükçe kategori ve filtre yapısı yetersiz kalan işletmeler. Ziyaretçinin aradığını bulma yolu yeniden kurulur.
Mobil trafiği ağır basan markalar
Ziyaretin çoğu telefondan gelen ama tasarımı masaüstünde düşünülmüş mağazalar. Düzen dar ekran öncelikli kurgulanır.
Hazır tema üstünde ilerleyen ekipler
Shopify ya da WooCommerce temasıyla başlayıp markaya ve ürün yapısına uymayan yerleri düzeltmek isteyenler.
Kapsam ve teslimatlar
Kategori ve listeleme ekranları
Ürün kartı bilgisi, ızgara düzeni, sıralama ve sayfalama davranışı tasarlanır. Kartta hangi bilginin görüneceği, kararı hızlandıracak biçimde seçilir.
Filtre ve arama
Filtrelerin sırası, çoklu seçim davranışı, sonuç sayısı geri bildirimi ve dar ekranda filtre panelinin nasıl açılacağı belirlenir.
Ürün detay sayfası
Görsel alanı, varyant seçimi, stok ve teslimat bilgisi, sepete ekleme davranışı ve açıklama bölümlerinin sırası tasarlanır.
Sepet ve ödeme adımları
Sepet özeti, kargo ve indirim alanı, adım göstergesi, form doğrulama mesajları ve sipariş özeti ekranları kurgulanır.
Kampanya ve rozet kuralları
İndirim, yeni ürün, tükendi ve kampanya rozetlerinin görünümü ve nerede kullanılacağı kurala bağlanır.
Mobil düzen ve teslim
Bütün ekranların dar ekran davranışı tasarlanır, dosya ölçüleriyle geliştirme ya da tema ekibine teslim edilir.
Seçilemeyen varyant nasıl gösterilecek
Gerçek bir katalogda en sık karşılaşılan durum, ürünün kendisinin değil bir varyantının bulunmaması. Müşteri rengi seçiyor, istediği beden tükenmiş oluyor; ya da bedeni seçiyor, o bedende yalnız tek renk kalıyor. Bu an, ürün sayfasının en çok terk edilen anı ve çoğu mağazada hiç tasarlanmamış oluyor.
Verilecek karar basit görünüyor ama sonucu değiştiriyor. Tükenen seçenek listeden tamamen kaldırılırsa müşteri o ürünün başka renklerde bulunduğunu hiç öğrenmiyor. Seçilebilir bırakılırsa sepete eklemeye çalışıp hata alıyor. Arada duran çözüm, seçeneği görünür ama pasif tutmak ve neden seçilemediğini aynı yerde söylemek.
Bunun devamı da tasarımın parçası. Stoka girince haber verme, benzer ürünü önerme ve aynı ürünü farklı bedende gösterme seçeneklerinden hangisinin kullanılacağı ürün tipine göre değişiyor. Kararı kataloğunuzun gerçek stok davranışına bakarak veriyoruz.
Aynı karar listeleme ekranında da veriliyor. Tükenen ürünlerin listede kalıp kalmayacağı, kalacaksa nasıl işaretleneceği kataloğun büyüklüğüne göre değişiyor. Stok dalgalanması yüksek mağazalarda bu tercih, filtre sonuçlarının güvenilirliğini doğrudan etkiliyor.
Klavye açılınca ödeme ekranı başka bir ekran oluyor
Telefonda form doldurmanın masaüstünden farkı yalnız genişlik değil. Kullanıcı bir alana dokunduğunda klavye ekranın yarısını kaplıyor ve o ana kadar tasarlanan düzenin yarısı görünmez oluyor. Aşağıda duran devam düğmesi klavyenin altında kalıyor, hata mesajı ekranın dışına çıkıyor, sayfa kendiliğinden kayıyor.
Bu yüzden ödeme adımlarını klavye açıkken de tasarlıyoruz. Hata mesajı ilgili alanın hemen yanında duruyor, devam düğmesi ya klavyeyle birlikte yukarı taşınıyor ya da akışın içinde alanın altında bulunuyor, sipariş özeti katlanabilir hale getiriliyor.
Alan tipleri de aynı ölçüde belirleyici. Kart numarası ve posta kodu için sayısal klavyenin açılması, e-posta alanında otomatik büyük harfin kapanması ve tarayıcının kayıtlı adres bilgisini doldurabilmesi, formu kısaltmaktan daha hızlı sonuç veriyor. Bunlar tasarım dosyasında alan alan yazılı oluyor.
Bunların çoğu tasarım dosyasında görünmeyen ama uygulamada ortaya çıkan kararlar. Bu yüzden ödeme akışını yayına almadan önce gerçek bir telefonda baştan sona deniyor, takıldığımız yerleri düzeltme listesine yazıyoruz.
Nasıl çalışıyoruz?
Katalog ve akış incelemesi
Ürün yapısını, varyantları, kategori ağacını ve mevcut satın alma adımlarını inceliyoruz. Ziyaretçinin nerede vazgeçtiğini varsa analitik verisiyle birlikte okuyoruz.
Akış kararı
Kategoriden ödemeye giden yolu adım adım kuruyoruz. Kaç adım olacağı, hangi bilginin ne zaman isteneceği bu aşamada netleşiyor.
Anahtar ekran tasarımı
Listeleme, ürün detayı ve ödeme ekranlarını önce tasarlıyoruz. Bu üç ekran satın alma akışının yükünü taşıyor.
Bileşen ve durum tamamlama
Ürün kartı, filtre, rozet, sepet satırı gibi parçaları varyantlarıyla kuruyoruz. Stok yok, kampanya bitti ve arama sonucu boş gibi durumlar ayrı çiziliyor.
Mobil kontrol ve teslim
Dar ekranda dokunma alanlarını, filtre panelini ve ödeme formunu kontrol edip dosyayı teslim ediyoruz.
Kullandığımız araçlar ve platformlar
- Figma
- FigJam
- Maze
- Hotjar
- Storybook
E-Ticaret UI Tasarımı fiyatını neler belirler?
Ekran ve şablon sayısı
Kaç farklı sayfa tipinin tasarlanacağı kapsamı belirler. Ürün tipleri birbirinden farklı davranıyorsa şablon sayısı artar.
Ürün ve varyant yapısı
Beden, renk, paket ve kişiselleştirme seçenekleri arttıkça ürün sayfasının kurgusu karmaşıklaşır.
Platform kısıtları
Hazır tema üzerinde çalışmak bazı kararları sınırlar, özel geliştirme daha geniş alan açar ama uygulama yükünü artırır.
Kampanya ve içerik ihtiyacı
Kampanya sayfaları, koleksiyon anlatımları ve özel bölümler isteniyorsa bunlar ayrı tasarım kalemi olur.
Sıkça sorulan sorular
Shopify ya da WooCommerce temamızın üstünde çalışabilir misiniz?
Evet. Kullandığınız platformun ve temanın neye izin verdiğini baştan inceliyoruz. Tasarımı bu sınırların içinde kuruyoruz, böylece uygulanamayan ekran ortaya çıkmıyor. Sınırlar işi zorluyorsa alternatifi birlikte konuşuyoruz.
Ödeme adımını da tasarlıyor musunuz?
Platformun izin verdiği ölçüde evet. Bazı platformlarda ödeme ekranı büyük ölçüde sabittir; bu durumda sepet, adres ve kargo adımlarında iyileştirilebilecek alanlara odaklanıyoruz.
Ürün fotoğraflarını siz mi çekiyorsunuz?
Fotoğraf ayrı bir çalışma. Tasarım tarafında fotoğraf ölçüsü, oranı, arka plan ve çekim düzeni için kural veriyoruz; mevcut görselleriniz bu kurala uymuyorsa hangi ürünlerin yeniden çekilmesi gerektiğini listeliyoruz.
Mobil tasarımı ayrı mı yapıyorsunuz?
Ayrı bir proje olarak değil, aynı tasarımın parçası olarak. Ziyaretin çoğu telefondan geldiği için ekranları genelde önce dar ekranda kuruyor, sonra geniş ekrana açıyoruz.
Arama ve filtre yapısını da kuruyor musunuz?
Arayüz tarafını kuruyoruz. Filtrelerin hangi ürün özelliklerinden üretileceği katalog verinize bağlı; bu yüzden ürün verisi eksikse önce hangi alanların doldurulması gerektiğini çıkarıyoruz.
Tasarımın satışa etkisini nasıl takip ediyoruz?
Yayına almadan önce hangi adımların ölçüleceğini belirliyoruz. Listeleme, ürün sayfası ve sepet adımları ayrı ayrı izlendiğinde, değişikliğin hangi adımı etkilediği görünür hâle geliyor.
E-Ticaret UI Tasarımı için ilk adımı atalım
- 1Formu doldurun ya da bizi arayın
- 2Bir iş günü içinde ön görüşme planlayalım
- 3Size özel yol haritası ve teklif hazırlayalım