1. Abstrakt Introduktion Problemspecificering Vår teknik Designval Abstract Colour Visualization

Transkript

1 1. Abstrakt Introduktion Problemspecificering Vår teknik Designval Abstract Colour Visualization Realisering av Abstract Color Visualization Diskussion Framtida arbete... 9 Referenser... 11

2 1. Abstrakt I det här projektet redogörs för en metod för att visualisera html-dokument på en PDA kallad Abstract Color Visualization. Vi beskriver hur den ursprungliga idén till tekniken uppstod, samt hur den utvecklats under tiden under olika influenser. Abstract Color Visualization använder sig av färger för att skapa en abstrakt representation av en del av ett dokument och stödjer navigering mellan olika delar inom dokumentet. 2. Introduktion Allt fler människor vill komma åt information ifrån webben genom att använda handdatorer och liknande IT-hjälpmedel. Fastän de här datorerna har blivit alltmer sofistikerade är, och förblir, skärmen mycket mindre än på konventionella datorer. Då internetsidor som ursprungligen är designade för att visas på en stor skärm med hög upplösning 1 ska presenteras på en PDA uppstår problem, då de flesta sidor på internet är inte designade med detta i åtanke. I dagsläget presenterar en browser, för den här typen av IT - hjälpmedel, webbsidor utan att ta hänsyn till den lilla skärmens kapacitet. Men att surfa med PDA är inte det samma som att göra det med en stationär dator. Det finns begränsningar i både utrymme och överföringskapacitet som måste övervinnas innan surfning via PDA kan bli vardagsmat. En skärmbild i en handdator kan inte presentera samma mängd tecken som en skärmbild i en PC kan göra. Skall samma mängd information presenteras i en handdator, måste informationen antingen delas upp på fler sidor med en djupare arkitektur som följd, eller så blir användaren tvungen att använda sig av skrollning för att nå informationen på en mer omfattande sida. Att använda sig av scrollbars torde vara den enklaste lösningen och är också den vanligaste metoden för att visa stora textmassor på stora skärmar. Allt ursprungligt innehåll kommer då visserligen att kunna läsas igenom men inte på ett överskådligt sätt. Att läsa en text m h a scrollbars upplevs som mycket omständigt då man måste scrolla i sidled för att kunna läsa slutet på varje rad för att sedan behöva scrolla tillbaka för att läsa början av nästa rad. För att lyckas presentera stora textmängder på små displayer krävs sålunda en mer fundamental lösning på problemet. Man måste gå ifrån de traditionella tankegångarna som används för stora skärmar och istället tänka i nya banor. 3. Problemspecificering Att utveckla en webbläsare för Pocket PC (PDA) som klarar av enklare webbsidor. Att utveckla en informationsvisualiseringsteknik som underlättar svårigheterna med att visa en större textmängd på en liten display. Scrollbars får inte användas. Implementera webbläsaren som använder ovanstående teknik i Java. 1 Idagsläget kan man anse att en skärm med en upplösning på 800*600 pixlar utgör en form av minimiupplösning hos normalanvändaren. 2

3 4. Vår teknik 4.1 Designval Då problemet med att presentera stora textmassor på en liten skärm beaktas ställs man inför flera vägskäl. Vad skall prioriteras? Möjligheten att överblicka helheten eller läsbarhet? Exakt representation av ursprungstexten eller nya lösningar för att skapa enkelhet? Ursprungligen tittade vi på möjligheten att använda en teknik liknande The Document Lens (Robertson, Macinlay 1993) där man, samtidigt som man kan överblicka hela dokumentet, kan läsa den del av det som är inom linsen. Själva läsprocessen går då till så att man flyttar linsen neråt för att förflytta sig genom texten i dokumentet. (Se fig. 1) Ett problem med denna teknik utifrån vår största begränsning den lilla displayen, är att tekniken tar upp mycket utrymme som till stor del endast används för att skapa överblick över dokumentets innehåll. Detta skulle delvis kunna lösas genom att man gör det möjligt att ändra linsens storlek så att denna i sitt största läge täcker upp hela displayen. Fig. 1 The Document Lens Ett problem som uppstår med linstekniken är möjligheten att skaffa sig en överblick över hela dokumentet. Visserligen erbjuder denna teknik möjligheten att se hela dokumentet, om än i ett väldigt hoptryckt format om det rör sig om ett stort dokument, men som tidigare nämndes disponerar den inte utrymmet särskilt bra. En lösning på detta är att dela upp ursprungsdokumentet i flera delar där en del upptar en display. Dessa deldokument görs så att innehållet har en storlek som baserar sig på att varje deldokument skall vara fullt läsbart. Denna teknik benämns chunking och användes i projektet WEST: A Web Browser for Small Terminals (Björk et al. 1999). Från dessa deldokument skulle man sedan kunna skapa tumnaglar - små visuella representationer för varje del av ursprungstexten som kommer att uppta en display. Genom att använda sig både av dessa tumnaglar och av deldokumenten skulle man både kunna uppnå möjligheten till överblick och läsbarhet. (Se fig. 2) Problemet är hur man uppnår detta utan att begränsa ytan 3

4 på displayen som används för deldokumentet. Vi vill alltså inte ha en lösning där både deldokument och tumnaglar slåss om samma utrymme. Fig. 2 Tumnaglar Målet är att deldokumentet ska använda så stor del av displayen som bara är möjligt. Tumnaglarna placerades därför på en flytande slide som glider ut när man behöver den. Sliden aktiveras genom att man med hjälp av pennan (det verktyg som används på de allra flesta PDA:er) drar över högra kanten av displayen och stöter till den fysiska kant som begränsar displayens yta. På detta sätt fördelar man hela displayens yta till deldokumentet samtidigt som överskådligheten kan nås när helst man så önskar. Navigeringen mellan deldokumenten sker genom att man klickar på det deldokument man vill gå till, detta möjliggör även ickelinjär läsning. Tumnaglarnas visuella representation av deldokumentets innehåll och uppbyggnad i form av text och bild, dokumentets struktur, möjliggör även en mer abstrakt navigering genom dokumentet då vi har en förmåga att orientera oss efter objekts och miljöers utseende i grova drag. Tumnaglarna som här presenterats används dock i flera andra sammanhang exempelvis är de vanligt förekommande i filhanteringssystem och som representationer av filer i foldrar i exempelvis Windowsgränssnittet. För att undvika krockar mellan de tumnaglar vi använder för att representera deldokumentet och de tumnaglar som används för att representera ett helt dokument, valde vi att frångå tumnagelsrepresentationen till förmån för en mer abstrakt teknik. Anledning till valet av tumnaglar var som tidigare nämnts att de är en direkt visuell representation av dokumentet i ett mindre format. Man kan utifrån tumnagelns utseende dra vissa slutsatser angående dokumentets innehåll med avseende på mängden bilder och text. Influerade av projektet Web TOC (Nation 1998) där staplar används för att visualisera och kvantifiera websiter kom vi fram till att det finns andra sätt att representera deldokumentens 4

5 innehåll förutom med en rent visuell representation. Tekniken fick namnet Abstract Colour Visualization. 4.2 Abstract Colour Visualization Varje deldokuments innehåll i fråga om mängden text, bild och länkar representeras av tre horisontella staplar. Valet av just de tre ovanstående parametrarna grundas på att det i första hand är texten och bildernas mängd och förekomst som strukturerar upp en sida. Länkarna var naturliga att ta med då det här rör sig om HTML-dokument. Att representera länkar erbjuder, förutom att de även bidrar till dokumentets struktur, även möjligheten att underlätta för användare som exempelvis letar efter en länksamling. Staplarnas längd är alltså en direkt representation av andelen text, bilder och länkar i deldokumentet. Fig. 3 Abstract Colour Visualization De tre staplarna för text, bild och länkar ersätter, tillsammans som en enhet, tumnageln. Det innebär att enheten med de tre staplarna tillsammans representerar ett deldokument eller innehållet på en display. Antalet deldokument som ursprungsdokumentet delats upp i 5

6 motsvaras av motsvarande antal stapelenheter. Detta innebär att man navigerar mellan deldokument genom att klicka på den stapelenhet man önskar komma till. Man kan på så sätt bilda sig en uppfattning om ett deldokuments innehåll redan innan man navigerat till den. Något som hjälper användaren att lättare hitta det avsnitt i dokumentet hon söker. (Se fig. 3) Genom att färgkoda staplarna, med grundfärgerna röd, grön och blå, underlättas identifieringen av staplarnas betydelse förutom deras inbördes position. Översta stapeln är den som representerar text. Att denna skulle ligga överst tyckte vi var naturligt då det i de allra flesta sammanhang är text som dominerar dokument och man har för vana att syna föremål uppifrån och ner. Färgen valde vi till att vara grön. Mellersta stapeln representerar förekomsten av bilder, stapeln har färgen röd. Den röda färgen har en varnande egenskap, något som utnyttjas för att varna för en stor mängd bilder som kan ta lång tid att ladda ner. Länkarna representeras av en blå stapel. Färgen är kopplad till länkar i HTML-dokument, där blå har blivit en form av standardisering för att representera länkar. (Se fig. 3) Fig.4 Slide i övre delen av displayen 6

7 Stapelenheterna är lokaliserade på samma slide som nämndes ovan och ersätter där tidigare tumnaglar. Slidens placering på displayen i utfällt läge är i den övre delen av displayen. Detta för att om man läser dokumentet linjärt, något som får anses vara den vanligast förekommande metoden, skall störas så lite som möjligt. Tanken är att sliden inte skall täcka över slutet på texten på varje deldokument. Denna del av texten är den man läser sist innan man byter deldokument och således den del som man kan behöva läsa om ännu en gång för att lättare klara övergången till nästa deldokument med bibehållen läsförståelse. (Se fig. 4) 5. Realisering av Abstract Color Visualization För att kunna skapa en abstrakt representation av varje deldokument och för att kunna navigera mellan olika deldokument genom att klicka på stapelenheterna måste man hålla reda på vilken del av texten som varje deldokument är kopplat till samt hur mycket text, bilder och länkar deldokumentet består av. För att kunna hantera detta skapas objekt av en klass Display, som lagrar denna typ av information (se figur 5). Displayobjekten skapas dynamiskt medan den html-fil som ska visas i PDA:n behandlas. Text och bilder skrivs ut på en yta (en container) som är större än den yta som kan visas på PDA:n och som är tillräckligt stor för att rymma hela den ursprungliga filen. Även detta illustreras i figur 5. För att hålla reda på var på y-axeln i denna container man befinner sig används en variabel y. Varje gång denna variabel räknas upp, d v s en ny rad läggs till i containern, kontrolleras om y-koordinaten passerat en brytningspunkt mellan två deldokument. Om så är fallet skapas ett nytt objekt av typen Display, displayobjekten sparas i ett fält och när filen är slut innehåller fältet så många objekt som det finns deldokument i html-filen. För att kunna uppdatera information om mängden text, bilder och länkar i de olika deldokumenten då html-filen gås igenom måste man hålla reda på vilket displayobjekt som för tillfället är det aktuella, detta görs m h a en instansvariabel. Då en text eller en bild läggs till i containern uppdateras samtidigt informationen i det aktuella displayobjektet. Då en text håller på att skrivas ut och en ny rad görs räknas antalet rader text upp. Om en text eller en bild representerar en länk räknas även antalet länkar upp. För att kompensera för att bilder har olika storlek beräknas antalet bilder som det antal rader som bilden upptar. Antalet bilder i displayobjektet räknas därför upp med höjden på den aktuella bilden delat med höjden på en textrad av typen brödtext, då parsern funnit en bild. Då hela html-filen parsats och skrivits ut har också samtiliga displayobjekt skapats och finns lagrade i ett fält. För varje objekt i fältet beräknas andelen text, bilder och länkar utifrån den information om antalet rader text, bilder och länkar som finns lagrade i objektet. I det översta displayobjektet i figur 3 skulle andelen rader beräknas till 20% (1/5), andelen bilder till 60% (3/5) och andelen länkar till 20% (1/5). Dessa procentsatser används sedan för att beräkna längden på de staplar som ska representera deldokumentet. Längden på stapeln som representerar andelen text i deldokumentet beräknas till 20% av det totala utrymme som finns avgränsat för staplarna (100 pixlar), längden på stapeln som representerar andelen bilder till 60% osv. De tre staplarna ritas ut i displayobjektet som sedan läggs till i sliden. Den slide i vilken de abstrakta representationerna av deldokumenten är placerade är en lyssnare. Ursprungligen är denna slide gömd, endast en smal remsa är synlig i fönstrets högra del. Då användaren klickar på den ritas fönstret om och sliden flyttas till att uppta den högra 7

8 halvan av fönstret och stapelenheterna blir synliga. Även displayobjekten inne i sliden är lyssnare, detta för att användaren ska kunna klicka på en abstrakt representation av ett deldokument och motsvarande deldokument skall visas i textfönstret. Displayobjekt: y Här står en rad text. BILD Antal rader text: 1 Antal rader bild: 3 Antal länkar : 1 Display brytning Display brytning Länk till Page 1. Det här deldokumentet består endast av sex rader text och representeras av en ensam grön stapel i sliden. Länk till Page 5. Dokumentet är slut. Antal rader text: 6 Antal rader bild: 0 Antal länkar : 0 Antal rader text: 1 Antal rader bild: 0 Antal länkar : 1 Figur 5. Till vänster i bilden visas det htmldokument som ska visas i PDA:n utskrivet på en container. Containern är uppdelad i tre deldokument, för var och en av dessa har ett displayobjekt skapats. 6. Diskussion För att människor med olika bakgrund och kunskaper skall kunna använda det framtida systemet bör det vara enkelt att använda. Detta ökar tilltron till systemet och gör att det får en ökad användning. För att uppnå detta ställs dock vissa krav på utveckling och design av gränssnittet. För att få en bra bild av hur vårt arbete uppfyller dessa krav hade en användarstudie för att få användarens åsikt varit nödvändig. I ett bra gränssnitt låter man användaren koncentrera sig på sin uppgift. I vårt fall låter det användaren få en uppfattning om dokumentets innehåll och en bild över dess helhet, applikationen är utformad så att användaren får en god överblick av innehållet. Användare skall inte tvingas lägga ner en stor mängd energi bara för att försöka förstå sig på funktioner i systemet. Den relativt enkla designen, med tydlig indelning av informationen i en slide samt avsaknad av komplicerade menysystem, gör att användare har goda möjligheter att snabbt förstå och använda systemet. En viktig del för att användare skall veta vart de befinner sig i strukturen är att ge användaren information om detta. I sliden ger vi denna återkoppling genom att ge den aktuella stapelenheten en annan bakgrundsfärg. Detta tror vi bidrar till att underlätta för användare att 8

9 orientera sig och för att stimulera denne att söka vidare. Vi tror att denna form av respons är viktig för användares sökvilja. Vi tycker att fördelarna med vår ansats är övervägande i vårt arbete, då syftet har varit att få en förståelse för visualiseringsproblematiken snarare än ett statistiskt säkerställt resultat. Användaren spelar den centrala rollen vid användandet av ett IT-hjälpmedel varför dennes åsikter är viktiga att beakta. Vi är ju människor och påverkar och påverkas av vår omvärld. Vi har alla olika paradigm om vår omvärld och detta påverkar naturligtvis vårt sätt att tolka. Även om inte vi har fokuserat på detta i vårt arbete, framhålls vikten av att tänka sig in i den situation, en tänkt användare befinner sig i när denne skall använda sig av applikationen. Det hade varit bra om vi hade haft möjligeheten att studera användningen av scrollbars och jämföra det med vårt system med användare i fokus för att få en bild av vårt system i jämförelse med scrollbars. Slutligen kan vi säga att befintliga principer är en bra utgångspunkt att jobba utifrån, men självklart man måste ta hänsyn till bildskärmens storlek, upplösning och prestanda, vilka utgör begränsningar i utvecklingen. En annan viktig faktor vid design för displayer är att ha användaren och användningsområdet i fokus för att på bästa sätt utnyttja de resurser en display har och för att uppnå största möjliga användarvänlighet. 7. Framtida arbete Abstract Colour Visualization har mycket att erbjuda vad gäller möjligheten att visualisera innehåll och struktur i textdokument. Några vidareutvecklingar som kan vara intressanta att utforska innefattar en utbyggd variant av stapelinformationen, ett försök att utnyttja displayen i ett horisontellt format och en mer abstrakt representation av samma innehåll som staplarna idag står för. Det skulle vara intressant att undersöka möjligheten att få in mer information i staplarna och på så sätt åstadkomma en ännu utförligare representation av deldokumentets innehåll. Ett sätt att åstadkomma detta skulle vara att dela in textstapeln i segment för varje textstycke. Detta skulle ge en än mer tydlig bild av dokumentets uppbyggnad. Samma effekt skulle kunna appliceras på staplarna för bilder respektive länkar. I textstaplarnas fall skulle det vidare vara intressant att se hur man skulle kunna representera rubriker genom att ge stapeln en mörkare grön färg där sådana förekommer. Det är oklart om dessa förslag till tillägg verkligen hade bidragit till en ökad tydlighet eller om det kanske rent av blir frågan om för mycket information som gör överblicken otydlig för en användare. En annan intressant utveckling skulle vara att stödja möjligheten att vrida PDA:n 90 grader för att på så sätt kunna utnyttja displayen i ett horisontellt format. Detta kan i vissa fall vara önskvärt när det gäller bilder och diagram, då de flesta sådana är i ett horisontellt format. Det horisontella formatet skulle även kunna erbjuda en möjlighet till att utforska en annan form av uppdelning från original- till deldokument där man bättre skulle kunna utnyttja displayens bredd. En mer abstrakt lösning som radikalt skiljer sig från de två tidigare, skulle vara att undersöka möjligheten att blanda de tre staplarnas färger till en färg som ensam skulle få representera deldokumentets innehåll. De tre staplarnas färger utgörs i dagsläget av de tre grundfärgerna 9

10 rött, grönt och blått. Respektive stapels längd skulle då motsvara respektive färgs värde 0-100%. Genom att blanda dessa färgvärden på samma sätt som man gör med RGB-kod får man en ensam färg byggd på de övriga tre. 10

11 Referenser Björk, S., Holmquist, L.E., Redström, J., Bretan, I., Danielsson, R., Karlgren, J., Franzén, K. WEST: A Web Browser for Small Terminals. Proceeding of ACM UIST 99, ACM Press, David A. Nation, WebTOC: A Tool to Visualize and Quantify Web Sites using a Hierarchical Table of Contents Browser, CHI APRIL Robertson, G.G., Mackinlay, J.D., The Document Lens. Proceedings of UIST 93, pp , ACM Press,