Mobilde Mağaza Bulucu Tasarımı: Harita Ne Zaman Gerekli
Mobil mağaza bulucuların çoğu haritayla açılıyor, oysa kullanıcının aradığı şey bir adres, bir çalışma saati ve bir yol tarifi bağlantısı. Harita bu üçünü vermeden önce yüzlerce kilobayt JS ve döşeme indiriyor, sonra da sayfanın kaydırmasıyla kavga ediyor. Liste öncelikli kurgu hem hızlı açılıyor hem de daha az şey bozuyor.
Açılışta harita değil liste gelsin
Ekranın ilk halinde beş şube yeter: şube adı, semt, mesafe, şu anda açık olup olmadığı, telefon ve yol tarifi bağlantısı. Telefonu tel:, yol tarifini de doğrudan cihazın harita uygulamasına giden bir bağlantı yapın. Kullanıcıların büyük bölümü zaten oraya gidecek, arada sizin haritanızda gezinmelerini beklemenin bir karşılığı yok.
Harita modülünü de "Haritada göster" dokunuşuna kadar hiç yüklemeyin. Bu konuda sık verilen tavsiye kendi içinde çelişiyor: harita hep açık dursun deniyor, aynı anda sayfa yavaş açılmasın isteniyor. Harita SDK'sı ve döşemeleri sayfanın en pahalı parçası, ikisi birlikte olmuyor. Liste bir JSON isteğiyle gelir, harita gelmez.
Harita sayfanın kaydırmasını çalmasın
Tam genişlikte bir haritanın üstünden parmakla aşağı kaydırmaya çalışan kullanıcı sayfayı değil haritayı kaydırır. Bunun için haritanın kenarına boşluk bırakmak yaygın bir öneri ama zayıf bir çözüm, çünkü ekranın ortasından başlayan her kaydırma yine haritaya düşer.
Doğrudan çözüm tek ayarda: Google Maps JS API'de gestureHandling: 'cooperative', Leaflet tarafında haritanın sürüklenmesini dokunuşa kadar kapalı tutmak. Bu modda tek parmak sayfayı kaydırır, haritayı gezdirmek için iki parmak gerekir. Kullanıcı iki parmağını ilk kullandığında öğrenir, bir daha da unutmaz.
Dokunma hedefleri ve üst üste binen pinler
WCAG 2.2'nin hedef boyutu ölçütü AA düzeyinde 24×24 CSS pikseli istiyor, AAA düzeyinde 44×44. Apple 44pt, Material 48dp öneriyor. Pratikte pin ikonunu büyütmeye gerek yok; ikon aynı kalsın, tıklanabilir alanı şeffaf bir dokunma alanıyla genişletin. Görsel kalabalık artmadan hedef büyür.
Asıl sorun şehir merkezinde on iki şubenin aynı üç piksele düşmesi. Kümeleme burada zorunlu, ama kümeye dokununca yakınlaştırmak yerine o kümedeki şubelerin listesini açın. Yakınlaştırma kullanıcıyı iki üç tur daha dokunuşa mahkûm ediyor, liste tek adımda bitiriyor.
"En yakın" derken hangi mesafe
Kuş uçuşu mesafe hesaplaması ucuzdur ve çoğu zaman yanıltır. Bir zincirin şube sıralamasını kuş uçuşu mesafeyle kurmuştuk, boğazın karşı yakasındaki şube listenin başına çıkınca şikâyetler gelmeye başladı.
İşleyen düzen şu: önce kuş uçuşu mesafeyle ilk on şubeyi eleyin, rota sorgusunu yalnızca o ona atın. Rota servisleri istek başına ücretlendiriliyor, iki yüz şubenin hepsine sorgu atmak hem faturayı hem yanıt süresini gereksiz büyütür. Elemeyi istemci tarafında yapıp sunucuya kısa bir liste göndermek çoğu durumda yeterli.
Bir de etiketiniz dürüst olsun. "2,4 km" yazıp altına sürüş süresi koymayın; hangisini gösteriyorsanız onu yazın. Kullanıcı "6 dk sürüş" ile "2,4 km kuş uçuşu" arasındaki farkı fark ettiğinde listenin geri kalanına da güvenmiyor.
Konum iznini sayfa açılışında istemeyin
Açılışta çıkan konum izni penceresi çoğunlukla reddediliyor ve tarayıcı bu reddi hatırlıyor. İzni "Yakınımdakileri göster" dokunuşunun ardından isteyin, o an kullanıcı neden sorulduğunu biliyor.
Reddedilme ihtimali de tasarımın parçası olmalı: il ve ilçe seçimi ya da serbest adres girişi her zaman açık dursun. Konum iznine bağlı tek yollu bir akış kurarsanız, izin vermeyen kullanıcı için mağaza bulucunuz hiç çalışmıyor demektir.