Mobil menü tasarımı: küçük ekranda hangi bağlantılar görünmeli?
Bir telefonda logo, altı menü bağlantısı, arama, dil seçimi ve teklif düğmesi aynı satırda sıkışabilir. Çözüm yalnızca yazıları küçültmek değildir. Mobil menü tasarımında ziyaretçinin en sık yapacağı işi, görünür kalacak kontrolleri ve açıldığında oluşacak katmanı birlikte planlamak gerekir.
Görünür alanın görevini belirleyin
Örnek bir bakım servisinde ziyaretçi hizmet türünü bulmak veya işletmeyi aramak isteyebilir. Üst alanda logo, menü ve birincil iletişim yolu yeterli bir başlangıç olabilir; diğer seçeneklerin önceliği gerçek kullanım sorularına göre belirlenir. Bu öneri bütün sektörler için aynı düğme dizisini zorunlu kılmaz.
Ajansınıza küçük ekranda ilk bakışta bulunması gereken iki işi yazın. Her kontrolün bu işlerden hangisini desteklediğini konuşun. Hiçbir işle ilişkili olmayan dekoratif düğmenin kapladığı alanı da bu değerlendirmeye katın.
Bağlantı ile açma düğmesini karıştırmayın
Hizmetler sözcüğü bir sayfayı açıyorsa, yanındaki alt menü oku ayrı bir iş yapabilir. Kullanıcının bir dokunuşla sayfaya mı gideceğini, listeyi mi açacağını tahmin etmesi gerekmesin. W3C menü rehberi de üst bağlantı kendi işlevini koruyacaksa alt menü için ayrı düğme yaklaşımını gösterir.
Klavye ile menüye erişimi, açık ve kapalı durumun anlaşılmasını kontrol edin. Sadece fareyle üzerine gelince çalışan bir etkileşim mobil kullanımın karşılığı değildir. Menü öğelerine verdiğiniz adlar, açılan sayfanın başlığıyla çelişmesin.
Arama alanının açılmasını bir bütün olarak tasarlayın
Arama düğmesine basınca yalnızca kutunun genişlemesini değil, sonucun nerede görüneceğini de çizin. Üstte sabit bir teklif barı varsa sonuç paneli onun arkasında kalmamalı. Kapanış düğmesi görünür olmalı ve klavye odağı kullanıcının bıraktığı yere dönebilmelidir.
Telefonda ekran klavyesi açıldığında kalan alanı ayrıca deneyin. Sonuç listesi kayabiliyor mu, seçilen içerik açılıyor mu, sonuç bulunamadığında alternatif sunuluyor mu? Arama işlevi yoksa görsel olarak arama kutusuna benzeyen bir dekor eklemeyin.
Sabit çubukları içerikle birlikte ölçün
Menü yüksekliğini tek başına onaylamayın. Menü, kampanya barı ve tarayıcı arayüzü birlikte ilk ekranın önemli kısmını kaplayabilir. Sayfa başlığının ve ilk açıklamanın görünür başladığını kontrol edin. Özellikle uzun Türkçe ve İngilizce başlıkları, ekran yatay döndüğünde de deneyin.
Kontrol kaydına telefon genişliğini, açık katmanı ve örtülen öğeyi yazın. “Mobil bozuk” yerine “arama açıkken ilk sonuç teklif barının altında kalıyor” demek, düzeltilecek durumu ekip için açık hale getirir.
Beş kısa hareketle teslimi kontrol edin
Menüyü açın; alt kategoriye geçin; aramadan bir sayfa bulun; dili değiştirin; menüyü kapatıp okumaya devam edin. Bu sırada yanlışlıkla başka bir bağlantıya dokunup dokunmadığınızı not edin. Yalnızca ana sayfada değil, bir hizmet ve bir yazı sayfasında da aynı akışı uygulayın.
Formun nasıl çalışacağını ayrıca teklif formu rehberimizde ele alıyoruz. Menü ve içerik yapısını birlikte düzenlemek için web tasarım hizmetimizi inceleyin. Amaç daha çok kontrol sığdırmak değil, ziyaretçinin doğru sayfaya rahatça ulaşmasıdır.
Sık sorulan sorular
Mobilde bütün masaüstü bağlantıları görünür kalmalı mı?
Her bağlantı aynı anda üst çubukta olmak zorunda değil. Önemli yollar kolay bulunmalı; diğerleri açık bir menü yapısında erişilebilir kalmalıdır.
Menü animasyonu kullanılabilir mi?
Evet. Açılış ve kapanış anlaşılır olmalı; hareket okumayı veya dokunmayı geciktirmemeli ve azaltılmış hareket tercihi dikkate alınmalıdır.