Önce özete göz atDersin sonundaki özet, okumaya başlamadan önce yol haritası olarak.
Ürün sayfasında sorun çoğu zaman içerikte değil sıradadır. Müşterinin önce bilmek istediği şeyler, işletmenin anlatmak istediklerinin arkasına gömülmemelidir.
Satın alma kutusu, fiyatın, seçeneklerin, stoğun, teslim tarihinin ve sepete ekleme düğmesinin bir arada durduğu eylem merkezidir. Telefonda da ulaşılabilir kalır.
Varyant seçimi, seçenekleri bir bakışta gösterir, stok ve fiyat farkını seçim anında söyler ve görseli seçime göre değiştirir. Çok fazla seçenek de bir engeldir.
Karar bilgisi, bir ürün ailesinin müşterisinin mutlaka bilmesi gereken ve özette kalan bilgidir. Aşamalı gösterim ayrıntıyı katmana taşır; karar bilgisi katmana gizlenmez ve katman başlıkları içlerini müşterinin sorusuyla söyler.
Ürün sayfası iskeleti, bir ürün ailesi için bölümlerin sırasını belirleyen şablondur. Duyusal, teknik, hediye ve ölçüye bağlı ürünler için farklı kurulur ve ürün eklendikçe tutarlılığı korur.
Açılış
Açılış sahnesi
Bir el yapımı deri sırt çantası atölyesi, yeni ürün sayfasını gururla yayına alıyor. Sayfa uzun ve zengin: en üstte atölyenin kuruluş hikâyesi, ardından derinin nereden geldiğini anlatan bir video, ustaların fotoğrafları, dikiş tekniğini anlatan bir bölüm, bakım önerileri, bir blog yazısına bağlantı. Fiyat, sayfanın ortasında küçük bir yazıyla duruyor. Renk seçimi ise en altta, bir açılır listenin içinde.
Bir müşteri sayfayı telefonunda açıyor. Çantanın dizüstü bilgisayarına sığıp sığmayacağını merak ediyor. Ölçüler sayfada bir yerde yazıyor ama müşteri onu bulamadan üç kez aşağı kaydırıyor, hikâyeyi ve videoyu geçiyor. Kahverengi rengi beğeniyor; sepete eklemek için en alta indiğinde kahverenginin stokta olmadığını öğreniyor. Tekrar yukarı çıkıyor, fotoğraflardaki hangi çantanın siyah olduğunu anlamaya çalışıyor.
Atölyenin sahibi, bu müşterinin ekran kaydını izlediğinde şaşırıyor. Sayfadaki her şey doğruydu ve her şey özenle hazırlanmıştı. Sorun içerikte değil, sıradaydı: müşterinin önce bilmek istediği şeyler, sayfanın en arkasına gömülmüştü.
Yol haritası
Bu derste ne olacak
Deri çanta atölyesinin sayfası iyi bilgilerle doluydu ama bilgiler, işletmenin anlatmak istediği sırayla dizilmişti; müşterinin karar vermek için ihtiyaç duyduğu sırayla değil. Atölye ve dersteki öteki markalar hayal ürünü. Bir ürün sayfasının kaç bölümden oluşması ya da kaç fotoğraf içermesi gerektiği için bir ölçü vermiyorum; bunlar ürünün karmaşıklığına, fiyatına ve müşterinin ne kadar araştırma yaptığına göre değişiyor.
Bu kurs, müşterinin ürün sayfasına geldiği andan siparişin ardından gelen ana kadar dönüşümün önündeki engelleri konuşuyor. İlk ders ürün sayfasının iskeletini kuruyor: satın almak için gereken her şeyin bir arada durduğu alanı, ürünün seçeneklerini seçmeyi, özeti ile ayrıntıyı katmanlara ayırmayı ve ürün türüne göre sayfanın bölümlerini sıralamayı ele alacağız.
Sıfır noktası
Ürün sayfası, bu akademide birkaç kez farklı açılardan ele alındı. Metin yazarlığı kapı ekranını, kaydırma yolunu ve çağrı durağını kurdu; orada soru, sayfadaki sözcüklerin okuru nasıl ilerlettiğiydi. Arama optimizasyonu bilgi mimarisini sitenin bütünü için tanımladı. Önceki kursta da adım sorusunu, ürün özniteliğini ve güven sinyalini ekledik.
Bu derste soru, sözcüklerden çok yerleşimle ilgili: bir ürün sayfasında hangi bilgi nerede durur? Bir e-ticaret ürün sayfası, bir açılış sayfasından farklıdır: aynı şablon yüzlerce ürün için kullanılır, ürünlerin seçenekleri vardır, stok ve teslim tarihi değişir ve müşteri sayfaya çoğu zaman bir kategori listesinden ya da aramadan, zaten ürünü tanıyarak gelir. Bu yüzden ürün sayfasının iskeleti, tek bir ürüne göre değil, bir ürün ailesine göre ve müşterinin kararına göre kurulur.
Mekanizma — satın almanın merkezi
Ürün sayfasında müşterinin eyleme geçtiği tek bir yer vardır. Bu yer, eylem için gereken bütün bilgiyi bir arada taşıdığında müşteri sayfanın başka yerlerini aramak zorunda kalmaz.
Teslim tarihi, düğmenin yanında durmalı.
Stok durumu, seçim yapılmadan önce görünmeli.
Toplam fiyat kutuda belli olmalı.
Mekanizma — seçeneği seçmek
Pek çok ürünün seçenekleri vardır: beden, renk, boyut, paket miktarı, tat. Seçim kötü tasarlandığında müşteri, istediği ürünü bulduğu hâlde yanlış seçeneği alabilir ya da hiç alamaz.
Seçilen renk, fotoğrafı değiştirmeli.
Miktar seçenekleri, birim fiyatı göstermeli.
Çok fazla seçenek de bir engel.
Mekanizma — özet önde, ayrıntı katmanda
Bir ürün hakkında söylenebilecek çok şey vardır. Hepsini aynı ağırlıkla sayfaya yaymak, müşterinin aradığı bilgiyi gömer; hepsini gizlemek ise müşteriyi cevapsız bırakır.
Kararı etkileyen bilgi gizlenmemeli.
Katmanın başlığı, içini söylemeli.
İleri katman
Usta katmanı — ürün türüne göre iskelet
Farklı ürünler için müşterinin karar verme biçimi farklıdır. Bir parfüm, bir bilgisayar parçası ve bir hediye kutusu aynı iskelette aynı sırayla sunulduğunda, en az birinin müşterisi aradığını yanlış yerde bulur.
Teknik ürün, uyumlulukla başlıyor.
Hediye ürünü, paketle ve teslimle başlıyor.
İskelet, ürün eklendikçe tutarlılığı koruyor.
Yanılgılar
Yaygın hatalar
Yaygın yanlışSayfa işletmenin anlatmak istediği sırayla kurulur.
Doğrusu
Kuruluş hikâyesi, üretim süreci ve marka videosu başa konur; fiyat, seçenek, stok ve teslim tarihi sayfaya dağılır ve müşteri satın almak için sayfanın her köşesini dolaşmak zorunda kalır.
Yaygın yanlışSeçenekler açılır listelere gizlenir.
Doğrusu
Stok durumu ve fiyat farkı ancak sepette görünür, seçilen renk fotoğrafı değiştirmez, beden farkları açıklanmaz ve müşteri yanlış seçeneği alıp iade eder.
Yaygın yanlışHer şey aynı ağırlıkla gösterilir ya da her şey gizlenir.
Doğrusu
Uzun teknik tablolar müşterinin aradığı üç bilgiyi gömer; ya da sadelik adına ölçü, içerik ve alerjen gibi kararı etkileyen bilgiler sekmelerin içine saklanır ve katman başlıkları içlerinde ne olduğunu söylemez.
Yaygın yanlışBütün ürünler için tek bir iskelet kullanılır ya da her ürün için sıfırdan sayfa kurulur.
Doğrusu
Duyusal, teknik ve hediye ürünleri aynı sırayla sunulur; ya da sayfalar birbirinden farklılaşır ve bazı ürünlerde temel bilgiler hiç yer almaz.
Özet
Aklında kalsın
Ürün sayfasında sorun çoğu zaman içerikte değil sıradadır. Müşterinin önce bilmek istediği şeyler, işletmenin anlatmak istediklerinin arkasına gömülmemelidir.
Satın alma kutusu, fiyatın, seçeneklerin, stoğun, teslim tarihinin ve sepete ekleme düğmesinin bir arada durduğu eylem merkezidir. Telefonda da ulaşılabilir kalır.
Varyant seçimi, seçenekleri bir bakışta gösterir, stok ve fiyat farkını seçim anında söyler ve görseli seçime göre değiştirir. Çok fazla seçenek de bir engeldir.
Karar bilgisi, bir ürün ailesinin müşterisinin mutlaka bilmesi gereken ve özette kalan bilgidir. Aşamalı gösterim ayrıntıyı katmana taşır; karar bilgisi katmana gizlenmez ve katman başlıkları içlerini müşterinin sorusuyla söyler.
Ürün sayfası iskeleti, bir ürün ailesi için bölümlerin sırasını belirleyen şablondur. Duyusal, teknik, hediye ve ölçüye bağlı ürünler için farklı kurulur ve ürün eklendikçe tutarlılığı korur.
Sıradaki ders
Sonraki derse köprü
Bu derste ürün sayfasının iskeletini kurduk: satın alma kutusu, varyant seçimi, karar bilgisi ve ürün sayfası iskeleti. Kök Kahve'nin sayfasında artık her bilgi, müşterinin karar sırasına göre yerini aldı.
Ama iskelet, içine konan içerik kadar iyi. Bir kahvenin «meyvemsi ve dengeli» olduğunu söylemek, müşterinin kafasındaki belirsizliği gidermeye yetmiyor: meyvemsi ne demek, hangi kahveye göre dengeli, benim evdeki makinemde nasıl bir fincan çıkar? Ürüne dokunamayan müşteri için açıklamanın, karşılaştırmanın ve kullanımı gösteren görselin, dokunmanın yerini tutması gerekiyor.
Sıradaki ders ürün içeriğini ve görsel kanıtı konuşuyor: belirsizliği azaltan açıklamayı, karşılaştırmayı ve kullanım gösterimini nasıl hazırlayacağımızı orada ele alacağız.
Anlamadığın bir yer mi var?
Mentor yalnız bu dersin metnine dayanarak cevap verir. Metinde geçmeyen bir şey sorarsan uydurmaz, geçmediğini söyler.
Animasyon ve seslendirme notları
Animasyon ve seslendirme notları
Açılış sahnesinde ekranı dolduran uzun bir ürün sayfası yukarıdan aşağıya akıp gitsin; en üstte bir atölye fotoğrafı, ardından bir video, ustaların yüzleri ve en altta küçük bir renk listesi. Bir parmak sayfayı hızla aşağı kaydırsın, sonra yukarı, sonra tekrar aşağı; ekranın köşesinde bir soru balonu dursun: bilgisayarım sığar mı?
Satın alma kutusu anlatılırken sayfanın farklı yerlerine dağılmış parçalar, fiyat, renk, stok, teslim tarihi ve düğme, bir mıknatısa çekilir gibi ilk ekranda tek bir kutuda toplansın. Parmak aşağı kaydırdığında kutunun ince bir şeridi ekranın altında sabit kalsın.
Varyant seçimi anlatılırken bir açılır liste açılıp kapanıp müşteriyi yorsun; sonra seçenekler yan yana düğmelere dönüşsün. Bir renk düğmesine dokunulduğunda fotoğraf o renge dönsün, tükenmiş bir düğme soluklaşsın ve bir paket boyutunun yanında birim fiyat belirsin.
Karar bilgisi anlatılırken uzun bir teknik tablo akordeon gibi katlanıp tek satırlık başlıklara dönüşsün; başlıklar «Detaylar» yerine müşterinin sorularıyla yeniden yazılsın. Bir alerjen etiketi katlanmış bölümden dışarı çıkıp özetin içine yerleşsin.
Ürün sayfası iskeleti anlatılırken üç farklı ürün, bir parfüm, bir bisiklet parçası ve bir hediye sepeti, yan yana üç iskeletin içine yerleşsin; her iskelette bölümlerin sırası farklı olsun. Kapanışta kahve sayfasının özetindeki «meyvemsi» sözcüğünün üstünde bir soru işareti belirsin ve bir fincan, bir tat çarkı ve bir demleme videosu sözcüğün etrafında toplanmaya başlasın.