Web Sitesi Harita Üzerinde Şube Bulma: Arayüz ve Performans
Şube ararken kullanıcının sorduğu soru tektir: bana en yakın hangisi. Bu soruya harita üzerinde birkaç saniyede yanıt veren bir arayüz, uzun adres listelerinden çok daha etkilidir.
Bu rehberde harita tabanlı şube bulma arayüzünün nasıl kurulacağını, konum iznini ve performans dengesini ele alıyoruz. Kurgunun sitenize uyarlanması için Weblike web sitesi tasarımı ekibimizden destek alabilirsiniz.
Web Sitesi Harita Üzerinde Şube Bulma Nedir?
web sitesi harita üzerinde şube bulma, şubelerin bir harita üzerinde işaretlenerek kullanıcıya en yakın olanın gösterilmesidir. Liste ve harita birlikte çalışır.
Bu arayüz yalnızca bir harita görseli değildir. Arama, filtreleme ve yönlendirme bir arada sunulur.
Neden Gerekli?
Uzun şube listeleri okunmaz. Kullanıcı kendi bölgesini aramak yerine siteden ayrılır.
Harita arayüzü, kararı saniyeler içinde verdirir ve ziyaret ihtimalini artırır.
Arayüz Düzeni
Harita ve liste yan yana sunulmalıdır. Yalnızca harita gösteren arayüzler erişilebilirlik sorunu üretir.
Masaüstünde yan yana, mobilde sekmeli bir düzen çoğu durumda en iyi sonucu verir.
Liste ve Harita Senkronu
Listede seçilen şube haritada vurgulanmalı, haritada tıklanan işaret listede öne çıkmalıdır. İki bileşen ayrı çalışırsa kafa karışıklığı doğar.
Bu senkron, arayüzün en kritik teknik detayıdır.
Konum İzni İsteme
Konum izni sayfa açılır açılmaz istenmemelidir. Kullanıcı neden istendiğini anlamadan izin vermez.
İzin, "en yakını göster" butonuna basıldığında istenmelidir.
İzin Reddedilirse
Konum izni verilmediğinde arayüz çalışmaya devam etmelidir. Şehir seçimi ya da adres arama alternatif olarak sunulmalıdır.
İzin zorunluluğu, kullanıcıların önemli bölümünü kaybettirir.
Adres Arama Alanı
Kullanıcı kendi adresini yazarak da arama yapabilmelidir. Otomatik tamamlama bu alanı kullanışlı hale getirir.
Arama kutusu tasarımını arama kutusu tasarımı yazısında ele aldık.
Mesafe Hesabı
Mesafe kuş uçuşu değil, yol mesafesi olarak gösterilmelidir. Kuş uçuşu mesafe şehir içinde yanıltıcıdır.
Tahmini süre bilgisi de eklenebilir.
Sonuç Sıralaması
Sonuçlar yakınlık sırasına göre sıralanmalıdır. Alfabetik sıralama bu arayüzde işe yaramaz.
İlk üç sonuç ekranda görünür olmalıdır.
Filtreleme Seçenekleri
Tüm şubeler aynı hizmeti vermiyorsa filtre gerekir. Filtre sayısı az tutulmalıdır.
- Hizmet: Şubeye özel hizmet türü.
- Çalışma saati: Şu an açık olanlar.
- Otopark: Park imkânı olanlar.
- Erişim: Engelli erişimi uygun olanlar.
Açık Şube Filtresi
"Şu an açık" filtresi en çok kullanılan seçenektir. Çalışma saatlerinin güncel olması bu filtrenin ön şartıdır.
Çalışma saatleri gösterimini çalışma saatleri gösterimi yazısında inceleyebilirsiniz.
Şube Kartı İçeriği
Haritada seçilen şubenin kartında temel bilgiler yer almalıdır. Kart kısa ve eyleme dönük olmalıdır.
Adres, telefon, çalışma saati ve yol tarifi butonu yeterlidir.
Yol Tarifi Bağlantısı
Yol tarifi butonu doğrudan navigasyon uygulamasını açmalıdır. Adresi kopyalamak zorunda kalan kullanıcı vazgeçer.
Mobilde bu buton en belirgin öğe olmalıdır.
Weblike ile Harita Arayüzü Kurulumu
Weblike web sitesi tasarımı ekibi, şube verisini tek bir kaynaktan yönetilecek biçimde kurar ve harita arayüzünü sitenizin tasarımıyla bütünleştirir.
Arayüzün mobil açılış hızı Google PageSpeed Insights üzerinden ölçülerek iyileştirilir.
Harita Sağlayıcı Seçimi
Harita hizmetleri genellikle kullanım başına ücretlendirilir. Trafik hacmi yüksekse maliyet hızla artar.
Alternatif sağlayıcılar değerlendirilmeli, maliyet baştan hesaplanmalıdır.
Maliyet Kontrolü
Harita her sayfa açılışında yüklenmemelidir. Yalnızca kullanıcı etkileşime geçtiğinde yüklenmesi maliyeti belirgin biçimde düşürür.
Statik bir görsel önizleme bu amaçla kullanılabilir.
Performans Etkisi
Harita bileşenleri sayfa ağırlığını önemli ölçüde artırır. Gecikmeli yükleme neredeyse zorunludur.
Lazy load yaklaşımını lazy load yazısında ele aldık.
Veri Kaynağı
Şube verisi tek bir yerde tutulmalıdır. Harita, liste ve şube sayfaları aynı kaynaktan beslenmelidir.
Birden fazla yerde tutulan veri kaçınılmaz olarak çelişir.
Koordinat Doğruluğu
Şube koordinatları elle doğrulanmalıdır. Adresten otomatik üretilen koordinatlar bazen yanlış noktayı gösterir.
Yanlış konum, boşa yapılan bir ziyaret demektir.
Çok Sayıda İşaret Yönetimi
Yüzlerce şube varsa haritada işaretler üst üste biner. Gruplama kullanılmalıdır.
Yakınlaştırıldıkça gruplar açılmalıdır.
Mobil Deneyim
Harita arayüzünün çoğu kullanımı mobildedir. Dokunmatik hareketler sayfa kaydırmayla çakışmamalıdır.
Harita alanı tam ekran açılabilmelidir.
Erişilebilirlik
Harita tek başına erişilebilir değildir. Aynı bilgi metin listesi olarak da sunulmalıdır.
Erişilebilirlik gereksinimlerini web sitesi erişilebilirliği yazısında anlattık.
Klavye ile Kullanım
Liste bileşeni klavye ile gezilebilir olmalıdır. Yalnızca fare ile kullanılabilen arayüzler erişilemez sayılır.
Odak göstergesi belirgin olmalıdır.
Boş Sonuç Durumu
Aranan bölgede şube yoksa net bir mesaj gösterilmelidir. Boş bir harita kullanıcıyı bırakır.
En yakın şube önerisi bu durumda sunulmalıdır.
Şube Sayfasına Bağlantı
Harita kartından şube sayfasına geçiş olmalıdır. Ayrıntılı bilgi ve randevu bu sayfada yer alır.
Çoklu şube sayfası yapısını çoklu şube sayfası yazısında ele aldık.
Arama Motoru Görünürlüğü
Harita arayüzü arama motorları tarafından okunamaz. Şube bilgileri ayrıca metin olarak sayfada bulunmalıdır.
Yalnızca harita üzerinde duran şubeler aramada görünmez.
Ölçümleme
Harita arayüzünün kullanımı izlenmelidir. En yakını göster butonuna basma oranı ve yol tarifi tıklamaları temel göstergelerdir.
Mikro dönüşüm takibini mikro dönüşüm takibi yazısında inceleyebilirsiniz.
Sık Yapılan Hatalar
Harita tabanlı şube arayüzlerinde tekrar eden hatalar vardır. Bunlar hem deneyimi hem maliyeti etkiler.
- Zorunlu konum izni: Kullanıcı kaybı.
- Yalnızca harita: Erişilebilirlik sorunu.
- Her açılışta yükleme: Yüksek maliyet ve yavaşlık.
- Yanlış koordinat: Boşa yapılan ziyaret.
web sitesi harita üzerinde şube bulma kontrol listesi
web sitesi harita üzerinde şube bulma arayüzü kurarken birkaç başlığın net olması yeterlidir. Liste kısa olduğunda arayüz de sade kalır.
Liste ile senkron çalışan harita, etkileşimde istenen konum izni, gecikmeli yükleme ve doğrulanmış koordinatlar bu listenin omurgasıdır. web sitesi harita üzerinde şube bulma bu dört madde oturduğunda hem hızlı hem erişilebilir çalışır.
Sayfa açılır açılmaz değil, "en yakını göster" butonuna basıldığında istenmelidir.
Arayüz çalışmaya devam etmeli, şehir seçimi ya da adres arama alternatifi sunulmalıdır.
Kuş uçuşu değil yol mesafesi gösterilmelidir. Tahmini süre bilgisi de eklenebilir.
Hayır. Kullanıcı etkileşime geçtiğinde yüklenmesi hem maliyeti hem sayfa ağırlığını düşürür.
İşaretler gruplanmalı, yakınlaştırıldıkça gruplar açılmalıdır.
Tek başına değildir. Aynı bilgi metin listesi olarak da sunulmalı, liste klavye ile gezilebilmelidir.
Elle kontrol edilmelidir. Adresten otomatik üretilen koordinatlar bazen yanlış noktayı gösterir.
Yalnızca harita üzerinde duran şubeler görünmez. Bilgiler ayrıca metin olarak sayfada bulunmalıdır.
En yakını göster butonuna basma oranı ve yol tarifi tıklama sayısı temel göstergelerdir.
web sitesi harita üzerinde şube bulma arayüzü, uzun adres listelerinin çözemediği bir soruyu saniyeler içinde yanıtlar. Liste ile senkron çalışan bir harita, doğru zamanda istenen konum izni, gecikmeli yükleme ve elle doğrulanmış koordinatlarla kurulduğunda hem kullanıcı deneyimi hem de ziyaret oranı belirgin biçimde iyileşir.
BİZE ULAŞIN
Bizimle iletişime geçerek projeniz için hemen ücretsiz teklif alabilirsiniz.
