Projektrapport Interaktionsdesign - Chalmers tekniska högskola

Projektrapport Interaktionsdesign
- Webbläsare för små fönster
Anki Carlsson (it1caan@ituniv.se)
Matts Larsson (it1lama@ituniv.se)
Cecilia Rittsjö (it1rice@ituniv.se)
Johan Thoresson (it1thjo@ituniv.se)
IT-universitetet i Göteborg
Box 8718
402 75 Göteborg
Projektarbete på programmet för MDI-interaktionsdesign
under höstterminen 2001
Handledare: Lars-Erik Holmquist

Sammanfattning
Nya former av informationshantering konkurrerar nu med persondatorn om användarens
gunst. Tekniska landvinningar skapar möjligheter för utvecklandet av handdatorer, som
med sin litenhet erbjuder en annan möjlighet till mobilitet. Denna litenhet skapar dock nya
utmaningar för interaktionsdesignern med flera, i det att gränssnittet har klara
begränsningar vad den klarar att representera. Föreliggande arbete fokuserar på att söka nya
sätt att på en liten skärm representera information förmedlad via Internet. En webbläsare
har utarbetats där den utmärkande egenskapen är den nya Navigeringslinjen. En prototyp
har tagits fram för att göra det möjligt att demonstrera och användbarhetstesta designidén.
Rapporten beskriver arbetets teoretiska grund samt de olika processer som legat till grund
för utvecklandet av prototypen, i form av designarbete, användbarhetstester och
implementering.
i

Innehållsförteckning
1 Introduktion ........................................................................................................... 1
2 Bakgrund ............................................................................................................... 2
2.1 Relaterade arbeten ......................................................................................... 3
2.1.1 Teorier om sökstrategier........................................................................ 3
2.1.2 Liknande interaktionsvisualiseringar..................................................... 3
3 Problemet............................................................................................................... 5
3.1 Problemavgränsning ...................................................................................... 5
3.2 Förväntade resultat ........................................................................................ 5
4 Metod..................................................................................................................... 6
4.1 Möjliga metoder ............................................................................................ 6
4.2 Vald metod .................................................................................................... 6
5 Material.................................................................................................................. 8
5.1 Tidiga idéer.................................................................................................... 8
5.2 Webbläsaren ................................................................................................ 10
5.3 Navigationsfunktioner ................................................................................. 11
5.4 Navigeringslinjen......................................................................................... 11
5.4.1 Färger................................................................................................... 11
5.4.2 Symboler.............................................................................................. 11
5.5 Övriga funktioner ........................................................................................ 12
5.6 Begränsningar hos systemet ........................................................................ 12
5.6.1 Användarens förståelsemodell............................................................. 12
6 Genomförande ..................................................................................................... 12
6.1 Användartester............................................................................................. 12
6.2 Användningsscenario................................................................................... 13
6.3 Implementering............................................................................................ 16
7 Resultat ................................................................................................................ 16
8 Diskussion ........................................................................................................... 17
9 Framtida arbeten .................................................................................................. 17
9.1 Framtida utvecklingsmöjligheter................................................................. 17
9.1.1 Fysiskt sökande.................................................................................... 18
ii

1 Introduktion
Allt fler använder idag handhållna datorer som en interaktiv kalender men användningsområdet
utvidgas i takt med att utveckling sker av både hårdvara och mjukvara.
Ett ökat intresse för handdatorerna kan till exempel ses hos företag som genom
att installera och knyta handdatorerna till trådlösa nätverk ser nya möjligheter att
hantera informationsflödet inom företaget. Den anställde kan då nås med uppdaterad
information varhelst hon är på företaget, och i viss utsträckning även när hon är på
resa.
Ett problem med den nya tekniken är dock att den ställer nya krav på hur
informationsvisualisering kan ske. Under de år persondatorn har funnits har den gjort
sig tongivande på hur information visualiseras på skärm. Dessa riktlinjer är inte alltid
överförbara på handdatorns begränsade skärmutrymme, utan kräver att dessa används
på ett nytt sätt. De språk varmed informationen kodas och förmedlas, till exempel
HTML och Java, skapar inte i sig problemen vid visualiseringen, utan problemen uppstår
på grund av skillnaden i skärmens storlek och dess upplösning. En
normalanvändare av en persondator kan idag dag sägas ha tillgång till en skärm med
storleken 17” och upplösning 1024 x 768 pixlar. En handdator, till exempel Compaqs
IPAQ 3630, har normalt en skärm med storleken 2.26" x 3.02" och en upplösning på
240 x 320 pixlar.
Det är ännu så att det är persondatorn som sätter standarden för hur webbsidor
utformas. Ett problem blir då att överföra den rumsliga informationen till en för
användaren fungerande förståelsemodell som kan implementeras i en handdator.
Oavsett om informationen skall presenteras på ett liknande sätt i handdatorn som på
persondatorn, eller på ett nytt sätt, kvarstår problemet hur en större
informationsmängd skall kunna presenteras på ett sätt som ger användaren möjlighet
att ha kontroll över hela informationsmängden.
1

2 Bakgrund
Behovet att studera hur informationsvisualisering kan ske på mindre skärmar har på
senare tid aktualiserats genom tillkomsten av handdatorn och dess ökade popularitet
de senaste åren. En handdator kan ses som ett avancerat, elektroniskt fickminne. De
första handdatorerna gjorde det möjligt att hantera sin agenda, sitt adressregister, och
sina kom-ihåg-lappar elektroniskt. På senare tid har handdatorn fått ökad
funktionalitet, mycket på grund av möjligheten att på olika sätt ansluta till Internet.
Handdatorn har därför kompletterats med olika applikationer, till exempel
webbläsare, e-postprogram samt i vissa fall mobiltelefon. Tidigare fick användaren
ansluta handdatorn till sin persondator med hjälp av en kabel för att kunna överföra
data, men nu kan detta även ske trådlöst antingen genom GSM-systemet eller genom
att ansluta till ett trådlöst nätverk, LAN, med hjälp av ett nätverkskort med mera.
Handdatorn består vanligtvis av en tryckkänslig skärm, samt ett antal knappar.
Handdatorn manipuleras med en medföljande pennliknande plaststav (vanligen kallad
vid sitt engelska namn, ”stylus”) med vilken man kan skriva och ”tappa”, d.v.s.
klicka, direkt på skärmen. Gränssnittet bygger alltså på en direktmanipulerande
interaktionsform, vanlig vid andra grafiska gränssnitt, till exempel Windows-,
Macintoshmiljöerna med flera. Det förekommer även att handdatorer har knappar, för
effektiv åtkomst av vissa vanliga program eller funktioner, samt i vissa fall även ett så
kallat skrollhjul, varmed användaren kan hantera långa, sammanhängande
datamängder.
Mobiliteten handdatorn erbjuder torde vara en starkt bidragande orsak till den ökade
populariteten. En jämförelse med det stora genomslaget för mobiltelefonen visar hur
mycket användaren uppskattar möjligheten att hantera sin kommunikation mobilt.
Med en vikt på 170 g och måtten 130*83*16 mm (Compaq iPAQ 3660) kan
användaren ha med sig och hantera sin information snart sagt överallt. Beroende på
hur väl de nya teknikerna för mobil kommunikation, GPRS samt 3G, tas emot och
tillåts utvecklas kan det antas att handdatorn kan utvecklas ytterligare, och då främst
inom områdena kommunikation och informationsöverföring. Mobiliteten har dock ett
pris, dels i form av vilken prestanda som kan inrymmas i handdatorn, samt vilken
prestanda som kan erbjudas användaren vid interaktionen. I och med införandet av
färgskärmen har batteriet visa sig vara en svag punkt i kedjan. Vidare har
implementeringen av mer avancerade funktioner och applikationer visat på svagheter
hos processorns kapacitet. Vissa program går helt enkelt får långsamt. Ett tredje
problem är storleken och upplösningen på skärmen som har en stor betydelse för hur
interaktionen med handdatorn sker. Som tidigare nämnts har handdators (till exempel
Compaq iPAQ H3635) skärm formatet 2.26" x 3.02" med en upplösning på 240 x 320
pixlar, vilket är klart sämre än vad persondatorn kan erbjuda. Här är problemet att
erbjuda användaren en korrekt förståelsemodell av informationsinnehållet, trots de
begränsade tekniska möjligheterna. Andra problem som kan uppstå vid mobil
interaktion är en skiftande omgivning (Björk et al, 2000). En användare kan tänkas
vilja använda sin handdator i det mest skilda kontexter, vilket ställer höga krav på
stöd till användaren vid interaktionen. Utvecklingen av de ergonomiska aspekterna
hos persondatorn kan i jämförelse antas vara mer konsekvent och homogen, då
huvuddelen av interaktionen med persondatorn sker i kontorsmiljö (även om skärmar
även är vanliga i till exempel fabriks- och sjukvårdsmiljöer). Ett exempel på hur
omgivningen kan skifta under interaktionen med handdatorn kan vara en användare
2

som använder den under en bussresa (Björk et al, 2000). Ljusförhållandena kan skifta
avsevärt, bussens rörelser gör det svårt för användaren att hålla handdatorn still,
kanske måste hon hålla sig i med en hand vilket enbart lämnar en hand fri för att
manipulera handdatorn. Detta utgör basen för de krav som ställs vid utvecklandet av
en väl fungerande handdator.
2.1 Relaterade arbeten
Uppkomsten av den första handdatorn och mobiltelefonen med sin begränsade display
aktualiserade behovet av nya sätt att hantera visuell information på en begränsad yta
samt att nå ökad förståelse om hur människan kan hantera detta. Mängden arbeten på
området visualisering på små skärmar är fortfarande begränsat i jämförelse med den
mängd arbeten som gjorts på stora skärmar, främst därför att problemet är tämligen
nytt.
2.1.1 Teorier om sökstrategier
Ett antal arbeten har behandlat frågan hur människan söker sig fram i en
informationsmängd. De flesta har sin utgångspunkt i stora skärmar. Marchionini
(1995) menar att en användare som söker information använder olika informella,
heuristikliknande strategier och att detta sökande är starkt beroende av miljön
informationen befinner sig i. Marchionini utvecklar begreppet informationssökning
och menar att det består av fyra olika strategier att skilja mellan: skanna, observera,
navigera samt övervaka. Skillnaden är graden av stöd och ledning användaren får av
systemet.
Vad gäller navigering på Internet har Nielsen (1997, i Nykvist 2001) angett fem
förslag:
1. Varje sida skall ha en identifierare, för att kontexten skall framgå för
användaren.
2. De sidor som är av största vikt för användaren skall alltid vara möjliga att nå
genom länkar från övriga sidor.
3. Informationshierarkins struktur skall framställas tydligt.
4. De länkar som har besökts skall ha en annan färg än icke-besökta länkar.
5. En karta skall visa de relevanta nivåerna i informationsstrukturen samt
relationen mellan dessa.
Flera av dessa förslag äger sin relevans även då de överförs till en mindre skärm.
Punkt ett och fyra är relevanta då de kan spara användaren från en kognitiv
ansträngning, alternativt att hon måste utföra onödiga moment för att få denna
information. Med punkt tre och fem avser Nielsen en hierarki uppbyggd på en
hemsida, bestående av flera sammanlänkande sidor. Förslagen har dock i föreliggande
arbete förts över att gälla på ett något annorlunda sätt på en liten skärm. Här används
förslagen för att underlätta för användaren att finna relevanta nivåer på en sida. Sidans
struktur och informationsnivåer framhävs med hjälp av Navigeringslinjen (se avsnitt
5.4.2 nedan).
2.1.2 Liknande interaktionsvisualiseringar
Flera konkreta arbeten har studerat olika möjligheter att hantera
informationsvisualisering på en liten skärm. Ett arbete som angriper de problem
3

användaren har då hon i Marchioninis (1995) mening skannar en informationsmängd,
alltså då hon befinner sig i det läget att hon saknar en mental bild över informationens
struktur, är Björks (2000) Hierarchical flip zooming. Med denna avser Björk att
möjliggöra för användaren att bibehålla kontroll över informationsmängdens struktur,
kontexten, samtidigt som hon kan se detaljer (en förstoring till detaljnivå är
nödvändig för att överhuvudtaget kunna få en sådan storlek på exempelvis en text att
den går att läsa).
Ett annat sätt att tackla problemet med informationsvisualisering på liten skärm är att
själv på ett mer handgripligt sätt ta kontroll över hur webbsidan skall se ut.
Buyukkokten et al (2000) presenterar ett försök att frångå den gängse uppfattningen
om hur en webbsida skall vara uppbyggd. Deras arbete går ut på att med hjälp av en
http proxyserver först ta in den aktuella HTML-sidan, för att sedan dynamiskt sortera
ut den information som efter vissa kriterier kan tänkas vara av intresse för
användaren. De ord som har valts ut presenteras sedan i rubrikform. Problemet är att
denna tjänst måste tillhandahållas användaren, och begränsar därför möjligheterna för
användaren att själv välja Internetleverantör. Vidare beskriver Smith et al ()
svårigheterna med arbetet runt den textbaserade WAP-tekniken, som i huvudsak är
avsedd att användas på mobiltelefonens begränsade display. Ett stort problem är att
den automatiska överföringen från HTML till WML ofta lämnar mycket i övrigt att
önska. Översättning skapar sidor som inte är användbara.
4

3 Problemet
Föreliggande arbete fokuserar på de problem som uppstår då det gäller att stödja
användaren då hon med en handdator (eller motsvarande liten skärm) navigerar på en
webbsida. Mer precist, ett stöd för användaren att ha ett begrepp om helheten
samtidigt som hon endast ser en del av helheten.
3.1 Problemavgränsning
Arbetet syftar till att framställa en första prototyp av en webbläsare med ett nytt och
utökat stöd för användaren att skapa sig en översikt över informationsmängden.
Avsikten med prototypen är att möjliggöra användartester där det kan prövas vid
navigering på en webbsida huruvida fokuserad sökning sker lika effektivt som vid
användandet av en persondator. Vidare kan en jämförelse göras mellan den mentala
modell en användare av prototypen respektive en användare av en persondator gör sig
av samma hemsida, representerad i respektive medium.
3.2 Förväntade resultat
En fullt fungerande prototyp, implementerad på en handdator, som kan användas vid
användbarhetstestning.
5

4 Metod
Ett sätt att företa en designutveckling är genom en iterativ process, med ett starkt
inslag av användarmedverkan. Fördelarna med detta angreppssätt är att på ett tidigt
stadium få in användarens kunskaper i designen, både vad gäller den konkreta
interaktionen samt den kontext användandet sker i. Vidare kan dyrbara misstag
förhindras genom att designerns överseenden och misstag snabbt kan fångas upp och
elimineras. Ett banalt överseende med svåra konsekvenser är till exempel en
högerhänt designer som inte tänker på att produkten även måste passa en vänsterhänt
användare.
4.1 Möjliga metoder
Det finns ett antal olika metoder som innebär olika grad av användarmedverkan. Fyra
av dem har beaktas som möjliga metoder. En metod att få kunskap om användaren
utan att direkt involvera användaren är en så kallad teoribaserad design. Här utnyttjas
den vetenskapliga, ofta empiriska, kunskapen om människan. I detta sammanhang är
främst teorier om människan som kognitiv varelse av intresse. Fördelarna med denna
metod är att omfattningen på kunskapen är mycket stor och den kan därför erbjuda
möjligheten att få en bred bas då det gäller att skapa en bild av användaren.
Nackdelen är att denna metod kanske inte i sig är tillräcklig för att skapa en komplett
bild av användandet av handdatorn. Detta beror på att forskningsområdet är ganska
nytt, och det kan därför tänkas att nya, oidentifierade problem har uppstått. Det andra
alternativet, användbarhetsdesign, har, även om det inte är speciellt omfattande, ett
konkret inslag av användarmedverkan. Här involveras ett litet antal användare för att
göra det möjligt att stämma av tämligen ofta under arbetets gång hur olika designidéer
uppfattas. Denna metod är speciellt lämpad då produkten har en begränsad och väl
specificerad målgrupp. Den tredje metoden, kontextbaserad design, innebär att
designerna på ett mer omfattande sätt antar ett större perspektiv, vanligen genom att
observera eller intervjua användaren i användarsituationen. Metoden är som namnet
antyder, speciellt lämpad då produkten spelar en viktig roll i en större kontext, eller då
kontexten är okänd för designern. Den fjärde metoden, slutligen, är medverkande
design som samlar flera av de drag som utmärker de tidigare metoderna. Metoden
innebär att designerna bildar ett designteam tillsammans med användaren. Metoden,
som även kallas den skandinaviska designskolan, användes för första gången i
sammanband med att tidningstryckerierna i Norden skulle genomgå en stor
förändring, från den traditionella att sätta tidningen med blytyper, till dagens digitala
metoder. Fördelen med metoden är att användarens expertkunskap på området kan
förenas med designerns kunskaper, så att de kan lära av varandra och därigenom
formulera problemet och dess lösning. Nackdelen är att projektet måste vara av en
sådan omfattning, och ställa sådana krav på lösningen, att en rejäl tidsåtgång, vilket
denna metod förbrukar, kan accepteras.
4.2 Vald metod
Vid genomgången av de alternativa metoderna identifierades fyra olika faser metoden
skulle stödja. Det gäller:
1. Arbetets teoretiska grund
2. Designanalys
3. Användartestning
6

4. Implementering
För att kunna genomföra uppgiften ansågs en kombination av två tidigare nämnda
metoder vara lämplig, teoribaserad design samt användbarhetsdesign. Vad gäller den
första metoden kan denna vara lämplig i ett inledande skede för att få en uppfattning
om hur användaren fungerar som kognitiv varelse. Teorier om strategier hon använder
vid informationssökning, samt hur hon skapar sig mentala modeller över en
informationsmängd var av särskilt intresse.
För det andra ansågs det viktigt att tidigt involvera användare, då arbetets begränsade
tidsram inte tillät att arbetet gick åt fel håll. Alla misstag i designen måste fångas upp
tidigt, för att en tillfredsställande slutprodukten skulle kunna presenteras i tid. Sätten
att involvera användaren är som redan nämnts flera, och ett sätt att välja är att se till
hur användargruppen ser ut. I föreliggande arbete hade den tänkte användaren ganska
klara egenskaper, som utmärktes av vana att hantera en handdator samt vana vid
Internet. Härigenom ansågs användargruppen vara tämligen begränsad och väl
specificerad, varvid valet av den andra metoden blev användbarhetsdesign, då den på
acceptabel tid kan prestera viktiga kommentarer och förslag. Metoden innebär
vanligen att olika material presenteras för användaren som då kan kommentera dessa.
Det finns flera sätt att framställa detta material. Materialet kan vara allt från enkla
modeller till kompletta prototyper. Fördelen med den enkla modellen, till exempel en
pappersversion, är att den går snabbt att ta fram. Det är dock viktigt att ta hänsyn till
de svårigheter en människa har att föreställa sig en sak som inte finns konkret framför
henne. Det är speciellt ett problem då det gäller att förstå olika metoder för
informationsvisualisering. Här har den kompletta prototypen en klar fördel, i det att
användaren konkret kan interagera med prototypen och skapa sig en förståelsemodell
utifrån denna. En nackdel med att framställa kompletta prototyper är dock att
implementeringen kräver mycket tid och arbete. Valet blev att använda båda
varianterna i en kombination som kunde utnyttja den enkla modellens snabbhet med
den kompletta prototypens fördelar.
7

5 Material
5.1 Tidiga idéer
I den första brainstormningsprocessen kom följande olika förslag fram:
Figur 1
Figur 2
Figur 3
1. Blomman
Skissen presenterar en översikt i form av en blomma. Denna
estetiska uppdelning, där webbsidan delas in i en startpunkt och
kronblad med någon form av rubriker eller länknamn, är i
grunden en typ av fisheye 1 . Blomman kommer att kunna ses ur
olika vinklar med en alltid synlig startpunkt.
Problemet med denna lösning var svårigheten i att orientera sig
och skapa förståelse för sidans struktur.
2. Dokumenthyllan
Denna idé vill utnyttja ett perspektivtänkande. Webbsidan delas
upp i liggande sidor. Den sida som markerats syns till höger om
dokumenthyllan. Den markerade ikonen visar sidan i starkt
förminskat tillstånd.
Problemet var bland annat att lösningen tog upp för stor yta och
att det blev rörigt när webbsidan blev större.
3. Tak och golv
Detta sätt återger innehållet på sidan med hjälp av ikoner i över
och underkant på skärmen. Mellan dessa rader syns webbsidan.
Problemet med lösningen var platseffektiv men det blev svårt att
ge en bra översikt av länkar bilder och mängden text. Kopplingen
är inte klar mellan vilken ikon som representerar vilken del av
sidan. Lösningen saknar knappar och andra hjälpmedel för
navigeringen.
1 Se Sarkar & Brown (1994) Communications of the ACM. för en beskrivning av begreppet fisheye.
8

Figur 4
4. Horisontell
Sidan delas upp i mindre delar som löper horisontellt över
skärmytan. Rubriker och länkar markeras tydligt.
Fisheyefunktionen förskjuter sidindelningarna uppåt och nedåt.
Problemet är att utrymmet för den markerade delen av sidan blir
liten. Skärmytan utnyttjas inte effektivt. Det uppstår problem om
webbsidan är större, lösningen ser då ”grötig” ut.
5. Filter
Olika skikt används, informationen ligger i lager ovanpå
varandra. På detta sätt visas rubriker, bilder och länkar i
det ”främre” fönstret med själva webbsidan starkt nedtonad
i bakgrunden. Vid klickning på en rubrik/bild/länk i
det främre fönstret kommer användaren till motsvarande
ställe i texten.
Problemet: Skissen på denna variant visar ett försök att
utnyttja skärmfönstret på längden genom att lägga PDA:n ner. Detta skulle inte
fungera eftersom det blir fysiskt svårt att på ett naturligt sätt använda tangenterna på
PDA:n. Denna idé var platseffektiv men det blir jobbigt att klicka fram och tillbaka
genom att man tappar översikten så fort man går in i texten.
Figur 6
Figur 7
Figur 5
6. Slalombacken
En variant av grafisk lösning var att se webbsidan som en
slalombacke och representera länkarna med flaggor. En ”vit”
flagga riktad åt vänster betyder besökt länk och en ”svart” flagga
riktad åt höger betyder obesökt länk.
Problemet med denna roliga och kreativa lösning var att
visualisering av rubriker och bilder också behövs. Men att återge
information med hjälp av bilder banade ändå väg för den slutliga
lösning som presenteras i denna rapport.
7. Skalor
Denna lösning innehåller två orienteringslinjer. Den ena skalan
visar en översikt av texten och den andra visar hur stor del av
sidan i procent som betraktas för tillfället.
Översiktslinjen i denna modell ledde vidare till den slutliga
navigeringslinjen.
Problemet däremot var att de båda skalorna gjorde orienteringen
på sidan förvirrande. Därför valdes den övre skalindelningen bort
i den slutliga lösningen.
9

5.2 Webbläsaren
Webbläsarens design består av följande punkter:
Figur 9
Ett förslag som kombinerar en kontextdel där
innehållet är urskiljbart, med en detaljdel,
förkastades, då de ansågs ha allt för likartad
funktion. Denna designutformning ansågs inte
vara tillräckligt utrymmeseffektiv.
Figur 8
1. Webbsida
2. Navigationslinje
3. Navigeringsram
4. Adressfält/titelfönster
5. OK-knapp
6. Normalläge/översiktsläge
1. Webbsidan har rubriker, text, länkar och
bilder. Dessa är viktiga delar som motsvaras
av symboler på navigeringslinjen.
2. Navigeringslinjen är placerad längs
högerkanten, (alternativt i vänsterkant
beroende på användarens önskemål).
Navigeringslinjen har fisheyefunktion,
symbolerna utmed linjen förskjuts beroende
på var man placerar navigeringsramen.
3. Inom navigeringsramen förstorar
fisheyefunktionen symbolerna. Ramen är
den aktiva, flyttbara delen i webbläsaren.
4. Adressfältet ligger nere i basen på skärmen. Adressfältet skiftar och blir till ett
titelfönster, som visar webbsidans titel, när det inte är aktivt.
5. Med OK-knappen utförs sökningen efter webbadressen.
6. Med knappen Normalläge/översiktsläge skiftar användaren mellan denna första
bild och den översiktsbild som presenteras i användarscenariot (se Figur 15 nedan).
10

5.3 Navigationsfunktioner
Användaren kommer att kunna interagera med systemet både genom PDA:ns knappar
men även med en styler (penna). Det finns enbart två klickbara knappar på skärmen,
detta både för att spara utrymme men även för att göra ett enkelt gränssnitt (se Figur
9). Många knappar kan verka förvirrande och göra antalet val för många. De två
knapparna är en ok-knapp för att bekräfta en inskriven adress och en knapp som
skiftar mellan översiktsvyn och navigeringsvyn. Resten av navigeringen skall kunna
skötas med hjälp av PDA:ns inbyggda knappar. Det skall till exempel gå att bläddra
bakåt, framåt, upp och ned med hjälp av knapparna. Detta för att ge ett så stort
utrymme på skärmen som möjligt åt webbsidornas innehåll.
Stylern har naturligtvis en viktig funktion här. Den ska inte enbart användas för att
peka och dra utmed navigeringslinjen, eller klicka sig fram på länkar med. Vi ser
också att en snabb navigering kan göras genom att dra stylern horisontellt från höger
till vänster, eller tvärtom, och därmed kunna bläddra bakåt och framåt mellan olika
sidor.
5.4 Navigeringslinjen
5.4.1 Färger
Svårigheterna med att välja färger till designen är att de måste vara tillräckligt
kontrastrika för att vara lätta att skilja från varandra. Samtidigt får de inte stjäla alltför
mycket uppmärksamhet och därmed utgöra ett störande eller plottrigt intryck.
Kombinationen med färgerna grönt och rött har undvikits eftersom det kan innebära
ett problem för människor som är färgblinda.
Enligt traditionen har länkar en blå färg och när de är besökta färgen lila. Det fanns en
vinst i vinst i att behålla dessa färger på vår navigeringslinjen eftersom det gör det
möjligt att utgå från användarnas förkunskaper. För att inte ge ett alltför färgrikt
intryck gjordes bilder och rubriker svarta. Om en bild också är en länk behålles den
kvadratiska formen men ges den färgen blå.
5.4.2 Symboler
I webbläsaren markeras huvudrubriker på webbsidor med horisontella streck, som
korsar navigationslinjen. Obesökta länkar symboliseras av horisontella linjer på
vänster sida, besökta av linjer på höger sida. Bilder visualiseras med hjälp av
kvadrater. (Se Figur 10. Observera att skissen är en förstoring.).
Figur 10
Huvudrubriker (som ofta anges ”h1” i htmlkodningen),
anser vi vara viktiga. Genom dem kan man se var olika
större textavsnitt har sin början, och genom att se hur de
placeras på webbsidan kan man också få en god
överblick över hur informationen i texten fördelar sig.
De obesökta länkarna placeras på vänster sida om
navigationslinjen. Detta gör det lätt att se vilka länkar
som inte har klickats på, i jämförelse med besökta
11

länkar de som placerats till höger.
Det fanns en tanke om att göra bildsymbolerna i storlek utifrån hur stora bilderna
verkligen är på sidan. Men detta skulle göra högerkanten ännu plottrigare och det är
dessutom inte säkert att en större bild är viktigare än en mindre är det signifikant om
en bild är länkad eller inte. Detta löses genom att färgerna blå för länk och lila för
besökt länk. Då en bild även är en länk blir bildens representation både kvadratisk och
blå.
5.5 Övriga funktioner
I URL-fönstret visas titeln på den webbsida man för närvarande besöker när man inte
klickat i det. När man klickar i det kan man skriva in den adress dit man vill gå.
5.6 Begränsningar hos systemet
Utvecklingsarbetet har haft sin utgångspunkt utifrån vissa antaganden om hårdvara
och användare. Prototypen är anpassad för användande på en handdator med färgskärm
då det kan antas bli det helt dominerande alternativet då vissa tekniska problem
efterhand kan lösas, som till exempel att en handdator med färgskärm ställer högre
krav på batterikapacitet. Vidare kan det bli ett problem med riktigt stora webbsidor då
navigeringslinjen även med hjälp av fisheyeteknik kommer att tappa sin funktion att
ge en överblick om sidans omfattning. Det saknas även stöd för att återge till exempel
tabeller och frames.
5.6.1 Användarens förståelsemodell
Ett antagande har gjorts utifrån det mål användarna kan tänkas ha vid användandet av
webbläsaren. Flera scenarion är tänkbara där den ena kan vara att handdatorn används
för att söka en konkret information och ett annat ett mer ofokuserat sökande. De
symboler som används i navigeringslinjen har valts för att ge stöd åt denna form av
användande. Symbolerna motsvarar objekt som på en webbsida kan användas för att
skapa en bild över sidan och som kan hjälpa användaren förstå hur hon kan navigera
den.
6 Genomförande
6.1 Användartester
Användartesterna utfördes i två omgångar. Inledningsvis intervjuades två personer
genom att de fick betrakta enkla prototyper i form av skisser över designförslag.
Användarna uttryckte önskningar om möjligheter att gå framåt och bakåt. Det
påpekades också att det vore bra att titeln på hemsidan syntes så att det var lättare att
veta vilken webbsida som var aktuell. Designen som arbetades fram grundades delvis
på användarnas åsikter.
Andra omgången tester var fokuserade kring navigeringslinjen och för att se vad
användarna tyckte om dess utformning. Genom att göra ett enkelt klickschema i ett
webbgränsnitt kunde tester utföras huruvida användarna tyckte att navigeringslinjen
underlättade för dem att orientera sig på en hemsida av samma storlek som ett PDAfönster.
Prototypen är ett webbgränssnitt i samma storlek som ett PDA-fönster som
12

körs på en vanlig datorskärm. Testerna har inte utförts på en PDA. Syftet med dessa
tester var att studera hur testpersonerna interagerade med navigeringslinjen.
Intervjuer har gjorts med tre användare. De användare som har intervjuats är inte vana
att använda en PDA, däremot är två av dem vana att hantera Internet och en av dem är
mycket van att hantera Internet. Observationer utfördes medan användarna arbetade
igenom designen. Detta för att se om användarna intuitivt kunde se kopplingen mellan
navigeringslinjen och texten. Sedan ställdes av typen: vad tror du att den svarta linjen
representerar?
Två av användarna trodde att de svarta kvadraterna representerade rubriker eftersom
de var störst och syntes mest. Det blev diskussioner kring om det var så viktigt att
representera bilder på en hemsida. Förslag kom upp på att göra bildikonerna mindre
eller att representera dem med ett mer avvikande element, till exempel en stjärna. Ett
annat förslag var att behålla formen på bildikonen med att ändra dess färg till grått så
att den inte ger ett lika dominerande intryck. Användarna hade även problem med de
svarta horisontella linjerna högst upp och längst ned på navigeringslinjen eftersom de
hade svårt att skilja dem från rubriker. Den tredje användaren undersökte designen
under en längre tid och kunde se relationerna mellan bildikonerna och det de
representerade.
Efter ett tag instruerades användarna om vad de olika tecknen på navigeringslinjen
betydde. Sedan ställds frågor av typen: Hur tar du dig till den andra bilden? Detta
fungerade väldigt bra, efter att navigeringslinjens betydelse hade förklaras kunde
samtliga testpersoner använda den. Samtliga tyckte att den var smidig att använda.
Däremot rådde även diskussioner kring att man tydligare skall särskilja den från
webbsidan så att man inte tror att navigeringslinjen är någon slags dekoration. Kritik
som framkom var att det kan bli svårt att använda navigeringslinjen på stora hemsidor
eftersom det blir trångt mellan ikonerna på navigeringslinjen.
6.2 Användningsscenario
Här visas ett typexempel på användning där en person studerar en uppsättning
hemsidor. Scenariot bygger på de sidor som skall ska implementeras med vår prototyp
och har för avsikt att visa hur navigeringslinjen fungerar. Bilderna är tillverkade
bilder och ej skärmdumpar från det slutgiltiga programmet.
Figur 11
1. Användaren går in på hemsidan och får där
se en del av sidan och navigeringslinjen med
en grafisk översikt av sidan. Webbsidan
innehåller två rubriker och fyra länkar.
Användaren väljer att gå via en länk till
textsida 3 genom att klicka antingen på
länken på sidan eller på motsvarande
länkikon, den andra, på navigeringslinjen (se
Figur 11).
13

Figur 12
Figur 13
2. På testsida 3 finns en rubrik, en bild och en
länk som leder tillbaka till testsida 1.
Användaren följer den länken och återvänder
till testsida 1 genom att klicka i texten eller
på navigeringslinjen (se Figur 12).
3. När användaren nu återvänder till testsida
1 har ikonen som representerar länken till
testsida 3 blivit lila och flyttats till höger om
navigeringslinjen. Användaren väljer nu att
följa länken som leder till testsida 4 (se Figur
13).
14

Figur 14
Figur 15
4. Testsida 4 innehåller tre rubriker, två
länkar och en större textmassa. Eftersom man
en gång har följt en länk tillbaka till testsida 1
är nu den länken lilafärgad och på höger sida
om navigeringslinjen. Mängden text är större
än vad som får plats i fönstret och för att
kunna se hur stor textmassan är väljer
användaren att gå till översiktsläget. Detta
gör användaren genom att kicka på knappen
som ligger längst ner i fönstret bredvid urlraden
(se Figur 9, punkt 6 ovan).
5. Inne på översiktssidan ser användaren hela
sidan i förminskad form i kolumner.
Användaren klickar på den andra rubriken för
att komma längre ner på sidan. Då växlar
bilden över till navigeringsvyn med
navigeringslinjen med markören vid den
andra rubriken. Användaren ser att det finns
en länk som leder vidare till testsida 5 och
följer den.
15

Figur 16
6. Testsida 5 innehåller fyra rubriker, tre
bilder och tre länkar. Användaren kan
bläddra igenom sidan, använda
navigeringslinjen eller gå till översiktsläget
för att få en uppfattning om sidans innehåll.
Om användaren till exempel vill titta på den
bild som ligger längst ner på sidan så klickar
hon på motsvarande bild ikon som ligger
längst ner på navigeringslinjen.
6.3 Implementering
Slutligen implementerades en prototyp av en webbläsare som använde sig av
visualiseringstekniken. Prototypen implementerades i språket Java. Prototypen är
utvecklad i programmeringsmiljön Borland Jbuilder 5.
7 Resultat
Arbetet har utmynnat i ett nytt stöd för användare att navigera i en webbsida i ett litet
fönster. Den huvudsakliga designen utgörs av en navigeringslinje med bildikoner som
representerar rubriker, länkar och bilder på motsvarande webbsida.
Användartester har dels påverkat grundläggande design och dels utvärderat en
prototyp av den utarbetade designen. Utvärderingen resulterade i att användarna ej
intuitivt kunde använda navigeringslinjen men att det gick bra efter att de blivit
instruerade om hur den fungerade.
Implementeringen har resulterat i en fullt fungerande men begränsad prototyp av en
webbläsare som bygger på vår visualiseringsteknik. Prototypen inkluderar alla funktioner
(se 5.2 Webbläsaren) utom fisheyefunktionen och översiktsläget. Prototypen
fungerar i sin rätta miljö, det vill säga på handdatorer av typ Compaq iPAQ.
16

8 Diskussion
Användartesterna visar att funktionerna hos designen inte är intuitiv men däremot att
när en förklaring har skett så fungerar användandet. Genom att bifoga någon form av
handledning eller ändra designen genom att till exempel tona ner ikonen för bilder är
det möjligt att användningen blir lättare att förstå.
En fördel med designen är att det går att läsa en webbsida utan att använda
navigeringslinjen, det blir valfritt för användaren. Om en användare anser att det går
snabbare att bläddra nedåt på sidan som vanligt så är det fullt möjligt. En stor del av
skärmen ser ut som en vanlig webbsida vilket kan underlätta för användarna genom
att de kan använda sig av sin förförståelse om de är vana att använda Internet.
Ett problem med denna lösning är att den blir svåranvänd då informationsmängden på
en webbsida blir för stor. Trots att fisheye-teknik tillämpas förlorar navigeringslinjen
sin överblicksfunktion då den skall visa omfattande sidor.
Resultatet på användartesterna kan ha påverkats av det faktum att testerna ej skett på
en PDA och med användare som ej är vana att hantera en PDA. Det är möjligt att
vana användare hade haft lättare att se en koppling mellan navigeringslinjen och
texten.
Designen har anpassats efter att en PDA har en dålig upplösning vilket har hindrat
mer kreativa ikoner på naivgeringslinjen. Andra typer av ikoner kunde ha gjort det
lättare för användarna att till exempel identifiera ikonen för en bild.
Genom att kombinera teoribaserad design och användartester har resultatet rötter i
både tidigare forskning och nya idéer. Fungerat bra, vi har hämtat information från
flera olika håll vilket har gett en bred angreppspunkt.
Genom att återigen ta fasta på användarnas kommentarer och utveckla en ny prototyp
är det möjligt att användningen skulle gå bättre. Det behövs ett mycket större underlag
av användartester för att kunna dra några mer generella slutsatser.
Det skulle även vara bra att göra användartester på PDA-prototypen för att få en
användning i dess rätta miljö med rätt teknik. Det gick inte att utläsa användarnas
interaktion med en PDA i de tester som hittills har utförts.
9 Framtida arbeten
9.1 Framtida utvecklingsmöjligheter
Det finns många utvecklingsmöjligheter för en sådan här webbläsare. Här listas några
av dem:
1. Möjlighet att sätta ut bokmärken, att grafiskt märka ut favoritställen på
webbsidan. Användaren får möjlighet att själv välja vad som var extra
intressant på sidan lätt kunna återvända dit, om han eller hon vill.
17

2. Lägga in ankartaggar. Fördelarna med detta skulle vara att användaren lätt
kan använda sig av de redan existerande knapparna på PDA:n. Funktionen gör
det lättare att snabbt förflytta sig fram och tillbaka på en lång sida.
3. Att kunna välja bort navigeringslinjen för att på så sätt få större utrymme för
webbsidan.
4. Utveckla systemet så att det kan stödja större webbsidor, hantera frames,
tabeller, stylesheets m.m
9.1.1 Fysiskt sökande
Detta projekt har främst syftat till att visualisera information på en platt, liten skärm.
Men framtiden skulle kunna innebära att man blandar in många fler sinnen för att
underlätta i användarens informationssökning. Hörsel och känsel exempelvis.
Stylern behöver inte bara vara en stumt pekdon. Den skulle kunna låta/bli
varm/vibrera när användaren letar sig fram över navigeringslinjen. I boken den
obändiga söklusten (Jönsson 2000), beskriver lundaforskaren Bodil Jönsson just
vikten av det fysiska sökandet. Hon beskriver tresekundersregeln, som är ”den tid
man är beredd att vänta”. Om det tar längre tid än tre sekunder ”utgår man från att
något hängt upp sig, man börjar klicka en gång till… Det är denna känsla som gör en
del sökningar så evinnerligt långa, upplevelsemässigt.” Detta, menar Bodil Jönsson, är
alltså den känsla som användaren får, även om det faktiskt sker en visuell
återkoppling genom att exempelvis timglaset rör sig.
Det är intressant att tålamodet blir långt längre om samma användare ska söka upp ett
nummer i en vanlig telefonkatalog gjord i papper. ”För i blädderprocessen är det
kroppsliga hela tiden med.” Där får användaren inte bara en visuell återkoppling, fler
sinnen hjälper till i sökandet. Detta vore alltså en önskvärd utveckling av hela PDAsystemet
och vi tror att vår presenterade webbläsare skulle kunna användas på ett bra
sätt i ett sådant system.
18

Referenser
Björk, S., Redström, J., Ljungstrand, P. & Holmquist, L. E. (2000) POWERVIEW
Using information links and information views to navigate and visualize information
on small displays. Tillgänglig på Internet:
http://www.playresearch.com [Hämtad: 2001-10-25]
Björk, S. (2000) Hierarchical Flip Zooming: Enabling Parallel Exploration of Hierarchical
Visualizations. I: Proceedings of Advanced Visual Interfaces (AVI).
Tillgänglig på Internet: http://www.playresearch.com [Hämtad: 2001-10-25]
Buyukkokten, O., Molina, H. G., Paepcke, A., Winograd, T. (2000) Power browser:
Efficient browsing for PDAs. I: T. Turner, G. Szwillus, M. Czerwinski, F.
Paternò (Red:er), CHI 2000 (s. 430-438). Proceedings on human factors in
computing systems, 1-6 april, 2000, Haag, Holland.
Frick, O., Schmidt, A., Schröder, H., (2000) WAP – Designing for small user interfaces.
I: T. Turner, G. Szwillus, M. Czerwinski, F. Paternò (Red:er), CHI
2000 (s. 430-438). Proceedings on human factors in computing systems, 1-6
april, 2000, Haag, Holland.
Jönsson, B. & Rehnman, K.(2000) Den obändiga söklusten. Lund: Brombergs.
Marchionini, G. (1995) Information seeking in electronic environments. Cambridge:
University Press.
Nykvist, L. (2001) Finns det avvikelser med avseende på informationssökning för
stora displayer i jämförelse med små? Examensarbete vid Högskolan i
Skövde.