Türkiye’de kurumsal sitelerin çoğunda ziyaretçilerin belirgin çoğunluğu mobil cihazlardan geliyor. Buna rağmen tasarım süreçlerinin büyük kısmı hâlâ masaüstü ekranında başlıyor: tasarım masaüstü için çiziliyor, onaylanıyor, sonra “mobile de uyarlanıyor”.
Bu sıralama sonucu belirliyor. Masaüstü için tasarlanmış bir düzeni mobile sıkıştırmak, her zaman taviz vermek demektir. Mobil öncelikli yaklaşım ise tersini yapar: en kısıtlı ekranda çalışan bir çözüm bulunur, sonra geniş ekranlarda genişletilir. Kısıt, tasarımı daha net hale getirir.
Bu yazıda WordPress sitelerinde mobil deneyimi iyileştirmenin somut yollarını anlatacağım.
Neden Mobilden Başlamalı?
Mobil ekran, tasarımcıyı önceliklendirmeye zorlar. Masaüstünde her şeye yer vardır; üç sütun yan yana durur, kenar çubuğu sığar, sekiz maddelik menü rahatça açılır. Mobilde ise ne göstereceğinize karar vermek zorundasınızdır.
Bu karar süreci, aslında tasarımın en değerli kısmıdır. Mobilde çıkarmak zorunda kaldığınız öğeler, çoğu zaman masaüstünde de gereksizdi.
Ayrıca arama motorları siteyi öncelikle mobil sürümü üzerinden değerlendirir. Yani mobil sürümde eksik olan içerik, arama motoru için de yok sayılır. Masaüstünde gösterilip mobilde gizlenen bölümler, sıralama açısından da kaybolur.
Dokunma Deneyimi
Fare ile parmak farklı araçlardır ve arayüz buna göre kurulmalıdır.
Dokunma hedefi boyutu. Butonlar ve bağlantılar, parmakla rahatça basılabilecek büyüklükte olmalı. Küçük ikonlar, yan yana duran dar bağlantılar ve minik kapatma butonları, mobilde en çok hataya yol açan öğelerdir.
Öğeler arası boşluk. İki tıklanabilir öğe birbirine çok yakınsa, kullanıcı yanlış olana basar. Dikey listelerde yeterli aralık bırakın.
Üzerine gelme (hover) etkilerine güvenmeyin. Mobilde hover yoktur. Bilgiyi yalnızca fare üzerine gelindiğinde gösteren açılır kutular, mobil kullanıcı için erişilemez.
Başparmak bölgesi. Telefon tek elle tutulduğunda ekranın alt üçte biri en kolay erişilen alandır. Önemli eylem butonlarını bu bölgeye yakın konumlandırmak dönüşümü artırır.
Menü ve Gezinme
Mobil menü, en çok tasarım hatası yapılan bileşendir.
Menü butonunu tanınabilir tutun. Alışılmış hamburger ikonu, yaratıcı alternatiflere göre çok daha yüksek oranda fark edilir. İkonun yanına “Menü” yazısı eklemek, tıklama oranını daha da artırır.
Menü derinliğini sınırlayın. Üç seviyeli açılır menüler mobilde neredeyse kullanılamaz. İki seviye üst sınır olmalı.
Menü açıldığında kapatma yolunu net bırakın. Kullanıcı geri dönmek istediğinde ne yapacağını aramamalı.
Sık kullanılan eylemleri menüye gömmeyin. Telefon numarası, WhatsApp bağlantısı veya “Teklif Al” butonu, menü açılmadan da görünür olmalı.
Form Tasarımı
Mobilde form doldurmak, masaüstüne göre çok daha zahmetlidir. Her gereksiz alan, terk oranını artırır.
Alan sayısını gerçekten gerekli olanlarla sınırlayın. “Şirket adı” veya “nereden duydunuz” gibi alanlar, dönüşüm oranınıza mal olur.
Doğru klavye tipini tetikleyin. E-posta alanında e-posta klavyesi, telefon alanında sayısal klavye açılmalı. Bu, alan türünün doğru tanımlanmasıyla otomatik olur.
Otomatik doldurmayı destekleyin. Tarayıcının kayıtlı bilgileri doldurabilmesi, formu saniyeler içinde tamamlar.
Hata mesajlarını alanın hemen yanında gösterin. Sayfanın en üstünde beliren genel bir hata mesajı, mobilde görünmez.
Gönder butonunu geniş ve belirgin yapın. Ekran genişliğinin tamamını kaplaması, mobilde tamamen kabul edilebilir bir tercihtir.
Performans: Mobilin Asıl Sorunu
Mobil deneyimin en büyük düşmanı düzen değil, hızdır. Mobil cihazlar daha az işlem gücüne sahiptir ve bağlantı kalitesi değişkendir.
Yapılması gerekenler:
- Görselleri cihaz genişliğine uygun boyutlarda servis edin; mobil ziyaretçiye masaüstü boyutunda görsel göndermeyin
- Ekranın altındaki görsellere tembel yükleme uygulayın, üstündekilere uygulamayın
- Yazı tipi sayısını ve ağırlıklarını sınırlayın
- Mobilde gerçekten gerekmeyen bileşenleri (büyük slider, arka plan videosu, ağır animasyon) yüklemeyin — gizlemek yetmez, yüklenmemesi gerekir
- Üçüncü taraf betiklerini erteleyin
Son madde önemli: CSS ile `display: none` yapılan bir öğe hâlâ indirilir. Mobilde göstermediğiniz ağır bileşenleri, koşullu olarak hiç yüklememek gerekir.
Okunabilirlik
Mobilde metin okunabilirliği, masaüstündekinden farklı kurallar ister.
Gövde metni yeterince büyük olmalı; küçük punto zorlamak, kullanıcıyı yakınlaştırmaya iter. Satır yüksekliği ferah tutulmalı. Paragraflar kısa olmalı — masaüstünde makul görünen altı satırlık bir paragraf, mobilde bir ekranı doldurur.
Alt başlıkları sık kullanın; kullanıcı mobilde okumaz, tarar. Uzun tabloları mobilde yatay kaydırılabilir hale getirin veya kart düzenine dönüştürün; sıkıştırılmış bir tablo okunmaz hale gelir.
Rahatsız Edici Öğeler
Mobilde ekran alanı sınırlı olduğu için, masaüstünde tolere edilen bazı öğeler mobilde ciddi rahatsızlık verir.
Tam ekran açılan pencereler, kullanıcıyı içeriğe ulaşmadan engeller ve arama motorları tarafından da olumsuz değerlendirilir. Kullanacaksanız, ekranın küçük bir bölümünü kaplayan ve kolayca kapatılabilen biçimler tercih edin.
Sabit üst ve alt çubukların toplam yüksekliği, kalan içerik alanını daraltır. İkisini birden kullanmak yerine birini seçin.
Otomatik oynayan sesli video, mobilde en hızlı sekme kapattıran öğedir.
Test Etme
Tarayıcının geliştirici araçlarındaki mobil görünüm, hızlı kontrol için yararlıdır ama yeterli değildir. Gerçek cihazda test şarttır; dokunma tepkisi, kaydırma akıcılığı, klavye davranışı ve gerçek ağ hızı ancak orada görülür.
Test ederken şunları deneyin: tüm ana sayfa akışını baştan sona kaydırın, menüden her bölüme ulaşın, formu gerçekten doldurup gönderin, telefon ve yol tarifi bağlantılarına tıklayın, sayfayı yatay çevirin ve tarayıcı yazı boyutunu büyüterek düzenin bozulup bozulmadığına bakın.
Mobil ve Masaüstünde Farklı İçerik Sorunu
Mobil tasarımda sık başvurulan bir yöntem, bazı bölümleri mobilde gizlemektir. Sayfa uzun görünüyorsa, bir tablo sığmıyorsa veya bir bölüm mobilde kötü duruyorsa CSS ile gizlenir.
Bunun iki sonucu vardır. Birincisi, gizlenen içerik arama motoru için de büyük ölçüde değersizleşir; çünkü değerlendirme öncelikle mobil sürüm üzerinden yapılır. İkincisi, gizlenen öğe hâlâ indirilir — yani performans kazancı da sağlanmaz.
Doğru yaklaşım, içeriği gizlemek değil yeniden düzenlemektir. Uzun bir tabloyu kart düzenine çevirin. Yan yana üç sütunu alt alta dizin. Uzun bir bölümü açılır başlıklara (accordion) dönüştürün — içerik sayfada kalır, ekran alanı korunur.
Gerçekten mobilde gösterilmemesi gereken ağır bileşenler varsa (büyük arka plan videosu gibi), bunları gizlemek yerine koşullu olarak hiç yüklemeyin.
Mobilde İletişim Kolaylığı
Mobil ziyaretçinin en sık yaptığı eylem, iletişime geçmektir. Bu yolu kısaltmak, tasarımın en yüksek getirili müdahalelerinden biridir.
Telefon numarasını tıklanabilir yapın; tıklandığında doğrudan arama ekranı açılmalı. Adresi harita uygulamasına bağlayın; tıklandığında yol tarifi başlamalı. Mesajlaşma bağlantısı kullanıyorsanız, ön tanımlı bir mesaj metni ekleyin — kullanıcı ne yazacağını düşünmek zorunda kalmasın.
Sabit bir iletişim butonu kullanacaksanız, ekranın çok fazla yerini kaplamamasına ve içeriği engellememesine dikkat edin. Alt kenarda ince bir çubuk, ekranın ortasında beliren büyük bir baloncuktan çok daha az rahatsız edicidir.
Gerçekçi Bir Test Rutini
Mobil deneyimi düzenli test etmek için kapsamlı bir laboratuvara ihtiyacınız yok. Şu rutin çoğu sorunu yakalar.
Elinizde en az iki gerçek cihaz bulundurun: biri güncel, biri birkaç yaşında. Eski cihaz, performans sorunlarını çok daha net gösterir.
Testi mobil veri bağlantısıyla yapın, ofis wifi’siyle değil. Ziyaretçilerinizin önemli bir kısmı hareket halinde ve değişken bağlantıyla siteye giriyor.
Her yeni sayfa yayınladığınızda üç şeyi kontrol edin: sayfa yatay kaydırma gerektiriyor mu, tüm butonlar rahatça basılabiliyor mu, form gerçekten gönderiliyor mu.
Ayda bir kez tam akış testi yapın: ana sayfadan başlayıp iletişim formunu göndermeye kadar tüm yolu gerçek bir kullanıcı gibi kat edin. Bu testte fark ettiğiniz her takılma noktası, gerçek ziyaretçilerin de yaşadığı bir sorundur.
Küçük Ekranda Öncelik Belirlemek
Mobil tasarımın özü, neyin önce geleceğine karar vermektir. Masaüstünde yan yana duran öğeler mobilde alt alta dizilir ve bu sıralama, ziyaretçinin ne göreceğini belirler.
Karar verirken ziyaretçinin niyetini temel alın. Bir hizmet sayfasında mobil ziyaretçi önce ne görmeli: kurumsal tanıtım mı, hizmetin ne olduğu mu, yoksa iletişim yolu mu? Çoğu durumda doğru cevap ikinci ve üçüncüsüdür.
Bu sıralamayı tasarımda değil, içerik planında kararlaştırın. Sonradan sürükleyip yer değiştirmek yerine, baştan mobil sırasına göre yazılmış bir sayfa çok daha tutarlı çalışır.
Test sırasında bulduğunuz sorunları hemen not alın ve önem sırasına koyun. Mobil deneyim iyileştirmeleri genellikle küçük müdahalelerdir; bir butonun boyutu, bir boşluğun artırılması, bir yazı tipinin büyütülmesi. Bu küçük düzeltmelerin birikimli etkisi, yeni bir tasarım yaptırmakla elde edeceğiniz kazançtan çoğu zaman daha yüksektir ve maliyeti kıyaslanamayacak kadar düşüktür.
Sonuç
Mobil uyumluluk, ekranın küçülmesiyle bozulmayan bir tasarım değil; küçük ekran için özel olarak düşünülmüş bir deneyimdir. Ziyaretçilerinizin çoğu siteyi telefonda görüyorsa, kararlarınızı da telefonda vermeniz gerekir.
Sitenizin mobil deneyimini inceleyip iyileştirme önerileri hazırlamamı isterseniz iletişime geçebilirsiniz.