Navigasjonssystemer. Information Architecture Peter Morville & Jorge Arango Kap

Transkript

1 Navigasjonssystemer Information Architecture Peter Morville & Jorge Arango Kap

2 Navigasjon Hvordan bevege seg rundt til de ulike delene som et nettsted er bygget opp av. Mens struktur og organisering handler om å bygge rom, handler navigasjon om å lage dører og vinduer. Søkesystemer hører også til under navigasjon. Faktum er at struktur, organisering, merking, browsing og søkesystemer bidrar alle til effektiv navigasjon

3 Ulike typer navigasjonssystemer 1. Innebygde ( embedded ) navigasjonssystemer: Består av global, lokal og kontekstuell navigasjon. Rammer inn eller er en del av innholdet på siden. Gir kontekst og forteller brukerne hvor de er og hvor de kan gå. 2. Supplerende navigasjonssystemer: Består av nettstedskart (sitemaps), indekser, guider og søk. Ligger på utsiden av selve innholdet på siden. Andre måter å få tilgang til den samme informasjonen på

4 Lokal navigering Hva er i nærheten Hvor kan jeg gå? Innebygd navigasjon Global navigering Hvor er jeg? Hvor kan jeg gå? Kontekstuell navigering Hva er relatert til det som er her? Hvor kan jeg gå? Skal den lokale navigasjonsmenyen være til venstre eller på toppen? Skal vi bruke pull-downs, pop-upseller cascading menyer? Begynner å komme nye navigasjonsdesign.

5 Øvelse 1: 1. Gi meg eksempler på global, lokal og kontekstuell navigasjon. 2. Gi meg eksempler på supplerende navigasjon (nettstedskart, indekser og guider).

6 Forholdet til nettleserens navigasjon Husk at også nettleseren har egne mekanismer for navigasjon. Generelt inneholder en nettleser: Åpen URL Backward / Forward / Reload Home Favorites, Bookmarks, Hotlist History Fargekode på hypertekst Bestemmelsessted på bunnen av siden når musepekeren er på en link Ved design av navigasjonselementer bør vi ta hensyn til at brukeren også kan benytte seg av nettleserens navigasjonshjelpemidler. Viktig at vi ikke overstyrer disse egenskapene.

7 Bygge kontekst Brukere skal alltid vite hvilket websted de er på, selv om de ikke kommer inn på hovedsiden Bruk derfor gjennomgående logo Tenk «nøkkelskjerm» Brukere bør også alltid vite hvor de er i informasjonshierarkiet Brukerens nåværende posisjon bør derfor vises (du er her) Bread crumbs

8 Kontekstuell informasjon HVOR ER JEG HVA ER I NÆRHETEN RELATERT

9 Øvelse 2: Velg dere et tilfeldig nettsted, og gjennomfør en navigasjon s stresstest (Keith Instone): 1. Ignorer hovedsiden og gå inn bakveien. 2. Prøv å besvare følgende spørsmål: Hvor er dere i forhold til resten av nettstedet? Hvilken del av nettstedet er dere i? Hvilken side er foreldresiden? Hvordan kommer dere videre? Forstår dere utifra linkene hvor dere kommer hen / er linkene med andre ord beskrivende nok? Er linkene ulike nok, slik at dere klarer å skille de fra hverandre?

10 Struktur, fleksibilitet, kaos Det er lett å lage hypertekstuelle navigasjonssystemer som fjerner begrensningene i en streng hierarkisk struktur. Men det må gjøres men omtanke. Det kan lett bli kaos For mange navigasjonsmuligheter kan begrave strukturen (se nettsidene til HiØ) HåkonTolsby 10

11 Innebygde navigasjonssystemer: Globalt navigasjonssystem Lokalt navigasjonssystem Kontekstuell navigasjon

12 Globalt navigasjonssystem Navigasjonsbar ofte plassert på toppen av siden. Gir direkte tilgang til nøkkelområder og funksjoner. Bør alltid inneholde en link til hovedsiden (hjem). Inneholder ofte et søkefelt. Det eneste konsistente navigasjonssystemet på nettstedet. Påvirker i stor grad bruken av nettstedet. bør derfor være basert på brukersentrert design og testing Må det ligge øverst?

13 HåkonTolsby 13 Apples meny forsterker strukturen til nettstedet og gir kontekstuelle hint om hvor du er Dells gamle meny sa lite om nettstedets struktur. Linkene fører til nye «sub-nettsteder» Dells nye globale meny. Skiller ikke lenger på arbeid og hjem.

14 Søkesystem som navigasjon HåkonTolsby 14

15 Øvelse 3: Hva er det globale navigasjonssystemet til følgende nettsteder: UiO Elkjøp Microsoft HiØ

16 Lokalt navigasjonssystemer Store nettsteder har ofte flere ulike lokale navigasjonssystemer som har lite til felles.

17 Flere navigasjonssystemer HåkonTolsby 17

18 Kontekstuell navigasjon Spesifikke linker til relaterte produkter, tjenester eller informasjon. Blir ofte oversett av brukere. Støtter assosiativ læring

19 Synliggjøring av kontekstuelle linker HåkonTolsby 19

20 Navigasjon i praksis Husk at det er en balansegang mellom fleksibilitet og det å overvelde brukeren med for mange valgmuligheter. Global, lokal og kontekstuell navigasjon bør integreres slik at de komplimenterer hverandre. Tommelfingerregler: Global navigasjon på toppen av siden Lokal navigasjon på venstre side Tekstlige merker i stedet for ikoner Dersom du velger å gjøre det annerledes, er det viktig med hyppig bruk av brukertester for å forsvare dette

21 Supplerende navigasjon Nettstedskart («sitemap») Indeks («index») Guider («guided tour», etc.) Søking (tema neste forelesning)

22 Nettstedskart Bygger på eksisterende hierarki, og gir brukeren mulighet til å utforske informasjon. Husk! Ikke overveld brukerne med for mye informasjon.

23 Indeks Presenterer nøkkelord alfabetisk uten å ta hensyn struktur, og er et godt hjelpemiddel for brukere som vet eksakt hva de leter etter. Eksempler fra UN og National Geographic

24 Bruk av guider Mange varianter (opplæringer, OBS, wizards, etc.). Kan være fokusert mot et spesifikt publikum, oppgave, eller emne. Primært rettet mot nye brukere. Som regel lineær navigasjonsstruktur

25 Bruk av guider 1. En guide skal være kort. 2. En bruker skal kunne forlate en guide og lett komme tilbake til samme sted. 3. Navigasjonsknapper skal være lette å finne, og konsistent plassert. 4. Skal gi svar på typiske spørsmål (særlig for begynnere)

26 Brukes ikke lenger. Hvorfor? HåkonTolsby 26

27 Retningslinjer som fungerer godt med tanke på nettleserens navigasjon Bruk ikke rammer og andre virkemidler på måter som setter Forward, Back, Reload og Favorites ut av funksjon. Ikke overstyr brukerens/nettleserens konvensjoner for å skille mellom besøkte og ikke-besøkte hyperlenker. La bokmerkefunksjonen være i fred Nettlesere vil forhåndsvise lenkenavn ved mouseover. Bruk derfor meningsfylte navn på lenker