“For decades, a common behavior for this kind of navigation is to open the menu on mouse hover. And for decades, a common user’s complaint about this pattern has been the absolute lack of certainty and control about how and when the sub-navigation opens and closes.”
Vitaly Friedman, Smashing Magazine (author, co-author and editor of all Smashing books and front-end/UX consultant working with European Parliament etc)
“I’ve built a bunch of websites and learned a lot more about usability, accessibility, and content strategy. Now, I find hover-triggered menus lacking on all those fronts.”
Mark Root-Wiley https://css-tricks.com/in-praise-of-the-unambiguous-click-menu/
Redan 2011 skrev UX Movement om detta fenomen https://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/
Tyvärr är hover ganska vanligt men det bästa sättet att säkerställa att menyn fungerar över enheter, traditionella skärmar till tocuhskärmar, är click-to-open.
Man undviker då mycket frustration som kommer med hover, exempelvis:
Inkonsekvent UX på pekskärmar och för de som navigerar med tangentbord
Hovermenyer fungerar inte på pekskärmar. Det kan eventuellt lösas med kod för att upptäcka pekskärmar och växla till click-to-open. Men eftersom gränsen alltmer suddas ut mellan “vanliga” skärmar och skärmar med touch, kan dessa lösningar bli föråldrade. Här behöver man också ha med i beräkningen att lägga ut separata knappar för att öppna undermeny eftersom huvudmenyvalet i sig är en länk till just den sidan.
En del föredrar, eller kanske bara har möjlighet, att navigera mha tangentbordet. Normalt sett behöver man då tabba sig igenom alla länkar genom alla undermenyer fram till den länk du vill besöka (med klick hoppar man över underlänkar emn kan fälla ut med ENTER och tabba sig igenom om man vill).
Detta leder oss vidare till:
Frågor om vad som är klickbart
Med hovermenyer vet användare inte alltid om den överordnade länken är klickbar eller inte förrän de försöker klicka. Det är motsatsen till intuitivt. Ur exempelvis struktur- och SEO-pespektiv är det bra om den överordnade sidan finns och går att nå.
Övrig tillgänglighet
Hover-menyer kan ge problem för användare som använder skärmläsare eller navigerar via tangentbord.
Narrow hover tunnel/The Buzz Wire Maze
Hover-tunnel är vägen en muspekare måste följa för att navigera medan menyn är öppen. Om detta är för smalt så är det svårt för besökaren att navigera rätt utan att den stänger sig. Tänk här också på personer med motoriska hinder eller personer som surfar med webbläsaren i zoomat läge.
Öppnad av misstag
En hovermeny är benägen att öppnas oavsiktligt om man navigerar över den på väg till något annat ställe på sidan. Eller för den delen stängs oavsiktligt för att man exempelvis råkar stöta till musen. Detta är än värre när det rör stora menyner och megamenyer där det tar lång tid att ta in allt innehåll i undermenyerna och räkna ut vart man ska navigera.
Inkonsekvent/otydlig
Är det överordnade objektet en länk eller inte? Detta leder till mycket förvirring. Vissa hoppar rakt förbi användbara sidor på toppnivå, förutsatt att dessa objekt inte är länkar. Ännu andra antar att länkarna på toppnivån är sidor och försöker klicka på dem och blir frustrerade om så inte är fallet.
Aktivering av misstag
Att hovra är inte en avsikt att aktivera. Det är på sin höjd ett förslag att användaren kan aktivera något. Tekniskt sett hovrar användaren alltid. Detta är anledningen till att hovringstillstånd är fördelaktiga för användaren, till exempel byte av muspekare (webbläsare gör detta som standard) eller färg och linjering på länkar.
Med hover kan en användare av misstag öppna en meny trots att de aldrig tänkt det och när detta händer döljer det innehållet bakom och stör upplevelsen.
Om en användare avser att klicka på en länk på en sida kan användaren navigera iväg av misstag om menyn öppnas precis innan du klickar på den länken. Det låter sällsynt men är vanligare än man tror
Mixed input devices
Vi har bärbara och stationära datorer med pekskärm. Du kan också använda en mus eller styrplatta med ex. en iPad. Det är inte bara möjligt att använda touch på en stor skärm, och en mus på en liten skärm, dina besökare kan använda båda samtidigt.
https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html
Klickfunktion är vad vi förväntar oss i de flesta andra sammanhang:
- Använder du en touch/pekenhet? Hover finns inte
- Använder du en applikationsmeny(t.ex. Arkiv, Redigera)? Dessa klickas fram
- Använder du något annat än en mus? Att trycka på ENTER eller aktivera en länk med någon typ av växlingskontroll (switch/toggle) motsvarar mer att klicka än att :focus motsvarar :hover.
Oavsett din enhet eller inmatningsläge är ett ”klick” en mer universell och solid interaktion. Även med fördelen att klick/tap, alltså dator vs. telefon fungerar med samma beteende. Eftersom att klicka eller peka (tap) är en tydlig avsikt finns det ingen oavsiktlig aktivering/avaktivering.
“Avoid using hover to expand dropdown lists. Hover is difficult for some users and won’t work on touch screens. Dropdowns should expand on click or with keyboard navigation.”
U.S. Web Design System’s(USWDS) navigation patterns
“What it really boils down to is user intent. The purpose of a hover state is to indicate something is clickable(underlined text)… The purpose of a click is to actually do something, to take an explicit action. Opening a dropdown is an explicit action and should only happen on click.”
Bootstrap (reasons)
“Maybe you don’t even need submenus at all!”
UK.gov design system
Deras menyer är endast länklistor, med on-page grids med länkar och dragspel accordions för att låta besökaren navigera.
Andra saker man kan göra/tänka på när man designar informationsarkitektur och menysystem:
- Om < 4 objekt, undvik “dropdowns” och lägg ut det direkt (sparar användarinteraktioner).
- Använd innehållsförteckning och/eller ämnessidor för att undvika “dropdowns”.
- Multipla menyer på olika platser. Noggrant uttänkta och viktade efter vad det är, vad besökarna vill ha (mest) osv. Ex “VD-meny”, sidfotmeny och gärna kombinerat med föregående punkt.
https://medium.com/simple-human/why-hover-menus-are-problematic-b21d6c7de91c
