Webbteknik Användarcentrerad design – Navigering Rune Körnefors Medieteknik 1 © 2015 Rune Körnefors [email protected] "navigera, bestämma kurs och posi?on ?ll sjöss, i luCen eller i rymden. naviga(on (av la?nets navigare: segla), bestämning av en farkost posi?on vid vilken som helst ?dpunkt och bestämning av kursen ?ll des?na?onsorten…." (Bra Böckers Lexikon) Nivigering: Var är jag? och hur kommer jag dit jag vill? InformaQonsarkitektur: Navigering i hyperrymden (hyperspace, Nielsen 1990) FörﬂyVning i informaQonsmängden Nielsen, J. (1990) HyperText & HyperMedia, Academic Press 2 Navigering Naviga?onssystem Global navigering Navigering mellan webbplatsens avdelningar Finns hela Qden Qllgänglig Lokal navigering Navigering inom en avdelning eller sida Kontextuell navigering Inbäddade länkar Problem: svårt aV veta vad man får Rosenfeld, L. & Morville, P. (2007) Informa?on Architecture for the World Wide Web, 3rd edi?on, O'Reilley, s.122f 3 Jämför med en bok: Global navigering: Kapitel (nummer eller rubriker) Lokal navigering: Delkapitel, enskilda sidor Kontextuell navigering: Hänvisning Qll ﬁgur, annan sida, annan bok, etc. Jämför med hus på campus: Global navigering: Benämningar på hus Lokal navigering: Rumsnummer i huset Kontextuell navigering: "Beama" i Star Trek Lost in hyperspace Exempel på problem: Ser endast en sida i taget Var beﬁnner man sig, omfaVning på materialet, … ? Kan komma in miV i strukturen Hoppar man bakåt, framåt, djupare i strukturen, … ? Vet inte vad länken ger Djupare förklaring, associaQon, ny sida i samma avdelning, en annan avdelning, … ? Vet inte om och i så fall hur vikQg länken är Behöver man gå dit för aV förstå resten, eller kan man gå vidare ändå, … ? Hur komma "Qllbaks" Upp genom strukturen? Till en sida man varit på Qdigare? Hur komma "framåt" Till den informaQon man söker? Finns den informaQon man söker på webbplatsen? Nielsen, J. (1990) HyperText & HyperMedia, Academic Press 4 Var är jag? Vad gör jag här? Hur har jag kommit hit? Hur kommer jag ?llbaks? Varför är jag här? Har jag missat något? …? Lost in hyperspace Exempel på stöd: LäV kunna förﬂyVa sig mellan huvudavdelningar och underavdelningar Global och lokal navigering "Back-‐track" / Struktur LäV och naturligt aV följa vägen Qllbaka eller uppåt i strukturen "Brödsmulor" (bread crumbs) Webbplatskarta (site map) Översikt, orientering Söksystem Fritextsökning Guide För aV få en snabb orientering 5 Kontextuell navigering Kontextuella länkar (inbäddade länkar) EQkeVen utgör en del av texten. Trots den omgivande texten kan det vara svårt aV veta vad länken ger. På campus ﬁnns Teleborgs sloV i en vacker park. På campus ﬁnns Teleborgs sloV (visa bild) i en vacker park. Får man en bild på sloVet, en sida som beskriver sloVet, en karta över campus där sloVet är markerat, eller något annat? Här förstår man aV man får en bild på sloVet. 6 AR välja e?keRer Exmpel på eQkeVer Titel på sidan Rubriker i texten Namn på länkar i global och lokal navigering Namn på andra länkar Labels EQkeVer väljs anpassade Qll innehåll och målgrupp LäVare hiVa bra eQkeVer, om omfaVningen av innehåll, målgrupp ej är för stor En bred målgrupp à  svårare hiVa eQkeVer som tolkas lika av alla Utgå från: -‐  användarnas kunskap, språk, etc. -‐  vad som är brukligt i ämnesområdet, liknande webbplatser -‐  innehållsanalys, ämneskunniga, ordlistor Var konsekvent SubstanQv = innehåll Verb = funkQon/uppgip 7 Ikoner Bilder / symboler som eQkeV Används främst för länkar i navigeringssystem Fördelar EsteQskt Framträder tydligt på sidan (särskilt om innehållet främst består av text) Tar liten plats Nackdelar Kan vara svåra aV förstå, svårt hiVa bra bilder som tolkas lika av alla i målgruppen Användaren kan behöva lära sig betydelsen 8 Namn på sidor Namn på sidans innehåll Ingång Schema Uppgiper … Första sidan Hem Start Ingångssida, förstasida Svenska datatermgruppen. OrdlistearQkel 91: ingångssida, förstasida, hVp://www.datatermgruppen.se/index.php?opQon=com_content&view=arQcle&id=89&Itemid=91&obj=a91&uVr=startsida [2015-‐06-‐25] 9 Exempel på några webbplatser Några exempel hVp://www.skaVeverket.se hVp://www.av.se/ hVp://www.discshop.se/ hVp://www.nordea.se/ hVp://www.atlascopco.se hVps://www.coop.se/ 10