Dijital ürünler üzerinde çalışıyorsanız, mobil cihazlarda ve masaüstünde hamburger menü navigasyon öğesinin verimliliğinin, keşfedilebilirliğinin neden diğer öğelere göre daha düşük olduğunu ve neden tercih edilmek istenmediğini anlatan birçok makale okumuşsunuzdur. (Konuyla ilgili en iyi makalelere buradan ve buradan ulaşabilirsiniz.)

Neyse ki, bu sorun için daha fazla site & uygulama gün geçtikçe alternatif ve daha etkili çözümler sunuyor. Bu yazımızda da mobil navigasyon kullanımı için alternatif çözümlere yer vererek farklı navigasyon tasarımı fikirlerine bir göz atmak istedik.

Yazıyı okumadan önce kısa bir bilgi verelim. Burada listelenen fikirlerin hiçbiri diğerlerinden daha iyi değildir. Bu yapıların uygulanabilirlikleri ve performansları uygulamanın içeriğine ve bağlamına bağlı olarak sizin seçiminize kalıyor…

Gelin hep birlikte navigasyon çözümlerini inceleyelim.

  1. Sekmeli Yapılar

Web sitenizde veya uygulamanızda sınırlı sayıda menü öğesi varsa ve kullanıcıların bu bölümler arasında hızlıca geçiş yapması gerekiyorsa; bunun için sekmeli gezinme yapısı iyi bir çözüm olabilir.

Sekmeler basit bir gezinme yapısı gibi gözükse de, tasarım yaparken birkaç şeyi göz önünde bulundurmanız gerekir:

  • Sayfa üzerinde görüntülenmesi gereken başlıklar beşten fazla olmamalıdır.
  • Sekmelerden biri her zaman açık görünmeli ve bu görsel olarak vurgulanmalıdır.
  • İlk sekme, ana sayfa veya ana ekran olmalıdır. Sekmelerin önem sırası; kullanıcı akışındaki öncelik veya mantıksal sırada olmalıdır.
  • Sekmeler içeriğe veya platforma bağlı olarak ekranın üstünde veya altında görüntülenebilir yapıda olmalıdır.

Örnekler: LinkedIn ve Google Foto

  1. “Diğer/Fazlası” Seçenekli Sekmeler

Menüde 5 ana bölümden fazlası olduğunda pratik bir çözüm olarak; en öncelikli dört bölümü gösterip beşinci ve daha fazlasını bir listenin altında toplamak faydalı olacaktır.

Bu çözüm, tasarım ilkeleri göz önünde bulundurulduğunda oldukça faydalıdır.  “Diğer/Fazlası” başlığı bir gezinme sayfasına bağlantı verebilir veya kalan bölümleri de içeren bir açılır menü olarak kullanılabilir. (Aşağıdaki gibi)

“Diğer/Fazlası” öğesinin hamburger menüden daha iyi bir çözüm olmadığını (başlıklar yine gizlendiği için) düşünebilirsiniz; ancak öncelik sırasını doğru koyduysanız, bu yöntem çoğu kullanıcının gezinme deneyimini geliştirecektir. Örneğin; Facebook:

  1. Katmanlı Küçülen – Büyüyen Menü

“Diğer/Fazlası” navigasyonunun daha sofistike bir sürümü olan başka bir çözüm de katmanlı küçülen-büyüyen menü tasarımıdır. Bu çözüm ekran genişliğine uyum sağlar ve navigasyonda ne kadar öğe varsa göstermeye çalışır.

Şimdi kafanızda bir soru işareti belirecektir. “Acaba bu yöntem, “Diğer/Fazlası” menüsünden, daha düşük çözünürlükte olduğu ve daha fazla öğe içerdiği anlamına mı gelir?”

Hayır, yalnızca Diğer/Fazlası yöntemi menüdeki diğer öğeleri göstermek için yeterli alan olmadığında kullanılmaktadır. Bu çözümün artı yönü; esnekliği ve özellikle farklı ekran boyutları arasında, “Diğer/Fazlası”ndan daha iyi bir deneyim sunmasıdır. Örneğin; BBC:

  1. Kaydırılabilir Menü

Her biri aynı öneme sahip bir çok menü öğeniz varsa ve ‘Diğer/Fazlası’ yöntemini kullanmak istemiyorsanız, başka bir yöntem de tüm öğeleri kaydırılabilir görünümde listelemektir.

Bu çözümün dezavantajı ise; birkaç öğenin kaydırma yapmadan görünmesine ve diğer yapıların tamamen dışarıda kalıp keşfedilebilirliğinin diğerlerine göre düşük olmasına neden olabilir. Yani keşfedilebilirliğini biraz belirginleştirmek gerekir. Yukarıdaki örnekteki gibi sonda kalan başlığa devamı gelecek hissi verilmelidir.

Bir diğer dikkat edilmesi gereken nokta ise; birinden diğerine geçiş yapılacağının çok fazla anlaşılmasıdır. Özellikle bu yapının görsel tasarımı yapılırken; yatay kaydırma yapıldığını, daha fazla içerik olduğunu belli etmek için yeterince görsel ipucu verdiğinizden emin olmanız gerekir. (Örneğin; son geçiş yapılan öğenin daha soluk gösterilmesi)

Örneğin; Medium:

Örneğin; Google:

  1. Dropdown Menü

Çok yaygın olmayan ve ilginç bir başka örnek ise, dropdown menü kullanımı. Diğer menü öğelerinin alt başlık olarak kullanılabileceği durumlarda, bir üst kategori başlığı ile uygulanabilir.

Açılan menü bu durumda ikili role sahip: ilk önce, sayfa başlığı görevi görüyor, sonrasında ise aşağı ok ile benzer bölümlere hızlı bir şekilde geçme fırsatı sunuyor. Eğer üst başlık, alt başlıklar ile ilintiliyse, dropdown menü kullanılabilir.

Örneğin; Barnes & Noble:

 

Örneğin; Duolingo:

Bazen hamburger menü de iyi bir seçim olabiliyor. Hamburger menünün asıl dezavantajı; düşük keşfedilebilirliğinin olmasıdır. Bu sebeple birincil menü öğeleri, ekran üzerinde ön plana çıkarılıyorsa, hamburger menü ikincil navigasyon için iyi bir kullanım olabilir.

Bu stil ana navigasyonun açıklık ve basitlik ilkeleri çevçevesinde tasarlandığında kullanılabilir. Az içerikle kolay bulunabilir bir yapıda ürün tasarladıysanız hamburger menü kullanımı doğru olacaktır. Bunun için Uber iyi bir örnek olabilir:

Hamburger menü için iyi bir örnek daha; Google Translate. Ana işlevsellik (çeviri yapmak ve tercüme edilecek metni yazmak) ekranda oldukça belirgin olduğundan, gizli menü “Yardım ve Topluluk” gibi bölümleri barındırmak için harika bir yerdir:

 

SONUÇ

Mobil navigasyon tasarımı için tek bir çözüm yolu yoktur. Bu her zaman ürününüze, kullanıcılarınıza ve içeriğinize bağlı olarak değişebilir. Başkalarının ürünleri için iyi sonuçları olan örnekler sizin ürününüz için iyi olmayabilir. Kullanıcılarınız tasarladığınız yapıya alışamayabilir de, çok sevebilirler de.

Ayrıca unutulmaması gerekir ki, iyi tasarlanmış her navigasyonun temelinde iyi bir bilgi mimarisi vardır. Kullanıcılarınızın ihtiyaçlarına göre daha açık bir yapı mı, yoksa önceliklendirilmiş bir yapı mı kullanacağınıza karar verebilirsiniz.

Peki bugün neden ürününüz için en verimli mobil navigasyon yöntemini bulmaya başlamıyorsunuz?

Zeynep Kuzhan, UXservices

Kaynakça:
https://blog.marvelapp.com/hamburger-menu-alternatives-mobile-navigation/