Verktøy
Søk
Logg inn

Frontal Technologies

Du er her: Hjem » Ressurser » Om navigasjon

Om navigasjon

Web Trend Map 4 Web Trend Map 4 Information Architects 20©11

Her følger noen tanker rundt oppbyggingen av det viktigste elementet på en hjemmeside, og hvorfor de ofte ser ut slik de gjør.
Det er ikke bestandig tekniske grunner som ligger bak utseendet til navigasjonsmenyer, men heller vedtatte kjensgjerninger om interaktivitet mellom mennesker og websider.

 

 

Navigasjonsmenyen

På vår halvkule (og mange andre steder) er skjermbildet slik vi vanligvis ser det 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.frontal.no / Nyheter / Navigasjon

 

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.frontal.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.

 

Ofte brukte standardfarger for lenker


Det betyr ikke at du bruke disse fargene, men de har etterhvert utviklet seg til en slags standard.
Du må selvsagt 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 slik som ALT eller TITLE 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.

 

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å.

 

QR-lenker/-koder

Denne siden hadde vært ufullstendig om vi ikke hadde snakket om denne typen lenker. Ordet eller forkortelsen QR står for "Quick Response", eller "hurtig svar", siden meningen med en slik kode er at den skal kunne dekrypteres raskt. QR-koder (av og til også kalt "mobil tags") ble i utgangspunktet utviklet av Denso-Wave i Japan i 1994 og er nå blant de mest populære todimensjonelle strekkodene - som har funnet sin vei ikke bare til trykksaker men også hjemmesider.

 

Siden QR-kode kan lagre et svært stort antall alfanumeriske tegn er det godt egnet til optisk lesing av data. Et eksempel på slik data kan være en adresse, der mottakerens personlige informasjon leses inn i løpet av en brøkdel av et sekund. På mobiltelefonen er QR-kode ofte benyttet til å lese data i form av internettadresser, siden å taste inn en web-adresse på mobiltelefonen er tidkrevende - og ved hjelp av en app for din smarttelefon kan du raskt skanne inn en slik adresse.

 

Du kan prøve det selv: Skriv inn en webadresse i feltet nedenfor, trykk "submit" og ta så et bilde av koden ved hjelp av en gratis app slik som denne for iPhone.

 

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.

 

Sist endret torsdag 17. mars 2011 09:50
Lars Geithe

Lars Geithe

Lars Geithe utvikler websider og online applikasjoner. I tillegg underviser han i Motion Design på NKF i Trondheim.

Nettsted: www.frontal.no E-post: Denne e-postadressen er beskyttet mot programmer som samler e-postadresser. Du må aktivere JavaScript for å kunne se adressen

Relaterte sider (etter merke)

Skrivkommentar

Felt merket med (*) må fylles ut.

Frontal
Ressurser

Hvis du savner noe på ressurssidene, så send oss en beskjed og vi skal prøve å få det med. Ta kontakt enten via on.latnorf@tsop eller vårt kontaktskjema.

  • Frontal Media

    Wordpress shortcodes. A complete guide: http://t.co/Vm1Ps77O

    lørdag 12. mai 2012 20:55

  • Frontal Media

    Frontal Media og Form til Fjells har utviklet ny hjemmeside for Rørosregionen Næringshage: http://t.co/oS2RB02v

    fredag 11. mai 2012 14:01

  • Frontal Media

    Facebook skal starte App Center: http://t.co/PaInEXdp

    torsdag 10. mai 2012 08:20

  • Frontal Media

    RT @RWW: The World is Not Quite Ready for Mobile Payments, According to MasterCard http://t.co/RGYlgRya

    onsdag 09. mai 2012 11:51

  • Frontal Media

    Principles of user interface design: http://t.co/DIJaDcVl

    tirsdag 08. mai 2012 09:20

  • Frontal Media

    13 ting du ikke visste du kunne gjøre på LinkedIn: http://t.co/zzjm3Tyi

    tirsdag 08. mai 2012 09:16

  • Frontal Media

    Eliminer all produktivitet: Angry Birds på Facebooks tidslinje - http://t.co/e6DM9yGp

    søndag 06. mai 2012 12:14

  • Frontal Media

    Alt er klart til kveldens konsert med Bertine Zetlitz i Storstuggu på Røros. Dørene åpner kl 21.

    lørdag 05. mai 2012 20:03

  • Frontal Media

    RT @1stwebdesigner: The Samsung Galaxy S III: The First Smartphone Designed Entirely By Lawyers http://t.co/zpZHSrvn

    lørdag 05. mai 2012 19:58

  • Frontal Media

    Hvordan sette sammen sin egen hadron collider: http://t.co/KKsVKoKn

    fredag 04. mai 2012 07:20