Sayıların ardındaki mantık
Alışılmış yöntem masaüstü tasarımını yapıp sonra küçültmektir. Bu yaklaşımda küçük ekran artakalan olur: bir şeyler sıkıştırılır, bir şeyler gizlenir.
Ters yönde çalışmak farklı bir sonuç verir. Küçük ekranla başlandığında yalnızca gerçekten gerekli olan öğeler yerleşir; büyük ekrana geçildiğinde alan eklenir, öğe değil.
Asıl kazanç bu kısıttır. Sınırlı alan, ekibi neyin gerçekten gerekli olduğuna karar vermeye zorlar; bu karar masaüstünde hiç verilmez ve sayfa kolayca şişer.
İki yaklaşım
| Masaüstünden küçültme | Mobilden büyütme |
|---|---|
| Öğeler gizlenir | Öğeler eklenir |
| Mobil ikinci sınıf | Mobil temel |
| Sayfa ağırlaşır | Hafif kalır |
| Öncelik belirsiz | Öncelik zorunlu |
Üçüncü satır çoğu ekibin fark etmediği sonuç. Masaüstü için hazırlanan görseller ve betikler mobilde de yükleniyor; sadece gizlenmiş oluyorlar ve sayfa yine ağır kalıyor.
Nasıl uygulanır?
- En küçük ekrandan başlayın. Tasarım oradan çıksın.
- Öncelik listesi yapın. Ne mutlaka görünmeli?
- Gizlemek yerine çıkarın. Gerekmiyorsa hiç yüklenmesin.
- Gerçek cihazda test edin. Tarayıcı simülasyonu yetmez.
- Yavaş bağlantıyı deneyin. Mobil her zaman hızlı değil.
Uygulamada ne oluyor?
En yaygın hata, mobili bir uyarlama olarak görmek. Tasarım masaüstünde bitiriliyor ve mobil sürüm sonradan çıkarılıyor; bu sırayla çalışıldığında küçük ekran hep eksik kalıyor.
İkinci gözlem, gizlemenin çözüm sanılması. Mobilde görünmeyen bir öğe hala indiriliyor olabiliyor; bu, hem veri hem süre tüketiyor.
Üçüncüsü, trafiğin dağılımına bakılmaması. Çoğu e-ticaret sitesinde ziyaretlerin büyük bölümü mobilden geliyor; buna rağmen tasarım kararları masaüstü ekranına bakılarak veriliyor.
Dördüncüsü, dönüşüm farkının kabullenilmesi. Mobil dönüşümün düşük olması normal sayılıyor; oysa bu fark genelde düzeltilebilir bir tasarım sorununu gösteriyor.
Beşincisi, gerçek cihazda test edilmemesi. Tarayıcı penceresini daraltmak parmak boyutunu, ağ hızını ve dokunma davranışını göstermiyor.
Altıncısı, bağlantı hızının hep iyi varsayılması. Ofisteki hızlı ağda sorunsuz açılan sayfa, zayıf sinyalde çok farklı davranıyor.
Yedincisi, mobilde içerik kırpılması. Kullanıcıya daha az bilgi verilince karar veremiyor; çözüm silmek değil daha iyi düzenlemek.
Sekizincisi, dikey alanın savurganca kullanılması. Büyük boşluklar ve dev başlıklar ekranı dolduruyor; kullanıcı asıl içeriğe kaydırarak ulaşıyor.
Dokuzuncusu, yatay kaydırmanın oluşması. Bir tablo ya da görsel taşınca sayfa yana kayıyor; bu, en rahatsız edici mobil hatalarından biri.
Onuncusu, mobilde ayrı ölçüm yapılmaması. Birleşik raporda mobilin sorunları masaüstünün iyi sonuçları arasında kayboluyor.
On birincisi, yaklaşımın yalnızca düzenle sınırlı sanılması. Mobil öncelikli düşünmek görsel yerleşimden ibaret değil; içeriğin sırası, metin uzunluğu ve kaç adımda sonuca ulaşıldığı da buna dahil.
On ikincisi, ekibin kendi cihazlarına göre karar vermesi. Tasarımcı ve geliştiriciler genelde yeni ve pahalı telefonlar kullanıyor; oysa ziyaretçilerin önemli bir bölümü daha eski ve yavaş cihazlarla geliyor. Test cihazı seçimi gerçek ziyaretçi dağılımına göre yapılmadığında sorunlar hiç görülmüyor.
Neyi çözmez?
Mobil öncelikli yaklaşım, masaüstünü otomatik iyileştirmez. Büyük ekran kendi tasarım kararlarını gerektirir; sadece genişletilmiş bir mobil sayfa yetersiz kalır.
Sıkça sorulan sorular
Neden küçükten başlamalıyım?
Kısıt, neyin gerçekten gerekli olduğuna karar vermeye zorlar. Bu karar masaüstünde hiç verilmez.
Gizlemek yeterli değil mi?
Değil. Gizlenen öğe hala indiriliyor olabilir; veri ve süre tüketmeye devam eder.
Tarayıcıda test edebilir miyim?
Kısmen. Parmak boyutu, ağ hızı ve dokunma davranışı ancak gerçek cihazda görülür. Bu konuyla birlikte ele alınan Sticky Add To Cart, kullanıcı sayfada kaydırırken ekranda sabit kalan 'sepete ekle' butonudur; satın almayı her an erişilebilir kılar.
Bu kavramın bütün resim içindeki yerini Ürün Sayfası Optimizasyonu Rehberi içinde ayrıntılı anlattım.
E-ticaret için ürün görseli, açıklama, güven alanı, beden/kargo/iade, yorumlar ve sepete ekleme oranı optimizasyonu.
