Sinir bozucu Tasarım Modelleri: Mega-Dropdown Hover Menüleri

Karmaşık web siteleri genellikle karmaşık gezinmeye dayanır. Bir web sitesi, genellikle mikro web siteleri ve yüzlerce alt bölümle birleştirilmiş binlerce sayfa barındırdığında, gezinme sonunda derin ve geniş olacaktır. Ve böylesine karmaşık bir çok seviyeli navigasyon ile seçeneklerin genişliğini göstermek oldukça fazla alan gerektirir. Birçok kitleye hitap eden ve çok sayıda giriş noktasına sahip büyük e-ticaret perakendecilerini ve büyük kurumsal siteleri düşünün.

Bu karmaşıklıkla başa çıkmanın yaygın bir yolunun, müşterileri hızlı bir şekilde büyük miktarda navigasyona maruz bırakmak olmasına şaşmamalı. İşte tam da bu nedenle, mega-dropdown'lar , çoğunlukla karmaşık ve büyük projeler için olsa da, web'de bir şekilde bir kurum haline geldi. Bir mega açılır menü , aslında bir kullanıcının eyleminde görünen büyük bir yer paylaşımıdır. Genellikle kendi başına karışık bir bağlantı, düğme, küçük resim ve bazen iç içe açılan açılır listeler ve bindirmeler içerir.

Onlarca yıldır, bu tür gezinme için yaygın bir davranış, menüyü fareyle üzerine gelindiğinde açmaktır . Ve onlarca yıldır, bu modelle ilgili ortak bir kullanıcının şikayeti, alt navigasyonun nasıl ve ne zaman açılıp kapandığına dair mutlak kesinlik ve kontrol eksikliği olmuştur.

Bazen alt menü beklenmedik bir şekilde belirir ve bazen aniden kaybolur ve bazen fare işaretçisi zaten sayfanın çok farklı bir bölümünde veya tamamen başka bir sayfada olmasına rağmen ekranda bir süre kalır.

Mega-Dropdown'lar Hover Menüleri Neden Sinir bozucu?

Mega dropdown'ların kullanımının zahmetli olmasının ana nedeni , niyetler ve beklentilerin uyumsuzluğundan kaynaklanmaktadır . Fareyle üzerine gelme menüleriyle, fare davranışını izleyerek belirli bir amaç doğrultusunda hareket etmeye ve sonuca varmaya çalışıyoruz, ancak müşterilerimizin bir sayfaya erişirken çok farklı hedefleri ve çok farklı sınırlamaları olabilir.

Analizlerimiz, daha uzun bir süre boyunca toplanan ve normalleştirilen veri noktalarıyla biraz farklı bir hikaye anlatabilse de, müşterinin davranışı genellikle tahmin edilemez. Davranışları nadiren doğru bir şekilde tahmin edebiliyoruz.

Genellikle araştırdığımız yaygın senaryolar şunlardır:

1. Müşteri, kategori bağlantısını hedefliyor ve o kategorideki alt gezinme öğelerini keşfetmek için doğrudan oraya seyahat ediyor.
2. Müşteri, fareyi ekrandaki bir hedefe doğru hareket ettiriyor, ancak farenin seyahat etmesi gereken yörünge, bir mega açılır menü açan bir gezinme bağlantısını kapsıyor .

Bununla birlikte, dikkate alınması gereken birçok başka durum da vardır. Sadece birkaç isim:

1. Müşteri, otomatik arama tamamlama yazarken mega açılır seçeneklerine bakmak istiyor. Bunu yapmak için, mega açılır menüyü yeniden açmaya devam etmeleri veya yan yana yerleştirilmiş ayrı göz atma sekmeleri kullanmaları gerekir.
2. Müşteri, büyük bir ikincil ekranı çalıştırmak için bir izleme dörtgeni (veya fare) kullanabilir, bu nedenle işaretçi hareketleri daha yavaş, ani ve hatalı olacaktır. Bu, kullanıcı CTA'lara veya sayfanın üst kısmındaki alışveriş sepetine giderken her durakladığında mega açılır listenin istemsiz olarak açılmasına neden olur.
3. Müşteri, kategori sayfasını açmak istiyor, bu nedenle kategori bağlantısına gidiyor, üzerine tıklıyor, ancak bir mega-açılır menü geciktiği için titriyor.
4. Bir mega açılır menü içindeki iç içe alt menüler ile müşteri, o anda bulundukları kategorideki benzer öğeleri keşfetmek ister, ancak iç içe geçme nedeniyle mega açılır menüyü tekrar tekrar açmaları ve seyahat etmeleri gerekir. aynı vurgulu tüneli tekrar tekrar.
5. Pencereyi yeniden boyutlandırmak istediğinizde bir durum hayal edin ve tam pencerenin sağ kenarına geçmek üzereyken, fare imlecinizi çok yakına getirdiğiniz için bir vurgulu menü görünmeye devam ediyor.
6. Kullanıcı, bir sayfadaki içeriği değerlendirmek için yavaşça aşağı kaydırmaya başlar , ancak menü sürekli açılır. Ve kullanıcı, mega açılır menünün içeriğini okumak için bir imleci her kaldırdığında, menü yanlışlıkla kaybolur.

Sorun şu ki, tüm bu niyetleri ve tüm bu kazaları desteklememiz gerekiyor, ancak aynı zamanda bu durumların hiçbiri için can sıkıcı ve sinir bozucu bir deneyim yaratmadığımızdan da emin olmamız gerekiyor. Elbette tasarımcılar ve geliştiriciler olarak bu sorunu çözmek için bir takım teknikler icat ettik.

Hover Giriş/Çıkış Gecikmesi

İlk çözümlerden biri ve aynı zamanda hala en yaygın olanlardan biri, fareyle üzerine gelme giriş/çıkış gecikmesini tanıtmaktır. Menünün açılmadığından ve çok erken kapanmadığından emin olmamız gerekiyor. Bunu başarmak için genellikle 0,5 saniye civarında bir gecikme uygularız. Bu, müşterilere yaklaşık 0,5 saniyelik bir arabellek verdiğimiz anlamına gelir:

• Gerekirse yörüngeyi uzak bir hedefe doğru çaprazlayın veya
• Mega açılır kategori bağlantısında kalarak gezinmeyi keşfetme niyetinde olduklarını belirtin veya
• Bir mega açılır listenin sınırlarını kazara terk ettilerse bir hatayı düzeltin.

Diğer bir deyişle, müşteri mega açılır menü katmanı içinde kaldığı sürece onu görüntülemeye devam ederiz. Müşteri, fare imlecini en az 0,5 saniye boyunca alt gezinme yerleşiminin dışına çıkardıktan sonra yerleşimi gizleriz.

Sayfada yanlışlıkla titreme sorununu çözerken, bir kullanıcının mega açılır menüden 0,5 saniyeden fazla ayrıldığı durumlarda gecikmeye neden olur. Sonuç olarak, tüm sitedeki mega açılır menüyle her etkileşimi yavaşlatır. Ne yazık ki, özellikle navigasyon çok kullanılıyorsa, çok hızlı bir şekilde fark edilir hale geliyor.

Bazı uygulamalar, bir mega düşüş görünümünü daha az ani yapmak için bir yavaşlama /karartma geçişi ekler, ancak pratikte bu, giriş/çıkış gecikmesinin 0,8-0,9 sn'ye yükselmesine neden olur ve bu da daha belirgin bir gecikme sağlar. gecikme Buna bir örnek, 100 ms'lik bir solma gecikmesi ve bir 300 ms'lik bir solma geçişi ile ADAC.de'dir. (Geçiş, mega açılır listenin farklı kategorileri arasında geçiş yaparken geçerli değildir.)

Açıkçası, kaplama ne kadar uzun süre görünür kalırsa, kaplamadan kasten kaçmak isteyen insanları o kadar sert şekilde cezalandırırız. Gerçekte, kullanıcının eylemi ile UI'nin yanıtı arasında yüzeysel bir zaman aşımı getirdiğimiz için bu bir sorun haline gelir.

Bağışlayıcı Fare Hareket Yolları: Yörünge Üçgeni

Bir gecikme getirmek yerine, müşterilerin seyahat edecekleri yollar konusunda daha cömert olmaya çalışabiliriz. Fare hareketleri doğal olarak hatalı olduğundan, hayal kırıklığını en aza indirmek için dar geçiş tünellerinden kaçınabilir ve seyahat koridorlarını büyütebiliriz.

Örneğin, fare işaretçisinin mevcut konumunu mega açılır alanın kenarlarına bağlayan bir yörünge üçgeni oluşturduğumuz Amazon'un üçgen tekniğini kullanabiliriz. O alanın sağdaki kategorilerin yanında görünmesi gerekiyorsa (aşağıdaki resimde gösterildiği gibi), fare işaretçisini kategorilerin listelendiği kapsayıcının sağ üst ve sağ alt kenarlarına bağlarız.

Kullanıcı üçgen içinde veya tüm mega açılır alanın içinde kaldığı sürece, bindirme görüntülenmeye devam eder. Kullanıcı üçgenin dışına seyahat etmeyi seçerse, mega açılır yer paylaşımının içeriği buna göre değişecektir. Ve elbette, kullanıcı kategori listesinin tamamen dışına çıktığında hemen tamamen ortadan kalkacaktır.

Chris Coyier, Bu tekniğin bazı teknik inceliklerini, Daha Affedici Fare Hareket Yolları ile Açılır Menüler hakkındaki yazısında ve Alexander Popov'un “Hedefe Duyarlı Menüler” üzerine hazırladığı vanilya JavaScript demosunda vurgulamaktadır.

Bu teknikle, alt navigasyonun ani kaybolması ve yeniden ortaya çıkması sürtünmesini en aza indiriyoruz . Ancak, kategori bağlantıları birbirine çok yakın konumlandırılırsa veya fareyle üzerine gelme menüsünü daha büyük bir düğmenin üzerine getirerek görüntülersek etkisiz hale gelebilir. SVG yolu çıkış alanları ile biraz daha iyi yapabiliriz.

SVG Yolu Çıkış Alanları

Önceki teknikle bir yörünge üçgeni hesaplarken, bazen yalnızca fare işaretçisinin tam konumunu izlemekle kalmaz, aynı zamanda her işaretçi hareketiyle üçgeni her zaman yeniden hesaplardık . Genel SVG kaplama alanını bir kez hesaplayarak stratejiyi iyileştirebilir ve her zaman üçgeni yeniden hesaplamadan fare işaretçisinin içinde olup olmadığını takip edebiliriz. Bunun harika bir örneği, navigasyon öğesinin ekrandaki konumuna göre alanları SVG ile dinamik olarak çizen Hakim el Hattab uygulamasıdır.

Hakim'in çözümü aslında duyarlıdır, bu nedenle alt gezinme ekrana sığmazsa, tam genişlikte veya yükseklikte görüntülenen ana gezinme öğesinin yanında yüzer . SVG yolu alanı buna göre yeniden hesaplanır, ancak yalnızca kullanıcı dikey veya yatay olarak kaydırırsa. Hakim'in Menü modelinin hata ayıklama görünümü modunda çalışırken tekniğin çalışan bir demosunu görebilirsiniz.

Bu seçenek kesindir ve fareyle üzerine gelme gecikmelerinde gördüğümüz gecikmeyi tamamen ortadan kaldırırken, müşteri yanlışlıkla her gezinme öğesinde mega açılır menünün açılmasını isteyen büyük bir kategori listesinde seyahat ettiğinde titremeye neden olur.

Yine, sorunun kökü, müşterilerin mega açılır menülerin ne zaman açılıp kapanacağını kontrol etmemesi ve bu menülerin ne zaman görüneceğini veya kaybolacağını çoğu zaman anlamamasıdır. Bu öngörülebilirlik eksikliği genellikle hatalara ve hayal kırıklıklarına yol açar. Ancak bazen mega açılır pencerelerin daha da ileri düzeyde gizli erişilebilirlik sorunları olabilir.

Hover'da Açılan Mega-Dropdown'ların Tuzakları

Yukarıda belirtildiği gibi, yukarıda listelenen tekniklerin tümü aynı amacı paylaşır. Fare hareketlerinin hızı, tek bir alanda kalma süresi veya ekrandaki tam konumla ilgili bazı gözlemlere dayanarak kullanıcının gezinme menüsünü açma ve kapatma niyetini tahmin etmeye çalışırlar. Bu tahminler, bazı müşteriler için şu veya bu noktada başarısız olacaktır ve bu konuda yapılabilecek pek bir şey yoktur.

Fareyle üzerine gelindiğinde açılan mega açılır pencerelerin birçok erişilebilirlik sorunu vardır. Açıkçası, yalnızca klavye kullanan kullanıcılar için mega açılır menü içinde gezinmeyi desteklememiz ve öğelerin ekran okuyuculara düzgün bir şekilde duyurulmasını sağlamamız gerekiyor. Ama aynı zamanda genel düzen açısından, mega açılır menünün nereye yerleştirildiği konusunda dikkatli olmamız gerekiyor.

Arama, bir mega açılır menüyle kesintiye uğradı

Mega açılır navigasyona yeterince yakın herhangi bir önemli özellik görüntülenirse, bu genellikle büyük miktarda sorun ve şikayete neden olur. Örneğin, mega açılır alanın üzerinde bir arama çubuğu görüntülenirse , bu sonunda inanılmaz miktarda sürtünme ve hayal kırıklığına neden olur.

Yeterince uzun bir fareyle üzerine gelme giriş/çıkış gecikmesi kullanılmadığı sürece, aşağıdaki Thesauraus.com'da olduğu gibi, mega-açılır-açılır-yer paylaşımı her zaman arama ve arama sonuçları arasında engel olacaktır. Bir kullanıcı arama çubuğundan sonuçlara doğru her hareket ettiğinde (ve geri döndüğünde), mega açılır menü yoluna girer.

Gecikmelerle birlikte görünen çoklu alt navigasyonlar

Birbiri ardına gecikmeli olarak açılan birden fazla alt navigasyon olduğunda deneyim hantal olacak. Bunun talihsiz bir örneği, aşağıdaki Vodafone web sitesidir. Bu durumda, her gezinme öğesi aynı zamanda kategoriye bağımsız bir bağlantı görevi görürse (bir mega açılır menü açmaya ek olarak), web sitesinin her yerinde çok sayıda öfke tıklaması beklemeliyiz.

Yukarıdaki örnekte, birbiri altında görüntülenen 4 gezinme düzeyi vardır ve bunlardan 2'si 300ms geçişle üzerine gelindiğinde açılır. Aynı zamanda, her kategori başlığı aynı zamanda kategorinin sayfasına bir bağlantı olduğundan, kullanıcılar doğrudan kategorinin sayfasına da atlayabilirler. Ancak bir kez tıkladıklarında - ve yeni sayfanın görünmesini beklerken - fareyle üzerine gelme menüsü kısa bir süreliğine yarı kırık görünümünü alacaktır - genellikle bir müşteri tarafından kaydedilecek uygun görünüme geçmek için yeterli zamanları olmayacaktır.

Buna, kullanıcının biraz daha eski cihazındaki bellek veya işlem sorunlarını, birkaç ağır tarayıcı uzantısını ve arka planda çalışan bir virüsten koruma denetimi ekleyin ve genel deneyim hızla dayanılmaz hale gelecektir.

Ayrıca, 4. gezinme düzeyi yalnızca 3. gezinme düzeyi zaten açıksa fareyle üzerine gelindiğinde göründüğünden ve 3. gezinme düzeyi yalnızca 2. gezinme düzeyi zaten açıksa, 4. seviye, kullanıcıların navigasyonu tekrar tekrar açmaları ve tüneli 4. seviyeye getirmek için daha önce nereye tıkladıklarını hatırlamaları gerekir.

Temel olarak, daha önce bahsettiğimiz gecikmeleri ve vurgulu tünel sorunlarını çoğaltıyoruz , her zaman kullanıcıları navigasyonun görünmesini bekletiyoruz ve navigasyon göründüğünde bir vurgulu koridorda çok hassas olmalarını istiyoruz. Hayal kırıklığı oradan geliyor.

Bu tür karmaşık bir gezinme ile uğraşmak zorunda kalırsanız, yalnızca bir (iki yerine) fareyle üzerine gelme menüsü kullanıldığında sorunların ortadan kalkıp kalkmadığını test etmeye değer olabilir. Bu menü biraz daha büyük olacak ve tüm seçenekleri sütunlar içinde barındıracaktır. Veya mümkünse, her kategori için, o kategorideki tüm gezinme seçeneklerini kalıcı bir gezinme çubuğu (kenar çubuğu veya yapışkan üst çubuk) olarak görüntülemeyi düşünün - genellikle tüm bu sorunları tamamen ortadan kaldırmalıdır.

Kategori başlıkları çok fazla şey yapıyor

Daha önce gördüğümüz gibi, bazen kategori başlıklarının iki farklı işlevi vardır. Bir yandan, her kategori başlığı kategorinin sayfasına bağlanabilir, böylece müşteriler doğrudan sayfaya gitmek için onları tıklayabilir. Öte yandan, mega açılır bir yer paylaşımı da açabilirler. Bu nedenle, kullanıcı başlığın üzerinde yeterince uzun süre kalıyorsa, mega açılır menü açılır, ancak kullanıcı zaten bir bağlantıya tıklamış olabilir ve bu, titremeye neden olur. Arayüz gerçekten herhangi bir ipucu sağlamadığında müşteriler için doğru beklentilere sahip olmak zordur.

Bu sorunu çözmek için birkaç seçenek vardır:

1. Kategori başlığının bir bağlantı olduğunu belirtmek için altını çizmek faydalı olabilir,
2. Kategori başlığı ile açılır menü arasındaki ayrımı daha belirgin hale getirmek için dikey bir ayırıcı (örneğin dikey çizgi) ve bir simge (chevron) ekleyin,
3. Kategorinin başlığını yalnızca mega açılır menüyü açarak bırakın ve mega açılır liste içinde kategorinin “Ana Sayfa” bölümüne bir bağlantı ekleyin . Bunun yerine göze çarpan bir "Tüm seçenekleri gör" düğmesi de olabilir (yukarıdaki The Guardian örneğine bakın).

Yukarıda bahsedildiği gibi, bazen, kategori başlığı bir bağlantı iken menünün bir yer paylaşımı açtığını belirtmek için fazladan bir simgenin kullanıldığını görebilirsiniz. Kullanılabilirlik testlerimizde, bir simge mevcut olduğunda (ve hangi simge olduğu önemli değil), kullanıcıların genellikle bir simgeye tıklandığında istenen eylem ile istenen eylem arasında zihinsel bir ayrım yaptığını fark ettik. kategori başlığına tıklayarak.

İlk durumda, genellikle bir açılır menünün açılmasını ve ikinci durumda kategori sayfasının görünmesini beklerler. Daha da önemlisi, menünün üzerine gelmek yerine dokunma/tıklama ile açılmasını bekliyorlar.

Mailchimp, kategori başlıkları yalnızca bir mega açılır liste açmak için hareket eden, yukarıda açıklanan sorunların çoğunu önleyen bir mega açılır listeye iyi bir örnektir. Açılır menüye, klavye kullanıcıları için :focus stili ile erişilebilir. Seçildikten sonra, her kategori altı çizili olarak vurgulanır ve bazı kişilerin başlığın bir bağlantıya dönüştüğünü varsaymasına neden olabilir, özellikle de alt çizgi, gezinmenin üst kısmındaki "Fiyatlandırma" bağlantısı için tamamen aynı olduğundan. Belki bir arka plan rengiyle vurgulamak biraz daha kurşun geçirmez olurdu. Fareyle üzerine gelme menüleri için dikkate alınması gereken harika bir referans örneği.

Genel olarak, kategori başlıklarını birden çok işlevle aşırı yüklemekten kaçınmak iyi bir fikir gibi görünüyor. Bu, yalnızca mega açılır menüler için değil, akordeonlar veya araç ipuçları da dahil olmak üzere hemen hemen tüm menüler için geçerlidir: tüm alan , dokunulduğunda veya tıklandığında gezinme seçeneklerini gösteren genişleme işlevi görmelidir. Çoğu durumda, bu şekilde daha basit ve daha az sinir bozucu.

Daha İyi Bir Mega-Dropdown Tasarlamak: Menüye Dokun/Tıklayın

Birçok büyük şirket, müşterilerini sitede bulunan seçeneklerin genişliğine hızlı bir şekilde maruz bırakmak istediği için, mega açılır pencerelerin genellikle fareyle üzerine gelindiğinde açılmasının yaygın nedenlerinden biri. Fareyle üzerine gelindiğinde değişen navigasyon seçenekleri ile daha fazla seçeneği daha hızlı görüntüleyebilir ve müşteri daha fazla seçeneği daha hızlı keşfedebilir. Bu nedenle, örneğin büyük bir gezinme katmanı olmayan büyük bir e-ticaret perakendecisi hayal etmek zor.

Ancak, fareyle üzerine gelindiğinde gezinme, bir dokunma/tıklama gezinmesi ile değiştirilirse etkileşim süresinin ve tıklama oranlarının aynı kalıp kalmadığını (veya arttığını) test etmek iyi bir fikirdir. Aslında, yukarıda sıralanan sorunların çoğu, tam da bunu yaparak kolayca çözülebilir: mega açılır liste yerleşimi, yalnızca kullanıcı bu belirli eylemi açıkça istediğinde açılır ve kapanır. Bu nedenle, fare işaretçisini izlemeye veya fareyle üzerine gelindiğinde giriş/çıkış gecikmelerine ince ayar yapmaya gerek yoktur. Artı, zaten mobilde fareyle üzerine gelme olmadığından, mobil için dokun/tıkla menüsünü şu veya bu şekilde açma seçeneği sunmamız gerekiyor, böylece daha büyük ekranlar için de bu şekilde tutabiliriz.

Bunun iyi bir örneği, Berlin Yahudi Müzesi web sitesidir. Üst gezinme çubuğu yalnızca dokun ve tıkla mega açılır menüleri açmakla kalmaz, aynı zamanda simge tabanlı kenar çubuğu gezinmesini de yapar. Ayrıca, kullanıcının bindirmeyi aktif olarak açması/kapaması gerektiğinden , seçilen kategoriyi :focus / :active stilleri ile vurgulayabiliriz.

Web sitesi, menünün açık veya kapalı olabileceğini belirtmek için herhangi bir simge kullanmaz ve menü seçenekleri, ayrı bir sayfaya yönlendiren bağlantılar değildir. Bu, genel deneyimi çok sakin ve öngörülebilir kılar, ancak gezinme seçeneklerini göstermede gezinme menülerine kıyasla muhtemelen daha yavaştır.

Ancak, web sitesinde görüntülenecek çok fazla gezinme seçeneği bulunmadığından, bu çok iyi çalışıyor gibi görünüyor. Ve bu, dokunulduğunda/tıklandığında açılan erişilebilir bir mega açılır menü üzerinde çalışırken akılda tutulması gereken harika bir referans örneğidir .

Biraz daha fazla navigasyonunuz varsa, biraz daha gelişmiş bir örnek Allianz.de'dir. Tek bir büyük mega açılır menü yerleşimi kullanmak yerine, alt navigasyon daha küçük açılır menüler halinde gruplandırılmıştır. Ancak menü, her kategori için her zaman tüm seçenekleri göstermez. Bunun yerine, en önemli seçenekleri vurgular ve altta tüm seçenekleri görmek için bir bağlantı bulunur. Eksik olabilecek tek ayrıntı, tıklandığında bir açılır menünün görüneceğini belirten bir şerittir.

Mobil cihazlarda, mega açılır menü, navigasyon hiyerarşisini belirtmek için iyi bir renk kontrastı ve girinti seçimine sahip bir akordeon grubudur . Her akordeon hiçbir zaman bir seferde 4'ten fazla gezinme öğesi göstermez. İyi çalışan karmaşık bir mega açılır navigasyon için harika bir referans örneği.

Teknik bir uygulama arıyorsanız, Mark Root-Wiley'nin erişilebilir bir tıklama menüsünün nasıl oluşturulacağını gösterdiği Açık Tıklama Menüsüne Övgü'ye göz atabilirsiniz. Buradaki fikir, menüyü, alt menüleri göstermek için li:hover > ul ve li:focus-within > ul inin > ul kullanan, yalnızca CSS'ye yönelik bir vurgulu menü olarak oluşturmaya başlamaktır.

Ardından, <button> öğelerini oluşturmak, aria özniteliklerini ayarlamak ve olay işleyicilerini eklemek için JavaScript kullanırız. Nihai sonuç, CodePen'de bir kod örneği ve GitHub deposu olarak mevcuttur. Bu, menünüz için de iyi bir başlangıç ​​noktası olmalıdır.

Akordeonlar ve Yer Paylaşımları ve Mobilde Bölünmüş Menüler

Yine de, dokunma/tıklamadaki her mega açılır listenin iyi performans göstermediğini söylemeye gerek yok. Target.com, çok sütunlu düzenden kaçınan ve aynı anda yalnızca bir gezinme düzeyi gösteren erişilebilir, büyük bir gezinme için başka bir ilginç örnektir - tümü dokunma/tıklama ile açılır.

Açılır menü, seçenekleri bir seferde yalnızca bir sütunda gösterir, böylece kategoriler içinde hareket ettikçe ekranda her zaman aynı yer paylaşımına odaklanmış olursunuz. Seçilen her bölüm tüm sütunu alır. Deneyim öngörülebilir ve sakin, ancak yine de müşteri bir seferde daha az navigasyon görüyor olabilir.

Danimarka'dan bir toplu taşıma hizmeti web sitesi olan Dinoffentligetransport.dk, bunun yerine birden çok sütun kullanır, üst kısımdaki navigasyon bir zikzak simgesiyle tamamlanır ve ayrıca dokun/tıkla açılır.

Diğer bazı uygulamalarda, üst üste görünen birden fazla kaplama görülebilir. Aslında, Unilever'deki durum budur (aşağıdaki örnek). Mega açılır menü, aynı anda birden fazla köşeli çift ayraç görüntülenecek şekilde dokun/tıkla açılır. Her şerit neyi temsil eder? Ve müşteri üzerlerine tıkladığında ne beklemeli?

"Markalarımız" ayrı bir sayfaya yönlendirirken, altındaki her etiket mega açılır menünün üstünde yeni bir gezinme katmanı açar. Navigasyon seçeneğinin geri kalanının altı çiziliyken “Tüm markalar”ın altının çizildiğini fark ettiniz mi? Menüyü oluşturan tasarımcıların niyeti görülebilir. Gerçekten de, "Tüm markalar" bir bağlantıdır, diğer etiketler ise bir yer paylaşımı açar:

Tüm bu seçenekler yerindeyken, mobil cihazlarda mega açılır bir navigasyon görüntülemeyi nasıl yaparız? Görünen o ki, bu tür mega açılır bindirmeleri mobil cihazlarda gruplamak zordur: genellikle farklı seviyeleri farklı şekilde vurgulamak ve ayırt etmelerini kolaylaştırmak için yeterli alan veya görsel yardım yoktur. Yukarıdaki örnekte, gerçekte hangi sayfaya ulaştığımızı anlamamız biraz zaman alabilir.

Dinoffentligetransport.dk'de gördüğümüz gibi, akordeon yaklaşımıyla şu anda hangi seviyede olduğumuzu ve hangi seçeneklere sahip olduğumuzu anlamak biraz daha kolay. Ancak, müşterileri kategorinin sayfasına yönlendirdikleri için her alt bölümdeki bağlantıların altını çizmek iyi bir fikir olabilir. Ayrıca, kategori çubuğunun tamamı muhtemelen tıklanabilir olmalı ve akordeonu genişletmelidir.

Yukarıdaki örnekte, çoğu zaman muhtemelen bir seferde sınırlı miktarda gezinme bölümü gösterebileceğiz. Ancak her bölümün başlığı nispeten kısaysa, ekranı yatay olarak bölebilir ve aynı anda birden fazla seviye görüntüleyebiliriz. LCFC.com, bu modelin eylem halindeki iyi bir örneğidir.

Hangi Seçenek En İyi Çalışır?

Kişisel deneyimime göre, mobil cihazlarda mega açılır pencerelerin uygulamalarını karşılaştırdığımızda, dikey akordeonlar bindirmelerden (tek sütunlu veya çoklu katmanlar) daha hızlı ve daha öngörülebilir görünüyor. Bölünmüş menüler , akordeonlardan daha hızlı ve daha öngörülebilir görünüyor.

Hem akordeonların hem de bölünmüş menülerin sağladığı birkaç avantaj vardır:

• Ana sayfaya dönmek için “Geri” düğmesinin görüntülenmesine gerek yoktur.
• Gözün her atlamada navigasyon menüsünün üst kısmı ile bölümün alt navigasyonu arasında atlama yapması gerekmez.
• Müşteriler birden çok düzey arasında daha hızlı gezinebilir: "Geri" düğmesine birden çok kez basmak yerine ilginç buldukları akordeona atlayabilirler.
• Müşteriler aynı anda birden fazla bölümü keşfedebilir (uygulama, bir akordeon açıldığında diğeri otomatik olarak kapanmadığı sürece). Kaplamalar ile mümkün değildir.

Genel olarak, akordeonlar ve bölünmüş menüler daha iyi bir seçenek olarak görünmektedir . Ancak, yerinde çok fazla navigasyon olduğunda iyi çalışmıyor gibi görünüyorlar. Her kategoride 6-7'den fazla öğe olduğunda, başka bir akordeon içinde (veya ayrı bir sayfada) 6-7 öğenin altına bir "Tümüne göz at" düğmesi eklemek veya bunun yerine bindirmeleri kullanmak iyi bir fikir oldu.

Navigasyon miktarına bağlı olarak, bölünmüş menülerle başlayabiliriz , sonra uygun değilse, akordeonlara geçebiliriz ve navigasyon hala karmaşıklaşıyorsa, sonunda akordeonları bindirmelere dönüştürebiliriz.

Sonuçta Mega-Dropdown Gerekmediğinde

Gov.uk ekibinin çalışmalarına önceki makalede zaten atıfta bulunduk, ancak içgörüleri mega açılırlar bağlamında da değerlidir. Büyük, çok seviyeli gezinme için ekip, form uzmanı Caroline Jarrett'in sayfa başına bir şey ilkesine göre bulguların kullanılmasına karar verdi. Caroline'a göre, “tasarımcılar açısından doğal olarak 'birlikte giden' soruların [...] kullanıcılar için çalışması için aynı sayfada olması gerekmez”. Caroline bunu öncelikle web formlarının tasarımına uyguladı, ancak biz onu navigasyon bağlamında da uygulayabiliriz.

O halde fikir, karmaşık mega açılır menülerden tamamen kaçınmak ve müşterilere bir sayfadan diğerine web sitesinin siperlerinde gezinmek için net, yapılandırılmış bir yol sağlamaktır. Gov.uk örneğinde, iyi düşünülmüş bir bilgi mimarisi ve ziyaretçileri hedefe doğru öngörülebilir adımlarla yönlendiren rehberler aracılığıyla gerçekleşiyor gibi görünüyor.

Kanton Zürih de aynı modeli kullanıyor. Mega açılır gezinme katmanları yerine, tüm seçenekler yapılandırılmış bir şekilde görüntülenir, ana konular en üstte "En iyi konular" olarak gösterilir ve her bölümdeki gezinme üstte yapışkan bir gezinme çubuğu olarak görüntülenir.

Alternatif bir yaklaşım, "Yapmak istiyorum" gezinme düzenini kullanmaktır. Geleneksel gezinmeye ek olarak, müşterilerin kendi seçtikleri bir gezinme sorgusu oluşturmalarına ve doğrudan aradıkları sayfaya yönlendirilmelerine olanak tanıyan bir "gezinme açılır menüsü" sağlayabiliriz. Temel olarak, kullanıcının web sitesinde ne yapmayı veya ne bulmayı planladığını seçmesine izin vermek için diğerinin altında görünen bir dizi açılır listedir.

Bir süreliğine, desen Commonbond'da kullanıldı (yukarıdaki videoya bakın) ve ayrıca Corkchamber.ie'de de kullanıldı. Bir mega açılır menü kullanmak zorunda kalmadan derin bir navigasyon düzeyine erişim sağlamanın ilginç, alışılmadık bir yolu.

Mega-Dropdown Navigasyon Tasarım Kontrol Listesi

Ne zaman mega açılır menüler hakkında bir konuşma başlatsak, herkes birkaç gruba yerleşiyor gibi görünüyor: bazı iş arkadaşları fareyle üzerine gelmeyi, diğerleri dokun ve tıklamayı tercih ediyor, bazıları her ikisini de tercih ediyor ve diğerleri de orada olduğu sürece aldırmıyor. hem kategori bağlantısı hem de menüyü açan bir simgedir.

Bir yaklaşımın her zaman diğerlerinden daha iyi olduğunu söylemek imkansızdır, ancak hem teknik uygulama hem de UX açısından , dokun/tıkla menüyü açmak genellikle daha az soruna ve basit bir uygulamaya izin verirken daha az hayal kırıklığına neden olur ve sonuç olarak öngörülebilir ve sakin bir navigasyonda. Fareyle üzerine gelme menüsüne geçmeden önce, dokunma/tıklama davranışını korumayı deneyebilir, etkileşimi ölçebilir ve sonuçta fareyle üzerine gelmenin gerekip gerekmediğini inceleyebiliriz.

Ve her zaman olduğu gibi, bir mega açılır liste tasarlarken ve oluştururken akılda tutulması gereken bazı genel şeyler:

• Önemli, sık kullanılan öğeleri mega açılır navigasyonun yakınına yerleştirmekten kaçının (örn. arama çubuğu, CTA, alışveriş sepeti simgesi) (fareyle üzerine gelindiğinde),
• Gecikmelerle (fareyle üzerine gelindiğinde) birbiri ardına görünen mega açılır menü içinde birden fazla alt gezinmeden kaçının ,
• Birden çok işleve sahip kategori başlıklarını aşırı yüklemekten kaçının .
• Kategori sayfalarına bağlantı olarak tanımlamak için kategori başlıklarının altını çizin (tabii ki kategori sayfasına bağlılarsa).
• Yapabiliyorsanız, kategoriyi doğrudan bağlamak yerine her alt kategoriye bir "Ana Sayfa" bağlantısı veya "Tümüne göz at" düğmesi ekleyin.
• Yatay bindirmelerden kaçının ve bunları dikey akordeonlar ve bölünmüş menülerle değiştirmeyi düşünün,
• Bir kategori başlığının tıklandığında mega bir açılır menüyü tetiklediğini (ör. zikzak) ve her zaman rahat dokunma için yeterince büyük olduğunu (ör. 50×50 piksel) belirtmek için bir simge ekleyin ,
• Bir mega-açılır menü belirdiğinde/kaybolduğunda (en fazla 300ms) uzun solma/karartma geçişlerinden kaçının ,
• Mega açılır listeye ek olarak veya bunun yerine yapılandırılmış bir kılavuzu veya gezinme sorgusunu ("Yapmak istiyorum" gezinme kalıbı) test etmeyi düşünün.
• Mümkünse mega açılır vurgulu menülerden kaçının .