navigation begreber 0

Transkript

1 navigation begreber 0 logo SITE ID hovedmenu SECTIONs VÆRKTØJ utilities søg search sidenavn page name du er her you are here lokalmenu local navigation undermenu subsections

2 navigation begreber 1 logo SITE ID logo SITE ID Logoet står som navnet på sitet. Logoet skal være gennemgående på hele sitet og adskille sige væsentligt fra den øvrige grafik. Logoet kan anvendes som home knap.

3 navigation begreber 2 hovedmenu SECTIONs hovedmenu SECTIONs Hovedmenuen består af de væsentligste emner som uddybes på sitet. Hovedmenuen bør højest bestå af en 5-6 punkter, og titlen på hver punkt skal være klar og præcis. Hovedmenuen skal have samme placering gennem hele sitet.

4 navigation begreber 3 undermenu subsections undermenu subsections Undermenuen virker i forlængelse af hovedmenuen, og er en mere detaljeret inddeling af et valgt punkt fra hovedmenuen. Undermenuen skal ligeledes være i et klart og præcist sprog. Hoved- og undermenu kan med fordel ligge tæt ved hinanden.

5 navigation begreber 4 VÆRKTØJ utilities VÆRKTØJ utilities Værktøjer er ikke en del af de primære informationer på sitet, men nærmere en hjælp til at læse sitet eller søge information om virksomheden bag sitet. Værktøjslinien bør være mindre i øjnefaldende end de øvrige menulinier. Værktøjslinien skal højest bestå af 4-5 punkter.

6 navigation begreber 5 sidenavn page name sidenavn page name Alle sider på sitet bør have et sidenavn en overskrift for siden. Sidenavnet skal desuden placeres i toppen af sidens indhold, og skal udskille sige fra den øvrige tekst og grafik. Gerne som den største tekst på siden. Desuden skal sidenavnet være identisk med den knap, som leder én dertil.

7 navigation begreber 6 lokalmenu local navigation lokalmenu local navigation Virker som en 3. menu eller underundermenu. Valgene i denne menu er relateret til indholdet på netop den side, du er på. Lokalmenuen bør placeres i forbindelse med sidenavnet og sideindholdet.

8 navigation begreber 7 søg search søg search Søgefunktionen virker som genvej til et konkret emne på siden ligesom en detaljeret indholdsfortegnelse i en bog. Søgefunktionen bør kun benævnes søg, da begrebet er en gængs betegnelse på nettet. Hvis der er en mulighed for at differentiere søgningen, kan det skrives ved søg-knappen (fx. søg på siden, søg på nettet). Så er det en selvfølge at funktionen virker!! Og der bør være en søg-knap på hver enkelt side, så det altid er muligt at foretage en søgning, når du ikke lige er på forsiden.

9 navigation begreber 8 du er her you are here du er her you are here Du er her funktionen kan lette navigationen, og mindske chancerne for at fare vild. Det er centralt at Du er her adskiller sig fra de øvrige menuer og grafik det kan være ved hjælp af en pil, highlight eller fed tekst. Breadcrumbs er ligesom Du er her en vejviser på sitet. Breadcrumbs lister op hvilke valg du har fortaget for at havne på siden.

10 navigation redesign 0 The Trunk test Hvilket site er dette (Site ID) Hvilken side er jeg på (Page Name) Hvad er hovedmenuerne på dette site (Sections) Hvad mine muligheder på dette niveau (Lokal Navigation) Hvor er jeg i hierakiet ( You are here indikatorer) Hvordan kan jeg søge? (Search) Steve Krug har disse 6 spørgsmål, som man helst skal kunne svare på, når man havner på en tilfældig hjemmeside. Han sammenligner følesen af at være havnet på en tilfældig hjemmeside, med at have ligget i bagagerummet (trunk) i en bil, og pludselig blive sat af et tilfældigt sted, heraf The Trunk Test. Denne test kan bruges til at teste sin egen og andres hjemmesider for god navigation.

11 navigation redesign 1 Eksisterende side

12 navigation redesign 2 Vores redesign til bedre navigering

13 navigation redesign 3 Navigationen på det eksisterende site er spredt ud over hele siden, og gør det derfor svært for brugeren at danne sig et overblik over indholdet. I vores redesign har vi samlet navigationen i nogle faste bjælker, så utilities (værktøjer), sections (menuer) og søgefunktioner er samlet i grupper. Det viser sig, at kommer forskelligt op på mac og pc. Da vi havde lavet redesignet med udgangspunkt i vores macversion af sitet, fandt vi ud af, at sitet ser anderledes ud, og indeholder flere informationer på en pc. Så vi lærte endnu en lektion... tjek altid sitet på begge platforme!

14 navigation redesign 4 Eksisterende side

15 navigation redesign 5 Vores redesign til bedre navigering

16 navigation redesign 6 På Københavns Politi s hjemmeside er navigationen samlet i nogle ret umotiverede bokse, som er strøet ud over siden sammen med nogle billeder af Københavns Politigård. Det er svært som bruger at overskue strukturen og prioriteringen på sitet. I vores redesign har vi givet siden nogle faste menuer, som skal figurerer på alle niveauer. Det, at sætte sections (menuer) og utilities (værktøjer) i hver deres stationere bjælke, giver sitet struktur. De smukke fotos fra Politigården har vi givet lidt mere plads hvilket også skaber lidt kontrast på siden.

17 navigation redesign 7 Eksisterende side

18 navigation redesign 8 Vores redesign til bedre navigering

19 navigation redesign 9 På energistyrelsens eksisterende hjemmeside er navigationen samlet i tre blokke to spalter i hver sin side af sitet samt en mere dynamisk menu i midten. Det skaber en smule forvirring mht, hvor man skal starte sin færden på sitet, og hvordan indholdet skal prioriteres. Vi valgte at bibeholde den dynamiske menu og give den lidt mere plads, da den giver en god formkontrast. Vi har sorteret ud i det øvrige stof, da der var dobbeltkonfekt flere steder, og samlet de resterende informationer i en nyhedsbjælke til højre på sitet. Søgefeltet er kommet op sammen med de øvrige utilities (værktøjer), så det ikke hænger og svæver for sig selv.