Informasjonarkitektur og innholdsadministrasjon. Informasjonsarkitektur: Navigasjonssystemer. Gisle Hannemyr

Transkript

1 INF3272/5272 Informasjonarkitektur og innholdsadministrasjon Informasjonsarkitektur: Navigasjonssystemer Gisle Hannemyr RM&A (2015) - kap. 8: Navigasjonssystemer Global, lokal, og kontekstuell navigasjon. Supplerende navigasjonsverktøy Personalisering og visualisering av navigasjon (tag-skyer, sosial filtering og sosial navigasjon). INF3272/5272 Side #2 1

2 Hvorfor navigasjon? Navigasjon dreier seg om designelementer og strukturer som gjør at brukerene kan finne veien til de ulike delene som et nettsted er bygget opp av. Browsing (denne) Søk (senere) INF3272/5272 Side #3 Oversikt over forelesningen Denne forelesningen gir blant annet en innføring i terminologi som dere kan benytte i designdokumentasjon. Navigasjonstyper Supplerende navigasjonshjelpemidler Terminologi om nettsider. Kontekst. «Avansert» navigasjon. INF3272/5272 Side #4 2

3 Vanlige navigasjonstyper På en «typisk» side nettside finner man: Global (primær) navigasjon. Lokal (subsite, sekundær) navigasjon. Kontekstuell navigasjon (brukes både inline, i faktabokser, og i egne regioner) Bunntekst (står vanligvis i sidefoten, men ikke alltid). På egne navigasjonssider finner vi supplerende navigasjon: Nettstedkart Indekser Guider Søkeresultatside (SERP) INF3272/5272 Side #5 Navigasjon i praksis Som regel vil de fleste typer navigasjon være brukt på et nettsted, for å oppfylle ulike behov: Global og lokal navigasjon, samt bunntekst for å gi konsistens, og for å tilby snarveier. Kontekstuell navigasjon for å skape dynamikk og for å gi bakgrunn i forhold til foreliggende kontekst. Søk fordi brukere bør kunne søke etter innhold når annen navigasjon ikke fører fram. Supplerende navigasjon for å gi oversikt og en vei til ymse sider som ikke passer inn i andre navigasjonsstrukturer. INF3272/5272 Side #6 3

4 Lokal navigasjon Kontekstuell navigasjon Conceptual map: Example Fra læreboka: mangler «Bunntekst». INF3272/5272 Side #9 Blokker i et «typisk» trespaltet sideutlegg (fem blokker) Topptekst (inkl. global navigasjon) Område for hovedinnhold (node) + kontekstuell navigasjon (inline-lenker) Bunntekst (kolofonlenker) INF3272/5272 Side #10 4

5 Wireframes En «wireframe» er en skisse av de ulike blokker og navigasjonselementer som befinner seg på en nettside. Ikke en erstatning for grafisk design gjort av en grafisk designer. Lar en informasjonsarkitekt gi brukere et inntrykk av hvordan nettstedet vil bli seende ut og kan benyttes til «papirprototyping» Kan tegnes med mybalsamiq, eller et annet tegneverktøy. Se RM&A, s. 366, ss INF3272/5272 Side #11 Navigasjonsstrukurer Embedded (innbakt navigasjonen inngår i den enkelte side) Global Makronavigasjon som repteres gjennom hele siten (f.eks. en peker tilbake til toppsiden + peker til feedback-side). Lokal/subsite: Ekstra navigasjon spesifikk for subsite (f.eks. USAtoday). Kontekstuell Navigasjon som lenker til beslektet innhold. Ofte knyttet opp til kontekst: Hvor er jeg? Hva er i nærheten? Hva er beslektet? Kan også peker til alternative utlegg (annet språk, utlegg for utskrift, og lignende). Bunntekst: Standardlenker til metainformasjon: Lenker til Kontaktinformasjon, personvermerklæring, bruksvilkår, etc. INF3272/5272 Side #12 5

6 Eksempel: Global, lokal og kontekstuell navigasjon Lokal navigasjon Global navigasjon Kontekstuell navigasjon INF3272/5272 Side #13 Eksempel: Lokal (subsite) navigasjon INF3272/5272 Side #14 6

7 Eksempel: Kontekstuell navigasjon Under produktpresentasjonen (her av Nikon D850) finner man bokser med 7 beslektede produkter. Hvert produkt har en lenke som peker til presentasjonen av det aktuelle produktet. Dette er et typisk eksempel på kontekstuell navigasjon. Kontekstuell navigasjon INF3272/5272 Side #15 Blokker med ulike typer kontekstuell navigasjon Hvor er jeg? Hva er i nærheten? Hva er beslektet? INF3272/5272 Side #16 7

8 Lokal navigasjon vs. kontekstuell Lokal navigasjon Kontekstuell navigasjon Dette eksemplet viser hvordan man kan navigere til samme innhold (en spillerprofil) vha. lokal og kontekstuell navigasjon. På begge websidene som visers over er spiller-navnene klikkbare navigasjonslenker. I eksemplet til høyre er listen over spillere en meny som tilbyr lokal navigasjon i subsiten for «A-laget». En spiller er valgt (Taijo Teniste), noe som er markert i menyen med lilla farge. Spillerprofilen for Taijo Teniste vises i blokkregionen for innhold. Går man inn på en annen spillerprofil vil man fortsatt ha den samme menyen som til lokal navigasjon i «A-laget» subsiten. I eksemplet til venstre er benyttes kontekstuell navigasjon. Navnet i profilsammendraget lenker til den fullstendige profilen. Konteksten her er laget («A-laget»). Men det finns ikke en lokal navigasjonsmeny og «A-laget» er derfor ikke er en subsite. I galleriet som består av spillerprofil-sammendragene er spillernavnene klikkbare lenker, og leder til den fullstendige spillerprofilen for den enkelte. INF3272/5272 Side #17 Breadcrumbs Hierarkisk: Navigasjon følger av klassifisering av informasjon i et hierarki (f.eks. Digi.no, Kvasir/Yahoo, Museumsnett). Breadcrumbs: Svært vanlig teknikk for å støtte kontekstuell navigasjon. Tjener som en «Hvor er jeg?»-indikator. Viser «stien» fram til siden. Lar brukern gå direkte tilbake til alle nivåer i hierarkiet. Støttet i Drupal. INF3272/5272 Side #18 8

9 Breadcrumbs - brødsmuler Breadcrumbs navigation INF3272/5272 Side #19 Integrert (inline) navigasjon (en spesiell form for kontekstuell navigasjon) INF3272/5272 Side #20 9

10 Supplerende navigasjon Nettstedskart («sitemap») Indeks («index») Guide («guided tour», etc.) Søking (drøftes senere) INF3272/5272 Side #21 Kart Nettstedskart (sitemap) Kategori 1 - Underkategori 1.1, Underkategori 1.2, Underkategori 1.3 Kategori 2 - Underkategori 2.1, Underkategori 2.2, Underkategori 2.3 Kategori 3 - Underkategori 3.1, Underkategori 3.2, Underkategori 3.3 INF3272/5272 Side #22 10

11 Indeks Indeks A - Adresser - Album B - Beatles, The - Betaling. INF3272/5272 Side #23 Bruk av guider Mange varianter (opplæringer, hjelp, mikroportaler, wizards, configurators). Kan være fokusert mot et spesifikt publikum, en oppgave, eller et emne. Primært rettet mot nye brukere, eller for å forenkle navigasjonen gjennom en vanskelig oppgave. Som regel lineær navigasjonsstruktur. INF3272/5272 Side #24 11

12 Guide Guidede turer Lær om bruken av nettstedet (skritt for skritt) Hjelp Ofte Besvarte Spørsmål Personaliser startsiden (wizard) INF3272/5272 Side #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) INF3272/5272 Side #26 12

13 Drupal modules for guided tours: Guided Tours - Gives content creators the ability to build tours on their sites which allow users to better understand complex workflows on the site and be guided through those workflows. You can build tours leading the user through multiple different pages with multiple tooltips on one page/step. Guidance - (?) Guidance gives you the ability to create link lists for users they should walk through. For example: Site tour: links with the most important website pages. Instruction guide: step-by-step style guide where links pointing pages users have to follow. Drupal module usage guide: steps in a Drupal site for configuring something. Tutorials - (?) This one allows you to embed help videos,etc. INF3272/5272 Side #27 Wizard A software wizard or is a navigation tool type that presents a user with a sequence of dialog boxes that lead the user through a series of well-defined steps. Tasks that are complex, infrequently performed, or unfamiliar may be easier to perform using a wizard. INF3272/5272 Side #28 13

14 Configurator (type Wizard) INF3272/5272 Side #29 Terminilogi om nettsider Hjemmeside: Dette er startsiden eller velkomstsiden for et nettsted. Den vil som regel være den siden vises dersom kun domenenavnet til et nettsted skrives inn i nettleserens adressefelt. Landingsside: Siden en bruker som klikker på en ekstern lenke «lander» på. Særlig om målet for en annonselenke. For trafikk som kommer fra søkemotorer (Google et al.) er hver side en potensiell landingsside. Portalside: En side som er optimalisert for å bli rangert høyt av en spesifikk søkemotor. INF3272/5272 Side #30 14

15 Kontekst er viktig Sørg for at samtlige sider har tilstrekkelig med kontekst til å stå alene (alle sider kan være landingssuder). Logo. Grafisk identitet. Sørg for at brukeren alltid vet hvor han/hun er (seksjon, nivå, etc.) Sørg for at alle lenker er så deskriptive at det framgår hvor de fører. Marker gjerne eksterne lenker særskilt. INF3272/5272 Side #31 «Avansert» navigasjon Tilpasset navigasjon basert på brukeranalyse: rolle, alder, demografi, kjøpshistorikk (jf. Amazon.com). Brukervalgt navigasjon: tilby et grensesnitt der brukerne selv velger blokker/paneler som skal vises på prioriterte sider (forsiden, min side, el.l.). Sosial navigasjon: mest populær akkurat nå, de som kjøpte x kjøpte også y, tagskyer. INF3272/5272 Side #32 15

16 Tagsky (kjedelig, stabilt) (mer fancy grafikk, men ikke helt stabilt). INF3272/5272 Side #33 Sosial navigasjon: Reddit INF3272/5272 Side #34 16

17 Sosial navigasjon: Facebook Facebook har implementert en svært avansert algoritme for sosial navigasjonn som bestemmer hva du får se på når du besøker Facebook. «Liker», tid og antall klikk. Geolokasjon (hvor du er i verden) ++ INF3272/5272 Side #35 17