Om Martin
Martin liker
Slik lager du en god navigasjonssti
25.05.07 • 7 kommentarer
Hva er en navigasjonssti?
Du har helt sikkert sett en navigasjonssti. Nettsteder over en viss størrelse, der strukturen lett kan bli uoversiktlig for brukeren, tilbyr en navigasjonssti som lar brukeren se hvor i hierarkiet eller informasjonsstrukturen brukeren befinner seg.
Et eksempel på en navigasjonssti:
Begrepet navigasjonssti stammer fra det engelske uttrykket “Breadcrumbs” i historien om Hans og Grete, hvor Hans etterlot brødsmuler på deres vei gjennom skogen, for å finne veien hjem. Det finnes tre typer navigasjonsstier:
- Sti: Viser veien brukeren har gått gjennom strukturen for å havne der han eller hun befinner seg.
- Lokasjon: Viser hvor i strukturen den aktuelle siden befinner seg.
- Attributt: Informasjon for å kategorisere den aktuelle siden.
Gitt disse tre typene, er det ideelt sett feil å kalle “Breadcrumbs” for navigasjonssti, ettersom sti kun er en av typene. Navigasjonssti er imidlertid mest utbredt, og jeg har alltid kalt det navigasjonssti selv. I tillegg ble det borte hos Martin Gjesdal mer eller mindre opplest og vedtatt at “Breadcrumbs” skal oversettes til “Navigasjonssti” på norsk.
Jacob Nielsen mener for øvrig at navigasjonsstier er en god ting.
Ønsker du flere detaljer om navigasjonssti, kan du lese mer hos Wikipedia.
Et eksempel
Jeg vil eksemplifisere denne posten med lokasjon, selv om den ikke harmonerer helt med historien om Hans og Grete. Årsaken til at jeg benytter lokasjon fremfor sti, er at det er mest vanlig, samt at jeg mener det er mest logisk for brukeren. I tillegg er det enklere å implementere lokasjon fremfor en sti, da sti også stiller visse krav til klienten, det vil si nettleseren.
Ta følgende struktur:
Å vise et slikt element vil både være plasskrevende og lite vennlig for brukere med spesielle behov, for eksempel blinde eller svaksynte. Her skal jeg vise hvordan man med XHTML og CSS utarbeider en liten og brukervennlig navigasjonssti for eksemplet over.
XHTML
Det første du trenger er XHTML-koden til navigasjonsstien. Den består typisk av en liste, og kan se slik ut:
- <dl id=”location”>
- <dt id=”location_description”>Du er her:</dt>
- <dd id=”location_first”><a href=”#”>Hovedsiden</a></dd>
- <dd><a href=”#”>Produkter</a></dd>
- <dd id=”location_last”><a href=”#”>Datamaskiner</a></dd>
- </dl>
Jeg har laget engelske identifikatorer, slik at jeg kan gjenbruke listen min ved behov.
Navigasjonsstien vil foreløpig se ut som følger:
Resultatet av denne listen er ikke spesielt sexy, så vi må ty til litt enkel CSS for å pynte på utseendet.
CSS
- dl#location {
- font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
- font-size: 70%;
- line-height: 1.6;
- }
- dl#location dt {
- display: inline;
- }
- dl#location dd {
- margin: 0;
- padding: 0;
- display: inline;
- background-image: url(“navigasjonssti_skiller.png”);
- background-position: 0 50%;
- background-repeat: no-repeat;
- }
- dl#location dd a {
- margin: 0;
- padding: 0 0 0 12px;
- }
Med denne enkle CSS-en vil navigasjonsstien nå se ut som følger:
Svaksynte kan også skalere denne løsningen, selv om skilletegnet ikke skaleres tilsvarende.
Jeg har kun testet koden i Firefox, Opera og Safari på Mac, hvilket skulle tilsi at den fungerer i de fleste oppegående nettlesere. (Internet Explorer er ikke en av de, så hvis resultatet ser guffent ut der, kan du gjerne legge igjen en kommentar til forslag med kodeendring.)
Oppsummering
Dette er altså en måte å gjøre det på. Det finnes minst like mange andre måter å gjøre det på, som det finnes lesere av bekkelund.net. Har du en måte å gjøre det på som du mener er mye, mye bedre enn denne, er det selvfølgelig bare å legge igjen en kommentar. Hvordan denne løsningen fungerer i talebaserte nettlesere er jeg usikker på.
7 kommentarer
-
Jeg ar lest i en bok at uttrykket “brødsmuler” brukes på norsk.
-
Lasse skrev:
Dersom “navigasjonssti” hadde stammet fra Hans og Grete, ville det vel heller het “brødsmuler”, som er norsk for “breadcrumbs”?
Som Espen påpeker, brukes “brødsmuler” i faglitteraturen. Det brukes sågar i dagligtale, men navnet gir ingen mening, så “navigasjonssti” er uttrykket som normalt sett brukes i kommunikasjon med kunder og andre uten kjennskap til begrepet.
Det ironiske er, som jeg påpeker i selve artikkelen, at “navigasjonssti” kun dekker ett av begrepene, og da ikke engang det som er mest utbredt. Hvis noen imidlertid har et bedre forslag, er det selvfølgelig bare å legge igjen en kommentar.
-
Jeg er uenig i bruken av definisjonsliste til dette, Martin. Jeg kan også være enig i at HTMLs definisjon av DL kan være ganske snever, men det er nå slik at man i DT skal ha et ord eller uttrykk og i DD skal ha en beskrivelse (eller definisjon) av dette ordet eller uttrykket. Som du skjønner, er det derfor ikke riktig å si at “Hovedsiden” er en definisjon av uttrykket “Du er her”.
Ellers en bra innføring.
-
Ja, du har helt rett, Asbjørn. Alternativet er å bruke en vanlig liste, med UL og LI. CSS-en vil være akkurat den samme, så det er bare å foreta en søk-og-erstatt av DL med UL, og DT / DD med LI. Den første LI-en fjerner man da bakgrunnsbildet fra, samt setter padding-left til 0.
Jeg skal for øvrig vurdere å publisere et annet alternativ, som blir brukt i CMS-et jeg arbeider med til daglig.
Har du synspunkter? Legg igjen en kommentar!
RSS og trackback
Med RSS kan du abonnere på nye kommentarer som postes til denne artikkelen.
Du kan legge igjen et trackback fra ditt eget nettsted ved å benytte trackback-adressen til denne artikkelen. Eventuelle tracback ser du under.
-
[...] bloggposter om når et nettsted trenger søk og navigasjonssti, samt slik lager du en god navigasjonssti er bakgrunnen for denne posten. Før du kommer det tidspunktet hvor du må vurdere søk og [...]
Flere artikler
- Holder de ord
- The Greatest Bits 3
- Røde kjemper
- Fremdrift
- Skydebatten
- Supertankere og robåter
- IT-realitetsorientering
- Altinn-skandalen
- Steve Jobs
- Webfonter
Enda flere artikler? Besøk arkivet.
Bekkelund.net er en blogg av Martin Bekkelund, hvor han lufter sine tanker om IT og IT-politikk. Martin arbeider til daglig som seniorrådgiver, foredragsholder og skribent i IT-bransjen, hvor han veileder bedrifter og organisasjoner i strategisk bruk av IT. Les mer...
© 1995-2012 Martin Bekkelund
Opphavsrett • RSS • Kontakt
Lasse G. Dahl
25. mai 2007 20.31
En god og interessant artikkel. Jeg vil bare kommentere “oversettelsen”, eller fornorskingen:
Dersom “navigasjonssti” hadde stammet fra Hans og Grete, ville det vel heller het “brødsmuler”, som er norsk for “breadcrumbs”? “Navigasjon” og “sti” er jo temmelig velbrukte begreper i web- og IT-verdenen, også blant de som ikke har det som hovedbeskjeftigelse, i tillegg til å være forståelige norske ord – så begrepet står ganske godt for seg selv på norsk. Den engelske varianten kler imidlertid godt en oversettelse eller forklaring.
(Det minner meg litt om den websiden som forklarte at “thumbnail” oversatt til norsk ble “frimerke” – selvfølgelig i forhold til miniatyrbilder. Jeg lurte litt på hvordan det gikk med ikke-akkurat-engelsk-kyndige som tok med seg denne informasjonen til postkontoret på feriereise i et engelsktalende land …)
Og så er det litt morsomt å se at denne måten å bygge opp hierarki i et nettsted kommer til heder og verdighet igjen. Når man er vant til å slette en del av en URL for å komme et nivå opp¹, nikker man bare gjenkjennende til at det implementeres i mer brukervennlige kontekster.
¹ F. eks: http://www.bekkelund.net/blogg/2007/05/