Web Sitesi Mobil Menü Tasarımı Nasıl Yapılır?
Masaüstünde rahatça sığan bir menü, telefon ekranına geldiğinde çoğu zaman tek bir simgenin arkasına gizlenir. Bu gizlenme pratik görünse de kullanıcı aradığını bulamadığında doğrudan çıkışla sonuçlanır. Trafiğin büyük bölümünün mobilden geldiği düşünülürse bu küçük alan, sitenin en kritik parçalarından biridir. web sitesi mobil menü tasarımı, bu nedenle ayrı bir kurgu gerektirir. Bu yazıda konuyu adım adım ele alıyoruz.
Peki web sitesi mobil menü tasarımı nasıl yapılır? Yapıdan erişilebilirliğe kadar başlıkları inceliyoruz. Mobil uyum çalışmalarınız için Weblike ekibine danışabilirsiniz.
web sitesi mobil menü tasarımı nedir
web sitesi mobil menü tasarımı, küçük ekranlarda site gezinme yapısının sığacak ve kullanılabilir olacak biçimde yeniden kurgulanmasıdır. Masaüstü düzeninin küçültülmesi yeterli değildir.
Neden Ayrı Tasarlanır
Ekran genişliği ve kullanım biçimi tamamen farklıdır. Fare yerine parmak kullanılır.
Mobil Trafiğin Ağırlığı
Çoğu sitede ziyaretlerin büyük bölümü mobilden gelir. Mobil uyumluluk bu gerçeği ele alır.
Menü Simgesi
Üç çizgili simge yaygın biçimde tanınır. Ancak yanına menü yazısı eklemek tıklanma oranını artırır.
Simgenin Konumu
Üst köşede yer alması alışılmış bir yerleşimdir. Ancak tek elle erişim açısından tartışmalıdır.
Baş Parmak Alanı
Ekranın üst köşesine tek elle ulaşmak zordur. Alt bölümde menü sunan yaklaşımlar bu nedenle yaygınlaşmıştır.
Alt Gezinme Çubuğu
Sık kullanılan birkaç bağlantının altta sabit durması erişimi kolaylaştırır. Bu yöntem uygulama benzeri bir deneyim üretir.
Öge Sayısı
Mobil menüde çok sayıda bağlantı taranamaz. Liste kısa tutulmalıdır.
Önceliklendirme
Hangi bağlantıların menüde kalacağı kullanım verisine göre belirlenir. Kurumsal sıralama değil kullanıcı davranışı esas alınır.
Veriye Bakmak
En çok ziyaret edilen sayfalar öne alınmalıdır. Google Analytics gibi araçlar bu veriyi sağlar.
İkincil Bağlantılar
Daha az kullanılan sayfalar alt bölüme taşınabilir. İkincil menü kullanımı bu ayrımı anlatır.
Katman Derinliği
İki kademeden fazla alt menü mobilde kullanılamaz hale gelir. Yapı sadeleştirilmelidir.
Bilgi Mimarisi
Menü, sitenin bilgi düzeninden çıkar. Sayfalar gruplanmadan kurulan menü dağınık kalır.
Alt Menü Açılımı
Alt başlıkların açılır biçimde gösterilmesi yaygındır. Açılan bölümün net görünmesi gerekir.
Geri Dönüş
Alt menüden ana listeye dönüş kolay olmalıdır. Kaybolan kullanıcı siteden çıkar.
Kapatma Kolaylığı
Menünün kapatılması için belirgin bir yol bulunmalıdır. Yalnızca dışarı dokunma yeterli olmayabilir.
Dokunma Alanı
Her bağlantının parmakla rahat basılabilir yükseklikte olması gerekir. Sıkışık liste yanlış tıklama üretir.
Öge Aralığı
Bağlantılar arasında yeterli boşluk bırakılmalıdır. Bu boşluk hata oranını düşürür.
Yazı Boyutu
Menü metinlerinin okunabilir büyüklükte olması gerekir. Küçük punto mobilde sorun üretir.
Kaydırma
Uzun menülerde kaydırmanın akıcı olması gerekir. Takılan liste rahatsız eder.
Tam Ekran Menü
Menünün ekranı kaplaması odaklanmayı artırır. Bu yöntem sade siteler için uygundur.
Yandan Açılan Menü
Yan panel biçiminde açılan menüler yaygındır. İçeriğin bir bölümü görünür kalır.
Animasyon Dengesi
Açılış animasyonu kısa olmalıdır. Uzun geçişler yavaşlık hissi verir.
Animasyon Performansı
Ağır geçişler düşük donanımlı cihazlarda takılır. Sade bir açılış hem hızlı hem güvenilir görünür.
Arama Erişimi
Menüde arama kutusunun bulunması bazı sitelerde zorunludur. Arama kutusu tasarımı bu konuyu anlatır.
İletişim Bağlantısı
Telefon ve adres bilgisinin kolay erişilebilir olması hizmet sitelerinde dönüşüme katkı sağlar.
Çağrı Butonu
Menü içinde belirgin bir eylem butonu bulunabilir. Bu buton diğer bağlantılardan görsel olarak ayrılmalıdır.
Dil Seçimi
Çok dilli sitelerde dil seçicinin menüde yer alması gerekir. Konumu tutarlı olmalıdır.
Hesap Erişimi
Üyelik bağlantılarının menüde bulunması beklenir. Giriş durumu net gösterilmelidir.
Aktif Sayfa
Kullanıcının hangi sayfada olduğu menüde işaretlenmelidir. Bu bilgi yön duygusu verir.
Konum Göstergesi
Derin sayfalarda kullanıcı nerede olduğunu bilmek ister. Breadcrumb kullanımı bu ihtiyacı karşılar.
Sabit Üst Alan
Menünün kaydırma sırasında sabit kalması erişimi kolaylaştırır. Ancak ekran alanı kaplar.
Ekran Alanı Dengesi
Mobilde her piksel değerlidir. Sabit alanların yüksekliği sınırlı tutulmalıdır.
Erişilebilirlik
Menünün klavye ve ekran okuyucuyla kullanılabilir olması gerekir. Erişilebilirlik bu gerekliliği ele alır.
Odak Yönetimi
Menü açıldığında odağın menüye geçmesi beklenir. Kapandığında ise geri dönmelidir.
Arka Plan Kaydırması
Menü açıkken arka planın kaymaması gerekir. Bu detay sık atlanır.
Performans
Menü kodunun hafif olması gerekir. Ağır bileşenler açılış süresini uzatır.
Sayfa Hızı
Mobilde hız beklentisi daha yüksektir. Açılış hızı bu konuyu anlatır.
Arama Motoru Tarafı
Menüdeki bağlantıların taranabilir olması gerekir. Yalnızca betikle oluşturulan menü sorun üretebilir.
Bağlantı Yapısı
Menü, site içi bağlantı düzeninin parçasıdır. Bu yapı görünürlüğü etkiler.
Test Etmek
Menü gerçek cihazlarda denenmelidir. Tarayıcı simülasyonu her sorunu göstermez.
Farklı Ekran Boyutları
Küçük ve büyük telefonlarda sonuç farklı olabilir. Birkaç boyutta kontrol gerekir.
Kullanıcı Testi
Belirli bir sayfayı bulma görevi verilerek test yapılabilir. Bu yöntem sorunları hızla ortaya çıkarır.
Ölçüm
Menü tıklamalarının izlenmesi hangi bağlantıların kullanıldığını gösterir. Kullanılmayan ögeler kaldırılabilir.
Düzenli Gözden Geçirme
Yeni sayfalar eklendikçe menü büyür. Bu listenin dönemsel olarak sadeleştirilmesi gerekir.
Sık Yapılan Hata
Masaüstü menüsünü olduğu gibi küçültmek en yaygın hatadır. Mobil menü ayrı bir önceliklendirme gerektirir.
Kampanya Duyurusu
Menü içinde dönemsel bir duyuru alanı bulunabilir. Ancak bu alan ana bağlantıları gölgelememelidir.
Menü Açılış Hızı
Menünün dokunma ile açılması arasında gecikme olmamalıdır. Kısa bir bekleme bile tekrar dokunmaya yol açar.
Yatay Kullanım
Telefon yatay tutulduğunda menünün sığması gerekir. Bu durum sık test edilmeden bırakılır.
web sitesi mobil menü tasarımı Özeti
Kısa liste, kullanım verisine dayalı sıralama, yeterli dokunma alanı, sade katman yapısı ve gerçek cihazlarda test mobil menüyü kullanılabilir kılar.
Ekran genişliği ve kullanım biçimi farklıdır. Masaüstü düzeninin küçültülmesi kullanılabilir sonuç vermez.
Eklenmesi tıklanma oranını artırır. Yalnızca simge kullanımı bazı kullanıcılar için belirsiz kalır.
Liste kısa tutulmalıdır. Çok sayıda bağlantı küçük ekranda taranamaz hale gelir.
Kullanım verisine göre yapılmalıdır. En çok ziyaret edilen sayfalar öne alınmalıdır.
İki kademeden fazlası mobilde kullanılamaz hale gelir. Yapının sadeleştirilmesi gerekir.
Sık kullanılan birkaç bağlantı için faydalıdır ve tek elle erişimi belirgin biçimde kolaylaştırır.
Küçük ve sıkışık bağlantılar yanlış dokunmaya yol açar. Yeterli yükseklik ve boşluk gerekir.
Menü klavyeyle kullanılabilmeli, açıldığında odak menüye geçmeli ve arka plan kaymamalıdır.
Gerçek cihazlarda, farklı ekran boyutlarında ve belirli bir sayfayı bulma göreviyle test edilmelidir.
Mobil menü, küçük bir alanda sitenin tamamını temsil etmek zorundadır. web sitesi mobil menü tasarımı için listeyi kısa tutmak, sıralamayı kullanım verisine dayandırmak, katman derinliğini azaltmak, dokunma alanlarını genişletmek, odak yönetimini doğru kurmak ve gerçek cihazlarda test etmek gerekir. Gezinme tarafını genişletmek için navigasyon tasarımı yazımızı inceleyebilirsiniz.
BİZE ULAŞIN
Bizimle iletişime geçerek projeniz için hemen ücretsiz teklif alabilirsiniz.
