Çok Düzeyli Menü Tasarımı En İyi Uygulamaları

Gezinme ve bulunabilirlik, kullanıcı deneyimi tasarımının merkezi yönleridir. Kullanıcılar gitmek istedikleri yere ulaşamazlarsa veya ihtiyaç duydukları şeyi bulamazlarsa, hüsrana uğrarlar ve başka bir yere bakmaya karar verebilirler. Özellikle karmaşık bilgi mimarisine sahip web sitelerinde, çok düzeyli menüler, gezinmeyi ve bulunabilirliği iyileştirmenin etkili bir yoludur, böylece ürün güvenini artıran ve dönüşümleri artıran verimli web deneyimleri sunar.

Ürünler ve kullanıldıkları cihazlar büyük ölçüde farklılık gösterdiğinden, mükemmel çok düzeyli menüyü verecek, herkese uyan tek bir çözüm yoktur. Ancak, herhangi bir ekran boyutunda gezinmeyi ve bulunabilirliği geliştiren çok düzeyli menüler oluşturmanıza yardımcı olacak temel kurallar vardır.

Her Boyuttaki Ekran İçin Tasarım İpuçları

İyi bir çok düzeyli menü, bilgileri net ve sezgisel bir şekilde sunarak kullanıcıları hızlı bir şekilde gitmeleri gereken yere götürmelidir. Boyuta özel yönergelere geçmeden önce, tüm menüler için geçerli olan bazı uygulamalara bakalım.

İkiden fazla alt menü düzeyi kullanmayın. İkiden fazla alt menü seviyesi, muhtemelen kullanıcıları şaşırtacak ve bunaltacaktır. Navigasyonu nispeten düz tutmak, kullanıcılar için bulunabilirliği artırır ve nerede olduklarını hatırlamak için gereken bilişsel yükü azaltır. Sitenin sayfa yapısı derinse, yakından ilişkili sayfaların üstüne yerel bir gezinme menüsü eklemeyi düşünün. Örneğin, karmaşık iş destek ürünleri tasarlayan Zoho, her ürün sayfasının üst kısmına, ana menünün hemen altına ürüne özel bir yerel menü yerleştirmiştir. En üstteki ana menü, Zoho'nun temel tekliflerini sıralarken, yerel menüler, kullanım durumları ve fiyatlandırma gibi daha ayrıntılı bilgilerin bulunduğu sayfalara erişim sağlar.

Alt menüleri simgelerle işaretleyin. Kullanılabilir alt menüler olduğunda her zaman netleştirerek kullanıcıların beklentilerini yönetin. Bilinen seçenekler arasında küçük bir aşağı açı simgesi veya bir üçgen simgesi bulunur. Ayrıca, alt menüler açıkken işaretçi simgelerini çevirmeyi düşünün.

Bilgileri sezgisel olarak düzenleyin. Bilgi hiyerarşisinin, kullanıcıların zihinsel modelleriyle uyumlu olduğundan emin olun. Örneğin, bir e-ticaret sitesinde, bir alışverişçinin ürünlerin markaya veya ürün türüne göre düzenlenmesini bekleme olasılığının daha yüksek olup olmadığını düşünün. Bir kullanıcı "Ayakkabılar" kategorisini tıklarsa, alt menünün spor ayakkabı, sandalet ve bot seçenekleri sunmasını bekler mi? Yoksa mağazanın taşıdığı her marka ayakkabıyı listeleyen bir alt menü görmeyi mi bekleyecekler? Hem kullanıcı araştırmanıza hem de rakip araştırmanıza bakmak bunu netleştirecektir.

Kullanıcıların her zaman nerede olduklarını bilmelerini sağlayın. Kullanıcının bulunduğu sayfaya karşılık gelen bağlantıyı her zaman ana menüde vurgulayın. Geçerli sayfa bir alt menüdeyse, alt menü bağlantısını ve ana menüdeki ana öğeyi de vurgulayın. Örneğin, ehliyetini yenilemek için bir devlet web sitesini kullanan bir kişi, ana menüdeki “Konut Sakinleri” bağlantısından alt menüdeki “Sürücü Hizmetleri” bağlantısına ve ardından yenileme formunun bulunduğu bir sayfaya giderse, hem “ Sakinler” ve “Sürücü Hizmetleri” bağlantıları vurgulanmış olarak kalacaktır.

Kopyalamayı basit tutun. Menü, akıllı kelime oyunları için uygun bir yer değildir; bağlantı etiketlerinin güçlü bir bilgi kokusuna sahip olduğundan emin olun. Bu, kullanıcıların tıkladıklarında ne bulacaklarını hemen bilmeleri için etiket adlarını basit ve açıklayıcı tutmak anlamına gelir. Kopya ne kadar net olursa, kullanıcılar ihtiyaç duyduklarını o kadar hızlı bulurlar.

Okunabilirliğe öncelik verin. Basit bir sans-serif yazı tipi kullanın ve dağınıklığı önlemek için öğelerin etrafında yeterli boşluk bırakın. Arka planın, menünün arkasında yatan her şeyi engelleyecek kadar opak olduğundan emin olun. Ancak sitenin genel markasını göz ardı etmeyin. Okunabilirlik önce gelse de, menünün stilinin sitenin geri kalan görünümünü ve hissini tamamlamasını sağlayın.

Tıklama ve dokunmayı erişilebilir hale getirin. İnce motor kontrol bozukluğu olan kullanıcılar için menüyü erişilebilir hale getirmek için Google'ın Materyal Tasarımı yönergelerini izleyin ve tıklanabilir öğeleri en az 48 x 48 piksel boyutunda biçimlendirin.

Masaüstü Bilgisayarlar için Tasarım İpuçları

Mobil cihazlara yönelik artan bir eğilime rağmen, müşterilerin tam özellikli masaüstü sitelerine ihtiyaç duymasının birçok nedeni var. Örneğin, bir üniversite veya finans kurumu için bir web sitesi gibi bir mobil site için mümkün olandan daha fazla bilgiyi çevrimiçi olarak erişilebilir hale getirmeleri gerekebilir. Veya araştırmaları, kullanıcılarının masaüstü bilgisayarlara daha fazla güvendiğini gösterebilir.

Bir masaüstü menüsünün taranması kolay olmalı, net etkileşimler sunmalı ve elbette duyarlı olmalıdır. Ayrıca, deneyimi geri gelen ziyaretçiler için sezgisel hale getirmek için mobil siteyle mümkün olduğunca tutarlı olmalıdır.

Menüler üzerine gelindiğinde değil tıklandığında açılmalıdır. Vermeniz gereken en temel kararlardan biri, kullanıcıların site menüsüne nasıl erişeceğidir. Sadece imleci üst öğenin (kategori adı) üzerine getirmek menünün görünümünü tetiklemek için yeterli mi yoksa kullanıcıların onu tıklaması mı gerekecek?

Fareyle üzerine gelme yaklaşımı popülerdir ancak tıkla ve aç, menünün tüm cihazlarda güvenilir ve sezgisel olarak çalışmasını sağlamanın en iyi yoludur. Tıklama yaklaşımı, web sitelerinin hem geleneksel bilgisayar monitörlerinde hem de dokunmatik ekranlarda daha tutarlı bir şekilde çalışmasını sağlar ve fareyle üzerine gelme yaklaşımında meydana gelen, aşağıdakiler de dahil olmak üzere birçok hayal kırıklığını önler:

• Dar vurgulu tüneller. Fareyle üzerine gelme tüneli, bir farenin menüyü açık tutarken gezinmek için izlemesi gereken yoldur. Çok darsa, kullanıcı istediği bağlantıya ulaşmadan menü kaybolabilir.
• Yanlışlıkla açma. Bir kullanıcı sayfada başka bir konuma giderken üzerinde gezinmeye çalışırsa, fareyle üzerine gelme menüsü yanlışlıkla açılmaya eğilimlidir. Kısa bir gecikme ayarlamak bu sorunu çözer ancak kullanıcı menüyü açmak istediğinde hayal kırıklığına neden olabilir.
• Dokunmatik ekranlarda tutarsız UX. Fareyle üzerine gelme menüleri dokunmatik ekranlarda çalışmaz. Dokunmatik ekranları algılamak ve dokun-aç moduna geçmek için bir kod düzeltmesi gerektirirler; dizüstü bilgisayar ve tablet arasındaki hat giderek bulanıklaştıkça, bu geçici çözümler eskimiş olabilir.
• Nelerin tıklanabilir olduğuyla ilgili sorular. Fareyle üzerine gelme menüleri ile kullanıcılar, tıklamayı deneyene kadar üst bağlantının tıklanabilir olup olmadığını her zaman bilemezler. Bu sezgiselin tersidir.
• Ulaşılabilirlik. Fareyle üzerine gelme menüleri, ekran okuyucu kullanan veya klavyeyle gezinen kullanıcılar için sorun oluşturabilir.

Doğru düzeni seçin: Açılır menü ve Mega menü. Masaüstü sitesi geleneksel bir menü düzeni kullanıyorsa (sayfanın en üstünde yer alan yatay bir menü çubuğu), göz önünde bulundurabileceğiniz iki tür alt menü vardır: standart tek sütunlu açılır menü veya çok sütunlu mega menü.

Ana kategori sekizden az bağlantı içeriyorsa bir açılır menü kullanmayı düşünün. Açılır menü dikey kaydırma gerektirecek kadar uzunsa, bilgileri farklı şekilde düzenlemeyi düşünmelisiniz - belki bir mega menü olarak veya ana kategorileri hassaslaştırarak.

Mega menü, genellikle tarayıcının genişliğini artırabilen geniş bir düzen kullanan bir iç içe menü türüdür. Alt menüler sütunlar halinde gruplanabilecek birçok farklı bağlantı içeriyorsa bu tür menüyü kullanmalısınız. Genelde büyük e-ticaret sitelerinde buna benzer menüler görürsünüz.

Bir mega menü tasarlarken aşağıdakileri göz önünde bulundurun:

• Bilgilerin taranmasını kolaylaştırmak için resimler veya simgeler ekleyin.
• Grupla ilgili sayfalara başlıklar ekleyin.
• Kategori adları aşikar değilse açıklamalar ekleyin.

Mega menüleri mobil cihazlarda okumak ve gezinmek zor olabilir, ancak bazen daha büyük bir ekranda UX'deki iyileştirme, mobil cihazlar için bilgileri yeniden yapılandırmak için fazladan çalışmaya değer.

Net vurgulu durumları ekleyin. Tıkla-aç menülerinde bile, tüm tıklanabilir öğeler için net vurgulu durumları dahil olmak üzere etkileşimleri tatmin edici hale getirir ve kullanıcılara bağlantıların etkin olduğuna dair güvence verir. Fareyle üzerine gelme durumunu belirtmek için tıklanabilir alanın arka planını biraz daha koyu yapabilirsiniz. Fareyle üzerine gelme alanının tıklanabilir alanla eşleştiğinden emin olun. Test, kullanıcıların daha fazla rehberliğe veya bağlama ihtiyacı olduğunu gösteriyorsa, önemli bir şeyi engellemediği sürece daha açıklayıcı etiket adları veya bir araç ipucu eklemeyi düşünün.

Alt menüleri kapatmak için tıklayın. Kullanıcılar başka bir yeri tıkladıklarında veya başka bir alt menüyü açtıklarında menüleri kapatarak işleri sezgisel tutun. Formlarda açılır giriş alanları bu şekilde çalışır, bu nedenle çoğu kullanıcı bunu tanıdık bulacaktır.

Masaüstünde klavye gezintisini etkinleştirin. Herkes gezinmek için fare kullanmaz, bu nedenle menü, kullanıcıların yalnızca klavye kullanarak gezinmesine izin vermelidir. Bu, kullanıcıların bir bakışta nerede olduklarını görebilmeleri için tüm bağlantıların farklı odaklanmış durumlara sahip olması gerektiği anlamına gelir. Tipik olarak daha koyu renkli bir çerçeve, odaklanılan durumu belirtmek için iyi çalışır.

Mobil Ekranlar için Tasarım İpuçları

Halihazırda mobil öncelikli tasarım yapmıyorsanız, el tipi bir cihaz için menüyü optimize etmeniz gerekir. Geleneksel menü düzenleri, çok küçük ekranlarda nadiren iyi çalışır; yalnızca masaüstü menü çubuğunu küçültürseniz, kimse onu okuyamaz. Bu yönergeler, küçük ekrana başarılı bir şekilde geçiş yapmanıza yardımcı olacaktır.

Ana menüyü basitleştirin. Akıllı telefon ekranları çok küçük olduğundan, bir masaüstü menüsünde bulacağınız bilgilerin çoğunun başlangıçta gizlenmesi gerekir. Ana menü çubuğunun çok basit olması gerekir, ancak bulunabilirliği artırmak için en önemli bağlantıları ortaya çıkarmak iyi bir fikirdir. Menü çubuğunu ekranın altına veya üstüne yapıştırabilirsiniz.

Bir menü tetikleyicisi ekleyin. Bir mobil menünün tamamı veya bir kısmı gizlenmiş olabileceğinden, kullanıcıların onu bulmak için bir yola ihtiyacı olacaktır. Menü çubuğuna veya ulaşılması kolay kayan bir düğmeye bir hamburger simgesi eklemek, birçok kullanıcının tanıyacağı popüler bir çözümdür. Ancak hamburger menüsü tek seçenek değil. Daha yaşlı kullanıcılar için tasarım yapıyorsanız, örneğin "Menü" kelimesini içeren bir kutu kullanmak daha iyi olabilir. Veya sitenin özelliklerini daha belirgin hale getirmek istiyorsanız, bunları üstte veya altta sekmeli bir menüde görüntülemek isteyebilirsiniz.

Menüyü bir kenar çubuğuna yerleştirin. Bir mobil menü tasarlamanın birçok farklı yolu vardır. Her durumda çalışan tam genişlikte bir düzen kullanabilirsiniz; sadece birkaç bağlantı olduğunda en iyisi olan bir alt çekmece; veya alt menüleri olmayan küçük bir menü için fütüristik görünümlü bir seçenek olan dairesel bir köşe menüsü. İyi bir seçenek, sayfa içeriğini engelleyen, böylece dikkat dağıtıcı unsurları ortadan kaldıran ve kullanıcıların kapatmak için kolayca dokunarak kapatmalarına olanak tanıyan koyu, yarı saydam bir arka plana sahip bir kenar çubuğu kullanmaktır. Ayrıca sarsıcı bir deneyim yaşamamak için soldan kaydırma animasyonu kullanmayı düşünün. Kenar çubuğu ve alt çekmece menüleri için, daha küçük ekranlarda veya yatay modda hiçbir şeyin kesilmemesi için menünün dikey olarak kaydırılabilir olduğundan emin olun.

Kullanıcıların menüyü kolayca kapatmasına izin verin. Kullanıcılar bir menüyü kapatmak için sezgisel olarak kapatabilir, ancak bir X düğmesi eklemeyi de düşünebilir. Hamburger simgesini X'e çevirebilir veya menünün sağ üst köşesine bir tane ekleyebilirsiniz.

Tek alt menüler için genişleyen bölümleri kullanın. Menüde yalnızca bir alt menü düzeyi varsa, genişleyen bölümleri kullanmayı düşünün. Bunları ana öğenin altına genişletebilir ve netlik için farklı bir arka plan rengi kullanabilirsiniz. Kullanıcıların aynı anda birden çok alt menüyü genişletmesine de izin verebilirsiniz. Bir alt menünün mevcut olduğunu belirtmek için ana öğenin sağ tarafında aşağı açı veya üçgen simgesi kullanmayı düşünün.

Üst üste binen menülerle mega menüleri ve çoklu alt menüleri değiştirin. Birden fazla alt menüyü genişletmeniz veya bir mega menüyü yeniden yapılandırmanız gerekiyorsa, örtüşen bir yaklaşımı tercih edin: Bir alt menüyü üst öğenin altına veya yanına genişletmek yerine alt menünün üst öğenin yerini almasını sağlayın. Bu yaklaşımla, birinci seviye dışındaki tüm panellere bir “Geri” bağlantısı eklemeniz gerekecek. Üst düzey menü için, üst öğeler için bir dik açı simgesi veya sağ ok kullanmayı düşünün.

Önceden açık alt menüler. Masaüstünde, geçerli sayfayı ve üst öğesini vurgulamak yararlıdır. Küçük ekranlarda bunu bir adım daha ileri götürmeyi düşünün. Bir kullanıcı ana menüyü açmak için dokunursa ve şu anda bulunduğu sayfa bir alt menüdeyse, alt menüyü de otomatik olarak açmayı düşünün, böylece kullanıcı menü öğelerinin geri kalanına göre nerede olduklarını anlar.

Açık ve Tutarlı Tutun

Navigasyon, müşteri deneyiminin çok önemli bir bileşenidir. Kullanıcılar bir çöpçü avına çıkmak veya menülerde gezinmek için gerekenden daha fazla zaman harcamak istemezler. İhtiyaç duydukları şeyi kolayca bulamazlarsa, müşterinizin kaynaklarını bir destek çağrısı ile bağlayabilir veya daha da kötüsü, işlerini başka bir yere götürebilirler.

İyi tasarlanmış çok düzeyli bir menü, karmaşık bir bilgi mimarisine sahip herhangi bir web sitesinin önemli bir bileşenidir. Bu yönergeler hiçbir zaman kullanıcı araştırması ve testinin yerini almasa da, çok çeşitli kullanım durumlarında size iyi hizmet edecektir.

Toptal Blog'da daha fazla okuma:

• Kapsamlı Bilgi Mimarisi Rehberi
• Duyarlı Tasarım: En İyi Uygulamalar ve Hususlar
• Mobil için Bilgi Mimarisi İlkeleri (İnfografik ile)