Webbteknik Användarcentrerad design Navigering Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se
"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." Navigering (Bra Böckers Lexikon) Nivigering: Var är jag? och hur kommer jag dit jag vill? InformaQonsarkitektur: Navigering i hyperrymden (hyperspace, Nielsen 1990) FörflyVning i informaqonsmängden Nielsen, J. (1990) HyperText & HyperMedia, Academic Press 2
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 Jämför med en bok: Global navigering: Kapitel (nummer eller rubriker) Lokal navigering: Delkapitel, enskilda sidor Kontextuell navigering: Hänvisning Qll figur, 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 Rosenfeld, L. & Morville, P. (2007) Informa?on Architecture for the World Wide Web, 3rd edi?on, O'Reilley, s.122f 3
Lost in hyperspace Exempel på problem: Ser endast en sida i taget Var befinner 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? 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?? Nielsen, J. (1990) HyperText & HyperMedia, Academic Press 4
Lost in hyperspace Exempel på stöd: LäV kunna förflyva 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 finns Teleborgs slov 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? På campus finns Teleborgs slov (visa bild) i en vacker park. Här förstår man av man får en bild på slovet. 6
Exmpel på eqkever Titel på sidan Rubriker i texten Namn på länkar i global och lokal navigering Namn på andra länkar AR välja e?kerer 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 7 Var konsekvent SubstanQv = innehåll Verb = funkqon/uppgip
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 Första sidan Ingång Schema Uppgiper 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