“This fancy pattern hurts UX far more than it improves it.”
Adam Silver
(Skrivit för Smashing Magazine, A List Apart och CSS Tricks. Jobbat med ex. GOV.UK, Just Eat, Tesco och BBC – vilket, om någon inte känner till ovanstående, är ett sjukt CV)
Problem #1: tar alltid upp plats
Är alltid i vägen för content. Än värre på mindre skärmar/upplösningar där ytan är än mer begränsad.
Problem #2: de skymmer innehåll
Hänger ihop med #1. De lägger sig ovanför övrigt innehåll.
Problem #3: kan gå sönder vid inzoomning
När man zoomar kan storleken på header/meny öka och på så vis tränga bort övrigt content. Eller så försvinner dom, förvrängs/”felalignar” eller kapas.
Kan ev undvikas på vissa sätt men till kostnad av ganska mycket programmeringstid.
Problem #4: de verkar närmare än de är
Sticky menyer/headers är alltid visuellt tillgängliga men i verkligheten är de ofta väldigt långt bort för användare av tangentbord som navigerar med tabtangenten; eller de som på annat sätt navigerar webben.
Problem #5: de skymmer länkar och andra fokuserbara element
Besökare som navigerar tillbaka upp på sidan med tangentbord kan hamna i ett läge där fokus är skymt bakom sticky meny/header.
Problem #6: svåra att komma åt
Om sticky header/meny är högre än innehållet och viewport så kan man inte komma åt det nedersta på menyn i vissa webbläsare. Även om innehållet är högre än header/menyn så måste man fortfarande scrolla ner till botten på content för att se menyn.
Man kan addera en inre scrollbar till menyn men multipla scroll är svåra att hantera (https://baymard.com/blog/inline-scroll-areas).
Problem #7: interna sidankare känns trasiga när de klickas på
Vissa sticky innehåller länkar som tar besökaren längre ner (eller upp) på sidan, sk. ankarlänkar.
Med en stickyfunktionalitet så är det inte säkert att man förflyttar sig vid klick och därför kan interfacet känns trasigt.
Vad ska du göra istället?
- Håll sidor korta: Sticky menyer/headers är ett symptom av (väldigt) långa sidor, åtgärda grundorsaken. Har du inte långa sidor så behövs inte heller sticky header/meny.
- Låt besökare skrolla(!): Det är en myt att skrollning är ett problem (och helt seriöst så började dom diskussionerna ebba ut redan för +10 år sedan). Även på telefoner så är toppen av sidan oftast en “flick” eller två ifrån (normalt sett kan man alltid trycka på “top bar:en” för att bli skickad tillbaka till toppen, i de flesta webbläsare).
- Lägg in relevanta länkar, i kontext: Exempelvis kan du lägga in länkar i löptext (det är trots allt själva definitionen av World Wide Web), lägga till formulär i slutet av en artikel eller kasta ut en CTA (länkad banner/knapp) här och var.
