Mobil Uygulamalarda Harita Arayüzü: Kaydırma, İğne ve Yedek Görünüm
Mobil uygulamaya harita koymak, ekrana bir iğne yerleştirmekle bitmiyor. Harita aynı anda hem içerik hem kontrol alanı: kullanıcı parmağını sürüklediğinde sayfanın mı haritanın mı kayacağına tasarım karar veriyor. Konum özelliklerinde yaşanan sıkıntıların çoğu haritanın kendisinden değil, bu kararların hiç verilmemiş olmasından çıkıyor.
Harita ilk ekran olmak zorunda değil
Arama sonuçlarını doğrudan haritada açmak sezgisel görünür. Oysa kullanıcı çoğu zaman hangisi bana daha yakın sorusunu değil, hangisi açık, hangisi bana uygun sorusunu sorar. Nielsen Norman Group'un konum arama üzerine çalışmaları da sonucu önce liste olarak verip haritayı isteğe bağlı bırakmanın kullanıcıyı daha az yorduğunu gösteriyor.
Bunun tersinin doğru olduğu net bir durum var. Kullanıcı hareket halindeyse ve noktaların birbirine göre konumu kararı belirliyorsa harita ilk ekran olmalı. Yürüyerek gidilecek üç kafeyi alt alta okumak bir şey söylemez, aralarındaki mesafeyi görmek söyler. Pratik ölçüt şu: sıralama mesafe dışında bir kritere dayanıyorsa liste, mesafe ve yöne dayanıyorsa harita.
Sayfa kaydırma ile harita sürükleme çakışması
Masaüstünde bu sorun yok, çünkü fare imleci haritanın üzerinde durmadıkça sayfa normal kayar. Dokunmatikte öyle değil. Tam genişlikte bir harita, uzun bir sayfanın ortasına konduğunda parmağın büyük ihtimalle indiği yerdir ve parmak oraya indiği anda sayfa kilitlenir. Kullanıcı aşağı inmeye çalışırken haritayı Ankara'ya doğru sürükler.
Bir ilan listeleme sayfasında tam olarak bunu gördüm: harita tam genişlikteydi ve telefondan alta inmek isteyen herkes önce haritanın içine düşüyordu.
Üç çözümden biri işi bitirir:
- Kooperatif gesture modu. Google Maps JS API'sinde
gestureHandling: 'cooperative'tek parmağı sayfaya, iki parmağı haritaya verir. - Haritayı ekran genişliğinden dar tutmak. Kenarda kalan 24-32 piksellik şerit, parmağın sayfayı kaydırabileceği güvenli alandır.
- Haritayı dokununca aktifleşen bir katmanın altına almak. Kullanıcı bilerek dokunmadan harita hareket etmez.
İlkini tercih ederim, çünkü ek arayüz elemanı gerektirmez ve kullanıcı iki parmakla zaten zoom yapmaya alışkındır.
İğne boyutu, zoom ve üst üste binme
Dokunma hedefi için Apple'ın arayüz kılavuzu 44x44 pt, Google'ın Material'ı 48x48 dp söylüyor. Bazı harita rehberlerinde geçen 36 piksellik alt sınır ikisinin de altında kalıyor. Parmağın sürekli hareket ettiği, üstelik kullanıcının çoğu zaman yürürken kullandığı bir alanda 44'ün altına inmemek daha güvenli.
Asıl mesele iğnenin boyutu değil, o boyutun zoom seviyesiyle kurduğu ilişki. Web Mercator'da zoom 16'da bir piksel ekvatorda yaklaşık 2,4 metre; Türkiye enlemlerinde 1,8 metreye iniyor. Yani birbirine 100 metre uzaklıktaki iki nokta o zoom seviyesinde 55 piksel arayla duruyor ve 44 piksellik iki hedef arasında topu topu 11 piksel boşluk kalıyor. Bir zoom seviyesi geri çekilin, iki hedef üst üste biner. Şehir merkezinde birkaç dükkanın aynı sokakta olması istisna değil, kural.
Bu yüzden kümeleme (clustering) opsiyonel bir güzellik değil, matematiğin dayattığı bir gereklilik. Yakın iğneleri tek bir sayaçta toplayın, dokunulduğunda ya bir kademe yakınlaştırın ya da seçilebilir bir liste açın. Sayacın içindeki sayıyı da gizlemeyin; kullanıcı oraya dokunmadan önce kaç seçenekle karşılaşacağını bilsin.
Harita yüklenmediğinde ekranda ne var
Harita kutucukları (tile) uzak bir sunucudan gelir ve zayıf bağlantıda gelmeyebilir. Çoğu uygulamada bu durumun karşılığı boş gri bir dikdörtgen oluyor. Kullanıcı bunun yükleniyor mu, bittiyse boş mu olduğunu anlayamaz.
Kutucuk isteklerine bir zaman aşımı koyun ve süre dolduğunda yerine açık bir mesajla birlikte liste görünümüne dönüş bağlantısı gösterin. Harita ekranından çıkış yolunun her zaman görünür olması da aynı soruna bakıyor: kullanıcı bir yere sıkıştığını hissettiği anda uygulamayı kapatıyor.
Kontroller nereye oturur
Harita üzerindeki araç çubuğu, tanımı gereği haritanın bir kısmını kapatır. Kontrolleri başparmağın rahat ulaştığı alt bölgeye yerleştirin, ama iğnelerin yoğunlaştığı merkezden uzak tutun. Kullanıcı haritayı gezdirmeye başladığında araç çubuğunun küçülmesi, durduğunda geri gelmesi iyi çalışır.
Standart dışı bir hareket eklediyseniz (uzun basmayla yarıçap çizmek gibi) bunu kullanıcının keşfetmesini beklemeyin. İlk kullanımda bir ipucu gösterin, sonra kapatın. Keşfedilmeyen gesture, olmayan gesture'dır.