Länkar och navigering

Transkript

1 Föreläsning i webbdesign Länkar och navigering Rune Körnefors Medieteknik Rune Körnefors rune.kornefors@lnu.se

2 Hypertext Hyper [grekiska] över Hypertext Går över textens sekvengella flöde Referens Myntades av Ted Nelson 1963 Ted Nelson Länk i HTML <a href="url">text</a> ankare desgnagon 2

3 Navigering Ur Bra Böckers Lexikon: navigera, bestämma kurs och posi>on >ll sjöss, i lu@en 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. Alltså: Var är jag? och hur kommer jag dit jag vill? InformaGonsarkitektur: Navigering i hyperrymden (hyperspace, Nielsen 1990) Förfly`ning i informagonsmängden Nielsen, J. (1990) HyperText & HyperMedia, Academic Press 3

4 Två former av förflylning Orientera sig, bläddra runt (eng. browse) Förfly`a sig på måfå, surfa Navigera Målmedveten förfly`ning 4

5 Jämför med verkligheten Hur gör man då man förfly`ar sig Gll en plats, kommer Gll en plats, G`ar i en bok, etc.? Hur gör man då man kommer dit första gången? Hur gör man då man redan känner Gll platsen, boken, etc.? Exempel: En bok Ny bok: snabbläddra - skaffa sig en uppfa`ning om innehåll, omfa`ning och organisagon Van vid boken: innehållsförteckning, index, kapitelrubriker, sidnummer, Åker tunnelbana Ny resenär: stadskarta och tunnelbanekarta Bestämmer plats: se namn på väggarna, lyssna på utrop av hållplatser Van resenär: följer färgmarkering, går där man brukar gå Kommer Gll campus Ny: orienteringstavlor, fråga ener vägen Van: gå dit man brukar gå, husbenämningar och salsnummer, 5

6 Lost in hyperspace Går in på en webbplats" Klickar på ett val i en meny" Klickar på ett val i en annan meny" Klickar på en länk i texten" Klickar på en länk i texten" Klickar på en länk i texten" Klickar på ett val i en meny" Var är jag?! Vad gör jag här?! Hur har jag kommit hit?! Hur kommer jag tillbaks?! Varför är jag här?! Har jag missat något?!?! Nielsen, J. (1990) HyperText & HyperMedia, Academic Press 6

7 Från bild3 Navigering: var är jag? och hur kommer jag dit jag vill?! Lost in hyperspace Exempel på problem: Ser endast en sida i taget Var befinner man sig, omfa`ning på materialet,? Kan komma in mi` i strukturen Hoppar man bakåt, framåt, djupare i strukturen,? Vet inte vad länken ger Djupare förklaring, associagon, ny sida i samma avdelning, en annan avdelning,? Vet inte om och i så fall hur vikgg länken är Behöver man gå dit för a` förstå resten, eller kan man gå vidare ändå,? Hur komma Gllbaks Upp genom strukturen? Till en sida man varit på Gdigare? Hur komma framåt Till den informagon man söker? Finns den informagon man söker på webbplatsen? Var är jag?! Vad gör jag här?! Hur har jag kommit hit?! Hur kommer jag tillbaks?! Varför är jag här?! Har jag missat något?!?! 7

8 Från bild3 Navigering: var är jag? och hur kommer jag dit jag vill?! Lost in hyperspace Exempel på stöd: Söksystem Fritextsökning Webbkarta (site map) / strukturdiagram / innehållsförteckning Index / katalog Lä` kunna förfly`a sig mellan huvudavdelningar och underavdelningar Global och lokal navigering Back- track / Historik Lä` och naturligt a` följa vägen Gllbaka eller uppåt i strukturen "Brödsmulor" (bread crumbs) Landmärken Fasta: t.ex. startsida, innehållsförteckning Egna: t.ex. bokmärken Guide För a` få en snabb orientering Metafor Liknelse för a` lä`are förstå struktur och navigering Konsekvent i beskrivning av struktur och navigering... Var är jag?! Vad gör jag här?! Hur har jag kommit hit?! Hur kommer jag tillbaks?! Varför är jag här?! Har jag missat något?!?! 8

9 Naviga>onssystem Global navigering Navigering mellan webbplatsens avdelningar Finns hela Gden Gllgänglig Lokal navigering Navigering inom en avdelning eller sida Kontextuell navigering Inbäddade länkar Problem: Svårt a` veta vilken typ av info man får? Rosenfeld, L. & Morville, P. (2007) Informa>on Architecture for the World Wide Web, 3rd edi>on, O'Reilley, s.113f 9

10 Exempel Sökruta" Webbplats för kursen Webbdesign medieteknik.lnu.se/1me101 Global navigering" Lokal navigering" Var är jag? Visas av: Fönstrets Gtelrad, webbplatsens rubrik, sidans rubrik, logo i sidfoten Markerade knappar i navigeringsmenyerna Hur kommer jag dit jag vill? Navigering sker med: Global navigering (de orange knapparna ) ligger kvar hela Gden Rubriker på länkar i global/lokal navigering stämmer med rubriker på sidorna Kontextuell navigering på en del sidor (t.ex. Gll föreläsningar, laboragoner och uppginer i schemat) Länkar utanför den egna webbplatsen öppnas i e` ny` fönster Snabbguide ( mikroportal ) med genvägar Gll föreläsningar, laboragoner och uppginer på startsidan Fritextsökning 10

11 Fler exempel Studera t.ex. Arbetsmiljöverket h`p:// Var är jag? Visas av: Sidans Gtel i fönstrets Gtelrad och logo på sidan Rubriker på sidan, även rubriker (länkar) Gll överliggande sidor ("brödsmulor") Färgmarkering i navigeringsmenyn Hur kommer jag dit jag vill? Navigering sker med: Global navigeringsmeny som finns kvar på alla sidor Lokal navigeringsmeny inom avdelningarna» Konsekvent uwormad i samma sgl på alla sidor Webbkarta som visar struktur och innehåll» Länkar Gll sidorna Symboler (ikoner) för länkar Gll temasidor Kontextuell navigering på en del sidor SökfunkGon med sökning avgränsad Gll webbplatsen 11

12 E>keLer Val i navigeringssystem Länkar i en navigeringsmeny för a` snabbt komma Gll olika avdelningar på webbplatsen Ger samgdigt en översikt av avdelningarna Kontextuella länkar (inbäddade länkar) EGke`en utgör en del av texten. Trots den omgivande texten kan det vara svårt a` veta vad länken ger. På campus finns Teleborgs slott i en vacker park." Får man en bild på slottet, en sida som beskriver slottet, en karta över campus där slottet är markerat, eller något annat?" På campus finns Teleborgs slott (visa bild) i en vacker park." Här förstår man att man får en bild på slottet." 12

13 E>keLer Rubriker Avdelar informagonsmängden (texten) och beskriver den text som kommer ener rubriken. 13

14 AL välja e>keler EGke`er väljs anpassade Gll innehåll, målgrupp och omgivning Context" Lä`are hi`a bra egke`er, om omfa`ningen av innehåll, målgrupp och omgivning ej är för stor En bred målgrupp => svårare hi`a egke`er som tolkas lika av alla Content" Users" Från föreläsning 2 Utgå från: användarnas kunskap, språk, etc. vad som är brukligt i omgivningen, liknande webbplatser innehållsanalys, ämneskunniga, ordlistor 14

15 Ikoner Bilder / symboler som egke` (se Arbetsmiljöverkets webbplats) Används främst för länkar i navigeringssystem Fördelar EsteGskt Framträder tydligt på sidan (särskilt om innehållet främst består av text) Tar liten plats Nackdelar Kan vara svåra a` förstå, svårt hi`a bra bilder som tolkas lika av alla i målgruppen Användaren kan behöva lära sig betydelsen 15

16 EGke`er (rubriker och namn på länkar) SubstanGv = innehåll Verb = funkgon/uppgin Konsekvent uwormning Samma egke` ger samma länk Exempel: En kontextuell länk med rubriken W3C går Gll webbplatsen för World Wide Web ConsorGum. Används samma rubrik igen för en annan länk, ska man komma Gll samma sida. Metafor för struktur och navigering Anpassad Gll målgrupp Konsekvent tolkning 16

17 Utny`ja vad folk är vana vid UtnyLja inbyggt stöd i webbläsarna Några exempel Färg på länkar Användaren kan själv ställa in färg i inställningarna Gll webbläsaren Byt ej färg, om det ej är mogverat Tillbaka- knapp Vad betyder en Gllbaka - länk på en sida? Ska ej användas för en länk uppåt i strukturen Använd istället en egke` som talar om vart man går, t.ex. Startsidan Webbadress i statusraden Ersä` ej med annan text (t.ex. m.h.a. JavaScript) Filnamnet bör ge en indikagon av innehållet Titel i fönstrets Gtelrad (<Gtle>- taggen) bör beskriva sidans innehåll 17

18 Exempel Länkar i HTML Uppdelning i avdelningar med <div> <html>" <head>" <title>min" </head>" <body>" index.htm" 18