Bir yemek masası aradığınızı düşünün. Fotoğraflar güzel, fiyat bütçenize uygun. Ancak ölçüler arasında yüksekliğin hangisi olduğu anlaşılmıyor. Görseldeki sandalyelerin fiyata dahil olup olmadığı belirsiz. Teslimatın kapıya mı, daireye mi yapılacağını öğrenmek için başka bir sayfaya gitmeniz gerekiyor.
Bu noktada satın alma kararını etkileyen şey, sayfanın ne kadar etkileyici göründüğü kadar hangi soruları yanıtladığıdır. Ürün detay sayfasını tasarlarken işe bu sorularla başlamak, içerik ve arayüz kararlarını somutlaştırır.
Aşağıdaki beş soru, mevcut sayfanızı değerlendirmek veya yeni bir tasarımın kapsamını belirlemek için kullanılabilir. Yemek masası örneği açıklama amacıyla kurgulanmıştır.
1. Bu ürün benim ihtiyacıma uygun mu?
Ürün adı ve fotoğrafı ilk fikri verir. Karar için gereken ayrıntılar ise kategoriye göre değişir. Bir masa için ölçüler ve malzeme; bir kulaklık için bağlantı türü ve cihaz uyumluluğu; bir ceket için kalıp ve kumaş bilgisi belirleyici olabilir.
Bu nedenle bütün ürünlere aynı açıklama şablonunu uygulamadan önce, müşterinin eleme yapmasını sağlayan bilgileri belirleyin. Teknik özelliklerin bulunması yeterli değildir; anlamları da açık olmalıdır. “120 × 80 × 75 cm” yerine genişlik, derinlik ve yüksekliği ayrı adlandırmak, ölçülerin yorumlanmasını kolaylaştırır.
Görselleri de aynı yaklaşımla seçin. Bir fotoğraf ürünü bütün olarak, diğeri malzemeyi, bir başkası kullanım ortamındaki ölçeği gösterebilir. Aynı açıdan çekilmiş birbirine yakın kareler yerine, farklı sorulara yanıt veren görseller planlayın. Fotoğraftaki aksesuarlar ürüne dahil değilse bunu ilgili alanda belirtin.
Bir tasarım projesinde bu çalışma, ürün içeriklerinin kim tarafından hazırlanacağı sorusunu da gündeme getirir. Eksik ölçü, belirsiz uyumluluk veya yanlış paket içeriği yalnızca yerleşim değiştirerek çözülemez. Tasarıma başlamadan önce kategori bazında gerekli içerikleri ve bunların sahibini netleştirin.
2. Tam olarak hangi seçeneği satın alıyorum?
Renk, ölçü, kapasite veya paket seçimi ürünün kimliğini değiştirebilir. Müşterinin seçtiği seçenek ile fotoğrafta gördüğü, fiyatını okuduğu ve sepete eklediği ürün arasında açık bir ilişki kurulmalıdır.
Örneğin bir masa için ceviz rengi seçildiğinde seçimin adı görünür kalmalı; o seçeneğe ait görsel varsa gösterilmelidir. Görsel başka bir seçeneği temsil ediyorsa bunu belirtmek gerekir. Görselin değişmesi tek başına yeterli bir seçim göstergesi değildir.
Stokta olmayan seçenekleri ele alırken de tek bir davranışı bütün ürünlere uygulamayın. Seçeneği görünür tutmak, müşterinin ürünün başka boyutlarda üretildiğini anlamasına yardımcı olabilir. Ancak neden satın alınamadığı açık olmalıdır. Yeniden stok bildirimi sunulacaksa bu hizmetin gerçekten çalıştığından emin olun.
Tasarım tesliminde yalnızca seçimin yapılmış olduğu ekranı göstermeyin. Henüz seçim yapılmaması, seçeneğin stokta olmaması ve seçimle birlikte fiyatın değişmesi gibi durumları da tanımlayın. Böylece geliştirme ekibinin kritik davranışları uygulama sırasında tahmin etmesi gerekmez.
3. Bu alışverişin toplam maliyeti ne?
Ürün fiyatı, müşterinin ödeyeceği toplam tutarı her zaman tek başına anlatmaz. Teslimat, kurulum veya seçilen ek hizmetler maliyeti değiştirebilir. Taksitli tutar gösteriliyorsa bunun aylık ödeme mi, toplam tutar mı olduğu kolayca anlaşılmalıdır.
Henüz adres bilinmediği için teslimat bedeli hesaplanamıyorsa, hesaplamanın hangi bilgiye bağlı olduğunu açıklayın. Ücretsiz teslimat belirli koşullara bağlıysa bu koşulları fiyatın yakınında erişilebilir hale getirin. “Ücretsiz kargo” mesajıyla başlayıp son adımda farklı bir sonuç göstermekten kaçının.
Ek hizmetler için de seçimin etkisini açıkça gösterin. Kurulum hizmeti eklendiğinde hangi tutarın arttığı ve hizmetin nasıl kaldırılacağı anlaşılmalıdır. Hizmetin isteğe bağlı olduğu durumlarda, kullanıcı seçmeden toplam tutara dahil edilmemesi uygun bir başlangıç yaklaşımıdır.
Bu bölümde tasarım ekibiyle ticari ekibin birlikte yanıtlaması gereken soru şudur: Müşteri sayfada gördüğü fiyatla ödeme adımına geldiğinde karşılaştığı tutar arasındaki farkı açıklayabiliyor mu? Açıklayamıyorsa sorun yalnızca fiyatın yazı boyutu değildir; bilginin sunulduğu zamanı yeniden ele almak gerekir.
4. Ne zaman ve nasıl teslim alacağım?
“Kargoya veriliş” ile “teslimat” aynı aşamayı anlatmaz. Sayfada kullanılan ifade, işletmenin gerçekten sağlayabildiği bilgiyi yansıtmalıdır. Tahmini bir tarih varsa tahmin olduğu belirtilmeli; bölgeye göre değişiyorsa bu değişken görünür olmalıdır.
Özellikle büyük hacimli ürünlerde teslimatın kapsamı kararın önemli bir parçası olabilir. Daireye taşıma, montaj, randevu veya ayrı gönderim gibi koşulları uzun bir yardım metnine bırakmak yerine, ürünle ilgili olanları kısa ve anlaşılır biçimde özetleyin.
İade koşullarına ulaşmak da kolay olmalıdır. Her ayrıntıyı satın alma alanına sığdırmanız gerekmez; ancak müşterinin hangi koşulları nereden öğrenebileceği açık olmalıdır. Ürüne özel istisnalar varsa genel bir bağlantının arkasında kaybolmamalıdır.
Burada arayüzün verebileceği bilgi, operasyonun üretebildiği bilgiyle sınırlıdır. Tasarım aşamasında teslimat tahmininin veri kaynağını, güncellenme biçimini ve bilgi alınamadığında gösterilecek mesajı kararlaştırın. Doğrulanamayan kesin bir tarih yerine, belirsizliği dürüstçe anlatan bir ifade kullanın.
5. Sepete eklediğimde ne oldu?
Sepete ekleme işlemi tamamlandığında müşteri sonucu anlayabilmelidir. Hangi ürünün, hangi seçenekle ve kaç adet eklendiğini gösteren kısa bir özet; “Alışverişe devam et” ve “Sepeti görüntüle” gibi anlaşılır eylemlerle birlikte sunulabilir.
İşlem sürüyorsa bekleme durumunu gösterin. Başarısızsa nedeni bilindiği ölçüde açıklayın ve kullanılabilir bir sonraki adım verin. Stok değiştiği için eklenemeyen bir ürünle geçici bağlantı sorununun aynı mesajla anlatılması, müşteriyi yanlış çözüme yönlendirebilir.
Bu geri bildirim yalnızca ekranı gören kişiler için düşünülmemelidir. W3C’nin WCAG 2.2 kapsamındaki 4.1.3 Durum Mesajları açıklaması, odağı değiştirmeden verilen işlem sonucu gibi mesajların yardımcı teknolojiler tarafından da algılanabilir olmasını ele alır. Örneğin sepete eklenme bilgisinin ekranda görünmesi, ekran okuyucuya otomatik olarak iletildiği anlamına gelmez. Bu davranış çalışan üründe kontrol edilmelidir. W3C kaynağı
Mobilde ekranın altında sabit bir satın alma alanı kullanıyorsanız, müşterinin seçimlerini görmesini ve değiştirmesini de değerlendirin. Klavye açıldığında veya sayfa yakınlaştırıldığında önemli bilgilerin kapanıp kapanmadığını kontrol edin. Sabit alanın yararı, gerçek kullanım koşullarında denenmelidir.
Yeniden tasarım kapsamını nasıl belirlemelisiniz
Bu beş soruyu, tek bir örnek ürün yerine farklı ihtiyaçları temsil eden ürünlerle değerlendirin. Örneğin çok seçenekli bir ürün, teslimat koşulu farklı bir ürün ve stokta olmayan bir ürün seçebilirsiniz.
Her sorun için önce kaynağı belirleyin:
- Bilgi eksikse: Ürün içeriğini tamamlayacak kişiyi ve gerekli alanları belirleyin.
- Bilgi var ama bulunamıyorsa: Yerleşimi, başlıkları ve bilgi önceliğini değerlendirin.
- Bilgi yanlış veya güncel değilse: Veri kaynağını ve güncelleme sürecini inceleyin.
- İşlem sonucu anlaşılmıyorsa: Bekleme, başarı ve hata durumlarını tasarım kapsamına alın.
Ardından birkaç görevle tasarımı sınayın: “Bu masanın evinizdeki alana sığıp sığmayacağını bulun”, “İstediğiniz seçeneğin fiyatını kontrol edin” veya “Teslimatın neleri kapsadığını açıklayın.” Kişinin hangi bilgiyi bulamadığını, hangi ifadeyi yanlış anladığını ve nerede yardım istediğini gözlemleyin.
Yayın sonrasında sepete ekleme oranı gibi göstergeler izlenebilir. Ancak değişimi yorumlarken trafik kaynağı, kampanyalar, fiyat ve stok koşulları da dikkate alınmalıdır. Tek bir göstergedeki artışı doğrudan tasarıma bağlamak yerine, kullanıcı gözlemleri ve destek talepleriyle birlikte değerlendirin.
Yayın öncesi kısa kontrol
- Ürünün uygunluğunu belirleyen kategoriye özel bilgiler açık mı?
- Görsellerin temsil ettiği seçenek ve paket içeriği anlaşılır mı?
- Seçili seçenek, fiyat ve stok bilgisi birbiriyle uyumlu mu?
- Ek maliyetler ve hesaplama koşulları bulunabiliyor mu?
- Teslimat bilgisi, kargoya veriliş ve tahmini varış arasında ayrım yapıyor mu?
- İade ve ürüne özel koşullara kolayca ulaşılabiliyor mu?
- Sepete eklemenin bekleme, başarı ve hata durumları tanımlı mı?
- Akış mobilde, klavyeyle ve ekran okuyucuyla kontrol edildi mi?
Cure projelerinden
Evidea için hazırladığımız web ve mobil UX/UI çalışmasını proje sayfamızda inceleyebilirsiniz. Sayfada ürün detay tasarımına ait örnekler de yer alıyor.
Ürün detay sayfanızda hangi bilgilerin ve durumların öncelikli olduğunu birlikte değerlendirmek isterseniz, projenizden bize bahsedin.


