Layerpin logo
Oluşturmaya başla

Mobil Cihazlar İçin Duyarlı Etkileşimli Haritalar Tasarlayın

Dokunmatik dostu pin hedefleri, alttan açılır çekmeceler, sezgisel hareket kontrolleri ve uyarlanabilir arayüzlerle mobil kullanılabilirliği artırın.

LP

Layerpin Ekibi

7 dk okuma
Dokunmatik kontrollere sahip akıllı telefonda görüntülenen etkileşimli harita

Mobil harita trafiği: Dokunma ergonomisi etkileşimi neden belirler?

Web sitesi ziyaretçilerinin %65'inden fazlası dijital haritalarla akıllı telefon ve tabletlerden etkileşime girer. İster bir etkinlik salonunda yürüyen bir katılımcı ister şantiye alanında duran bir ev alıcısı olsun, mobil kullanılabilirlik etkileşimi doğrudan belirler.

Masaüstü gezinme fare imleçlerine ve üzerine gelme (hover) durumlarına dayanır. Dokunmatik ekranlar ise parmaklara ve dar ekran genişliklerine bağlıdır. Mobil öncelikli etkileşimli bir harita tasarlamak; dokunma hedeflerinde, bilgi çekmecelerinde ve hareket kontrollerinde bilinçli düzenlemeler gerektirir.

  1. 1
    Güvenilir parmak dokunuşları için işaretçi dokunma hedeflerinin en az 44x44 piksel olduğundan emin olun.
  2. 2
    Kritik bilgileri asla yalnızca fareyle üzerine gelindiğinde açılan ipuçlarına yerleştirmeyin.
  3. 3
    Dikey ekranlarda önemli simge yapıları çerçeveleyen sezgisel varsayılan yakınlaştırma düzeyleri belirleyin.

Alttan açılır çekmecelerin açılır pencerelere (modal) üstünlüğü

Masaüstü ekranlarda bir pine tıklamak işaretçinin yanında yüzen bir kart açabilir. Sınırlı genişliğe sahip bir cep telefonu ekranında ise yüzen kart haritayı tamamen kaplayarak ziyaretçinin yön duygusunu bozar.

Layerpin, mobildeki bilgi kartlarını otomatik olarak ergonomik bir Alttan Açılır Çekmeceye (Bottom Sheet) dönüştürür. Kullanıcı bir pine dokunduğunda çekmece ekranın altından yukarı doğru kayar; fotoğrafı, başlığı, özellikleri ve eylem düğmesini doğrudan kullanıcının başparmağının altına yerleştirir.

Ziyaretçiler çekmeceyi tek bir hareketle aşağı kaydırarak kapatabilir ve mekansal bağlamı kaybetmeden haritaya dönebilir.

  1. 1
    Temel veri noktalarını (fiyat, başlık, birincil CTA) çekmecenin üst kısmında görünür tutun.
  2. 2
    Hızlı kapatma için aşağı kaydırma hareketini kullanın.
  3. 3
    Küçük resim ve galeri en boy oranlarını 375 piksel genişliğindeki dar ekranlarda test edin.
Alt çekmece ayrıntılarını ve harita gezinmesini gösteren duyarlı mobil arayüz

Akıllı hareket yalıtımı ile sayfa kaydırma tuzağını önleme

Haritaları mobil web sitelerine yerleştirirken sık karşılaşılan bir hayal kırıklığı 'kaydırma tuzağıdır': bir makaleyi aşağı kaydıran ziyaretçinin parmağı haritaya değdiğinde sayfa yerine harita kaymaya başlar ve kullanıcı takılır.

Layerpin akıllı hareket yönetimine sahiptir: bir web sayfasına yerleştirildiğinde, iki parmakla kaydırma hareketleri veya dokunarak etkileşime geçme tetikleyicileri haritanın yanlışlıkla kaymasını önleyerek sayfa akışını korur.

Kullanıcıların haritayı kolayca keşfedebilmesi için ekrana net yakınlaştırma, uzaklaştırma ve görünümü sıfırlama düğmeleri ekleyin.

Layerpin logo

Etkileşimli harita oluşturmaya hazır mısınız?

Haritayı özel olarak oluşturun, ziyaretçi görünümünü inceleyin ve hazır olduğunda yayınlayın. No credit card needed.

Ücretsiz başlayın