Et annet sted som er skapt for navigasjon, er i toppen av siden. Toppen av siden er, i likhet med den venstre siden, noe av det første brukeren vil se. Et annnet poeng som er viktig å huske er at både toppen av siden og området til venstre er de eneste områdene som er “låst”. Det betyr at det ikke finnes plass bortenfor toppen eller bortenfor den venstre kanten som kan avlede oppmerksomheten. Nettleseren utgør en endelig grense her. Det er kun bunnen og området til høyre som lar seg utvide. Disse lar seg til gjengjeld utvide i det tilnærmet uendelige.

Joomla! CMS

Les mer om Joomla!

Typografi

Typografi for Internett er en relativ ny ting, med tanke på at vi er vant med typografi siden Gutenbergs dager rundt 1450. Typografi for Internett skiller seg fra typografi for trykte medier på flere måter. Les mer ...
Hjem Webutvikling Navigasjon
Navigasjon PDF Skriv ut E-post

Menyen
Siden vi befinner oss i det som blir kalt for “Vesten” og Internett ble oppfunnet her, så er det ikke rart at skjermbildet slik vi vanligvis ser det er venstrejustert. Selv om de fleste av oss er høyrehendt, så befinner hovednavigasjonsmenyen seg oftest til venstre på skjermen. Det er fordi vi leser fra venstre til høyre, og derfor er det vanlig at man legger navigasjonsmenyen dit hvor øyet vil begynne å se på siden. Det betyr ikke at man legge menyen dit, det er bare der den oftest blir forventet.

Menyen bør ikke bestå av for mange forskjellige punkter. Hvis du er nødt til å ha en stor innholdsmengde, så prøv å fordele dette på undermenyer som kan legges under hovedkategoripunkter. Hvordan du løser dette teknisk er opp til deg, men mange benytter seg av javascript. En annen måte å løse dette på, er å to-dele menyen; hovedkategoriene befinner seg øverst på siden, mens underkategoriene befinner seg til venstre og vil forandre seg avhengig av hva brukeren klikker på i hovedmenyen. Denne løsningen er derimot kun god hvis brukeren skjønner at det er en sammenheng mellom toppmenyen og sidemenyen. Her vil design og layout spille en viktig rolle for å knytte de to sammen.

Et godt design vil kunne tillate at du plasserer menyen på andre plasser også, men erfaring viser at brukere navigerer lettest når menyen befinner seg på plasser som de kjenner til fra før.

Brødsmuler
Dette har noe å gjøre med Hans og Grete som var i skogen. For å kunne finne veien tilbake hjem la de ut brødsmuler som skulle hjelpe dem. Nå var de to ikke så heldige, og deres smuler forsvant takket være glupske dyr.
Besøkende på en webside kommer heldigvis ikke ut for dyr som spiser opp smulene deres, men derimot for webdesignere som ikke tar hensyn til store mengder informasjon som brukeren må vasse gjennom. Brødsmuler eller “bread crumbs” er vanligvis en linje øverst i dokumentet, over brødteksten, som forteller brukeren hvor i hirarkiet han befinner seg. Denne linjen kan se slik ut:

  • www.pikselpusher.no / Webutvikling / Navigasjon på web

Hvert element som er adskilt av en “slash” (skråstrek) er i tillegg til å gi brukeren en oversikt hvor han er også en link som han kan klikke på for rask navigering. Utgangspunktet vil være domenenavnet, www.pikselpusher.no ("Hjem"), mens det etterfølgende vil være kategoriene, avsluttet med dokumentet brukeren sitter og leser.
Slike “bread crumbs” er brukervennlige, lette å implementere og til stor hjelp når man må organisere mengder av dokumenter på en oversiktlig måte.

Lenker
Dette er hva Internett egentlig består av; muligheten å kunne kryssreferere tekst med andre, også eksterne, websider. Denne teknologien tillater deg å lede den besøkende dit du vil og samtidig kontrollere informasjonsflyten på din webside.

Her er det viktig ikke å overdrive. Alt bør ikke lenkes, kun for å vise at du kan. Det er viktig å skille mellom det som er relevant og det som ikke er så viktig. Du må også være klar over at det er en del standarder i lenkeprosessen som bør overholdes. Dette for at brukeren korrekt skal kunne identifisere hva som er en lenke.

Lenkefarge
Standardfarger på lenker er blå for “ubrukt” (#0000CC) og lilla for “tidligere besøkt” (#9900CC) (visited). Denne informasjonen lagres i nettleseren din, slik at du fremdeles kan se hvilke lenker du besøkte sist du var der.
Det betyr ikke at du bruke disse fargene, men det er de som etterhvert har utviklet seg til en viss standard, selv om blå i utgangspunktet ikke er den beste fargen for dette (øyet har færre reseptorer for blå enn andre farger som f.eks. svart eller rødt på hvit bakgrunn).
Du må tilpasse fargene på lenkene dine til typografien din og designet, hvis vi går ut fra at teksten ikke skal stå med svart på hvit bakgrunn. Du bør i de fleste tilfeller likevel huske at svart på hvitt er det best leselige***.

Standard lenkeutseende er med understreking i en annen farge enn brødteksten. Mange velger å ikke ha lenker understreket og la streken først komme fram ved mouse-over (musepekeren føres over lenken). Mennesker som har problemer med fargegjenkjenning vil f.eks. ha problemer med å kjenne igjen lenker uten understreking.

Lenker som forklarer mindre enn de sier
Det kan høres litt kryptisk ut, men det finnes mange eksempler på tekstlenker som kun sier “klikk her” uten at du vet hva som venter deg på den andre siden av klikket ditt. Mange brukere kvier seg for å klikke på lenker som de er usikre på. Enten må du være flink med å gi en kort forklaring i lenken “klikk for neste side av artikkelen” eller du kan bruke en HTML-tag som gjør det for deg. Dette er én måte å ha to forskjellige tekster på én lenke:

  • //a href=”http://www.pikselpusher.no/index.php” title=”Personforklaring”/ Pikselpusher /a/
Navnet er en lenke, men kan ikke misforstås med en mailto el.l., siden tittelen spesifiserer at lenken fører til en personforklaring. Dette gjør at brukeren vet hva han kan vente seg og dermed er terskelen til å klikke på lenken blitt lavere. Én av ulempene er at denne typen ekstra kode fører til litt tregere nedlasting av siden med ca. et tidels sekund for brukere med tregt modem.

Bildelenker
Nå du lenker opp et bilde bør du huske én ting: Husk å sette på

  • alt=”sett inn forklaring her”
En ALT-tag kommer i likhet med en “title” til å vises med et lite felt som viser forklaringen. Dette er enda viktigere på bilder som er klikkbare enn tekst, siden et bilde ikke forklarer noe før det er lastet, samtidig som det er utilgjengelig for svaksynte og blinde. En ALT-tag vil kunne leses av såkalte snakkende nettlesere som brukes av funksjonshemmede og det er denne teksten som vises istedet for bildet før det er lastet ned.
{mospagebreak title=- Eksterne lenker}

Eksterne lenker
Noen webutviklere unngår lenker til eksterne websteder ut fra teorien om at de ønsker å beholde brukerne på sine egne sider. Dette er forståelig, men bryter med Internettets grunnleggende natur om at brukeren er den som bestemmer hvor han vil gå. Dessuten vil det føre til at brukeren uansett forsvinner fra nettstedet ditt hvis han ikke finner det han leter etter der.
Du bør nok velge de eksterne lenkene du setter på siden med omhu, slik at de har nytteverdi for brukeren, og ikke bry deg om at han kan forsvinne fra webstedet ditt. Du eier ham uansett ikke og hele verden er likevel bare ett klikk unna. Det du kan gjøre for å minne brukeren på at du finnes, er å skrive

  • target=”_blank”
i de eksterne lenkene, slik at den åpner seg i et nytt vindu istendenfor å ta over ditt. Det gjør at webstedet ditt ikke forsvinner helt til brukeren bevisst slår det av. Vær likevel forsiktig; brukere kan bli irritert over dette, da det medfører større vindu-tetthet på skrivebordet deres. Det gjelder her som med andre ting at man ikke bør overdrive.

Inkommende lenker
Du får håpe at så mange som mulig lenker til deg. Dette vil føre til mer trafikk og gratis reklame. Ingen trenger å spørre deg om lov før de lenker til nettstedet ditt (med mindre den har innhold som f.eks. rettighetsbeskyttet materiale), men det kan hende noen ønsker å ta kontakt med deg for å spørre om det er greit. I slike tilfeller bør du ha laget strukturen på webstedet ditt på en slik måte at URL’ene ikke forandrer seg over tid slik at de som lenker til deg ikke opplever brutte lenker et år fra nå.
Det som er viktig er at du er konsekvent. Ikke ha mange forskjellige typer lenker på nettstedet ditt. Husk at brukeren skal kunne gå dit han vil på raskest mulig måte. Hvis informasjonen er lagt ut på en oversiktlig måte og navigasjonen er satt opp med brukeren i tankene, vil det medføre at han ser på nettstedet ditt som en ressurs og vil sannsynligvis lage et bokmerke som raskt lar ham komme tilbake.
 

Teknisk

20©10 Pikselpusher - Joomla CMS
XHTML 1.0 Strict check CSS 2.1 Valid check

Adresse

Mælan 69
7374 Røros

Kontakt

Telefon (+47) 41 48 50 50
E-post info@pikselpusher.no