Projektrapport Interaktionsdesign - Chalmers tekniska högskola
Projektrapport Interaktionsdesign - Chalmers tekniska högskola
Projektrapport Interaktionsdesign - Chalmers tekniska högskola
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
<strong>Projektrapport</strong> <strong>Interaktionsdesign</strong><br />
- Webbläsare för små fönster<br />
Anki Carlsson (it1caan@ituniv.se)<br />
Matts Larsson (it1lama@ituniv.se)<br />
Cecilia Rittsjö (it1rice@ituniv.se)<br />
Johan Thoresson (it1thjo@ituniv.se)<br />
IT-universitetet i Göteborg<br />
Box 8718<br />
402 75 Göteborg<br />
Projektarbete på programmet för MDI-interaktionsdesign<br />
under höstterminen 2001<br />
Handledare: Lars-Erik Holmquist
Sammanfattning<br />
Nya former av informationshantering konkurrerar nu med persondatorn om användarens<br />
gunst. Tekniska landvinningar skapar möjligheter för utvecklandet av handdatorer, som<br />
med sin litenhet erbjuder en annan möjlighet till mobilitet. Denna litenhet skapar dock nya<br />
utmaningar för interaktionsdesignern med flera, i det att gränssnittet har klara<br />
begränsningar vad den klarar att representera. Föreliggande arbete fokuserar på att söka nya<br />
sätt att på en liten skärm representera information förmedlad via Internet. En webbläsare<br />
har utarbetats där den utmärkande egenskapen är den nya Navigeringslinjen. En prototyp<br />
har tagits fram för att göra det möjligt att demonstrera och användbarhetstesta designidén.<br />
Rapporten beskriver arbetets teoretiska grund samt de olika processer som legat till grund<br />
för utvecklandet av prototypen, i form av designarbete, användbarhetstester och<br />
implementering.<br />
i
Innehållsförteckning<br />
1 Introduktion ........................................................................................................... 1<br />
2 Bakgrund ............................................................................................................... 2<br />
2.1 Relaterade arbeten ......................................................................................... 3<br />
2.1.1 Teorier om sökstrategier........................................................................ 3<br />
2.1.2 Liknande interaktionsvisualiseringar..................................................... 3<br />
3 Problemet............................................................................................................... 5<br />
3.1 Problemavgränsning ...................................................................................... 5<br />
3.2 Förväntade resultat ........................................................................................ 5<br />
4 Metod..................................................................................................................... 6<br />
4.1 Möjliga metoder ............................................................................................ 6<br />
4.2 Vald metod .................................................................................................... 6<br />
5 Material.................................................................................................................. 8<br />
5.1 Tidiga idéer.................................................................................................... 8<br />
5.2 Webbläsaren ................................................................................................ 10<br />
5.3 Navigationsfunktioner ................................................................................. 11<br />
5.4 Navigeringslinjen......................................................................................... 11<br />
5.4.1 Färger................................................................................................... 11<br />
5.4.2 Symboler.............................................................................................. 11<br />
5.5 Övriga funktioner ........................................................................................ 12<br />
5.6 Begränsningar hos systemet ........................................................................ 12<br />
5.6.1 Användarens förståelsemodell............................................................. 12<br />
6 Genomförande ..................................................................................................... 12<br />
6.1 Användartester............................................................................................. 12<br />
6.2 Användningsscenario................................................................................... 13<br />
6.3 Implementering............................................................................................ 16<br />
7 Resultat ................................................................................................................ 16<br />
8 Diskussion ........................................................................................................... 17<br />
9 Framtida arbeten .................................................................................................. 17<br />
9.1 Framtida utvecklingsmöjligheter................................................................. 17<br />
9.1.1 Fysiskt sökande.................................................................................... 18<br />
ii
1 Introduktion<br />
Allt fler använder idag handhållna datorer som en interaktiv kalender men användningsområdet<br />
utvidgas i takt med att utveckling sker av både hårdvara och mjukvara.<br />
Ett ökat intresse för handdatorerna kan till exempel ses hos företag som genom<br />
att installera och knyta handdatorerna till trådlösa nätverk ser nya möjligheter att<br />
hantera informationsflödet inom företaget. Den anställde kan då nås med uppdaterad<br />
information varhelst hon är på företaget, och i viss utsträckning även när hon är på<br />
resa.<br />
Ett problem med den nya tekniken är dock att den ställer nya krav på hur<br />
informationsvisualisering kan ske. Under de år persondatorn har funnits har den gjort<br />
sig tongivande på hur information visualiseras på skärm. Dessa riktlinjer är inte alltid<br />
överförbara på handdatorns begränsade skärmutrymme, utan kräver att dessa används<br />
på ett nytt sätt. De språk varmed informationen kodas och förmedlas, till exempel<br />
HTML och Java, skapar inte i sig problemen vid visualiseringen, utan problemen uppstår<br />
på grund av skillnaden i skärmens storlek och dess upplösning. En<br />
normalanvändare av en persondator kan idag dag sägas ha tillgång till en skärm med<br />
storleken 17” och upplösning 1024 x 768 pixlar. En handdator, till exempel Compaqs<br />
IPAQ 3630, har normalt en skärm med storleken 2.26" x 3.02" och en upplösning på<br />
240 x 320 pixlar.<br />
Det är ännu så att det är persondatorn som sätter standarden för hur webbsidor<br />
utformas. Ett problem blir då att överföra den rumsliga informationen till en för<br />
användaren fungerande förståelsemodell som kan implementeras i en handdator.<br />
Oavsett om informationen skall presenteras på ett liknande sätt i handdatorn som på<br />
persondatorn, eller på ett nytt sätt, kvarstår problemet hur en större<br />
informationsmängd skall kunna presenteras på ett sätt som ger användaren möjlighet<br />
att ha kontroll över hela informationsmängden.<br />
1
2 Bakgrund<br />
Behovet att studera hur informationsvisualisering kan ske på mindre skärmar har på<br />
senare tid aktualiserats genom tillkomsten av handdatorn och dess ökade popularitet<br />
de senaste åren. En handdator kan ses som ett avancerat, elektroniskt fickminne. De<br />
första handdatorerna gjorde det möjligt att hantera sin agenda, sitt adressregister, och<br />
sina kom-ihåg-lappar elektroniskt. På senare tid har handdatorn fått ökad<br />
funktionalitet, mycket på grund av möjligheten att på olika sätt ansluta till Internet.<br />
Handdatorn har därför kompletterats med olika applikationer, till exempel<br />
webbläsare, e-postprogram samt i vissa fall mobiltelefon. Tidigare fick användaren<br />
ansluta handdatorn till sin persondator med hjälp av en kabel för att kunna överföra<br />
data, men nu kan detta även ske trådlöst antingen genom GSM-systemet eller genom<br />
att ansluta till ett trådlöst nätverk, LAN, med hjälp av ett nätverkskort med mera.<br />
Handdatorn består vanligtvis av en tryckkänslig skärm, samt ett antal knappar.<br />
Handdatorn manipuleras med en medföljande pennliknande plaststav (vanligen kallad<br />
vid sitt engelska namn, ”stylus”) med vilken man kan skriva och ”tappa”, d.v.s.<br />
klicka, direkt på skärmen. Gränssnittet bygger alltså på en direktmanipulerande<br />
interaktionsform, vanlig vid andra grafiska gränssnitt, till exempel Windows-,<br />
Macintoshmiljöerna med flera. Det förekommer även att handdatorer har knappar, för<br />
effektiv åtkomst av vissa vanliga program eller funktioner, samt i vissa fall även ett så<br />
kallat skrollhjul, varmed användaren kan hantera långa, sammanhängande<br />
datamängder.<br />
Mobiliteten handdatorn erbjuder torde vara en starkt bidragande orsak till den ökade<br />
populariteten. En jämförelse med det stora genomslaget för mobiltelefonen visar hur<br />
mycket användaren uppskattar möjligheten att hantera sin kommunikation mobilt.<br />
Med en vikt på 170 g och måtten 130*83*16 mm (Compaq iPAQ 3660) kan<br />
användaren ha med sig och hantera sin information snart sagt överallt. Beroende på<br />
hur väl de nya teknikerna för mobil kommunikation, GPRS samt 3G, tas emot och<br />
tillåts utvecklas kan det antas att handdatorn kan utvecklas ytterligare, och då främst<br />
inom områdena kommunikation och informationsöverföring. Mobiliteten har dock ett<br />
pris, dels i form av vilken prestanda som kan inrymmas i handdatorn, samt vilken<br />
prestanda som kan erbjudas användaren vid interaktionen. I och med införandet av<br />
färgskärmen har batteriet visa sig vara en svag punkt i kedjan. Vidare har<br />
implementeringen av mer avancerade funktioner och applikationer visat på svagheter<br />
hos processorns kapacitet. Vissa program går helt enkelt får långsamt. Ett tredje<br />
problem är storleken och upplösningen på skärmen som har en stor betydelse för hur<br />
interaktionen med handdatorn sker. Som tidigare nämnts har handdators (till exempel<br />
Compaq iPAQ H3635) skärm formatet 2.26" x 3.02" med en upplösning på 240 x 320<br />
pixlar, vilket är klart sämre än vad persondatorn kan erbjuda. Här är problemet att<br />
erbjuda användaren en korrekt förståelsemodell av informationsinnehållet, trots de<br />
begränsade <strong>tekniska</strong> möjligheterna. Andra problem som kan uppstå vid mobil<br />
interaktion är en skiftande omgivning (Björk et al, 2000). En användare kan tänkas<br />
vilja använda sin handdator i det mest skilda kontexter, vilket ställer höga krav på<br />
stöd till användaren vid interaktionen. Utvecklingen av de ergonomiska aspekterna<br />
hos persondatorn kan i jämförelse antas vara mer konsekvent och homogen, då<br />
huvuddelen av interaktionen med persondatorn sker i kontorsmiljö (även om skärmar<br />
även är vanliga i till exempel fabriks- och sjukvårdsmiljöer). Ett exempel på hur<br />
omgivningen kan skifta under interaktionen med handdatorn kan vara en användare<br />
2
som använder den under en bussresa (Björk et al, 2000). Ljusförhållandena kan skifta<br />
avsevärt, bussens rörelser gör det svårt för användaren att hålla handdatorn still,<br />
kanske måste hon hålla sig i med en hand vilket enbart lämnar en hand fri för att<br />
manipulera handdatorn. Detta utgör basen för de krav som ställs vid utvecklandet av<br />
en väl fungerande handdator.<br />
2.1 Relaterade arbeten<br />
Uppkomsten av den första handdatorn och mobiltelefonen med sin begränsade display<br />
aktualiserade behovet av nya sätt att hantera visuell information på en begränsad yta<br />
samt att nå ökad förståelse om hur människan kan hantera detta. Mängden arbeten på<br />
området visualisering på små skärmar är fortfarande begränsat i jämförelse med den<br />
mängd arbeten som gjorts på stora skärmar, främst därför att problemet är tämligen<br />
nytt.<br />
2.1.1 Teorier om sökstrategier<br />
Ett antal arbeten har behandlat frågan hur människan söker sig fram i en<br />
informationsmängd. De flesta har sin utgångspunkt i stora skärmar. Marchionini<br />
(1995) menar att en användare som söker information använder olika informella,<br />
heuristikliknande strategier och att detta sökande är starkt beroende av miljön<br />
informationen befinner sig i. Marchionini utvecklar begreppet informationssökning<br />
och menar att det består av fyra olika strategier att skilja mellan: skanna, observera,<br />
navigera samt övervaka. Skillnaden är graden av stöd och ledning användaren får av<br />
systemet.<br />
Vad gäller navigering på Internet har Nielsen (1997, i Nykvist 2001) angett fem<br />
förslag:<br />
1. Varje sida skall ha en identifierare, för att kontexten skall framgå för<br />
användaren.<br />
2. De sidor som är av största vikt för användaren skall alltid vara möjliga att nå<br />
genom länkar från övriga sidor.<br />
3. Informationshierarkins struktur skall framställas tydligt.<br />
4. De länkar som har besökts skall ha en annan färg än icke-besökta länkar.<br />
5. En karta skall visa de relevanta nivåerna i informationsstrukturen samt<br />
relationen mellan dessa.<br />
Flera av dessa förslag äger sin relevans även då de överförs till en mindre skärm.<br />
Punkt ett och fyra är relevanta då de kan spara användaren från en kognitiv<br />
ansträngning, alternativt att hon måste utföra onödiga moment för att få denna<br />
information. Med punkt tre och fem avser Nielsen en hierarki uppbyggd på en<br />
hemsida, bestående av flera sammanlänkande sidor. Förslagen har dock i föreliggande<br />
arbete förts över att gälla på ett något annorlunda sätt på en liten skärm. Här används<br />
förslagen för att underlätta för användaren att finna relevanta nivåer på en sida. Sidans<br />
struktur och informationsnivåer framhävs med hjälp av Navigeringslinjen (se avsnitt<br />
5.4.2 nedan).<br />
2.1.2 Liknande interaktionsvisualiseringar<br />
Flera konkreta arbeten har studerat olika möjligheter att hantera<br />
informationsvisualisering på en liten skärm. Ett arbete som angriper de problem<br />
3
användaren har då hon i Marchioninis (1995) mening skannar en informationsmängd,<br />
alltså då hon befinner sig i det läget att hon saknar en mental bild över informationens<br />
struktur, är Björks (2000) Hierarchical flip zooming. Med denna avser Björk att<br />
möjliggöra för användaren att bibehålla kontroll över informationsmängdens struktur,<br />
kontexten, samtidigt som hon kan se detaljer (en förstoring till detaljnivå är<br />
nödvändig för att överhuvudtaget kunna få en sådan storlek på exempelvis en text att<br />
den går att läsa).<br />
Ett annat sätt att tackla problemet med informationsvisualisering på liten skärm är att<br />
själv på ett mer handgripligt sätt ta kontroll över hur webbsidan skall se ut.<br />
Buyukkokten et al (2000) presenterar ett försök att frångå den gängse uppfattningen<br />
om hur en webbsida skall vara uppbyggd. Deras arbete går ut på att med hjälp av en<br />
http proxyserver först ta in den aktuella HTML-sidan, för att sedan dynamiskt sortera<br />
ut den information som efter vissa kriterier kan tänkas vara av intresse för<br />
användaren. De ord som har valts ut presenteras sedan i rubrikform. Problemet är att<br />
denna tjänst måste tillhandahållas användaren, och begränsar därför möjligheterna för<br />
användaren att själv välja Internetleverantör. Vidare beskriver Smith et al ()<br />
svårigheterna med arbetet runt den textbaserade WAP-tekniken, som i huvudsak är<br />
avsedd att användas på mobiltelefonens begränsade display. Ett stort problem är att<br />
den automatiska överföringen från HTML till WML ofta lämnar mycket i övrigt att<br />
önska. Översättning skapar sidor som inte är användbara.<br />
4
3 Problemet<br />
Föreliggande arbete fokuserar på de problem som uppstår då det gäller att stödja<br />
användaren då hon med en handdator (eller motsvarande liten skärm) navigerar på en<br />
webbsida. Mer precist, ett stöd för användaren att ha ett begrepp om helheten<br />
samtidigt som hon endast ser en del av helheten.<br />
3.1 Problemavgränsning<br />
Arbetet syftar till att framställa en första prototyp av en webbläsare med ett nytt och<br />
utökat stöd för användaren att skapa sig en översikt över informationsmängden.<br />
Avsikten med prototypen är att möjliggöra användartester där det kan prövas vid<br />
navigering på en webbsida huruvida fokuserad sökning sker lika effektivt som vid<br />
användandet av en persondator. Vidare kan en jämförelse göras mellan den mentala<br />
modell en användare av prototypen respektive en användare av en persondator gör sig<br />
av samma hemsida, representerad i respektive medium.<br />
3.2 Förväntade resultat<br />
En fullt fungerande prototyp, implementerad på en handdator, som kan användas vid<br />
användbarhetstestning.<br />
5
4 Metod<br />
Ett sätt att företa en designutveckling är genom en iterativ process, med ett starkt<br />
inslag av användarmedverkan. Fördelarna med detta angreppssätt är att på ett tidigt<br />
stadium få in användarens kunskaper i designen, både vad gäller den konkreta<br />
interaktionen samt den kontext användandet sker i. Vidare kan dyrbara misstag<br />
förhindras genom att designerns överseenden och misstag snabbt kan fångas upp och<br />
elimineras. Ett banalt överseende med svåra konsekvenser är till exempel en<br />
högerhänt designer som inte tänker på att produkten även måste passa en vänsterhänt<br />
användare.<br />
4.1 Möjliga metoder<br />
Det finns ett antal olika metoder som innebär olika grad av användarmedverkan. Fyra<br />
av dem har beaktas som möjliga metoder. En metod att få kunskap om användaren<br />
utan att direkt involvera användaren är en så kallad teoribaserad design. Här utnyttjas<br />
den vetenskapliga, ofta empiriska, kunskapen om människan. I detta sammanhang är<br />
främst teorier om människan som kognitiv varelse av intresse. Fördelarna med denna<br />
metod är att omfattningen på kunskapen är mycket stor och den kan därför erbjuda<br />
möjligheten att få en bred bas då det gäller att skapa en bild av användaren.<br />
Nackdelen är att denna metod kanske inte i sig är tillräcklig för att skapa en komplett<br />
bild av användandet av handdatorn. Detta beror på att forskningsområdet är ganska<br />
nytt, och det kan därför tänkas att nya, oidentifierade problem har uppstått. Det andra<br />
alternativet, användbarhetsdesign, har, även om det inte är speciellt omfattande, ett<br />
konkret inslag av användarmedverkan. Här involveras ett litet antal användare för att<br />
göra det möjligt att stämma av tämligen ofta under arbetets gång hur olika designidéer<br />
uppfattas. Denna metod är speciellt lämpad då produkten har en begränsad och väl<br />
specificerad målgrupp. Den tredje metoden, kontextbaserad design, innebär att<br />
designerna på ett mer omfattande sätt antar ett större perspektiv, vanligen genom att<br />
observera eller intervjua användaren i användarsituationen. Metoden är som namnet<br />
antyder, speciellt lämpad då produkten spelar en viktig roll i en större kontext, eller då<br />
kontexten är okänd för designern. Den fjärde metoden, slutligen, är medverkande<br />
design som samlar flera av de drag som utmärker de tidigare metoderna. Metoden<br />
innebär att designerna bildar ett designteam tillsammans med användaren. Metoden,<br />
som även kallas den skandinaviska designskolan, användes för första gången i<br />
sammanband med att tidningstryckerierna i Norden skulle genomgå en stor<br />
förändring, från den traditionella att sätta tidningen med blytyper, till dagens digitala<br />
metoder. Fördelen med metoden är att användarens expertkunskap på området kan<br />
förenas med designerns kunskaper, så att de kan lära av varandra och därigenom<br />
formulera problemet och dess lösning. Nackdelen är att projektet måste vara av en<br />
sådan omfattning, och ställa sådana krav på lösningen, att en rejäl tidsåtgång, vilket<br />
denna metod förbrukar, kan accepteras.<br />
4.2 Vald metod<br />
Vid genomgången av de alternativa metoderna identifierades fyra olika faser metoden<br />
skulle stödja. Det gäller:<br />
1. Arbetets teoretiska grund<br />
2. Designanalys<br />
3. Användartestning<br />
6
4. Implementering<br />
För att kunna genomföra uppgiften ansågs en kombination av två tidigare nämnda<br />
metoder vara lämplig, teoribaserad design samt användbarhetsdesign. Vad gäller den<br />
första metoden kan denna vara lämplig i ett inledande skede för att få en uppfattning<br />
om hur användaren fungerar som kognitiv varelse. Teorier om strategier hon använder<br />
vid informationssökning, samt hur hon skapar sig mentala modeller över en<br />
informationsmängd var av särskilt intresse.<br />
För det andra ansågs det viktigt att tidigt involvera användare, då arbetets begränsade<br />
tidsram inte tillät att arbetet gick åt fel håll. Alla misstag i designen måste fångas upp<br />
tidigt, för att en tillfredsställande slutprodukten skulle kunna presenteras i tid. Sätten<br />
att involvera användaren är som redan nämnts flera, och ett sätt att välja är att se till<br />
hur användargruppen ser ut. I föreliggande arbete hade den tänkte användaren ganska<br />
klara egenskaper, som utmärktes av vana att hantera en handdator samt vana vid<br />
Internet. Härigenom ansågs användargruppen vara tämligen begränsad och väl<br />
specificerad, varvid valet av den andra metoden blev användbarhetsdesign, då den på<br />
acceptabel tid kan prestera viktiga kommentarer och förslag. Metoden innebär<br />
vanligen att olika material presenteras för användaren som då kan kommentera dessa.<br />
Det finns flera sätt att framställa detta material. Materialet kan vara allt från enkla<br />
modeller till kompletta prototyper. Fördelen med den enkla modellen, till exempel en<br />
pappersversion, är att den går snabbt att ta fram. Det är dock viktigt att ta hänsyn till<br />
de svårigheter en människa har att föreställa sig en sak som inte finns konkret framför<br />
henne. Det är speciellt ett problem då det gäller att förstå olika metoder för<br />
informationsvisualisering. Här har den kompletta prototypen en klar fördel, i det att<br />
användaren konkret kan interagera med prototypen och skapa sig en förståelsemodell<br />
utifrån denna. En nackdel med att framställa kompletta prototyper är dock att<br />
implementeringen kräver mycket tid och arbete. Valet blev att använda båda<br />
varianterna i en kombination som kunde utnyttja den enkla modellens snabbhet med<br />
den kompletta prototypens fördelar.<br />
7
5 Material<br />
5.1 Tidiga idéer<br />
I den första brainstormningsprocessen kom följande olika förslag fram:<br />
Figur 1<br />
Figur 2<br />
Figur 3<br />
1. Blomman<br />
Skissen presenterar en översikt i form av en blomma. Denna<br />
estetiska uppdelning, där webbsidan delas in i en startpunkt och<br />
kronblad med någon form av rubriker eller länknamn, är i<br />
grunden en typ av fisheye 1 . Blomman kommer att kunna ses ur<br />
olika vinklar med en alltid synlig startpunkt.<br />
Problemet med denna lösning var svårigheten i att orientera sig<br />
och skapa förståelse för sidans struktur.<br />
2. Dokumenthyllan<br />
Denna idé vill utnyttja ett perspektivtänkande. Webbsidan delas<br />
upp i liggande sidor. Den sida som markerats syns till höger om<br />
dokumenthyllan. Den markerade ikonen visar sidan i starkt<br />
förminskat tillstånd.<br />
Problemet var bland annat att lösningen tog upp för stor yta och<br />
att det blev rörigt när webbsidan blev större.<br />
3. Tak och golv<br />
Detta sätt återger innehållet på sidan med hjälp av ikoner i över<br />
och underkant på skärmen. Mellan dessa rader syns webbsidan.<br />
Problemet med lösningen var platseffektiv men det blev svårt att<br />
ge en bra översikt av länkar bilder och mängden text. Kopplingen<br />
är inte klar mellan vilken ikon som representerar vilken del av<br />
sidan. Lösningen saknar knappar och andra hjälpmedel för<br />
navigeringen.<br />
1 Se Sarkar & Brown (1994) Communications of the ACM. för en beskrivning av begreppet fisheye.<br />
8
Figur 4<br />
4. Horisontell<br />
Sidan delas upp i mindre delar som löper horisontellt över<br />
skärmytan. Rubriker och länkar markeras tydligt.<br />
Fisheyefunktionen förskjuter sidindelningarna uppåt och nedåt.<br />
Problemet är att utrymmet för den markerade delen av sidan blir<br />
liten. Skärmytan utnyttjas inte effektivt. Det uppstår problem om<br />
webbsidan är större, lösningen ser då ”grötig” ut.<br />
5. Filter<br />
Olika skikt används, informationen ligger i lager ovanpå<br />
varandra. På detta sätt visas rubriker, bilder och länkar i<br />
det ”främre” fönstret med själva webbsidan starkt nedtonad<br />
i bakgrunden. Vid klickning på en rubrik/bild/länk i<br />
det främre fönstret kommer användaren till motsvarande<br />
ställe i texten.<br />
Problemet: Skissen på denna variant visar ett försök att<br />
utnyttja skärmfönstret på längden genom att lägga PDA:n ner. Detta skulle inte<br />
fungera eftersom det blir fysiskt svårt att på ett naturligt sätt använda tangenterna på<br />
PDA:n. Denna idé var platseffektiv men det blir jobbigt att klicka fram och tillbaka<br />
genom att man tappar översikten så fort man går in i texten.<br />
Figur 6<br />
Figur 7<br />
Figur 5<br />
6. Slalombacken<br />
En variant av grafisk lösning var att se webbsidan som en<br />
slalombacke och representera länkarna med flaggor. En ”vit”<br />
flagga riktad åt vänster betyder besökt länk och en ”svart” flagga<br />
riktad åt höger betyder obesökt länk.<br />
Problemet med denna roliga och kreativa lösning var att<br />
visualisering av rubriker och bilder också behövs. Men att återge<br />
information med hjälp av bilder banade ändå väg för den slutliga<br />
lösning som presenteras i denna rapport.<br />
7. Skalor<br />
Denna lösning innehåller två orienteringslinjer. Den ena skalan<br />
visar en översikt av texten och den andra visar hur stor del av<br />
sidan i procent som betraktas för tillfället.<br />
Översiktslinjen i denna modell ledde vidare till den slutliga<br />
navigeringslinjen.<br />
Problemet däremot var att de båda skalorna gjorde orienteringen<br />
på sidan förvirrande. Därför valdes den övre skalindelningen bort<br />
i den slutliga lösningen.<br />
9
5.2 Webbläsaren<br />
Webbläsarens design består av följande punkter:<br />
Figur 9<br />
Ett förslag som kombinerar en kontextdel där<br />
innehållet är urskiljbart, med en detaljdel,<br />
förkastades, då de ansågs ha allt för likartad<br />
funktion. Denna designutformning ansågs inte<br />
vara tillräckligt utrymmeseffektiv.<br />
Figur 8<br />
1. Webbsida<br />
2. Navigationslinje<br />
3. Navigeringsram<br />
4. Adressfält/titelfönster<br />
5. OK-knapp<br />
6. Normalläge/översiktsläge<br />
1. Webbsidan har rubriker, text, länkar och<br />
bilder. Dessa är viktiga delar som motsvaras<br />
av symboler på navigeringslinjen.<br />
2. Navigeringslinjen är placerad längs<br />
högerkanten, (alternativt i vänsterkant<br />
beroende på användarens önskemål).<br />
Navigeringslinjen har fisheyefunktion,<br />
symbolerna utmed linjen förskjuts beroende<br />
på var man placerar navigeringsramen.<br />
3. Inom navigeringsramen förstorar<br />
fisheyefunktionen symbolerna. Ramen är<br />
den aktiva, flyttbara delen i webbläsaren.<br />
4. Adressfältet ligger nere i basen på skärmen. Adressfältet skiftar och blir till ett<br />
titelfönster, som visar webbsidans titel, när det inte är aktivt.<br />
5. Med OK-knappen utförs sökningen efter webbadressen.<br />
6. Med knappen Normalläge/översiktsläge skiftar användaren mellan denna första<br />
bild och den översiktsbild som presenteras i användarscenariot (se Figur 15 nedan).<br />
10
5.3 Navigationsfunktioner<br />
Användaren kommer att kunna interagera med systemet både genom PDA:ns knappar<br />
men även med en styler (penna). Det finns enbart två klickbara knappar på skärmen,<br />
detta både för att spara utrymme men även för att göra ett enkelt gränssnitt (se Figur<br />
9). Många knappar kan verka förvirrande och göra antalet val för många. De två<br />
knapparna är en ok-knapp för att bekräfta en inskriven adress och en knapp som<br />
skiftar mellan översiktsvyn och navigeringsvyn. Resten av navigeringen skall kunna<br />
skötas med hjälp av PDA:ns inbyggda knappar. Det skall till exempel gå att bläddra<br />
bakåt, framåt, upp och ned med hjälp av knapparna. Detta för att ge ett så stort<br />
utrymme på skärmen som möjligt åt webbsidornas innehåll.<br />
Stylern har naturligtvis en viktig funktion här. Den ska inte enbart användas för att<br />
peka och dra utmed navigeringslinjen, eller klicka sig fram på länkar med. Vi ser<br />
också att en snabb navigering kan göras genom att dra stylern horisontellt från höger<br />
till vänster, eller tvärtom, och därmed kunna bläddra bakåt och framåt mellan olika<br />
sidor.<br />
5.4 Navigeringslinjen<br />
5.4.1 Färger<br />
Svårigheterna med att välja färger till designen är att de måste vara tillräckligt<br />
kontrastrika för att vara lätta att skilja från varandra. Samtidigt får de inte stjäla alltför<br />
mycket uppmärksamhet och därmed utgöra ett störande eller plottrigt intryck.<br />
Kombinationen med färgerna grönt och rött har undvikits eftersom det kan innebära<br />
ett problem för människor som är färgblinda.<br />
Enligt traditionen har länkar en blå färg och när de är besökta färgen lila. Det fanns en<br />
vinst i vinst i att behålla dessa färger på vår navigeringslinjen eftersom det gör det<br />
möjligt att utgå från användarnas förkunskaper. För att inte ge ett alltför färgrikt<br />
intryck gjordes bilder och rubriker svarta. Om en bild också är en länk behålles den<br />
kvadratiska formen men ges den färgen blå.<br />
5.4.2 Symboler<br />
I webbläsaren markeras huvudrubriker på webbsidor med horisontella streck, som<br />
korsar navigationslinjen. Obesökta länkar symboliseras av horisontella linjer på<br />
vänster sida, besökta av linjer på höger sida. Bilder visualiseras med hjälp av<br />
kvadrater. (Se Figur 10. Observera att skissen är en förstoring.).<br />
Figur 10<br />
Huvudrubriker (som ofta anges ”h1” i htmlkodningen),<br />
anser vi vara viktiga. Genom dem kan man se var olika<br />
större textavsnitt har sin början, och genom att se hur de<br />
placeras på webbsidan kan man också få en god<br />
överblick över hur informationen i texten fördelar sig.<br />
De obesökta länkarna placeras på vänster sida om<br />
navigationslinjen. Detta gör det lätt att se vilka länkar<br />
som inte har klickats på, i jämförelse med besökta<br />
11
länkar de som placerats till höger.<br />
Det fanns en tanke om att göra bildsymbolerna i storlek utifrån hur stora bilderna<br />
verkligen är på sidan. Men detta skulle göra högerkanten ännu plottrigare och det är<br />
dessutom inte säkert att en större bild är viktigare än en mindre är det signifikant om<br />
en bild är länkad eller inte. Detta löses genom att färgerna blå för länk och lila för<br />
besökt länk. Då en bild även är en länk blir bildens representation både kvadratisk och<br />
blå.<br />
5.5 Övriga funktioner<br />
I URL-fönstret visas titeln på den webbsida man för närvarande besöker när man inte<br />
klickat i det. När man klickar i det kan man skriva in den adress dit man vill gå.<br />
5.6 Begränsningar hos systemet<br />
Utvecklingsarbetet har haft sin utgångspunkt utifrån vissa antaganden om hårdvara<br />
och användare. Prototypen är anpassad för användande på en handdator med färgskärm<br />
då det kan antas bli det helt dominerande alternativet då vissa <strong>tekniska</strong> problem<br />
efterhand kan lösas, som till exempel att en handdator med färgskärm ställer högre<br />
krav på batterikapacitet. Vidare kan det bli ett problem med riktigt stora webbsidor då<br />
navigeringslinjen även med hjälp av fisheyeteknik kommer att tappa sin funktion att<br />
ge en överblick om sidans omfattning. Det saknas även stöd för att återge till exempel<br />
tabeller och frames.<br />
5.6.1 Användarens förståelsemodell<br />
Ett antagande har gjorts utifrån det mål användarna kan tänkas ha vid användandet av<br />
webbläsaren. Flera scenarion är tänkbara där den ena kan vara att handdatorn används<br />
för att söka en konkret information och ett annat ett mer ofokuserat sökande. De<br />
symboler som används i navigeringslinjen har valts för att ge stöd åt denna form av<br />
användande. Symbolerna motsvarar objekt som på en webbsida kan användas för att<br />
skapa en bild över sidan och som kan hjälpa användaren förstå hur hon kan navigera<br />
den.<br />
6 Genomförande<br />
6.1 Användartester<br />
Användartesterna utfördes i två omgångar. Inledningsvis intervjuades två personer<br />
genom att de fick betrakta enkla prototyper i form av skisser över designförslag.<br />
Användarna uttryckte önskningar om möjligheter att gå framåt och bakåt. Det<br />
påpekades också att det vore bra att titeln på hemsidan syntes så att det var lättare att<br />
veta vilken webbsida som var aktuell. Designen som arbetades fram grundades delvis<br />
på användarnas åsikter.<br />
Andra omgången tester var fokuserade kring navigeringslinjen och för att se vad<br />
användarna tyckte om dess utformning. Genom att göra ett enkelt klickschema i ett<br />
webbgränsnitt kunde tester utföras huruvida användarna tyckte att navigeringslinjen<br />
underlättade för dem att orientera sig på en hemsida av samma storlek som ett PDAfönster.<br />
Prototypen är ett webbgränssnitt i samma storlek som ett PDA-fönster som<br />
12
körs på en vanlig datorskärm. Testerna har inte utförts på en PDA. Syftet med dessa<br />
tester var att studera hur testpersonerna interagerade med navigeringslinjen.<br />
Intervjuer har gjorts med tre användare. De användare som har intervjuats är inte vana<br />
att använda en PDA, däremot är två av dem vana att hantera Internet och en av dem är<br />
mycket van att hantera Internet. Observationer utfördes medan användarna arbetade<br />
igenom designen. Detta för att se om användarna intuitivt kunde se kopplingen mellan<br />
navigeringslinjen och texten. Sedan ställdes av typen: vad tror du att den svarta linjen<br />
representerar?<br />
Två av användarna trodde att de svarta kvadraterna representerade rubriker eftersom<br />
de var störst och syntes mest. Det blev diskussioner kring om det var så viktigt att<br />
representera bilder på en hemsida. Förslag kom upp på att göra bildikonerna mindre<br />
eller att representera dem med ett mer avvikande element, till exempel en stjärna. Ett<br />
annat förslag var att behålla formen på bildikonen med att ändra dess färg till grått så<br />
att den inte ger ett lika dominerande intryck. Användarna hade även problem med de<br />
svarta horisontella linjerna högst upp och längst ned på navigeringslinjen eftersom de<br />
hade svårt att skilja dem från rubriker. Den tredje användaren undersökte designen<br />
under en längre tid och kunde se relationerna mellan bildikonerna och det de<br />
representerade.<br />
Efter ett tag instruerades användarna om vad de olika tecknen på navigeringslinjen<br />
betydde. Sedan ställds frågor av typen: Hur tar du dig till den andra bilden? Detta<br />
fungerade väldigt bra, efter att navigeringslinjens betydelse hade förklaras kunde<br />
samtliga testpersoner använda den. Samtliga tyckte att den var smidig att använda.<br />
Däremot rådde även diskussioner kring att man tydligare skall särskilja den från<br />
webbsidan så att man inte tror att navigeringslinjen är någon slags dekoration. Kritik<br />
som framkom var att det kan bli svårt att använda navigeringslinjen på stora hemsidor<br />
eftersom det blir trångt mellan ikonerna på navigeringslinjen.<br />
6.2 Användningsscenario<br />
Här visas ett typexempel på användning där en person studerar en uppsättning<br />
hemsidor. Scenariot bygger på de sidor som skall ska implementeras med vår prototyp<br />
och har för avsikt att visa hur navigeringslinjen fungerar. Bilderna är tillverkade<br />
bilder och ej skärmdumpar från det slutgiltiga programmet.<br />
Figur 11<br />
1. Användaren går in på hemsidan och får där<br />
se en del av sidan och navigeringslinjen med<br />
en grafisk översikt av sidan. Webbsidan<br />
innehåller två rubriker och fyra länkar.<br />
Användaren väljer att gå via en länk till<br />
textsida 3 genom att klicka antingen på<br />
länken på sidan eller på motsvarande<br />
länkikon, den andra, på navigeringslinjen (se<br />
Figur 11).<br />
13
Figur 12<br />
Figur 13<br />
2. På testsida 3 finns en rubrik, en bild och en<br />
länk som leder tillbaka till testsida 1.<br />
Användaren följer den länken och återvänder<br />
till testsida 1 genom att klicka i texten eller<br />
på navigeringslinjen (se Figur 12).<br />
3. När användaren nu återvänder till testsida<br />
1 har ikonen som representerar länken till<br />
testsida 3 blivit lila och flyttats till höger om<br />
navigeringslinjen. Användaren väljer nu att<br />
följa länken som leder till testsida 4 (se Figur<br />
13).<br />
14
Figur 14<br />
Figur 15<br />
4. Testsida 4 innehåller tre rubriker, två<br />
länkar och en större textmassa. Eftersom man<br />
en gång har följt en länk tillbaka till testsida 1<br />
är nu den länken lilafärgad och på höger sida<br />
om navigeringslinjen. Mängden text är större<br />
än vad som får plats i fönstret och för att<br />
kunna se hur stor textmassan är väljer<br />
användaren att gå till översiktsläget. Detta<br />
gör användaren genom att kicka på knappen<br />
som ligger längst ner i fönstret bredvid urlraden<br />
(se Figur 9, punkt 6 ovan).<br />
5. Inne på översiktssidan ser användaren hela<br />
sidan i förminskad form i kolumner.<br />
Användaren klickar på den andra rubriken för<br />
att komma längre ner på sidan. Då växlar<br />
bilden över till navigeringsvyn med<br />
navigeringslinjen med markören vid den<br />
andra rubriken. Användaren ser att det finns<br />
en länk som leder vidare till testsida 5 och<br />
följer den.<br />
15
Figur 16<br />
6. Testsida 5 innehåller fyra rubriker, tre<br />
bilder och tre länkar. Användaren kan<br />
bläddra igenom sidan, använda<br />
navigeringslinjen eller gå till översiktsläget<br />
för att få en uppfattning om sidans innehåll.<br />
Om användaren till exempel vill titta på den<br />
bild som ligger längst ner på sidan så klickar<br />
hon på motsvarande bild ikon som ligger<br />
längst ner på navigeringslinjen.<br />
6.3 Implementering<br />
Slutligen implementerades en prototyp av en webbläsare som använde sig av<br />
visualiseringstekniken. Prototypen implementerades i språket Java. Prototypen är<br />
utvecklad i programmeringsmiljön Borland Jbuilder 5.<br />
7 Resultat<br />
Arbetet har utmynnat i ett nytt stöd för användare att navigera i en webbsida i ett litet<br />
fönster. Den huvudsakliga designen utgörs av en navigeringslinje med bildikoner som<br />
representerar rubriker, länkar och bilder på motsvarande webbsida.<br />
Användartester har dels påverkat grundläggande design och dels utvärderat en<br />
prototyp av den utarbetade designen. Utvärderingen resulterade i att användarna ej<br />
intuitivt kunde använda navigeringslinjen men att det gick bra efter att de blivit<br />
instruerade om hur den fungerade.<br />
Implementeringen har resulterat i en fullt fungerande men begränsad prototyp av en<br />
webbläsare som bygger på vår visualiseringsteknik. Prototypen inkluderar alla funktioner<br />
(se 5.2 Webbläsaren) utom fisheyefunktionen och översiktsläget. Prototypen<br />
fungerar i sin rätta miljö, det vill säga på handdatorer av typ Compaq iPAQ.<br />
16
8 Diskussion<br />
Användartesterna visar att funktionerna hos designen inte är intuitiv men däremot att<br />
när en förklaring har skett så fungerar användandet. Genom att bifoga någon form av<br />
handledning eller ändra designen genom att till exempel tona ner ikonen för bilder är<br />
det möjligt att användningen blir lättare att förstå.<br />
En fördel med designen är att det går att läsa en webbsida utan att använda<br />
navigeringslinjen, det blir valfritt för användaren. Om en användare anser att det går<br />
snabbare att bläddra nedåt på sidan som vanligt så är det fullt möjligt. En stor del av<br />
skärmen ser ut som en vanlig webbsida vilket kan underlätta för användarna genom<br />
att de kan använda sig av sin förförståelse om de är vana att använda Internet.<br />
Ett problem med denna lösning är att den blir svåranvänd då informationsmängden på<br />
en webbsida blir för stor. Trots att fisheye-teknik tillämpas förlorar navigeringslinjen<br />
sin överblicksfunktion då den skall visa omfattande sidor.<br />
Resultatet på användartesterna kan ha påverkats av det faktum att testerna ej skett på<br />
en PDA och med användare som ej är vana att hantera en PDA. Det är möjligt att<br />
vana användare hade haft lättare att se en koppling mellan navigeringslinjen och<br />
texten.<br />
Designen har anpassats efter att en PDA har en dålig upplösning vilket har hindrat<br />
mer kreativa ikoner på naivgeringslinjen. Andra typer av ikoner kunde ha gjort det<br />
lättare för användarna att till exempel identifiera ikonen för en bild.<br />
Genom att kombinera teoribaserad design och användartester har resultatet rötter i<br />
både tidigare forskning och nya idéer. Fungerat bra, vi har hämtat information från<br />
flera olika håll vilket har gett en bred angreppspunkt.<br />
Genom att återigen ta fasta på användarnas kommentarer och utveckla en ny prototyp<br />
är det möjligt att användningen skulle gå bättre. Det behövs ett mycket större underlag<br />
av användartester för att kunna dra några mer generella slutsatser.<br />
Det skulle även vara bra att göra användartester på PDA-prototypen för att få en<br />
användning i dess rätta miljö med rätt teknik. Det gick inte att utläsa användarnas<br />
interaktion med en PDA i de tester som hittills har utförts.<br />
9 Framtida arbeten<br />
9.1 Framtida utvecklingsmöjligheter<br />
Det finns många utvecklingsmöjligheter för en sådan här webbläsare. Här listas några<br />
av dem:<br />
1. Möjlighet att sätta ut bokmärken, att grafiskt märka ut favoritställen på<br />
webbsidan. Användaren får möjlighet att själv välja vad som var extra<br />
intressant på sidan lätt kunna återvända dit, om han eller hon vill.<br />
17
2. Lägga in ankartaggar. Fördelarna med detta skulle vara att användaren lätt<br />
kan använda sig av de redan existerande knapparna på PDA:n. Funktionen gör<br />
det lättare att snabbt förflytta sig fram och tillbaka på en lång sida.<br />
3. Att kunna välja bort navigeringslinjen för att på så sätt få större utrymme för<br />
webbsidan.<br />
4. Utveckla systemet så att det kan stödja större webbsidor, hantera frames,<br />
tabeller, stylesheets m.m<br />
9.1.1 Fysiskt sökande<br />
Detta projekt har främst syftat till att visualisera information på en platt, liten skärm.<br />
Men framtiden skulle kunna innebära att man blandar in många fler sinnen för att<br />
underlätta i användarens informationssökning. Hörsel och känsel exempelvis.<br />
Stylern behöver inte bara vara en stumt pekdon. Den skulle kunna låta/bli<br />
varm/vibrera när användaren letar sig fram över navigeringslinjen. I boken den<br />
obändiga söklusten (Jönsson 2000), beskriver lundaforskaren Bodil Jönsson just<br />
vikten av det fysiska sökandet. Hon beskriver tresekundersregeln, som är ”den tid<br />
man är beredd att vänta”. Om det tar längre tid än tre sekunder ”utgår man från att<br />
något hängt upp sig, man börjar klicka en gång till… Det är denna känsla som gör en<br />
del sökningar så evinnerligt långa, upplevelsemässigt.” Detta, menar Bodil Jönsson, är<br />
alltså den känsla som användaren får, även om det faktiskt sker en visuell<br />
återkoppling genom att exempelvis timglaset rör sig.<br />
Det är intressant att tålamodet blir långt längre om samma användare ska söka upp ett<br />
nummer i en vanlig telefonkatalog gjord i papper. ”För i blädderprocessen är det<br />
kroppsliga hela tiden med.” Där får användaren inte bara en visuell återkoppling, fler<br />
sinnen hjälper till i sökandet. Detta vore alltså en önskvärd utveckling av hela PDAsystemet<br />
och vi tror att vår presenterade webbläsare skulle kunna användas på ett bra<br />
sätt i ett sådant system.<br />
18
Referenser<br />
Björk, S., Redström, J., Ljungstrand, P. & Holmquist, L. E. (2000) POWERVIEW<br />
Using information links and information views to navigate and visualize information<br />
on small displays. Tillgänglig på Internet:<br />
http://www.playresearch.com [Hämtad: 2001-10-25]<br />
Björk, S. (2000) Hierarchical Flip Zooming: Enabling Parallel Exploration of Hierarchical<br />
Visualizations. I: Proceedings of Advanced Visual Interfaces (AVI).<br />
Tillgänglig på Internet: http://www.playresearch.com [Hämtad: 2001-10-25]<br />
Buyukkokten, O., Molina, H. G., Paepcke, A., Winograd, T. (2000) Power browser:<br />
Efficient browsing for PDAs. I: T. Turner, G. Szwillus, M. Czerwinski, F.<br />
Paternò (Red:er), CHI 2000 (s. 430-438). Proceedings on human factors in<br />
computing systems, 1-6 april, 2000, Haag, Holland.<br />
Frick, O., Schmidt, A., Schröder, H., (2000) WAP – Designing for small user interfaces.<br />
I: T. Turner, G. Szwillus, M. Czerwinski, F. Paternò (Red:er), CHI<br />
2000 (s. 430-438). Proceedings on human factors in computing systems, 1-6<br />
april, 2000, Haag, Holland.<br />
Jönsson, B. & Rehnman, K.(2000) Den obändiga söklusten. Lund: Brombergs.<br />
Marchionini, G. (1995) Information seeking in electronic environments. Cambridge:<br />
University Press.<br />
Nykvist, L. (2001) Finns det avvikelser med avseende på informationssökning för<br />
stora displayer i jämförelse med små? Examensarbete vid Högskolan i<br />
Skövde.