Projektrapport Interaktionsdesign - Webbläsare för små fönster

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: 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. Figur 1 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. Figur 2 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. Figur 3 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

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. Figur 4 Figur 5 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. 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. Figur 6 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. Figur 7 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

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 5.2 Webbläsaren Webbläsarens design består av följande punkter: 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. Figur 9 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.). 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. Figur 10 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. 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). Figur 11 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). 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). Figur 13 14

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). Figur 14 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. Figur 15 15

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. Figur 16 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.