På en webside er det gjerne flere elementer som utgjør det endelige resultatet du ser i browseren. Blant disse er menyen. Noen andre begreper som omhandler det samme er navigasjon/nav, meny og header i enkelte tilfeller. Headeren kan også være et forsidebilde, med en uavhengig meny under eller over. Denne uavhengige menyen er det vi skal se nærmere på i dag. Forskjellige typer, former og farger som er en viktig del av helheten på en nettside. En meny er gjerne komplementær, eller i direkte sammenheng med footeren på en nettside. Footeren skal vi ta for oss senere.
artikkelen fortsetter under annonsen
Menyene jeg omtaler nedenfor vil være en god miks av menyer laget for mobil, nettbrett og desktop. Det sier seg selv at enkelte av disse menyene vil være vanskelig å praktisere på mobile enheter. Derfor valgte jeg å gjøre det enkelt og dele denne artikkelen inn i tre seksjoner: 1) vanlige, 2) utradisjonelle og 3) eksperimentelle menyer.
De vanlige, standardiserte navigasjonsmenyene
Det finnes en rekke måter å lage en navigasjonsmeny på. Når budsjettet ikke tilsier at du bør bruke hundretusenvis på utforming av en nettside eller en applikasjon, kan det være en god idè å holde seg til det som bevisst fungerer. Nedenfor vil vi presentere tre måter å utforme en meny på.
Vanlig 1: Logo til venstre – navigasjonselementer til høyre
Denne er svært universell, og alle som har besøkt en nettside vet hvordan man beveger seg på en slik løsning. Du kan klikke deg tilbake til forsiden ved å klikke på logoen til venstre, og navigere deg rundt på undersidene ved å klikke på elementene til høyre. Veldig enkelt, intuitiv og en svært akseptabel løsning selv i moderne tider. Det vil også være enkelt å sammenfatte menyen til en hamburgermeny når skjermbredden går under et visst antall piksler, noe som gjør det til standarden hos dagens webløsninger.
Vanlig 2: Logo til venstre – hamburgermeny til høyre
Som det ble nevnt over, er dette en svært populær måte å utforme menyer på. I begynnelsen var dette et fint kjennetegn til mobilmenyer, men med tiden har man også sett disse bli tatt i bruk også i desktop-menyer. Her går det noe på det neste punktet på denne listen, da man har mulighet til å vertikalt liste opp undersidene til web-siden. Dette er en svært effektiv måte å spare verdifull plass på. Det gir også utvikleren muligheten til å legge til søk og lignende funksjoner. Problemet i begynnelsen var at spesielt eldre mennesker ikke skjønte at det var mulig å klikke på hamburgerikonet. Dette er et mindre problem i dag – men bør fortsatt undersøkes i brukertester som en del av universell utforming.
Vanlig 3: Vertikal meny til venstre på siden
Dette er en svært vanlig måte å utforme menyer på, og spesielt på nettsider med brukerpanel eller hvor man trenger å liste opp mange elementer. Det mange ikke vet er at hvis du oppretter et html-dokument (det vanligste kodespråket for nettlesere), så vil elementene hovedsakelig bli listet under hverandre. Det er med hjelp av css (det vanligste stilspråket for nettlesere) at menyer blir strekt ut horisontalt og lignende. Uansett – vertikale menyer har en enorm nytteverdi, da man enkelt kan ramse opp funksjoner nedenfor hverandre. Et godt eksempel på dette er brukerpanelet til WordPress, eller filtreringsfunksjonen til Finn.no
artikkelen fortsetter under annonsen
Utradisjonelle menyer som fortsatt er innenfor normen
Utradisjonell 1: Dropdown
Det er mulig jeg er for sent ute ved å kalle dropdown-menyen utradisjonell. I disse dager er den gjerne den vanligste tilleggsfunksjonen til vanlige navigasjonsmenyer. Tett etterfulgt av, eller kommer rett etter hamburgermenyen på listen over menyfunksjoner. Jeg valgte likevel å legge den til her, da den ikke nødvendigvis er helt intuitiv, og gjerne ikke for eldre mennesker. Skal du utforme en plattform som utelukkende skal tas i bruk av mennesker som er ferske på internett, bør du i det minste gjøre det åpenbart og signalisere uttrykkelig hvor denne funksjonen er tatt i bruk. Dette gjøres ved bruk av signifiers, som jeg vil skrive mer om i en senere artikkel.
Utradisjonell 2: Slide-inn fra høyre- eller venstresiden
Dette er ikke en veldig stor forskjell fra den tradisjonelle hamburgermenyen. Her er det stort sett et hamburgerikon, og funksjonaliteten er stort sett den samme. Det blir likevel litt annerledes når man må trykke andre steder enn hvor hamburgerikonet opprinnelig var for å lukke menyen. Dette trenger ikke nødvendigvis å være et stort minus, og vi har valgt å legge denne inn som utradisjonell. Med årene har denne blitt så vanlig at man må vurdere å standardisere den. Fortsatt er vi trygge i vårt valg om at den hører til under dette punktet.
Utradisjonell 3: Mega meny
En mega meny er rett og slett en hamburgermeny med flere underseksjoner. Den kan være forkledd som en vanlig drop-down meny, eller den kan inneha hamburgermeny-ikonet. Denne er svært fin å ta i bruk når du har flere kategorier under det samme menyelementet. Ved å bruke denne kan man enkelt og oversiktlig vise frem mange forskjellige underkategorier, og la brukeren finne raskt frem til ønsket navigasjonselement.
artikkelen fortsetter under annonsen
De mer eksperimentelle menyene
Eksperimentell 1: Navigasjonsmeny på bunnen av forsidebildet
For litt siden kom jeg over en side som hadde en meny nederst på forsiden. Når jeg scrollet nedover, festet den seg på bunnen og fulgte med videre nedover. Jeg liker at man prøver noe nytt, men enkelte ting gjør siden rar å navigere på. Det er vanligere at navigasjonsmenyen finnes nederst av et forsidebilde, og når du scroller nedover siden så blir menyen festet til toppen av skjermen. Det er en mye bedre løsning. Da er fortsatt siden enkel å forstå, men den er samtidig spennende og besøkende forstår at det er brukt tid på utformingen av løsningen.
Eksperimentell 2: One page nettsider
Jeg personlig liker one page nettsider. Her kommer jeg også inn på bruken av ID til navigering på en nettside. Det vil si at hvis du klikker på menyen, så vil siden automatisk scrolle ned til den relevante seksjonen på siden. Dette er noe jeg har tatt i bruk gjentatte ganger, og noe jeg vil fortsette å bruke i mitt daglige virke. Det er vanskelig å si hvordan slike enkelside-løsninger påvirker blant annet søkemotoroptimaliseringen på siden. Det er hvertfall viktig å sørge for at den er rik med viktig, informativ og beskrivende tekstseksjoner. Bruk også de korrekte headingene til hver seksjon.
Eksperimentell 3: Mindre åpenbare taksonomier
Her bestemte jeg meg for ikke å komme med et eksempelbilde da det er dårlig gjort mot utviklerne som gjør sitt beste
Dette er en av de løsningene man finner flere og flere steder. Nylig var jeg i kontakt med en kunde som ønsket en nettside med en slik meny. Det vil si – menyen var spredd flere steder rundt om på siden. Jeg personlig mener at på en nettside med kontaktskjema, bør det være åpenbart hvor du finner skjemaet. Det var det ikke på denne løsningen. Det fantes en meny gjemt under et hamburgerikon til venstre, øverst på forsiden. Deretter var det en knapp som navigerte til kontaktskjemaet fem seksjoner ned på forsiden. Flere undermenyer dukket opp når man navigerte rundt på siden. Når en kunde ønsker noe særegent og «eksklusivt», ender man gjerne opp med slike uforståelige løsninger. Mitt råd er å bruke pengene andre steder. Overdreven bruk av javascript vil også påvirke ytelsen negativt, noe disse sidene ofte bærer preg av.
Jeg håper dere har fått noe verdi ut av denne godt blandede artikkelen fylt med både fakta og egne meninger. Lykke til med design, utforming og utvikling!
