Navigationspaneler til hjemmesider

På samme måde som indholdet af hjemmesiden er vigtig, er det vigtigt at kunne komme videre til de andre relevante sider på sitet. Man skal kunne navigerer intuitivt på sitet. En del af det er placeringen, som gennemgået under de generelle designregler. En anden del er designet af navigationspanelet.

Man arbejder grundliggende med to typer navigationspaneler:

1. Dem er orienterer om hvor på sitet man er
2. Link til andre sider på sitet

Link til andre sider på sitet er det de fleste forbinder med navigationspanel. Det bl.a. sådan et som det der sidder lige under overskriften på denne side. De kommer i alle mulige placeringer og udformninger, og er et must på sites med flere sider. Mere om dem længere nede på siden.

De orienterende navigationspaneler er i reglen en linje man har oppe i den øverste del af siderne, på meget store og komplekse sites, f.eks. nyhedssites hvor man eksempelvis vil have

Nyhedssitets navn > Indland > Politik > Lokalpolitik

ved artikler om lokalpolitik, mens artikler om fodbold så kan se således ud:

Nyhedssitets navn > Sport > Fodbold

Det er de færreste sites der er så store og komplekse, at det giver mening at have denne type navigationspaneler, men de findes.

Menupunkt 1

Menupunkt 2

Menupunkt 3

Når man bevæger cursoren over elementerne på navigationspanelet, skal der helst være et feedback i form af noget der ændrer sig. Det kan være farveskift, som på eksemplet til højre, animationer, ændringer i fontstørrelser eller noget helt fjerde. Effekten man laver har ingen effekt på linkets funktionalitet, så i princippet behøver der ikke være noget der indikerer at her er der noget at klikke på. Det er en rent psykologisk effekt. Der sker noget der hvor man holder cursoren, så her er der noget at klikke på.

Faste menuer er navigationspaneler som vist lige oven over. En linje/knap, et link til en side. Helt simpelt. De enkelte links kan være stablet lodret, som vist oven over, eller de kan være arrangeret vandret, på denne måde:

Menupunkt 1

Menupunkt 2

Menupunkt 3

hvilket er de to mest udbredte design, eller de kan være arrangeret på en hel tredje måde, som man er kreativ til.

Kan man nøjes med faste menuer til sit site, er det klart at foretrække, fordi man slipper for en masse bøvl med skiftende skærmstørrelser ved adaptive design.

Drop down-menuer er, ligesom slide out-menuer, en mouseover-effekt. Det programmeringstekniske kan ses på siden om navigationspaneler, når den bliver klar. Effekten er helt enkelt, at når cursoren er over knappen/linket på navigationspanelet, ruller en liste med menupunkter ud under knappen/linket. Det ser i sin simpleste form således ud:

Menupunkt 1 Underpunkt 1.1 Underpunkt 1.2 Underpunkt 1.3

Menupunkt 2 Underpunkt 2.1 Underpunkt 2.2 Underpunkt 2.3

Menupunkt 3 Underpunkt 3.1 Underpunkt 3.2 Underpunkt 3.3

I gamle dage blev denne type menuer også kaldt rullegardiner.

Slide out-menuer er, ligesom drop down-menuer, en mouseover-effekt. Det programmeringstekniske kan ses på siden om navigationspaneler, når den bliver klar. Effekten er helt enkelt, at når cursoren er over knappen/linket på navigationspanelet, glider en liste med menupunkter ud ved siden knappen/linket. Det ser i sin simpleste form således ud:

Menupunkt 1 Underpunkt 1.1 Underpunkt 1.2 Underpunkt 1.3

Menupunkt 2 Underpunkt 2.1 Underpunkt 2.2 Underpunkt 2.3

Menupunkt 3 Underpunkt 3.1 Underpunkt 3.2 Underpunkt 3.3

På de helt små skærme som f.eks. smartphones er der ikke rigtig plads til drop down- eller slide out-menuer. I bedste fald bliver det småt og gnidret at se på. Dertil kommer, at når enhederne ikke har en cursor kan man heller ikke rigtig lave mouseover. For nogle versioner af browsere til Android og IOS omsætter browserne onmouseover til onclick, så når man peger på knappen/linket åbner menuen som ved mouseover, men det fungerer ikke specielt godt. Løsningen på pladsproblemet er blevet harmonika-menuer. Man arbejder i én søjle, og når man klikker på knappen/linket forlænges søjlen med underpunkter. Det ser i sin simpleste form således ud:

Menupunkt 1

Menupunkt 1

Underpunkt 1.1 Underpunkt 1.2 Underpunkt 1.3

Menupunkt 2

Menupunkt 2

Underpunkt 2.1 Underpunkt 2.2 Underpunkt 2.3

Menupunkt 3

Menupunkt 3

Underpunkt 3.1 Underpunkt 3.2 Underpunkt 3.3

Harmonika-menuer er programmeringsteknisk lidt mere komplicerede end drop down/slide out-menuerne at få til at fungere godt, men det kan godt betale sig at overveje denne type løsning. Med lidt teknisk snilde kan man gøre det, så der ved de større skærme bruges drop down/slide out og når skærmen så bliver helt lille, skifter siden over til harmonika-menu.

Man vælger efter hvad der er hensigtsmæssigt og hvad man kan lide. Så længe det fungerer intuitivt er det fint. Husk at det også skal fungere på små skærme, dvs. tablets og smartphones. Sværere er det ikke. Man opdager hurtigt hvis udformningen af navigationspanelet kommer i klammeri med sidens indhold, og så redesigner man til det fungerer.