Hamburger Menüsüne 5 Alternatif Alternatif
Ekran alanı, mobil cihazlarda değerli bir kaynaktır. Küçük ekran alanlarının zorluğunu gidermek için hala navigasyonu erişilebilir hale getirirken, tasarımcılar genellikle gizli navigasyon örneği olan hamburger simgesinin arkasındaki gezinmeyi gizlemeye güveniyorlar. Bu makalede, gizli gezinmenin neden kötü UX oluşturduğunu ve tasarımcılar için hangi alternatiflerin mevcut olduğunu göreceğiz.
UX için Hamburger Menüsü Neden Kötü?
Mobil cihazda, görünür gezinme hamburgerden 1,5 kat daha fazla kullanılır
Dijital ürünler üzerinde çalışıyorsanız, muhtemelen mobil cihazlardaki hamburger menüsünün UX metriklerini nasıl etkilediğini anlatan düzinelerce makale okudunuz. Ana dezavantajı düşük keşfedilebilirliği ve bu gerçek sayılar tarafından destekleniyor. Nitel çalışmalarda NNGroup bulundu Bu gizli gezinme, görünür veya kısmen görünür gezinmeden daha az keşfedilebilir. Bu, navigasyon gizlendiğinde, kullanıcıların navigasyonu kullanma olasılığının düşük olduğu anlamına gelir. Hamburger menüleri nişan almayı yavaşlatır, keşif sürecini yavaşlatır ve insanları karıştırır.
Peki bunun yerine ne kullanmalıyız?
Mobil uygulamalar ve web siteleri için zor ve hızlı bir kural bulunmamakla birlikte, genel bir öneri görünür olanı kullanmaktır - ana gezinme seçenekleri görünür bir gezinme çubuğunda gösterilir - veya ana gezinme seçeneklerinden bazılarının görülebildiği açılan gezinme ve bazıları etkileşimli bir öğenin altında gizlidir.
1. Sekme Çubuğu
Web sitenizde veya uygulamanızda sınırlı sayıda üst düzey hedefiniz varsa, sekmeli bir gezinme çözüm olabilir. Bir menü yukarıdan veya aşağıdan göründüğünde, temel olarak bir navigasyonun var olduğunu ve kullanıcıların navigasyon seçeneklerini başlangıçtan itibaren görebildiğini duyurmaktır.
Sekmeler en basit gezinme modeli gibi görünüyor. Ancak, bu tür bir gezinme tasarımı yapılırken birkaç şey dikkate alınmalıdır:
- Sekme çubuğu 5 veya daha az gezinme seçeneğinin görüntülenmesine izin verir.
- Seçeneklerden biri daima aktif olmalı ve görsel olarak kontrastlı bir renk kullanılarak vurgulanmalıdır.
- İlk sekmenin ana sayfa olması ve sekmelerin sırasının kullanıcı akışındaki önceliklerine veya mantıksal düzenine göre olması gerekir.
- Her bir gezinme seçeneği için simgeleri etiketlerle birlikte kullanmak daha iyidir. Etiketsiz simgeler, arama yapmak için bir büyüteç simgesi ve kullanıcıların sıklıkla kullandıkları arayüzler (örneğin Instagram) gibi yalnızca ortak eylemler için çalışır.
İpucu: Ekran boşluğunu kaydetmek için, gezinme çubuğu aşağı ve yukarı kaydırmada gizlenebilir / gösterilebilir.
2. “Daha Fazla” Seçenekli Sekme Çubuğu
5'ten fazla üst düzey destinasyonunuz olduğunda, 4 öncelikli bölümü göstermek ve kalan seçeneklerin bir listesi olarak 5. öğeye sahip olmak pratik bir çözüm olabilir.
Bu çözümün tasarım ilkeleri temel olarak Sekme çubuğuyla aynıdır. Sadece bir istisna var: son öğe 'daha' öğesi.
'Daha fazla' öğesi, bir açılır menü olarak çalışabilir veya hatta kalan bölümlerle ayrı bir gezinme sayfasına bağlantı verebilir. İlk bakışta bu çözüm hamburger menüsünden çok daha iyi değildir, çünkü içeriği de gizler ve etiketinin arkasında saklı olan şey hakkında çok fazla şey söylemez. Ancak, navigasyon seçeneklerini doğru bir şekilde önceliklendirirseniz, kullanıcılarınızın büyük çoğunluğu ekranda 4 veya 5 adet görünür öncelikli gezinme seçeneğine sahip olacak ve böylece onlar için navigasyon deneyimi geliştirilecektir.
3. Aşamalı Çöken Menü
“Priority +” deseni olarak da bilinen aşamalı olarak daraltma menüsü, ekran genişliğine uyarlanan bir menüdür. Gezinmenin mümkün olduğunca fazla olduğunu gösterir ve her şeyi bir “daha” düğmesinin altına koyar. Temel olarak, bu model “Sekme çubuğu + daha fazla” gezinmesinin gelişmiş bir versiyonudur ve “daha fazla” menünün arkasına gizlenen gezinme seçeneklerinin sayısı mevcut ekran alanına bağlıdır. Bu çözümün esnekliği, bir 'statik' 'Sekme çubuğu + daha fazla' 'dan daha iyi bir kullanıcı deneyimi sağlar.
4. Kaydırılabilir Gezinme
Önceki iki modele benzer şekilde, bu daha uzun listeler için başka bir yaklaşımdır. Önceliklerde, örneğin müzik türlerinde büyük bir ayrım olmaksızın bir dizi gezinme seçeneğiniz varsa, tüm öğeleri kaydırılabilir bir görünümde listeleyebilirsiniz. Listeyi kaydırılabilir yaparak kullanıcıların yan yana hareket etmesine izin verirsiniz.
Bu çözümün dezavantajı, sadece en az birkaç öğenin kaydırma yapmadan görülebilmesi ve kalanların da görüş alanı dışında kalmasıdır. Bununla birlikte, kullanıcıların içeriği, örneğin haber kategorilerini, müzik kategorilerini veya çevrimiçi bir mağazada keşfetmesi bekleniyorsa, bu kabul edilebilir bir çözümdür.
5. Tam Ekranda Gezinme
Bu makalede bahsedilen diğer kalıplarla birlikte, mücadele, navigasyon sistemlerinin kapladığı alanı en aza indirmektir, tam ekran modeli tam tersi yaklaşımı benimsemektedir. Bu yaklaşım genellikle ana sayfayı yalnızca navigasyona ayırır. Kullanıcılar, yukarı ve aşağı doğru gezinirken ek menü seçeneklerini ortaya çıkarmak için aşamalı olarak hafifçe dokundurur veya kaydırır.
Bu örüntü, özellikle kullanıcılar tek bir oturum sırasında gezinme hiyerarşisinin yalnızca bir dalı ile sınırlama eğiliminde olduğunda, görev tabanlı ve yönlendirmeli web sitelerinde ve uygulamalarda iyi çalışır. Geniş genel bakış sayfalarından ayrıntı sayfalarına kullanıcıların hunileştirilmesi, kullanıcıların aradıklarına ve bireysel bir bölümdeki içeriğe odaklanmalarına yardımcı olur.
Yelp içinde tam ekran navigasyon
Tam ekran navigasyonunu kullanarak tasarımcılar, büyük bilgi yığınlarını tutarlı bir şekilde organize edebilir ve kullanıcıyı ezici bir şekilde göstermeden bilgiyi açığa çıkarabilir. Kullanıcı nereye gideceği konusunda karar verdiğinde, tüm ekran alanını içeriğe ayırabilirsiniz.
Sonuç
Mobil cihazlar için gezinme düzenleri ile tek boyutlu bir çözüm yoktur; her zaman ürününüze, kullanıcılarınıza ve içeriğe bağlıdır. Bununla birlikte, her iyi tasarlanmış navigasyonun temeli bilgi mimarisidir: kullanıcılarınızın ihtiyaçlarına göre açık yapı, öncelikler ve etiketler. Kullanıcıların gezinmesine yardımcı olmak, her uygulama tasarımcısı için en önemli öncelik olmalıdır. Hem ilk kez hem de geri gelen kullanıcılar, uygulamanızın kolaylıkla nasıl hareket edeceğini anlayabilmelidir.