Spring til indhold
Navigation og menu design
-
Sitemap
- Skelettet på et website. Godt til overblik. Sørger for det samme design/farve/o.lign i “samme lag”. Navngivningen er vigtig. Hjælp brugeren med at holde overblikket over sitet og få den bedste navigering. Sørger for ensartet navigationsmetode.
- Brugernes behov – se slide for skema. Fx “underholde/opleve”: En høj grad af interaktivitet osv.. “Informere”: Hurtig adgang, søgefunktion, printfunktion osv.. Der er 3 typer mere, se slide/pdf fra Fronter.
- Placering af navigation
- Hvis den placeres foroven:
- Ulemper: Svært at udvide (i bredden)
- Fordele:
- Hvis den placeres forneden:
- Ulemper: “Ikke standard”, skærmstørrelsen, så man skal scrolle ned. Designmæssigt med tyngden, hvis ikke man kompensere for det i toppen.
- Hvis den placeres til venstre:
- Ulemper:
- Fordele: Udvides let uden at ødelægge design.
- Hvis den placeres til højre:
- Ulemper: Skærmstørrelsen, hvis man skal scrolle.
- Fordele:
- Hvis den placeres både til venstre og højre (Bruges oftest på nyhedssites og fx Amazon):
- Ulemper: Kan virke som et kaos designmæssigt.
-
Navigations metode
- Menu, drop-down, breads crums, knapper, hypertekst, miljø, animation, overflade.
-
Navigations menu
- Hvor er jeg, og hvor kan jeg gå hen.
- Det grafiske sætter tonen på sitet. Ikoner eller tekst.
- Skal være letgenkendelige ikoner. Klar formidling.
- Bread crums. En sti over hvor man er. Som fx i ens biblioteker på sin com. Bruges på store sider. Fx også i webshops. Bruges ikke umiddelbart ikke på små sider. Det vil være overkill.
- Drop down. Kan ødelægge ens design, da den foldes ned over designet. En mega drop-down kan deles ind i kategorier uden man den skal foldes ud flere gange. Det kan se uoverskueligt ud, men det kan hjælpe brugeren alligevel.
- Vertikal tabs. Kan være svær at læse. Men alt efter design kan det fungere, hvis fx man “læser” i en bog.
- Speaking navigation. Navigations/menuemne og man skriver med småt hvad det indeholder.
- Overflader. Image map, hot spot. Laver fx en hover animation.
-
Hypertext
- Understreg ikke ord som ikke indeholder et link. Brug af farver på ord skal umiddelbart også indeholde links.
- Tip. Et link er bedre at skrive som fx “Se en stor bold” istedet for “klik her”, så man skal læse sig frem til det. Samt SEO er bedre med en tekst istedet for “klik her”.
- Visuel respons/feedback. Så man kan se hvad man gør, fx klikker på en knap eller hover over den. Downloader noget osv.
- Directed Navigation: Brugeren får et valg fra starten, fx jeg er mand, jeg søger sko osv.
- Search Navigation: Fx Google Search, søgefunktion.
- Tabbed Navgation: Tabs
- Linear Navigation: Fx slide
- Tag clouds/Hot tags: Hvad er mest søgt. Sat op alfabetisk. Størrelse efter det mest søgte – i en stor kasse. Brugt på fx nyhedssites, det skal være brugerinvolveret, WordPress også.
- Global og Lokal navigation (og contextual navigation: forklare om indhold): Global navigation er helt standard, og så med sub navigation, fx drop down eller tab menu.