Navigering

Navigering handlar om den hjälp användaren får för att röra sig runt mellan webbplatsens olika sidor.

2.4.1 Markera användarens position

Det ska vara tydligt var användaren befinner sig i informationsstrukturen:

Visa grafiskt i huvudnavigeringen vilken sida som valts.

2.4.2 Enhetlighet i menyalternativ och sidans rubrik

När en användare klickar på ett menyalternativ eller en länk förväntar hon sig att komma till en sida som motsvarar hennes val.

Rubriken, som presenteras överst på varje sida, bör överensstämma med det

menyalternativ som är markerat i huvudnavigeringen eller den länk som har lett till sidan.

Vid långa rubriker kan en kortare variant visas i navigationen.

Ägare/E-post Sida Hanna Brogren, Kommunikationsstaben 13

hanna.brogren@stadshuset.stockholm.se

2.4.3 Brödsmulenavigering

Ett generellt problem på webben är att det förekommer olika varianter av brödsmulenavigering som skiljer sig åt i funktionalitet. Dels finns en variant där

brödsmulorna visualiserar sidans placering i webbplatsens struktur, dels finns en variant där brödsmulorna motsvarar exakt de sidor som användaren besökt.

Att använda brödsmulenavigering kan därför förvirra användaren mer än hjälpa.

2.4.4 Etablera länk-konvention

Det finns många olika medel att navigera och det är viktigt att dessa har en konvention och att olika utformning används för olika medel och att de används konsekvent på webbplatsen.

Se till att det finns regler för hur olika navigationsmedel utformas. T.ex.

 Menyer ska se och fungera på samma sätt på hela webbplatsen.

 Länkar inom webbplatsen ska se ut och placeras på samma sätt.

 Länkar till externa webbsidor ska se och placeras på samma sätt.

 Länkar som leder till en funktion, till exempel ett sökbart arkiv eller ett

diskussionsforum. Observera dock hur denna länk skiljer sig från en knapp: En funktionslänk leder till diskussionsforumet, en knapp är det man klickar på för att göra ett inlägg i diskussionsforumet.

Tänk därför på att grafiskt skilja på funktionslänkar och länkar som leder till annan sida, till exempel genom att använda olika länkikoner/pilar.

Webbplatsens länkkonvention ska beskrivas i webbplatsens grafiska manual.

2.4.5 Länkars utseende

Länkar inom en webbplats ska ha ett enhetligt utseende, samt skilja sig från annan text, rubriker etc. Detta för att användaren enkelt ska kunna förstå och se vad som är klickbart och leder till en annan sida.

Låt inte knappar fungera som länkar eller länkar som knappar. Ett klick på en länk bör ta användaren till en annan sida. Ett klick på en knapp däremot, initierar en aktivitet, till exempel att ett formulär man fyllt i skickas iväg eller att en sökning utförs, eller att en interaktiv guide startas. Se även avsnittet Knappar och länkar.

Länkar för Stockholms stads olika webbplatser kan utformas olika, men ska vara

enhetliga och konsekvent använda inom respektive webbplats och styras av webbplatsens grafiska profil:

 Länkar ska vara enhetligt utformade på hela webbplatsen, det vill säga

funktionslänkar bör ha samma utseende på hela webbplatsen och samma sak för länkar som leder till en annan sida.

 Länkar ska ha tydlig färg, företrädesvis blå

 Länkarna ska ändra färg och/eller bli understrukna (om de inte redan är det) när användaren för pekaren över länken, det vill säga vid mouse over.

 I de fall användaren kan ha nytta av att se vilka länkar hon redan klickat på ska dessa ha en annan färg. Detta gäller till exempel nyheter, sökresultat etc.

Ägare/E-post Sida Hanna Brogren, Kommunikationsstaben 14

hanna.brogren@stadshuset.stockholm.se

Annat viktigt att tänka på vid utformning och användning av länkar är:

 Använd så stora träffytor som möjligt. Hela länktexten ska fungera som länk, som i exemplet ovan. Det är också viktigt att det är tillräckligt stora avstånd mellan klickbara element – till exempel textlänkar – för att användare ska kunna träffa var och en av dem utan svårighet.

 Var sparsam med länkar i löpande text. Presentera hellre länkar i slutet av varje textstycke.

 Om en länk leder till att en ny sida öppnas, bör detta markeras. Se även avsnittet Öppna nytt fönster.

2.4.6 Rullgardinsmenyer/droplistor

Så kallade rullgardinsmenyer eller droplistor kan användas för val av olika alternativ.

Användaren väljer ett alternativ genom att släppa pekaren på alternativet.

Rullgardinsmenyer används i två typer av situationer:

 Snabbvägar till olika sidor.

 Val av kategorier, till exempel i formulär eller sökfunktioner.

Rullgardinsmenyer är särskilt lämpade när alternativen är väl kända eller enkla att förstå, det vill säga då rullgardinsmenyn kan stödja snabba val. Då kan också antalet alternativ vara stort utan problem för användaren. Dock bör valen i menyn vara ordnade i alfabetisk ordning så att användaren snabbt kan hitta och söka sig ner via bokstavstangenterna.

Om antalet kategorier är stort och oöverskådligt bör man överväga att dela upp valen i olika rullgardinsmenyer, så att man i ett första steg väljer huvudkategori, för att därefter välja underkategori. Överliggande rullgardinsmeny kan då styra vilka val som kan visas i underliggande rullgardinsmenyer och valen i dessa kan då minskas.

Använd inte rullgardinsmenyer om antalet alternativ är väldigt få. Då är det bättre att visa alla alternativ, och låta användaren välja med så kallade radioknappar eller checkboxar, beroende på hur många alternativ användaren ska kunna välja (se nedan under rubriken Flervalsalternativ).

2.4.7 Välja flera alternativ

Där användaren ska kunna välja flera alternativ i stor mängd alternativ bör detta utformas enligt som en rullgardinsmeny med möjlighet att göra flera val, t ex enligt nedan. Tänk på

Ägare/E-post Sida Hanna Brogren, Kommunikationsstaben 15

hanna.brogren@stadshuset.stockholm.se

att ha en text som förklarar för användaren att det går att välja flera alternativ i listan, då själva utformningen av rullgardinsmenyn inte gör detta självklart för alla användare:

Välj förvaltning

Vill du markera flera alternativ? Tryck på ctrl och klicka på de alternativ du vill markera.

Alla

Idrottsförvaltningen Brandförsvaret

Gatu- och fastighetskontoret Integrationsförvaltningen

2.4.8 Kaskadmenyer

Med kaskadmenyer menas rullgardinsmenyer där ytterligare valbara alternativ fälls ut åt sidan.

När det gäller kaskadmenyer rekommenderas följande:

 Kaskadmenyer kan vara svåra att använda, men ger i gengäld snabb åtkomst till sidor längre ner i strukturen. Kaskadmenyer är därför mer lämpade för interna webbplatser/verktyg (där behovet av effektivitet är stort) än för externa (där en stor del av användarna kan vara sällananvändare och därmed ovana).

 Kaskadmenyer kan vara svåra att manövrera då de kräver finmotorik. Använd därför maximalt två nivåer.

2.4.9 Användning av logotyper som navigeringselement

Den logotyp som är placerad längst uppe till vänster på sidan ska fungera som länk till webbplatsens startsida.

2.4.10 Snabbkommandon

Snabbkommandon ska kunna användas, då de underlättar för användare, inte minst funktionshindrade. Snabbkommandon ska vara desamma på alla stadens webbplatser.

Nedanstående snabbkommandon följer Vervas anvisningar, och bidrar därmed till en standardisering för hela den offentliga sektorn i Sverige.

Ägare/E-post Sida Hanna Brogren, Kommunikationsstaben 16

hanna.brogren@stadshuset.stockholm.se

S Hoppa över navigeringen, gå direkt till textinnehållet (relevant för röstuppläsare) 0 Om webbplatsen, tillgänglighetsinformation

1 Startsida 2 Nyheter 3 Webbkarta 4 Sökfunktionen 5 Frågor och svar 7 Kontakt