Bir galeri sitesinin ziyaretçilerinin büyük çoğunluğu telefondan gelir. Buna rağmen çoğu galeri sitesi masaüstünde tasarlanır, mobilde “çalışıyor mu?” diye bakılır ve öyle bırakılır.
Mobil öncelikli yaklaşım bunu tersine çevirir: önce telefon ekranı için tasarlarsınız, masaüstü ona eklenir.
Mobil ziyaretçi nasıl davranır?
- Ayakta, hareket hâlinde, dikkati bölünmüş durumda
- Sabırsız — sayfa açılmazsa geri döner
- Tek elle kullanır, başparmakla dokunur
- Yazmayı sevmez — seçmeyi ve dokunmayı tercih eder
- Aramak yerine WhatsApp yazmayı tercih eder
Bu davranış profili, tasarım kararlarının tamamını belirler.
Hız: her şeyden önce gelir
Mobil bağlantı masaüstünden yavaştır ve cihaz gücü daha düşüktür. Galeri siteleri fotoğraf ağırlıklı olduğu için özellikle risk altındadır.
Yapılması gerekenler
- Görselleri modern formata çevirin — WebP veya AVIF, JPEG’e göre ciddi tasarruf sağlar
- Responsive görsel setleri üretin — telefona 2000 piksellik fotoğraf göndermeyin
- Ekran dışındaki görselleri geciktirin (
loading="lazy") - Yazı tiplerini yerel barındırın — üçüncü parti font isteği gecikme ekler
- Gereksiz betikleri kaldırın — kullanılmayan eklentiler en büyük yavaşlatıcıdır
- Görsellere boyut verin — yükleme sırasında sayfa zıplamasın
Sayfa hızını masaüstünden değil, mobil ve yavaş bağlantı simülasyonuyla ölçün. Ofis wifi’sinde hızlı görünen site, sahada 4G ile çok farklı davranır.
Mobil araç listesi
Filtreleme, mobilde en çok bozulan bileşendir. Masaüstündeki yan filtre paneli telefona sığmaz.
- Filtreleri alttan açılan bir panele alın
- Seçili filtreleri liste üstünde etiket olarak gösterin
- Kaç sonuç bulunduğunu filtre uygularken canlı gösterin
- “Temizle” butonunu görünür yapın
- Sonsuz kaydırma yerine “daha fazla göster” butonu kullanın — konum kaybını önler
Mobil araç detay sayfası
Ekranın ilk görünen kısmında şunlar olmalı:
- Kaydırılabilir fotoğraf galerisi
- Marka, model, donanım, yıl, kilometre
- Fiyat — büyük ve net
- Aşağıda sabit duran “Ara” ve “WhatsApp” butonları
Sabit iletişim çubuğu, mobil dönüşümü en çok artıran tek düzenlemedir. Ziyaretçi sayfanın neresinde olursa olsun iletişim bir dokunuş uzağındadır.
Dokunma hedefleri
- Butonlar en az 44×44 piksel
- Bitişik butonlar arasında en az 8 piksel boşluk
- Küçük metin bağlantıları yerine buton kullanın
- Önemli eylemleri ekranın alt yarısına koyun — başparmak oraya rahat ulaşır
Mobil form tasarımı
Telefonda yazmak zordur. Form deneyimini kolaylaştırın:
| Alan | Doğru ayar |
|---|---|
| Telefon | type="tel" inputmode="tel" — sayısal klavye açılır |
| E-posta | type="email" — @ tuşu görünür |
| Kilometre | inputmode="numeric" |
| Marka / model | Yazdırmak yerine seçtirin |
| Otomatik doldurma | autocomplete nitelikleri eksiksiz olsun |
Ayrıca alan sayısını en aza indirin. Mobilde her ek alan, terk oranını masaüstünden daha fazla artırır.
Mobilde sık yapılan hatalar
- Açılır pencerelerin (popup) ekranı kaplaması ve kapatma butonunun küçük olması
- Yatay kaydırma gerektiren tablolar
- Çok küçük yazı boyutu (16 pikselin altına inmeyin)
- Telefon numarasının tıklanabilir olmaması
- Fotoğraf galerisinin parmakla kaydırılamaması
- Sabit üst menünün ekranın büyük kısmını kaplaması
Test etme yöntemi
Emülatör yeterli değildir. Gerçek testi şöyle yapın:
- Kendi telefonunuzu alın, wifi’yi kapatın
- Ana sayfadan başlayıp bir araç bulun
- Fotoğraflara bakın, fiyatı okuyun
- WhatsApp butonuna basın
- Geri dönüp değerleme formunu doldurun
Bu akışta takıldığınız her nokta, ziyaretçinin de takıldığı noktadır. Ayrıca bunu farklı yaş grubundan birine yaptırın — kendi sitenizde siz nereye basacağınızı zaten biliyorsunuz.
Özetle
Mobil, galeri sitesinin ana ekranıdır — masaüstü değil. Hız optimizasyonu, sabit iletişim çubuğu, alttan açılan filtre paneli ve klavye ayarları yapılmış formlar. Bu dördü, mobil ziyaretçiden aldığınız talep sayısını belirgin şekilde yükseltir.