Mobil Öncelikli Tasarım: Siteniz Telefonda Nasıl?

Mobil öncelikli tasarım, sayfayı önce telefon ekranı için kurup masaüstünü sonra genişletmektir. Sebebi basit: çoğu sitede trafiğin büyük kısmı telefondan geliyor ve Google da sıralamada mobil sürümü esas alıyor. Masaüstünde güzel görünen bir siteyi küçültmek işe yaramaz. Küçültülen tasarımda butonlar ufalır, formlar uzar, menü kaybolur.

1. 1

   Tek El İçin Tasarlayın

   Telefon çoğu zaman tek elle, başparmakla kullanılır. Ekranın üst köşeleri başparmağın zor ulaştığı bölge; alt üçte bir ise en rahat alan. Önemli butonu üst köşeye koyan tasarım, dokunulmayan bir buton üretir.

   • Ana eylem butonunu ekranın alt yarısına ya da sabit bir alt çubuğa yerleştirin.
   • Dokunulabilir her alanı en az 44 piksel yükseklik ve genişlikte tutun.
   • Yan yana duran butonların arasında en az 8 piksel boşluk bırakın.
2. 2

   Puntoyu ve Satır Uzunluğunu Ayarlayın

   Telefonda küçük punto okunmaz, uzun satır ise gözün satır başını kaybetmesine yol açar. Gövde metni için 16 piksel taban kabul edilir; altına düşmek kullanıcıyı yakınlaştırmaya zorlar. Yakınlaştırmak zorunda kalan ziyaretçi genelde geri tuşuna basar.

   • Gövde metnini en az 16 piksel yapın, satır yüksekliğini punto boyunun 1,5 katına ayarlayın.
   • Satır uzunluğunu telefonda 35 ile 45 karakter arasında tutun.
   • Paragrafları üç dört satırda bir bölün, uzun blokları alt başlıkla ayırın.
3. 3

   Form Alanlarını Azaltın

   Telefonda her ek form alanı tamamlanma oranını düşürür. Çoğu iletişim formu için ad, telefon ve kısa bir mesaj alanı yeterli. Fazla alan isteyen form, doldurmaya başlayıp yarıda bırakan ziyaretçi üretir.

   • Zorunlu alan sayısını üçe indirin, geri kalanını isteğe bağlı yapın.
   • Her alanda doğru klavyeyi açtırın: telefon için sayısal, e-posta için @ tuşlu klavye.
   • Hata mesajını alanın hemen altında, ne yapılacağını söyleyerek gösterin.
4. 4

   Telefon ve WhatsApp’ı Erişilebilir Tutun

   Mobil ziyaretçinin en sık yaptığı şey aramak ya da yazmak. Bu iki eylem sayfanın dibinde saklı kaldığında, müşteri sizi aramak yerine rakibi arar. Hizmet işletmelerinde en kritik mobil detay budur.

   • Telefon numarasını tıklanabilir bağlantı yapın, düz metin olarak bırakmayın.
   • Sayfa kayarken yerinde kalan sabit bir arama veya WhatsApp butonu koyun.
   • Butonun metni örtmediğini ve sepet ile form düğmelerini kapatmadığını kontrol edin.
5. 5

   Menüyü Sadeleştirin

   Masaüstünde yan yana duran on başlık, telefonda üç dokunuşluk bir labirente dönüşür. Menü, ziyaretçinin aradığını iki dokunuşta bulacağı kadar kısa olmalı. Kalabalık menüde aradığını bulamayan kullanıcı siteden çıkar.

   • Üst menüde en fazla beş ana başlık bırakın, kalanını alt bölüme taşıyın.
   • Menü ikonunun yanına “Menü” yazın; üç çizgi herkes için net değil.
   • Kataloğunuz büyükse menünün içine bir arama alanı ekleyin.
6. 6

   Görsel Boyutunu Küçültün

   Mobil ziyaretçi sık sık mobil veriyle ve zayıf şebekeyle geziyor. Masaüstü için hazırlanmış büyük görselleri telefona olduğu gibi göndermek hem sayfayı geciktirir hem kullanıcının verisini harcar. Hızın ölçülmesi ayrı bir konu; buradaki mesele dosyanın gereksiz büyük olması.

   • Görselleri WebP ya da AVIF olarak, ekran genişliğine göre farklı boyutlarda sunun.
   • İlk ekranda görünmeyen görselleri tembel yükleme ile sonraya bırakın.
   • Arka plan videosu yerine telefonda tek bir durağan görsel gösterin.
7. 7

   Açılır Pencereleri Kısıtlayın

   Telefonda açılır pencere ekranın tamamını kaplar ve kapatma butonu genelde parmakla zor bulunur. Google, mobilde içeriği kapatan araya giren tanıtımları açıkça sorun sayar. Yanlış kurulmuş bir açılır pencere, o sayfanın hem sıralamasını hem dönüşümünü düşürür.

   • Sayfa açılır açılmaz pencere göstermeyin; ziyaretçi önce okumaya başlasın.
   • Kapatma butonunu büyük, görünür ve başparmağın ulaştığı bölgeye koyun.
   • Aynı ziyaretçiye aynı pencereyi tekrar tekrar göstermeyin.
8. 8

   Gerçek Cihazda Test Edin

   Tarayıcının mobil önizlemesi dokunmayı, gerçek klavyeyi ve zayıf şebekeyi taklit edemez. Bir sayfayı gerçekten anlamanın tek yolu, kendi telefonunuzdan baştan sona bir işlem tamamlamaktır. Sadece ekranda önizleyen ekip, müşterinin takıldığı yeri hiç görmez.

   • En az bir Android ve bir iPhone cihazda ana akışı elinizle deneyin.
   • Wi-Fi’yi kapatıp aynı işlemi mobil veriyle tekrar yapın.
   • İletişim formunu, arama butonunu ve ödeme adımını her yayından sonra test edin.