Mobil Ürün Sayfasında İlk Ekranda Ne Olmalı?
Mobil ürün sayfasında görsel, ürün bilgisi ve satın alma alanını önceliklendirin; ekran boyutu, erişilebilirlik ve yükleme davranışını birlikte test edin.
Hasan Tarık EmirCFO / Digital Marketing Manager · 4 dk okuma
Mobil ürün sayfasının ilk ekranı, ziyaretçinin doğru ürüne geldiğini anlamasına ve sonraki adımı bulmasına yardımcı olmalı. Bütün ürün bilgilerini, fiyatı, varyantları ve satın alma düğmesini her telefonda tek ekrana sığdıran evrensel bir düzen yoktur. Ürünün karar ihtiyacını, ekran boyutunu ve erişilebilirliği birlikte değerlendirin.
İlk bakışta hangi bilgiye ihtiyaç var?
Ürünün anlaşılır adı ve onu doğru temsil eden görsel başlangıç için güçlü bir çifttir. Fiyat ve seçim alanının nerede bulunduğu açık olmalı. Teknik uyumluluk gerektiren ürün, çok varyantlı giysi ve tek seçenekli basit ürün aynı bilgi yoğunluğunu gerektirmez.
Telefonda sayfayı açıp ürünün ne olduğunu, seçeneğin nasıl değiştirileceğini ve satın alma yoluna nasıl ilerlenebileceğini deneyin. Ekran görüntüsü düzeni gösterir; bu işlevleri doğrulamak için dokunmak, kaydırmak ve gerektiğinde klavyeyi açmak gerekir.
Görsel yüksekliğini ürünün ihtiyacına göre belirleyin
Galeriyi sabit olarak ekranın yarısına veya tamamına zorlamak yerine farklı ürün görselleriyle deneyin. Ürünün önemli ayrıntısı kırpılmamalı, başlık gereksiz yere uzaklaşmamalı. Görsel büyütme ve diğer açılara geçiş açıkça kullanılabilmeli. Uzun ürün adı veya büyük yazı tercihiyle düzenin nasıl değiştiğini de kontrol edin.
İlk ekran öğelerini kontrol listesiyle denetleyin
Aşağıdaki kontrol listesi her öğeyi ilk ekrana sıkıştırma kuralı değildir. Öğenin görünürlüğünü, erişimini ve doğruluğunu birlikte değerlendirmek için kullanılır.
| Öğe | Kontrol | Kabul ölçütü |
|---|---|---|
| Ürün görseli | Doğru ürün ve seçili varyant gösteriliyor mu? | Önemli ayrıntı bozulmadan görülüyor |
| Ürün adı | Uzun isim ve büyük yazı ayarında okunuyor mu? | Metin kesilmiyor veya kontrolleri örtmüyor |
| Fiyat ve stok | Seçenek değişince doğru güncelleniyor mu? | Gösterilen bilgi sepete eklenen seçenekle tutarlı |
| Satın alma alanı | Gerekli seçimler ve pasif düğmenin nedeni anlaşılır mı? | Ziyaretçi sonraki adımı bulabiliyor |
| Teslimat ve iade | Geçerli koşullara satın alma sırasında erişiliyor mu? | Doğrulanmamış süre veya koşul vaat edilmiyor |
Ürün adını kullanıcı dilinde yazın
Ürün adında tanımlayıcı özellikleri okunabilir biçimde kullanın. Model veya stok kodu gerçekten ayırt ediciyse korunabilir; tek başına anlaşılmayan iç kod açıklayıcı adı yerine geçmemeli. Google’ın SEO başlangıç rehberi, sayfa başlıklarının içeriği açıkça tanımlamasını ele alır. Başlığı anahtar kelime tekrarlarıyla uzatmayın.
İlk ekran öğelerini performans ölçütleriyle birlikte okuyun
İlk ekrandaki LCP öğesini ölçümle bulun; görsel olabileceği gibi büyük bir metin bloğu da olabilir. Görsel LCP öğesiyse uygun boyut, format ve yükleme önceliğini inceleyin. Kritik görseli gecikmeli yüklemek başlangıç deneyimini kötüleştirebilir. Sunucu ve ağ gecikmesini de hesaba katın.
Görsel oranı ve sonradan gelen içerik için alan ayırmak beklenmeyen yer değiştirmeleri azaltabilir. Fiyat, galeri veya satın alma alanı kullanıcı dokunurken sıçramamalı. Web Vitals rehberindeki LCP ve CLS yanında, varyant seçimi veya galeri etkileşimi için INP de önemlidir. Alan verisiyle laboratuvar kaydını farklı amaçlarla kullanın.
Sabit satın alma alanı varsa örtüşmeyi kontrol edin
Alt kenara sabitlenen düğme erişimi kolaylaştırabilir; ürün bilgisini, çerez tercihini, sohbet düğmesini veya ekran klavyesini örtüyorsa yeni bir sorun oluşturur. Küçük ekran, yatay kullanım, büyük yazı ve güvenli ekran kenarı koşullarında deneyin. Sabit alan zorunlu değildir; normal sayfa akışında erişilebilir bir satın alma bölümü de uygun olabilir.
Teslimat ve iade bilgisini doğru kapsamda gösterin
Teslimat süresi ürün, stok, adres ve sipariş koşullarına bağlıysa bu ayrımı görünür kılın. Kesinleşmeyen tarihi garanti gibi yazmayın. Her ürüne aynı “yarın teslim” veya “koşulsuz iade” satırını eklemek yerine geçerli koşulların sorumlu ekip tarafından doğrulanmasını sağlayın.
Kısa açıklama ve ayrıntı bağlantısı mobilde kullanılabilir bir seçenek olabilir. Link okunabilir ve dokunulabilir kalmalı; ayrıntıyı açıp kapatınca ziyaretçi seçtiği varyantı kaybetmemeli. Kullanılan ödeme veya güven işaretleri de gerçek, ilgili ve kullanım hakkı bulunan öğeler olmalı.
Değişikliğin sonucunu hangi ölçüm gösterecek?
Önce hedefi tanımlayın: fiyatın bulunması, doğru varyantın seçilmesi veya sepete ekleme gibi. Görev testi düzenin anlaşılmasını, olay ölçümü ise belirli davranışların sıklığını araştırır. Sepete ekleme oranı yalnız metnin başarısını ölçmez; fiyat, stok, trafik kaynağı ve ürün talebi de etkilidir.
Uygun trafik varsa eşzamanlı ve kontrollü bir deney tasarlayın. Önce-sonra incelemesi yapılıyorsa kampanya, cihaz, fiyat ve stok değişikliklerini kaydedin. İki haftalık süre her mağazada yeterli örneklem sağlamaz; farklı haftaların karşılaştırılması kendiliğinden A/B testi olmaz.
Mobil tasarım ve etkileşim planını Web Tasarımı hizmetinde değerlendirebilirsiniz. Bir e-ticaret sitesi çalışması için Viva Cosmetics projesini, sektörel kapsam için Worgoo E-Ticaret sayfasını inceleyin.
Değişiklikleri tek seferde değil adım adım uygulayın
Görsel, bilgi sırası ve satın alma alanını aynı anda değiştirirseniz tek bir öğenin etkisini ayırmak zorlaşır. Testin gerektirdiği kapsamı önceden belirleyin. Değişiklik kaydı, neyin uygulandığını gösterir; tek başına neden-sonuç kanıtı üretmez. Sonuç belirsizse bunu raporda açık bırakın.
Sonuç
İlk ekranı gerçek ürünler, farklı telefon boyutları ve büyük yazı ayarıyla test edin. Ürünün anlaşılması ve satın alma yolunun bulunması önceliklidir. Öğeleri dar alana sığdırmak için okunabilirliği azaltmayın; performans ve davranış değişimini uygun ölçümle değerlendirin.
Sık sorulan sorular
Satın alma düğmesi mutlaka ilk ekranda mı olmalı?
Hayır. Gerekli ürün ve varyant bilgisiyle birlikte erişilebilir olması önemlidir. Her ekran boyutunda ilk ekrana sığdırmak için metni küçültmek veya gerekli seçimi gizlemek doğru bir kabul ölçütü değildir.
Büyük ürün görseli kullanabilir miyim?
Ürünün anlaşılmasına yardımcı oluyorsa kullanılabilir. Önemli ayrıntıları, bilgiye geçişi ve yükleme süresini birlikte test edin. Görselin boyutu için her ürün ve telefona uygulanacak sabit bir ekran oranı yoktur.
Hız değerleri iyiyken sepete ekleme neden düşük olabilir?
Fiyat, stok, ürün talebi, trafik niyeti, varyant seçimi veya ölçüm hatası gibi nedenler olabilir. Teknik ölçütler tek başına satın alma kararını açıklamaz. Kullanıcı görevi, olay doğruluğu ve ticari koşulları birlikte inceleyin.
Kampanya sırasında yapılan değişiklik ölçülebilir mi?
Evet, fakat kampanya etkisini dikkate alan bir yöntem gerekir. Uygun tasarlanmış eşzamanlı deney farklı bir soruyu, önce-sonra karşılaştırması başka bir soruyu yanıtlar. Trafik ve fiyat değişimini sayfa tasarımının etkisi gibi sunmayın.
Kaynaklar
Yazar hakkında
Hasan Tarık Emir
CFO / Digital Marketing Manager
Hasan Tarık Emir, Worgoo’nun kurucu ortağıdır. Üç yılı aşkın süredir web tasarımı, frontend geliştirme ve UI/UX tasarımı alanlarında çalışır. Marka ve sektör analizini, masaüstü ve mobilde kolay kullanılan arayüzlere dönüştürür.
Profil ve çalışmaları
