Bra Navigation = Stående Ovation

By april 24, 2017 E-handel
Bra navigation

En viktig sak för varje webbplats är just det som gör att man kan ta sig runt på webbplatsen – navigationen. Om Internet är ett hav så är den där menyn längst upp stjärnorna som berättar för oss var vi är och vart vi är på väg. Därför är det väldigt viktigt att göra navigationen på ett bra sätt. Många har väldigt kreativa lösningar på hur navigationen fungerar på deras hemsida, men de flesta väljer ändå att följa någon typ av oskriven praxis och ha en huvudmeny som de flesta känner igen. Gemensamt är oftast att man inte vill krångla till det för besökaren utan det ska vara självklart hur det fungerar även när man besöker den för första gången.

Jag tänkte nämna några saker att tänka på när man designar sin navigation som kan hjälpa till att öka användarvänligheten på sin webbplats.

 

Använd tydliga färger

Detta är ett ganska vanligt misstag. Har du en helt transparent bakgrund i menyn och olika bakgrundsbilder på olika sidor så är det nästan oundvikligt. Lägger man in en mörk bakgrundsbild och texten är grå eller svart så är det lätt att menyn smälter ihop med bakgrunden. Ett smart tips är att lägga någon typ av skuggad genomskinlighet bakom navigationstexten. I annat fall är det bra att tänka på vilka färger man väljer.

Adobe Color är ett bra verktyg om man vill få inspiration och se hur olika färgscheman kan fungera tillsammans. Det är bara att kopiera och klistra in färgkoderna och köra! 🙂

Lämna brödsmulor

“Breadcrumbs” betyder brödsmulor och är ett begrepp som kommer från sagan om Hans & Greta. Det de gjorde var att navigera i skogen och lade ut brödsmulor efter sig för att kunna hitta tillbaka. Samma princip gäller för breadcrumbs på webbplatser. Det är den lilla text som oftast ligger någonstans nedanför navigationen och visar vart du varit, eller åtminstone vilken undersida du är inne på. Till exempel:

Webshop >> Elektronik >> Mobiltelefoner

Att använda sig av detta underlättar för besökaren att ta sig bakåt och ger en tydlig bild av var man är. Enkelt och strukturerat!

 

Mobilanpassa navigationen

Att navigera med musen är en sak. Att navigera med fingrarna på en liten skärm är en helt annan. Se till att ha en meny som är anpassad för mobila enheter. Det är inte optimalt att försöka zooma in så mycket man kan och “hålla tummarna” för att man ska lyckas trycka precis där man ska på en liten textrad. Jag skulle rekommendera det man kallar en “hamburgermeny”. Den kallas det för att knappen man trycker på för att få fram menyn är tre vågräta streck ovanpå varandra och liknar lite en smörgås eller en hamburgare. Det är i mina ögon en utmärkt lösning som fäller upp en större meny. Den är lätt att klicka på i mobilen och fälls tillbaka när man trycker på menyknappen igen. De flesta bra plattformar har stöd för detta, eller har möjlighet att lägga till en sådan modul.

 

Hamburgermeny

Exempel på en klassisk hamburgermeny

Det var tre av de sakerna jag tycker är viktigast när det gäller navigationen. Man kan säga mycket mer om detta ämne så vi får se om jag kanske gör en uppföljare till detta i framtiden.

Hoppas det kan vara till nytta för er där ute på Internets hav! Tack för mig! 🙂

Emil

Emil Johansson

Webb & E-handel, Kon-IT