IT-universitet i Göteborg MDI årskurs 1 2002-10-20 Seminarium i interaktionsdesign I Projektrapport SpaceWarp en webbläsare för små skärmar Anders Öhlund Lars Fridén Magnus Jonasson Mikael Ståhlberg Pernilla Qvistgård Handledare: Staffan Björk
Sammanfattning På senare år har handdatorer och andra mobila artefakter slagit igenom som verktyg för att hantera information, dels för att strukturera information och dels för att söka information på Internet. Problemet med att söka information på Internet är att sidorna oftast är utformade för att passa en stor skärm. När dessa sidor skall visas på en liten skärm försvinner en stor del i överblicken av informationen. Detta projekt har därför bestått i att implementera en prototyp för Pocket PC som klarar av att visa enklare webbsidor. Vi har studerat tidigare visualiseringstekniker, genererat ett antal idéer och därefter tagit fram en tillämpning av flip zooming-teknik som är en focus+context-teknik. En teknik som ger användaren möjlighet till både en översikt av informationsinnehållet och att zooma in specifik informationen. Den teknik som implementerades, webbläsaren SpaceWarp, ger användaren också ett sätt att lätt navigera inom webbsidan genom en hierarkisk struktur uppbyggd av de rubrikelement som webbsidan består av. Skärmen i SpaceWarp är uppdelad i två delar. En övre del som som visar text med länkar och bilder. Den undre delen visar sidans innehåll översiktligt i rubriknivåer och är visualiserat som ett klickbart planetsystem. Projektet resulterade i denna projektrapport, en prototyp gjord i MS PowerPoint samt en ej färdigställd prototyp utvecklad i Java. PowerPoint-prototypen visar väl de tänkta funktionerna medan Java-prototypen är under fortsatt utveckling. 2
BAKGRUND... 4 TEORI... 5 Informationsvisualisering... 5 Kognitiva aspekter... 5 Allmän designteori... 5 Interaktionsdesign... 6 RELATERAT ARBETE... 7 METOD... 8 Målgrupp... 8 Användaranalys... 8 Funktionsanalys... 8 Kravspecifikation... 8 Designprocessen... 8 Förkastade idéer... 10 Från valt koncept till slutlig lösning... 17 RESULTAT... 20 Användarstudier av SpaceWarp... 22 DISKUSSION... 23 REFERENSER... 24 3
Bakgrund Informationssamhället har under de senaste decennierna tagit form. Dagligen möts vi av information som vi måste ta emot och behandla. De flesta hushåll har idag tillgång till dator och Internetuppkoppling. Samtidigt förändras våra livsmönster och nya behov uppträder. Människan har ökat sin rörlighet vilket ställer nya krav på informationen som vi har blivit allt mer beroende av. Internet har från början varit förknippat med stationära datorer i hem- och kontorsmiljöer. Vad vi ser nu är att dessa miljöer byts ut mot mer mobila miljöer där gränssnittet inte medger samma visualiseringsmetoder. Dagens webbplatser är anpassade för visualisering på stora skärmar med hög upplösning. Handdatorer med små skärmar och låg upplösning får problem med att visualisera en nedladdad sida från en webbplats anpassad för en konventionell skärm. Problemets kärna är att behålla den läsbarhet som en konventionell skärm medger. Det finns webbsidor som är anpassade till små skärmar. Detta medför dock dubbelarbete vid skapandet av dessa webbsidor. Webbplatserna på Internet följer ingen standard i sin layout. Däremot kan man urskilja att utformningen följer vissa mönster. Olika rubriknivåer är vanligt förekommande på webbsidor vilket också var en grundförutsättning för denna lösning. Uppgiften var att skapa en webbläsare för en handdator som visualiserar enklare webbsidor. Programmets uppgift är att så överskådligt som möjligt visa webbsidornas struktur och storlek samt hjälpa användaren att orientera sig bland innehållet och finna den information som eftersöks så snabbt och enkelt som möjligt. Handdatormarknaden domineras av två operativsystem, PALM OS och PocketPC utvecklat av Microsoft. Grundtankarna skiljer sig mellan de två tillverkarna med framförallt synen på kopplingen till den stationära datorn. PocketPC är starkt kopplat till Microsofts Windows. Inom en snar framtid kommer handdatorn och mobiltelefonen troligtvis växa ihop till en enhet. Vare sig det rör sig om en handdator, mobiltelefon eller en hybrid kommer problemet med de begränsade visualiseringsmöjligheterna att föreligga. Webbläsaren fick inte, enligt uppgiftsbeskrivningen, använda sig av rullningslister eller sidbläddringsfunktion. Den största fördelen med en lösning som denna är att webbinnehållet inte behöver anpassas manuellt efter vilken typ av skärm den ska visas på. Begränsningarna utgörs av webbsidans struktur då denna lösning kräver att sidan är uppbyggd med rubriker och underrubriker. Webbläsaren skulle anpassas för Compaq ipaq under PocketPC OS. För att lösa uppgiften använde vi oss av litteratur inom visualiseringsområdet samt studerade aktuella forskningsområden och befintlig teknik. 4
Teori Informationsvisualisering Kring gränssnitt på små skärmar finns förhållandevis lite material. Det material vi främst använt är utdelat kursmaterial i form av artiklar och studier. Inom gränssnittsutveckling generellt är konsekvens ett begrepp [1]. Begreppet innefattar många dimensioner utifrån ett användarperspektiv. Konsekvens hänvisar till likhet så väl visuellt som funktionellt. Det kan gälla inom program, mellan program, eller mellan operativsystem. Syftet är att användaren ska dra nytta av de kunskaper som hon förvärvat tidigare inom andra program. Inom kontextuell design arbetar man utifrån användaren och dennes behov samt den föreliggande situationen vid utvecklingen av gränssnitt [2]. Idag möter man datorn i allt fler sammanhang och situationer. Detta har också ställt högre krav på utformningen av mjukvaran. Kognitiva aspekter Erfarenhet och lärande kan vara en inverkande faktor vid utvecklande av användargränssnitt. Det finns många modeller kring erfarenhet och lärande. Utan att studera någon modell noggrannare kan man konstatera att lärandet är en livslång process. Människan måste alltid lära sig nya saker för att kunna anpassa sig till nya förhållanden. Här bör betonas att likheter med tidigare miljöer underlättar lärandet. Allmän designteori Lär känna din användare Gör funktioner, objekt och/eller information synbar Skapa konceptuella modeller Gör begränsningar Ge feedback Var konsistent Slutanvändaren måste alltid stå i fokus genom hela designarbetet. Användaranalys är ett bra redskap för att få vetskap om användaren. Hur informationen rent visuellt presenteras påverkar så klart användbarheten. Funktionen bör vara intuitivt formad. Lämpliga konceptuella modeller underlättar användandet. Användaren har alltid en föreställning av hur ett system kan tänkas fungera byggt på tidigare erfarenheter. Utvecklarens konceptuella modell bör i så stor grad överensstämma med användarens. Feedback är systemets respons på användarens instruktioner. Visuella, auditiva och taktila signaler ger användaren en bekräftelse om systemets status. Användbarheten underlättas om risken för att göra fel minimeras. Ett enhetligt system som beter sig konsekvent genom hela sin funktionalitet är eftersträvbart och grunden till god funktionalitet och därmed god design. 5
Interaktionsdesign Interaktionsdesignprocessen enligt Preece [3] består av fyra grundaktiviteter: 1. Identifiera behov och formulera krav 2. Utveckla flera alternativa modeller som möter upp behov och krav 3. Konstruera interaktiva designprototyper för utvärdering och bedömning 4. Utvärdera kontinuerligt genom processen genererade lösningar Utöver dessa aktiviteter bör hänsyn till följande: - Användare ska hela tiden beaktas i utvecklingen av projektet - Specifika användbarhetsmål liksom mål för användarens upplevelse ska identifieras, fullständigt dokumenteras och bestämmas i början på projektet - Iteration mellan interaktionsprocessens fyra grundaktiviteter Interaktionsdesign kan sägas ha två olika syften. Det kan vara att utveckla ett system som gör det möjligt för användaren att så snabbt och effektivt utföra en tänkt uppgift. Men det kan också vara att utveckla ett system som upplevs motiverande, tilltalande och är roligt att använda. Uppgiften kan således beskrivas med fokus på användbarhet respektive användarens upplevelse. Vad det primära i utvecklingsarbetet är beror naturligtvis på uppgiften och på vem användaren är. Det andra utesluter det andra. Ett system som är effektivt att utföra en sak behöver inte betyda att vägen dit är tråkig och mödosam. Nedan följer några aspekter av användbarhet och användarens upplevelse enligt Preece. Användbarhet Lärbarhet: Hur lång tid tar det att lära sig systemet? Effektivitet: I vilken utsträckning stödjer systemet användarens uppgift och hur väl? Relevans: Har systemet relevant funktionalitet? Hågkomst: Kommer användaren ihåg över tid? Felfrekvens: Hur många fel uppstår och hur allvarliga är de? Användarens upplevelse Tilltalande Roligt Kreativt Känslomässigt tillfredsställande Underhållande Estetiskt tilltalande Motiverande Uppmuntrande Tillfredsställande 6
Relaterat arbete Den dominerande tekniken för informationsvisualisering på PDA:er (Personal Digital Assistent) är den så kallade focus+context-tekniken. Tekniken bygger på att användaren visas detaljerad information av ett valt avsnitt samtidigt som en total överblick av informationen visas. Syftet med denna teknik är att användaren hela tiden ska bibehålla orienteringen i dokumentet och samtidigt få en överblick av helheten. Det finns många utvecklade varianter av denna teknik som fisheye [4], hyperbolic tree [5] och flip zooming [6]. En del arbetar i 2D-miljöer andra i 3D-miljöer The Document Lens [7] är en typisk fisheye-teknik som arbetar i 3D-miljö där ett rektangulärt förstoringsglas förstorar ett valt avsnitt medan den kringliggande kontexten minskas proportionellt mot avståndet från fokus. Hyperbolic tree [8] är den princip som exempelvis används av filhanterare under Windows. Den hierarkiska strukturen kan sägas vara i fokus i denna teknik. WEST [9] är en focus+context-baserad webbläsare som använder sig av flip zooming. Vad som skiljer flip zooming från andra focus+context-tekniker är att ordningen mellan ingående element av dokumentet ändras vid zoomning. WEST utnyttjar sig dessutom av en textreducerande teknik varefter informationen fördelas på ett antal s k cards och s k decks d v s en samling av cards. Många tekniker är hybrider av flera befintliga tekniker. Vissa är mer lämpade som webbläsare, andra som rena textvisualiserare/texthanterare. Power Browser [10] medger granskning av informationen från tre olika perspektiv. En browser-vy, en vy över länkar samt en vy med navigationshistoria. Browser-vyn visar text utan bilder. Länkvyn ger en överblick över de länkar som sökningen medger. Historievyn visar länkar över besökta sidor. Denna teknik använder sig av en proxy-server som reducerar informationsmaterialet innan den når PDA:n. Fördelen med denna teknik är att den minskar nedladdningstid samt att den inte belastar PDA:ns mindre kraftfulla processor. Nackdelen är att informationen inte exakt innehåller det som skulle presenterats om man surfat på vanligt sätt. Pad++ [11] tillhör en kategori som kan kallas zoom visualiserare. Pad++ använder sig av semantisk zooming. Till skillnad från Flip zooming medger denna grupp en mer linjär zooming och kontextbegreppet kan diskuteras. Textreducering använder sig av semantiska metoder för att reducera textinnehållet till det mest väsentligaste. Antingen utförs reduceringen manuellt av användaren genom filterinställningar eller automatiskt av programmet. Greeking är en teknik som ger en bild av hur en text är strukturerad i ett dokument. Texten i sig själv behöver därför inte visas utan kan representeras med exempelvis staplar eller linjer. Funktionen för förhandsgranskning i många ordbehandlare fungerar på detta sätt och syftet är att ge en uppfattning om dispositionen. 7
Metod Målgrupp Handdatoranvändare är fortfarande en relativt liten grupp. Målgruppen för vår webbläsare är personer som är vana att använda handdatorer och att surfa på Internet De flesta har en handdator vid sidan om sin ordinarie dator. Användaranalys Användaren ska med webbläsaren kunna: navigera bland webbplatser innehållande text, bilder och länkar få en överblick av både struktur och innehåll läsa text se bilder följa länkar Funktionsanalys Webbläsaren ska ge möjlighet till: enkel navigering presentation av enklare webbsidor innehållande text, bilder och länkar bläddring bland innehåll utan hjälp av rullningslistor och riktningsknappar Kravspecifikation Webbläsaren ska utvecklas i Java-miljö och köras under PocketPC på en Compaq ipaq. Tekniken får inte använda sig av rullningslister eller sidbläddring. Vald informationsvisualiseringsteknik ska kunna användas för att visualisera de tillhandahållna testsidorna. Testsidorna innehåller text, bilder och länkar. Textsidorna ska delas upp i lämpliga delar m h a ett delprogram (s k parser). Designprocessen Gruppen började med generera idéer utifrån kravspecifikationen. Det kan tyckas underligt, med tanke på all teori presenterad ovan, att börja med denna metod i en interaktionsuppgift. Vi ansåg dock att med de i uppgiften formulerade krav och produktens mer eller mindre redan formulerade målgrupp var en tillräcklig grund för att generera idéer. De förslag som kom fram ställdes mot de krav formulerade i uppgiften. Samtidigt som vi som grupp var tvungna att inse våra begränsningar att realisera allt för komplicerade designförslag. Den modell vi beslutade oss för att realisera i en prototyp var byggd kring en modell av planetsystemet. En allmängiltig orienteringsmodell var tanken. Modellen bygger på den befintliga focus+context-tekniken och använder sig av flip zooming. Arbetsnamnet blev SpaceWarp. 8
Under utvecklingen har vi betonat vikten av konsekvens. Vi har dessutom lagt ner kraft på användarens upplevelse. Parallellt med programmeringen började vi arbeta fram en grafisk profil för webbläsaren. Flera olika färg- och formkombinationer togs fram och visualiserades i en ram med samma storlek som ipaq:s skärm. Vissa förslag förkastades eftersom de frångick grundidén för mycket, andra för att de inte var estetiskt tilltalande. Kring det grafiska konceptet byggdes en interaktiv modell i PowerPoint. Designförslaget kunde på detta sätt kommuniceras ut och utvärderas inom som såväl utanför gruppen. Vi ansåg detta vara ett utmärkt hjälpmedel för att vid ett tidigt skede styra riktlinjerna för programmeringen. Under designprocessen framkom vissa ändringar med avseende på grundkonceptet. Dokumentationen av projektet pågick fortlöpande. Då två av de fem gruppmedlemmarna hade tidigare erfarenhet av Java var det lämpligt att dessa två ansvarade för programmeringen. De tre övriga medlemmarna bidrog till idéer under hela projektets gång, studerade litteratur, utvecklade prototypen etc. 9
Förkastade idéer Under den initiala delen av projektet genererades ett antal idéer. De flesta av dessa var inte möjliga att realisera av flera anledningar. Den största anledningen var att de var svåra att implementera ur teknisk synvinkel, d v s den tekniska kunskapen i form av programmering saknades. Förslagen var tänkta att använda teknik som focus+context, flip zooming och textreducering samt egna utvecklade tekniker. Här nedan presenteras de förkastade idéerna. Rutmönsteruppdelning En idé utgick från en rutuppdelning av hela webbsidan. Hela sidan syns i den mindre rektangeln i vänsterkant av skärmen. Denna rektangel är uppdelad i ett antal rutor. Ett klick i respektive ruta visar motsvarande del av webbsidan i förstoring. Figur 1a: Webbsidan uppdelad i översiktsrutor Figur 1b: Förstorad översiktsruta Fördelar med denna lösning är att den är enkel och lättanvänd. Nackdelen är att den bara fungerar för relativt korta webbsidor. Så fort sidan blir lite längre blir också översiktsbilden i rektangeln väldigt hoptryckt och därmed svårläst. 10
Roterande kuben Webbsidan delas upp i fyra delar som klistras på motsvarande sex sidor av en fiktiv kub. Man roterar kuben med hjälp av piltangenterna på ipaq:en. När man har navigerat sig fram till den delen av webbsidan som man finner intressant trycker man på knappen Helskärm. Detta ger en helskärmsbild av den del som man vill läsa. För att komma tillbaka till kuben vid helskärmsläget trycker man på kuben. Om webbsidan är för lång kan programmet dela upp den i flera kuber. Ju längre webbsida desto fler kuber. Figur 2a: Kuben. Den delen som kommer att visas som helsida är den delen som är störst och närmast användaren Figur 2b: Helskärmsbild av fokuserad sida av kuben Denna idé är en spännande 3D-lösning. En stor fördel är att en webbsida kan vara nästan hur lång som helst. Men Roterande kuben är förmodligen alltför svår att programmera under ett sådant här litet projekt, varför idén tyvärr förkastades. 11
Discokulan Principen påminner mycket om Roterande kuben ovan. Strukturen på sidan delas upp på vertikalled. På horisontalled visas information av samma strukturordning. Kulan är dynamisk till sin storlek, d v s den anpassar antalet spegelsegment över hur stort informationsinnehållet. Anpassning av storleken sker med bibehållen geometrisk form. Varje spegelsegment kan förstoras till en hel skärmbild. Oavsett var man befinner sig i strukturen är placeringen av aktuellt spegelsegment alltid centrerad till skärmens mitt. En förflyttning i trädstrukturen illustreras av en kortare förflyttning av spegelsegmentet i den riktning användaren vill, varefter spegelsegmentet återgår till den ursprungliga placeringen med nytt informationsinnehåll. Figur 3a: Diskokulan i översiktsläget Figur 3b: En sida av kulan är vald 12
Trädet Tanken med Trädet var att rubriker som definieras av HTML-taggarna <H1> till <H6> sorteras fram och visas på skärmen i olika nivåer. Alla rubriker av storlek <H1> visas på samma nivå, på nästa nivå visas <H2>-rubrikerna o s v. Genom att klicka på en nivå visas dess eventuella underrubriker. Finns det inte några underrubriker visas istället brödtexten. Figur 4a: Aftonbladets webbsida uppdelat i <H1> och <H2> Figur 4b: Visar brödtexten som helskärm när man inte kan komma ner trädstrukturen Trädstrukturen ger en snabb och tydlig överblick över hela sidan förutsatt är sidförfatttaren har givit rubrikerna meningsfulla namn. Gränssnittet kan upplevas lite tråkigt, och innebär också mycket klickande. Vidare ställer Trädet vissa krav på hur webbsidan är beskriven i HTML-koden. Alla rubriker måste vara omgärdade av <Hn>-taggarna. Sidan får heller innehålla alltför många rubriker på samma nivåer. 13
Sammanfattaren Sammanfattaren tar den befintliga texten och komprimerar den till en lättöverskådlig sammanfattning, liknande Words sammanfattningsfunktion. Fördelen är att man bara får en text som innehåller det viktigaste. Nackdelen är att det antagligen blir svårt att programmerar algoritmen skall hitta det väsentligaste ur ursprungstexten. Figur 5: Idéskiss på Sammanfattaren 14
Autobläddraren Vid långa texter delar Autobläddraren upp i kortare delar. Dessa delar rullar automatiskt fram på skärmen efter varandra. Detta liknar systemet som vissa bildvisningsprogram har som t ex bildspel. För att kunna läsa texten är man tvungen att trycka på paus-knappen. För att kunna fortsätta läsa övrig text trycker man på paus-knappen igen. Nackdelen är att man inte får en övergripande översikt på webbsidan; det blir svårt att se hur lång sidan egentligen är: Figur 6: Autobläddraren. De små bilderna till vänster visar vilka bilder som kommer att visas vid helskärmsläget 15
Vinklad text Iden är enkel, tanken är att man vinklar hela webbsidan. Detta ger en överblick över hela sidan. För att navigerar genom webbsidan scrollar man i djupled med piltangenterna på ipaq:en. Den delen av webbsidan som man är intresserad av att se mer av finns representerad inom den röda rektangeln. För att se denna del av webbsidan tydligare är man tvungen att aktivera denna. Vid en aktivering vinklas texten upp mot skärmen. Fördelen med att ha texten vinklad är att man får en snabb överblick över hela webbsidan och systemet är lätt navigerat. Nackdelen är att denna lösning kan vara svår att programmera. Figur 7a: Översiktsbild på vinklad text. Den röda rutan visar vad som kommer att synas vid helskärmsläget. Den delen som ligger utanför ramen visas för att förtydliga tanken över vinklad text- Figur 7b: Visar den bild som låg inom den röda rektangeln vid översiktsbilden 16
Från valt koncept till slutlig lösning Konceptet som valdes kallas för SpaceWarp. Iden bygger på att visualiserar <H1>, <H2>, <H3>, bilder och brödtext som olika objekt som t ex fyrkanter, eller cirklar. Första idén på konceptet bygger på följande princip. Mittcentrerad rutuppdelning Figur 8: Första idéskiss på valt koncept Den röda rutan representerar webbsidans startsida. De mörkblå representerar <H1> De ljusblåa rutorna representerar text kopplade till H1:an. Ju längre texter desto fler pärlband av ljusblåa rutor uppkommer. De ljusgröna representerar bilder som är kopplade till en viss <H1>, <H2> eller text Den röda ramen visar vilken objekt som är valt. Tanken är att man ritar upp hela webbsidan med tillhörande <H1>, <H2>, bilder och text. När man klickar på en av rutorna visas dess innehåll upp. Runt vald ruta upp kommer en röd ram. Nedan visas en vidareutveckling av första idéskissen, men med den skillnaden att markerad ruta blir en nedtryckt knapp. Figur 9: idéskiss med knappar istället för enkla rutor. Visar endast navigationsfältet 17
I början var det objekt som representerar webbsidan placerad I mitten och de andra objekten <H1>: orna ritades ut efter hand. Den <H1>:a som är definierad att ligga högst upp på sidan hamnar närmast centrum. Nästa <H1>:a hamnar en bit längre ut ifrån i centrum i förhållande till den tidigare <H1>:an. Problemet med denna lösning var att det blir svårt att se vilken av <H1>:orna som är närmast placerad centrum. En första lösning på detta problem var att rita upp olika ramar som objekten var knutna till. Figur 10: Idé för att enklare se hur nära de olika objekten är placerade i förhållande till centrum. Visar endast navigationsfältet. Ett problem med de tidiga lösningarna var att hela hemsidans olika <H1>, <H2>, <H3>, bilder och text ritades upp på samma gång. Tanken var att det skulle gå att navigerar mellan de olika nivåerna i samma navigationsfält. Efter ett visst övervägande förkastades denna idé p g a vissa webbsidor blir alldeles för långa. Då uppstår problemet med att för många objekt kommer att ritas upp i navigationsfältet. Detta problem löstes med att först endast visa alla <H1>:or. När man väljer en <H1>:a ritas ett nytt fönster upp som visar dess underliggande <H2>:or, texter och bilder. Ett annat problem som upptäcktes var den mittcentrerade strukturen. Detta löstes med att flytta fokus från mitten och placera det till vänster i navigationsfältet. 18
Slutlig lösningen Slutlösningen utformades enligt denna princip: När man kommer in på en helt ny webbsida ritas en sol med tillhörande gråa planeter upp. Solen placeras längst till vänster och de gråa planeterna ritas upp i den ordning som de har på webbsidan. Solen representerar hela webbsidan Figur 11: <H1>:orna placeras i ordningen: Närmast solen är högst upp på webbsidan. Den gråa planeten representerar en omarkerad <H1> När man klickar på en <H1>:orna markers den för en kort sekund. Den blåa planeten med den röda ringen representerar en markerad <H1>:a Figur 12: Visar en vald <H1>:a. Bilden växlar sedan snabbt över till en nytt navigationsfält När man har valt en <H1> ritas dess <H2>:or, bilder och brödtext upp i ett nytt fönster. För att se en bild eller läsa en text klickar man på det objekt som innehåller det man söker. Den halva planet men den röda ringen representerar Vald <H1> och fungerar som Home-knapp Den blåa planeten representerar <H2> med bifogad text. Figur 13: Visar understrukturen till den tidigare valda <H1>:an Planeter med en röd markerings ring visar att den är markerad Ljusblå planeter representerar brödtext som inte rymdes på en skärmbild ihop med <H2>:an Svarta planeter representerar bilder. 19 Raketen fungerar som en bakåtknapp.
Resultat Här förklaras nu informationsvisualiseringstekniken bakom SpaceWarp. Ett antal bilder med användarexempel underlättar förståelsen. Handdatorns skärm är uppdelad i två segment. Överst finns det stora dokumentfönstret som visar bilder, länkar och brödtexten på webbsidan. Undre delen av skärmen är ett översiktsfönster som visar webbsidans struktur för användaren. När en webbsida har lästs in symboliseras själva filen (som vanligtvis heter index.html) av den stora solen i översiktsfönstrets vänstra kant. Ett antal mindre planeter symboliserar varsin rubrik av definierad av HTML-taggen <H1> (figur 14). Klickar man på en av dessa <H1>-planeter, t.ex. den andra från höger (Nöje) hamnar man ett steg ner i hierarkin. Den aktuella rubriken ersätter då solen och får saturnusringar runt sig. De tre mellanstora planeterna är då <H2>-bestämda underrubriker till Nöje (figur 15). Figur 14: HTML-filen är just inläst Figur 15: Efter klickning på rubriken Nöje Från den första <H2>-rubriken går det ut två små mörka och två små ljusa planeter. För att läsa hela den första artikeln klickar man på den första mellanstora planeten. Då kommer första delen av artikeln upp i dokumentfönstret. För att läsa resten klickar man på de två små ljusa planeterna. Texten i den aktuella artikeln behöver alltså sammanlagt tre skärmsidor för att rymmas (figur 16). Bakom de mörka små planeterna som utgår från den stora döljer sig en bild vardera som hör till artikeln. Klickar man på dessa kommer motsvarande bild upp i dokumentfönstret (figur 17). 20
Figur 16: Efter klickning på den första<h2>-rubriken Figur 17: Efter klickning på en liten mörk planet Den ständigt närvarande rödvita Tintin-raketen nere i högra hörnet av översiktsfönstret tar användaren tillbaka till det senast fokuserade objektet. Raketen fungerar alltså som bakåt-knappen i en vanlig webbläsare. En tunn röd kant runt aktuell himlakropp visar var man är i hierarkin. För att veta vad som döljer sig under de olika rubrikerna har vi en enkel lösning. Efter ett klick med pekpennan på ett objekt som motsvarar en rubrik visas aktuell rubrik fram i en gul snabbruta (som <ALT>-taggen fungerar i en vanlig webbläsare). Detta händer i två olika fall: När pekpennan landar på ett objekt och stannar kvar där längre än ca en sekund. När pekpennan landar på ett objekt och glider av det ut i den omgivande vita rymden. Ett vanligt snabbt klick på ett objekt leder till att den text som hör till respektive objekt visas fram direkt utan att man först får upp snabbrutan. Om användaren klickar på en länk till ett annat HTML-dokument kommer detta dokument att laddas in i översiktsfönstret och ersätta det aktuella dokumentet. Endast en webbsida kan alltså vara uppe åt gången. Jämför en vanlig webbläsare, där olika dokument kan vara framme samtidigt i olika ramar (frames). De minsta pekbara punkterna i översiktsfönstret bestämdes till att vara 5 5 bildpunkter stora. Stephen Brewster gör en omfattande vetenskaplig undersökning av lämpliga minsta storlekar av element på handdatorskärmar i Overcoming the Lack of Screen Space on Mobile Computers [11]. Där visar han att ljud kan förenkla för användaren att peka rätt på avsett element på skärmen. De minsta elementen som undersöks är 4 4 bildpunkter stora, varför mindre än så inte är att tänka på. Dock tyckte vi att 5 5 var en bättre storlek för den aktuella handdatorn och pekpennan. Vi använder oss av enkla ljud som bekräftelse på korrekt pekning. 21
Användarstudier av SpaceWarp Målgruppen för vår webbläsare är personer som är vana att använda handdatorer och att surfa på Internet. Dessa personer kan antas ha ett tämligen stort intresse av och vana vid informationsteknologi. En interaktiv prototyp av webbläsaren tillverkades i PowerPoint. Vi lät ett antal testpersoner använda vår prototyp. Samtliga testpersoner var vana datoranvändare, men ingen av dem hade någon vana vid användning av handdatorer. Efter en mycket kort muntlig introduktion lät vi personerna klicka sig runt i strukturen. Alla som provade prototypen uppgav att de tyckte webbläsaren vara lätt att använda och lätt att lära. En person sa att det var bekvämt och intuitivt att surfa runt på detta sätt. Den röda linjen runt aktiv planet såg inte testarna förrän det påpekades för dem. Denna bör göras tydligare, t ex blinkande eller bara tjockare. Raketen (bakåt-knappen) ansågs av några användare vara onödig, eftersom det ändå är så lätt att klicka direkt på föregående objekt. (En testare saknade bakåt- och framåt-knappar, men eftersom detta enligt uppgiftsbeskrivningen inte fick förekomma lämnas denna anmärkning utan åtgärd.) 22
Diskussion Vi anser att SpaceWarps koncept och teknik väl tillmötesgår de krav formulerade i uppgiftsbeskrivningen. Dessutom innebär SpaceWarp en behaglig resa i sökandet efter information. Tyvärr fick vi inte vår prototyp i Java att fungera tillfredsställande. De fördelar med SpaceWarp som kunde identifieras var: Enkel navigation i och med den hierarkiska uppbyggnaden. Stöder användaren genom att både erbjuda en överblick av informationsinnehållet och visa specifik information. SpaceWarp använder sig inte av rullningslister eller sidbläddring. För att forma SpaceWarp till en fullvärdig produkt krävs ytterligare utvecklingsarbete i form av programmering och designarbete. Framförallt behöver tekniken förbättras för att hantera större webbsidor med komplex struktur. SpaceWarp utnyttjar ej skärmutrymmet maximalt i vissa lägen. SpaceWarp kan ha en viss inlärningstid för användare som är vana vid konventionella webbläsare. De användare som fick prova vår interaktiva prototyp gav visualiseringstekniken mycket gott betyg. Detta bör man ta fasta på. Om detta beror på en bra och enkel interaktionsteknik eller en känslomässigt tilltalande utformning låter sig vara osagt. 23
Referenser 1. Nielsen, J. (1971).Usability Engineering. San Diego/Chestnut Hill: AP Professional, Academic Press 2. Beyer, Hugh & Holtzblatt, Karen (1998). Contextual Design. San Francisco: Morgan Kaufmann Publishers, Inc 3. Preece, J. et al. (2002). Interaction Design beyond Human Computer Interaction. John Wiley and Sons 4. Furnas, G. W. (1986). Generalized fisheye views. Human Factors in Computing Systems CHI 86 Conference Proceedings, Boston, pp. 16-23 5. Lamping, J., Rao, R. & Peter Pirolli, P. (1995). A Focus+Context Technique Based on Hyperbolic Geometry for Visualizing Large Hierarchies. In CHI 95, ACM Conference on Human Factors in Computing Systems. New York: ACM 6. Holmquist, L.E. (2000). Flip Zooming: Focus+Context Visualization of Linearly Ordered Discrete Visual Structures. Breaking the Screen Barrier, pp. 27-54. Gothenburg studies in Informatics, Report 16, Department of Informatics. ISSN 1400-741X 7. Robertson, G.G., & Mackinlay, J.D. (1993). The Document Lens. Proceedings of UIST 93, pp. 101-108, ACM Press 8. Björk, S., Holmquist, L.E., Redström, J., Bretan, I., Danielsson, R., Karlgren, J. & Franzén, K. (1999). WEST: A Web Browser for Small Terminals. Proc. ACM Conference on User Interface Software and Technology (UIST) '99, ACM Press 9. Buyukkokten, O., Molina, H.G., Paepcke, A., & Winograd, T. (2000). Power Browser: Efficient Web Browsing for PDAs. Proceedings of the Conference on Human Factors in Computing Systems, CHI'00 10. Bederson, B.B., & Hollan, J.D. (1994). Pad++: A Zooming Graphical Interface for Exploring Alternate Interface Physics, ACM UIST '94, pp. 17-26 11. Brewster, S. (2001). Overcoming the Lack of Screen Space on Mobile Computers, Glasgow Interactive Systems Group, University of Glasgow 24