Introduktion I dagens läge när möjlighet finns att vara trådlöst uppkopplad till Internet via sin handdator uppkommer nya problem som tidigare inte fanns. Ett av dessa är hur informationen från webbsidor gjorda för en upplösning på 800x600 på ett bra sätt ska kunna visas på handdatorns lilla skärm med betydligt lägre upplösning. I detta arbete har en webbrowser för små skärmar tagits fram. Huvudtanken med detta är att på ett bra sätt kunna surfa på nätet från sin handdator, i det här fallet Compaq s handdator ipaq. Kravet var att webbrowsern inte skulle använda sig av scrollning och bläddring för att visa den information som inte fick plats i det lilla fönstret. I stället har en alternativ visualiserningsteknik tagits fram. Denna visualiseringsteknik ska sedan implementeras på en ipaq med hjälp av programspråket Java. I rapporten kan arbetet följas från brainstormingen om alternativa metoder som skulle vara möjliga att använda till den färdiga prototypen. Mellan dessa två punkter finns teoretiskt stöd och övriga argument för de alternativ som valts till den färdiga prototypen. Rapporten tar kort upp några av de alternativa visualiseringstekniker som studerats samt dess för- och nackdelar. Vidare diskuteras några alternativa tekniker för att presentera text på en begränsad yta med bibehållen läsförståelse och läshastighet. Det förslag som togs fram och vidareutvecklades använder sig av dynamisk textpresentation för att presentera webbsidornas text och en översiktsbild av hela sidan för navigering. Så långt som det varit möjligt med gruppens programmeringskunskaper och tillgänglig tid har en prototyp skapats i Java. Dock räckte tid och kunskaper inte till för att få en fullt fungerande prototyp som på ett bra sätt visade gruppens tankar. För att kompensera detta har en interaktiv prototyp i Flash tagits fram som på ett mer exakt vis illustrerar den tänkta webbrowsern, både visuellt och funktionsmässigt.
Innehåll 1 Bakgrund...1 2 Relaterade arbeten...2 2.1 Befintliga tekniker...2 2.1.1 Flip- zooming...2 2.1.2 Fisheye...3 2.1.3 The document lens...3 2.2 Diskussion kring olika tekniker...3 3 Teori...4 3.1 Översiktsbilder...4 3.2 Presentera text på en liten yta...4 3.2.1 Ögat och läsning...4 3.2 Dynamisk textpresentation...5 3.2.1 RSVP (Rapid Serial Visual Presentation)...5 3.2.2 Leading...5 3.3 Diskussion om format...5 4 Metod...6 4.1 Kravspecifikation...6 4.1.1 Användare...7 4.1.2 Val av visualiseringsteknik...7 4.1.3 Layout på skärmen...8 4.1.4 Översikt...9 4.1.5 Texten...9 4.1.6 Länkhantering...10 4.1.7 Bildhantering...10 4.1.8 Navigation...10 5 Resultatet...11 5.1 Layout på skärmen...11 5.2 Läsa text...11 5.3 Visa bilder...12
5.4 Länkhantering...12 5.5 Navigering...13 6 Diskussion...14 6.1 Möjliga problem...14 6.2 Implementation...14 6.3 Ytterligare funktioner...15 Referenser...16
1 Bakgrund De senaste åren har utvecklingen av mobil elektronik gått fort fram. Produkterna har blivit mindre, skärmarna bättre och beräkningskraften större. Vidare erbjuder många av dagens handdatorer användaren att trådlöst komma åt sidor på webben. Många av dessa handdatorer är kraftfulla nog att kunna visa bilder, animationer och text på samma sätt som en stationär dator, dock med begränsningen att skärmen är betydligt mindre. Den lilla skärmen ställer till stora problem när information ska visas, speciellt då majoriteten av sidorna på nätet är anpassade för en skärmupplösning på 800x600 pixlar eller mer. Detta resulterar i att användaren endast kan se fragment av en hel sida samtidigt på dessa små skärmar utan att behöva scrolla både horisontellt och vertikalt, vilket medför att dessa artefakter är usla att surfa på webben med. Så som det ser ut i dag måste en sida speciellt anpassad för just små skärmar besökas om information på ett tillfredställande sätt ska kunna hämtas och visas på ett tillfredställande sätt. Den nya webbrowsern ska implementeras på en ipaq med hjälp av programspråket java och på ett nytt och innovativt sätt visa vanliga webbsidor utan behov av varken bläddring eller scrollning. Målet är att informationen på sidorna lätt ska kunna tas in. Den första frågan som gruppen ställde sig var varför ingen tidigare har kommit på ett gränssnitt för att lätt kunna surfa på dessa små artefakter, marknaden för en dylik produkt borde ändå vara rätt stor. Problemet som ska lösas i detta projekt är alltså att hitta en alternativ metod för att effektivt kunna visa dessa sidor på små skärmar. Om detta problem kan lösas på ett tillfredställande sätt borde användningsområdet för dessa små handdatorer vidgas betydligt. Vidare borde även informationen som finns på nätet bli mer lättåtkomlig för personer som använder dessa artefakter. 1
2 Relaterade arbeten Webbsidor idag skapas oftast för formatet 800 x 600 pixlar, vilket inte är en standard men många följer ändå denna rekommendation. Detta medför att när en användare vill besöka en webbsida med hjälp av sin personal digital assistant (PDA) läses hela sidan in men endast en liten yta kan visas på grund av PDA:ns lilla display. Resultatet blir att användaren måste använda sig av scrollning eller menyknappar för att navigera runt på webbsidan. Om användaren inte är bekant med sidan som besöks kan detta upplevas som väldigt frustrerande då man får navigera runt på sidan och leta efter den information som eftersöks. Med Internet som verktyg började vi söka efter programvaror som kunde hjälpa användaren att se hela webbsidor i sin PDA utan att behöva scrolla eller använda menyknappar. Vi hittade ett flertal olika tekniker som var utvecklade för att visa text på små ytor men ingen färdig modul som kunde implementeras direkt till de PDA s som finns på marknaden i dagsläget. En anledning till att det inte fanns någon modul kan vara att användarna av denna teknik har en högre acceptans för produkten då de endast använder den som ett komplement till sin stationära eller bärbara dator. Dessa användare som besöker webbsidor de tidigare varit på borde veta intuitivt vart de kan få tag i den information som de söker. 2.1 Befintliga tekniker Några av de befintliga tekniker som redan i dagsläget finns är greeking och focus + context tekniker. Greeking är en teknik för att visualisera en generell bild över hur texten är strukturerad i t ex ett dokument. Texten innehåller inte bokstäver utan representeras av t ex linjer som visar hur långa raderna är. Tanken är att ge användaren en uppfattning om hur sidan är disponerad och på så sätt hjälpa användaren att hitta rätt. Focus + context är en teknik som innebär att användaren har överblick över sidan samtidigt som detaljnivån visas. Exempel på denna teknik är Flip-zooming, Fisheye och The document lens. 2.1.1 Flip- zooming I Flip-zooming delas texten upp i objekt. Varje objekt visas sedan på en egen sida. Den sida som användaren vill läsa visas i normalstorlek och de övriga är förminskade. Sidan som visas kan även zoomas så att texten får önskad storlek (Holmqvist, 1997). Fördelar för användarna av denna teknik är att användarna får en överblick över den totala textmängden och dess struktur samt att displayens yta kan utnyttjas optimalt. Användaren kan här skumläsa texten och därmed snabbt hitta information som söks. De nackdelar som tekniken kan medföra att när användaren byter fokus från en sida till en annan är det inte säkert att sidan hamnar på samma plats som den ursprungliga. Vid långa dokument delas sidan in i flera mindre thumbnails som kan ge ett plottrigt och rörigt utseende. 2
2.1.2 Fisheye Fisheye -tekniken innebär att användaren fokuserar sig på ett textstycke. Detta stycke kommer att visas i läsligt format och all text runtomkring är förminskad. Ju längre bort från fokus användaren är desto mindre är texten (Furnas, 1986). Denna teknik lämpar sig bra till textdokument, dock inte till grafiska objekt. Detta beror på att det kan vara svårt att få överblick över innehållet då sidan ändrar utseende beroende på vart fokus är. Ytterligare en nackdel är att användaren endast kan läsa ett fåtal meningar åt gången och då får svårt att skumläsa innehållet för att finna den eftersökta funktionen eller informationen. 2.1.3 The document lens The document lens är en 3D- teknik utformad för navigering mellan olika textsidor. Sidorna läggs ut efter varandra och en linsbrytning gör att användaren kan se det som befinner sig utanför fokus i perspektiv (Robertson, 1993). Den text som befinner sig längst bort från fokus är minst och blir sedan större ju närmare fokus användaren kommer. För att navigera mellan sidorna använder man sig av scrollning. Denna teknik gör att alla sidor kan visas, men blir svår att överblicka då en sida kan ha olika utseende beroende på vart användaren har sitt fokus. är placerade. Är användaren inte van vid tredimensionella ytor kan det upplevas som en aning rörigt och svårt att skaffa sig en total överblick över informationen. Vid stora textmassor kan det vara bättre att använda sig av Fisheye då informationen i Flip-zooming visar sig i form av thumbnails. (små sidor innehållande information) När fokus ändras modifieras även sorteringen på dessa thumbnails och det kan vara svårt att orientera sig i vad som är vad i texten. Greeking är en bra teknik att använda sig av när användaren vill ha en översikt av en befintlig sida. Tekniken lämpar sig inte så bra när användaren vill kunna läsa delar av texten och ta ut relevant information för sin uppgift då all text är ersatt med linjer som motsvarar textradens längd. En kombination av tekniker som gör att texten presenteras med hjälp av greeking fast med bibehållen teckenstorlek på rubrikerna vore ett bra alternativ för användarna. Denna lösning gör att orienteringen underlättas och navigeringen går smidigt då användaren snabbt hittar den text som är av intresse. 2.2 Diskussion kring olika tekniker Fördelen med Flip-zooming gentemot The document lens är att användaren kan hoppa till nästa fokus utan att scrolla sig fram samt navigera mellan sidorna på ett enkelt sätt. Det kan även vara lättare att få en överblick över informationen då denna visas tvådimensionellt i form av sidor. Vid användandet av The dokument lens, som är en 3D teknik, kan det vara svårt att se i vilken ordningsföljd som sidorna 3
3 Teori För att kunna visa information på en liten yta måste vissa aspekter tas hänsyn till, så som ögats funktion, kognitiva begränsningar och fysisk egonomi. I detta kapitel har vi samlat ett antal teorier kring dessa aspekter då de var en bra grund att utgå ifrån när vi diskuterade browsern och dess design. 3.1 Översiktsbilder Människan kan genom sina kognitiva förmågor orientera sig i en värld med hjälp av landmärken så som kanter, ljus och andra visuella ledtrådar (Bechtel och Graham, 1998). Samma ska gäller för ytor med grafiska objekt, färger och former vilka kan fungerar som orienteringspunkter och ledtrådar (Mullet & Sano, 1995). På så sätt kan en översiktsbild ge stort stöd åt användaren när denne ska orientera sig på t ex en webbsida, speciellt om denne tidigare besökt samma sida. Även om översikten inte innehåller text som kan läsas kan användaren orientera sig med hjälp av de objekt som finns på sidan så som bilder och textspalter och grupper av grafikobjekt. 3.2 Presentera text på en liten yta När text ska presenteras på en liten yta uppkommer ofta problem. Dessa problem beror huvudsakligen på att ytan texten presenteras på blir för smal och att ögat då inte kan arbeta på ett effektivt sätt (Shneiderman 1998). 3.2.1 Ögat och läsning I detta avsnitt kommer de mest fundamentala grunderna i ögats funktion beskrivas. Detta för att skapa en viss förståelse för vårt val av textpresentationsteknik som senare kommer att göras. Under läsning beter sig ögat på ett speciellt sätt. Logiskt skulle vara att ögat följer texten med en mjuk rörelse från vänster till höger i samma takt som den läses, så är dock inte fallet. Eftersom ögat inte kan se en skarp bild när det rör sig och heller inte kan ta in någon användbar information, gör ögat så kallade fokuseringar där det stannar upp (Crowder & Wagner, 1992). Vid varje fokusering kan ögat endast uppfatta mellan 6 och 8 tecken skarpt. Ytterligare 10 tecken kan ses till höger om fokus men inte alls med samma skärpa (Paulson & Goodman, 2000). När ögat tagit in dessa 6-8 bokstäver förflyttar sig ögat snabbt till nästa fokuseringspunkt där fler tecken kan tas in, dessa förflyttningar kallas sackader. Ögat rör sig även i vissa fall tillbaka i texten, detta sker framförallt när läsaren inte riktigt har uppfattat vad denne har läst eller blivit distraherad. Dessa rörelser kallas för regressioner. Alla dessa rörelser är mycket korta och sker i snitt 5 gånger per sekund. Ögat gör ytterligare en rörelse, den vid radbyte, det vill säga ett fokusskifte från höger kant till vänster kant. Detta är den förflyttning som är längst och där med också tar längst tid. När en text presenteras på en liten yta resulterar det framförallt i att radlängden blir kortare vilket kräver att ögat gör fler omfokuseingar än om texten hade lästs på en normalstor yta. Texten blir ofta också 4
svårare att följa vilket leder till fler regressioner. Detta resulterar i att ögat ägnar mer tid åt förflyttningar än när en text med normal radbredd läses (Crowder & Wagner, 1992). I och med att ögat rör sig mer kan mindre tid användas till att ta in information, vilket resulterar i en markant lägre läshastighet och lägre förståelse av texten. rullande remsa vilken passerar i ett begränsat fönster på en skärm, från höger till vänster (Juola, 1995). Denna teknik används ofta på offentliga platser, så som busstationer och flygplatser, då information ska visas. (Se bild 3.1) 3.2 Dynamisk textpresentation Ett sätt att lösa ovanstående problem är att använda sig av en dynamisk textpresentationsteknik. Det betyder att texten inte presenteras på ett statiskt sätt, som t ex i en bok, utan i stället animeras på något sätt. Den största fördelen med ett sådant presentationssätt är att de tidskrävande ögonrörelserna kan minskas markant, i vissa fall till nivåer som ligger långt under de vid läsning av normalt presenterad text. Det finns i huvudsak två olika format för att presentera text dynamiskt, RSVP och Leading (Muter, 1996). 3.2.1 RSVP (Rapid Serial Visual Presentation) RSVP fungerar i grunden på så sätt att ett ord i taget presenteras i snabb takt efter varandra på en och samma punkt på skärmen. Det resulterar i att ögat inte behöver röra sig alls och att text kan läsas mycket snabbt på en yta som i många fall inte rymmer mer än 10 tecken (Rahman & Muter, 1990). 3.2.2 Leading Leading är förmodligen en mer kommersiellt använd teknik än RSVP trots att ganska lite uppmärksamhet har riktats mot denna teknik inom forskningen. Leadingtekniken går ut på att text presenteras som en Bild 3.1: Leading, texten rör sig i pilens riktning. 3.3 Diskussion om format Dessa båda två presentationssätt har olika för- och nackdelar. Att just RSVP har fått större uppmärksamhet kan bero på att denna teknik erbjuder betydligt högre läshastighet med bibehållen förståelse än leading gör (Juola, 1995). Under normala läshastigheter är skillnaden i förståelse obefintlig. Vidare får leading i direkta jämförelser ofta högre acceptans hos läsarna än RSVP, vilket kan bero på att läsaren kan använda ungefär samma lästeknik som vanligt med leading. RSVP däremot kan i början kännas som mycket stressande och ovant att använda efter som en annan lästeknik måste användas (Kang & Mutter, 1998). Leding tekniken erbjuder läsaren att till viss del läsa ikapp missad text om denne blivit distraherad. Med RSVP är detta lite svårare då oftast bara ett ord visas i taget och visade ord direkt försvinner för att ge plats för nya. I detta projekt har vi valt att använda oss av leadingtekniken då den ger lika hög förståelse som RSVP under normala läshastigheter samt ger användare mer kontroll över läsandet i form av möjligheten att läsa ikapp missad text. Då texterna på en webbsida oftast inte är långa borde den extremt hög läshastighet RSVP kan erbjuda spela en mindre roll. 5
4 Metod Det första projektgruppen gjorde var att fritt brainstorma kring hur informationsvisualiseringen skulle gå till utan att begränsa sig med vad som var möjligt att implementera med gruppens kunskaper i Java. På så sätt kunde kreativiteten flöda lite mer fritt utan att begränsas av vad som var praktiskt möjligt och inte. Detta skedde vid två skilda tillfällen då det kändes som om det var lätt att låsa sig runt en idé och tycka att just den var den bästa. Efter detta satte sig gruppen ner och tittade på vad som var tekniskt möjligt att implementera med gruppens kunskaper och utifrån det bestämma vilken visualiseringsteknik som skulle användas. Under brainstormingsessionerna specificerades även vilken målgruppen skulle vara, vilka funktioner browsern måste ha och vilka kognitiva funktioner det skulle finnas stöd för. 4.1 Kravspecifikation I detta stycke har ett antal krav som webbrowsern ska klara samlats. De flesta är framtagna av gruppen under brainstormingsessionerna Mål med hela projektet En webbrowser vilken använder en alternativ metod för visualisering av information, vilken sedan ska implementeras på en ipaq med hjälp av Java. Målgrupp Personer som vill hålla sig uppdaterade på vad som händer i världen även när denne inte har tillgång till en vanlig dator samt ha vana att surfa på nätet. Vad ska browsern klara av? Tillåta användaren att läsa längre texter på ett smidigt sätt. Visa bilder i anslutning till texten. Möjlighet att kunna se bilder tydligare (förstora) Lätt kunna navigera med hjälp av länkar och fram/bak knappar. Fokus på basfunktioner Kognitivt stöd På något sätt stödja användaren att skapa en god överblick av webbsidan Stödja spatial orientering på för användaren kända sidor eller efter designkonventioner. Browserns navigation Kunna användas med ett fåtal knappar/menyer för att använda de vanligaste funktionerna. Utnyttja ipaq:ens touchscreen Kunna hantera länkar på ett effektivt och bra sätt. På ett enkelt sätt kunna bestämma var på sidan man vill börja läsa. Kunna skriva in en egen adress i ett adressfält. 6
Med ovanstående krav som grund började arbetet med att ta fram den visualiseringsteknik som skulle användas samt vilka funktioner som skulle finnas. 4.1.1 Användare Som målgrupp inriktade vi in oss rätt snabbt på personer som vill hålla sig uppdaterade med vad som händer i världen, även när de inte har tillgång till en vanlig dator Vidare har antagits att användaren har en vissa vana att surfa på nätet. I och med att browsern kommer att köras på en portabel pocket PC och då förmodligen inte kommer att användas som användarens primära surfverktyg kommer hänsyn tas till detta. Exempelvis kommer endast de absolut viktigaste basfunktionerna att finnas tillgängliga, vidare kommer ett större fokus att läggas på informationsinhämtning än stödja funktioner för att lösa komplicerade uppgifter. Användaren förväntas i och med det t ex inte använda browsern till nätshopping, banktjänster eller avancerade beställningar av något slag. Användaren förutsätts att mer fokusera på att ta in information denne behöver just för tillfället, så som nyheter eller information om någon produkt. Vidare tros användaren inte surfa några längre tider i sträck utan endast så länge det tar att hitta och ta in den information som eftersöks. Miljön den kommer att användas i kommer därför troligtvis stundtals var störande och ha ont om plats, t ex på en tunnelbana eller buss. 4.1.2 Val av visualiseringsteknik När det gällde visualiseringstekniker hade gruppen en mängd olika förslag. Det första som kom upp vara att använda någon form av kartotekssystem där informationen delades upp på de olika kartotekskorten. Varje kort skulle då kunna representera var sitt ämne eller olika ställen på en webbsida. (Se bild 4.1) Dock var gruppen inte nöjd med detta förslag då detta skulle innebära att informationen måste struktureras om jämfört med orginalsidan, vilket kunde leda till att användaren inte lätt kunde hitta på sidor denne var van att besöka sedan tidigare. Vidare skulle det vara mycket svårt att skapa sig en överblicka av hela sidan med denna teknik. Bild 4.1: Kartoteksförslag Ytterligare två förslag togs fram med syftet att skapa en god översikt av sidan då gruppen ansåg att det var mycket viktigt. Ett av dessa var att placera användarens perspektiv på webbsidan så som att sidans innehåll projiceras på insidan av en kub i vilken användaren själv befinner sig. Navigation skulle då kunna ske genom att kuben roteras och ny information blir synlig på kubens väggar. (Se bild 4.2) 7
Rätt snabbt insågs att dessa visualiseringssätt inte skulle vara möjliga att applicera på en PDA eller ens vara lämpliga för att presentera denna sorts information. I stället valdes en teknik som byggdes på en förminskad kopia av orginalsidan från vilken navigationen sker. Texten på sidan skulle presenteras med hjälp av dynamisk textpresentation för att spara plats och effektivisera läsningen av längre texter. Bilderna på sidan skulle visas i ett separat fönster. Detta var det förslag som gruppen valde att arbeta vidare med. (Se bild 4.4) Bild 4.2: Kub inifrån. Ett annat var att placera användares perspektiv utanför kuben och projicera informationen från webbsidorna på utsidan av denna, även här skulle kuben roteras för att navigera. (Se bild 4.3) Bild 4.4: Förslag med separata fönster Bild 4.3: Kub utifrån. 4.1.3 Layout på skärmen. Till att börja med kretsade tankesättet helt och hållet kring att använda ipaq:en på sin rätta ledd, dock blev ytan på skärmen svår att utnyttja på ett bra sätt. Gruppen beslutade att i stället använda ipaq:en liggande. På så sätt blev den lilla skärmytan lättare att utnyttja. Detta beror på att ögat har lättare att utnyttja bredden av synfältet än höjden (Crowder & Wagner, 1992). 8
I och med att ipaq:en ändå inte gick att hålla med en hand, vilket var tanken från början, hade användaren ändå båda händerna upptagna. Slöseri tyckte vi. För att underlätta navigationen och utnyttja båda händerna effektivt samt utnyttja att ipaq:en har en touchscreen lades en smal touchlist in med fram och bakknappar samt en reloadknapp, vilken enkelt kan kommas åt med vänsterhandens tumme. På så sätt används händerna ungefär som om ett dataspel spelades på datorn och borde fungera till fredställande. Pekpennan som normalt används för navigering ansågs av gruppen som besvärlig; Svår att använda med en tvåhandsfattning samt om miljön är stökig. I stället beslutades att fingrarna skulle användas i så stor utsträckning som möjligt. 4.1.4 Översikt För att hjälpa användare att skapa en god överblick av den besökta sidan och på så sätt underlätta den spatiala navigeringen hade gruppen flera alternativ. Dock konstaterades ganska fort att en webbsida som har en god design ofta i och med det för det mesta även har inbyggda ledtrådar som hjälper användare att navigera på sidan. Vidare kan användaren känna till en sida sedan tidigare och exakt veta var olika saker finns placerade. Exempel på det kan vara placering av knappar, menyer och bilder, dels enskilt men även objektens placering i förhållande till varandra. Om webbsidan på något sätt delades upp borde mycket av den informationen gå förlorad. Gruppen kom därför fram att den absolut enklaste lösningen skulle användas, vilket är en exakt förminskning av hela sidan som översikt. 4.1.5 Texten Det konstaterades snabbt att ytan där text skulle kunna presenteras var mycket begränsad, antingen i höjdled eller i sidled, speciellt när användaren hela tiden skulle kunna se översikten. Texten skulle i samtliga fall få en mycket försämrad läsbarhet, då ögats funktion markant skulle begränsas. (Se avsnitt om ögat och läsning ) För att komma runt det problemet valde vi att presentera texten dynamiskt med hjälp av tekniken leading. För att utnyttja funktionen med den exakta översiktsbilden maximalt och underlätta navigationen i texten kom gruppen fram till att användaren skulle kunna välja vilket stycke denne ville börja läsa genom att trycka på detta direkt i översikten. Läsarens aktuella position För att underlätta för läsaren att veta var på sidan texten som läses befinner sig kom gruppen fram till att någon form av markör för detta måste finnas i översikten. För att visa detta diskuterades i huvudsak tre olika förslag. Det första förslaget vara att med hjälp av en markör som highlightade exakt visa var i översikten läsaren befann sig. Ett annat förslag var att implementera ett fisheye som horisontellt täcker en rad och visar den ungefärliga positionen på y-axeln. Ännu ett alternativ var att endast visa positionen på y-axeln med hjälp av en markering i vänstra kanten. Alla dessa alternativ borde underlätta för användare att orientera sig på sidan. Det första alternativet visar exakt var på sidan användaren befinner sig medan de två senare endast visar en ungefärlig position. Vi valde att endast visa en liten markör i vänstra kanten på översikten då det borde räcka för att orientera sig på ett tillräckligt bra sätt. 9
4.1.6 Länkhantering Eftersom navigationen måste vara enkel och mycket av navigationen sker med hjälp av länkar måste browsern kunna hantera länkar på ett bra sätt. Oftast ligger länkar antingen i texten som ett ord eller mer fritt som i en lista. Eftersom länkarna ofta är i en färg som bryter mot den övriga texten borde dessa synas som en färgskiftning i översiktsbilden. Om en text innehåller länkar var gruppen överens om att dessa måste presenteras i sitt sammanhang för att kunna förstås. Ett alternativ vara att visa länken exakt som den visas på orginalsidan, det vill säga direkt i den rullande textremsan. Länken skulle på så sätt visas i sitt sammanhang och vara klickbara direkt i texten, precis som vanligt. Problemet med det skulle kunna vara att länkar lätt missades och var svåra att klicka på om texten var för liten. En lösning på det skulle kunna vara att skapa en länklista med de länkar som visats i texten senast. Från listan skulle länkarna tydligt kunna ses och vara klickbara. Problemet med en lista är att länkarna tas från sitt sammanhang och i vissa fall då kan bli svåra att förstå, speciellt om länken endast är ett ord i texten. Det bästa alternativet var att kombinera dessa två sätt att visa länkar på. 4.1.7 Bildhantering Ofta har en webbsida bilder som i någon aspekt relaterar till texten i närheten av denna. Många bilder fungerar som informationsbärare och borde därför spela en stor roll för upplevelsen av en sida och förståelsen av denna. Vi ville därför kunna visa bilder på ett tydligt sätt. Tidigt kom gruppen fram till att ett speciellt område på skärmen skulle vara reserverat för bildvisning och att det inte skulle vara för litet. Vidare kom gruppen fram till att bilden skulle kunna visas större om det reserverade bildvisningsytan kändes för liten. Det mest logiska sättet att lösa det på vara att öppna bilden i helskärmsläge om den dubbelklickades. I och med att bildvisningsytan har placerats ovanför textvisningsfältet borde känslan av att bild och text hänger i hopp fås, ungefär som en bildtext. Tanken var att bilderna skulle uppdateras allt eftersom texten lästes. 4.1.8 Navigation Eftersom målet var att browsern skulle vara mycket lätt att navigera sig i valde vi ganska snabbat bort alternativet att använda någon form av markör med vilken saker och ting skulle klickas. Att navigera på det viset borde ta lång tid och upplevas osmidigt. Att använda sig av ipaq:ens stylus var ett alternativ som vekade fungera bättre då länkar och bilder kunde klickas direkt på skärmen. Dock fallerade detta när vi valde att lägga layouten horisontellt och båda händerna användes för att hålla datorn. Främst för att det helt enkelt fattades en hand att hålla stylusen med men även det att en extra lös del måste användas för att kunna surfa och interagera med browsern I och med att ipaq:en hålls som den gör når användaren över hela skärmen med tummarna. Det vore alltså mycket smidigt om navigationen kunde ske med tummarna. Det verkar som en mycket bra lösning då inga externa verktyg måste användas och interaktionen blir mycket direkt och intuitiv. Att navigera med fingrarna borde inte ställa till några större problem då de flesta objekt på skärmen är rätt så stora, det enda vi är tveksamma till är länkarna i länklista, men det återstår att se. 10
5 Resultatet Har beskrivs det färdiga förslaget som gruppen har kommit fram till under brainstormingen men även under arbetets gång. 5.1 Layout på skärmen. Till att börja med kretsade tankesättet helt och hållet kring att använda ipaq:en på sin rätta ledd, dock blev ytan på skärmen svår att utnyttja på ett bra sätt. Gruppen beslutade att i stället använda ipaq:en liggande. På så sätt blev den lilla skärmytan lättare att utnyttja. För att användaren lättare skulle kunna navigera på sidan denne besöker beslöt vi oss för att vissa en förminskning av hela sidan där endast rubrikerna var läsbara och brödtexten på översikten greekad. På så sätt tror vi oss stödja användarens förmåga att spatialt kunna navigera på sidan, dels genom igenkänning av tidigare besökta sidor samt med hjälp av designkonventioner. På översiktssidan, som är en exakt förminskning av den riktiga sidan, visas även alla bilder och länkar. Bilderna kommer endast att ses som färgade fält och länkarna blåa partier i greekingtexten. Vi tror att användaren på så sätt kan skapa sig en helhetsbild av sidan och på så sätt få en bättre förståelse för dess uppbyggnad. 5.2 Läsa text För att läsa text på sidan väljer användaren en rubrik från översiktbilden genom att peka på med ett finger. Texten under den aktuella rubriken visas nu som en rullande remsa i nedre delen av skärmen. Hastigheten texten visas med är satt till ca 180 ord per minut, vilket är lite under normal läshastighet. Rullningen av texten kan enkelt kontrolleras med fram och bakknappar så att användaren inte behöver känna sig stressad. Vi ansåg att de knappar som placerades i touchlisten till vänster är de som används oftast vid surfning på en vanlig stationär dator och därför är de som prioriterats högst i vårad förslag. 11
Under tiden då texten läses markeras samtidigt i översikten vilken rad läsaren befinner sig på med hjälp av en liten röd markör i vänstra marginalen. 5.3 Visa bilder Om det finns bilder i anslutning till texten så visas de i bildfönstret till höger om översikten. Vi har löst det så att bilder som ligger under den aktuella rubriken visas. Om det finns fler bilder mellan två rubriker visas den bild som ligger närmst den texten som för tillfället i visas textfönstret för tillfället. Bilden som visas i bildfönstret kan enkelt förstoras till helskärmsstorlek genom att trycka på bilden med ett finger. För att återgå till normal visning trycker användaren en gång till på bilden. 5.4 Länkhantering Länkar är en viktig del i navigationen på nätet eftersom dessa tar användaren vidare till relevanta sidor och ämnen på ett snabbt sätt. Länkarna som finns på sidan visas i textfönstret samt samlas i en länklista som rymmer två länkar, vilken är placerad under bildrutan. Den länk som är mest aktuell ligger högst upp och flyttas nedåt vart efter nya länkar tillkommer. Länkarna i lista är klickbara genom skärmen, även de länkarna som visas i textrutan är klickbara. 12
5.5 Navigering Navigeringen har begränsats till de mest grundläggande funktionerna så som fram bak och reload för de sidor som redan besökts. För att navigera till sidor som ej ännu besökts görs det huvudsakligen med hjälp av länkar och knappar vilka kan klickas direkt på skärmen. Att skriva in text i adressfönstret borde endast ske i början av sökningen/surfningen. Bredvid adressfönstret finns en knapp som fungerar som enter efter det att en adress har matats in. Huvuddelen av navigationen och interaktionen med browsern sker direkt på skärmen, vilket borde minska antalet knapptryckningar som uppstår t ex när en markör ska flyttas. Vidare borde navigationen direkt på skärmen vara rätt så intuitiv trotts att den kanske är ny för användaren. Det eftersom navigeringen är så direkt, klicka dit du vill och på det du vill se mer av Huvudsyftet är så som vi se det att kunna surfa och lätt kunna ta till sig information i bild och text. Vidare skulle det vara svårt att på ett bra sätt få plats med fler funktioner och ändå behålla enkelheten i navigationen. För att ta sig till en specifik adress kan användares skriva in denna i ett speciellt adressfönster och sedan trycka på en knapp märkt Go. Att vi valt att endast ha så pass få navigationsfunktioner beror på att produktens storlek ändå begränsar användningen av browsern. 13
6 Diskussion Den första diskussion som kom upp i gruppen var varför det inte redan i dag finns en bra webbrowser för PDA s på marknaden. Kan det vara för att den befintliga visualiseringstekniken som IE Explorer erbjuder fungerar tillräckligt bra eller finns det ingen efterfrågan? Något svar på detta har inte hittats. 6.1 Möjliga problem Då webbrowsern förutsätter att användaren använder sina fingrar som interaktionsverktyg borde vissa problem kunna uppstå. Ett problem kan vara att länkar och knappar kan vara svåra att träffa om fingrarna är för stora. Ytterligare ett problem med detta navigationssätt borde vara att skärmen fort blir fläckig av fett och smuts. Vi tror dock att fördelarna med att inte behöva använda något speciellt verktyg överväger dessa och att det till stor del är en vanesak för användaren. Givetvis går även ipaq:ens stylus att använda om användaren så vill, men det är inget krav för goda navigeringsmöjligheter. Vår ipaq är tänkt att användas liggande då vi anser att man kan utnyttja hela ytan på ett bättre och effektivare sätt. Användaren kan här se en översikt över sidans innehåll samtidigt som navigering i texten kan ske. Vi kom fram till denna lösning efter att ha gjort olika tester där vi placerat ut de fält som vi ansågs behövas och det visade sig att varje fält fick en större yta och var mer lättöverskådlig då vi roterade ipaq:en. Vi tror även på denna lösning då handdatorn är för stor för att användaren ska kunna hålla den med en hand och samtidigt navigera. Vi utnyttjar då även den andra handen till att hålla i datorn samtidigt som vi har både touchscreen och vanliga menyknappar som gör att man kan navigera med båda händerna. Det optimala hade varit att bara behöva utnyttja en hand då vi tror att ipaq:en oftast används i miljöer som är en aning stökiga och användaren kan behöva använda den andra handen till t ex. att hålla sig i på bussen. Men formatet är i dagsläget så att båda händerna ändå måste användas och då passar vi på att dra nytta av detta. I och med det tror vi att de nackdelar detta innebär är färre än de fördelar det medför. Ett ytterligare problem som gruppen tänkt på är hur mycket stora sidor sak visas i översikten då en sida större än ett normalt A4 inte nu kan visas på ett bra sätt. En lösning på det problemet skulle kunna vara att implementera en fisheye-teknik på översiktsbilden, vilket skulle göra det möjligt att visa längre sidor genom att komprimera översiktsbilden i över- och underkant. På så sätt visar översikten att det finns mera att visa även om det inte direkt syns vad det är. 6.2 Implementation Då gruppens programmeringskunskaper i Java inte har varit tillräckligt omfattande har applikationen inte fått de utseende och innehåll som vi bestämde i ett tidigare skede. Målen har inte kunnat realiseras fullt ut med hjälp av denna programmeringsteknik då tiden var alldeles för kort för den vidareutveckling som våra kunskaper var i behov av. Vi har istället valt att använda oss av en Flashanimering för att komplettera bristerna i vår Javaprototyp och på ett tydligt sätt visualisera våra idéer och tankar. 14
Då browsern ska köras liggande på ipaq:en krävdes att hela programmet måste vändas på kodnivå. Det visade sig dock ta lite för långt tid och ställa till med mängder av problem. I stället installerades ett program som vände på hela ipaq:ens operativsystem. Det är absolut ingen optimal lösning men verkar fungera för att visa konceptet. Prgrammer finns tillgängligt på www.nyditot.com och heter Virtual Display. 6.3 Ytterligare funktioner Så som prototypen är utformad kommer problem att uppstå om t ex et formulär ska fyllas i på en webbsida då någon sådan funktion inte stöds. I en mer utvecklad variant av denna webbrowsern skulle ett formulär eller liknande kunna hanteras på samma sätt som en bild, det vill säga först dyka upp i bildfönstret och sedan kunna förstoras till hela skärmen. I och med touchscreenen skulle formuläret kunna fyllas i direkt på skärmen genom att text skrivs direkt på skärmen i de aktuella fälten. Samma sak skulle kunna gälla videoklipp och andra saker som användaren skulle kunna vilja se i helskärm. Om dessa funktioner implementeras borde webbrowsern bli ett komplettverktyg för surfning på webben. Efter att ha knappat en hel del på ipaq:en insåg gruppen att visualiseringstekniken som valdes egentligen hade fungerat bättre på en skärm med högre upplösning. Dock går utvecklingen hela tiden framåt och detta kommer säkerligen inom en snar framtid och borde inte vara ett så stort problem. Teknisk dokumentation Då prototypen i Java inte var så pass klar när denna rapport skrevs hänvisar vi till programmeringsansvariges (Cecilia Eriksson) personliga rapport för skärmdumpar och teknisk dokumentation över browsern. 15
Referenser Bechtel, W., Graham, G. (editors) (1998) A companion to cognitive science, Blackwell Oxford. Crowder, R.C., Wagner, R.K. (1992) The psychology of Reading: An introduction, Oxford Univ Press, Oxford. Furnas, G. W. (1986) Generalized fisheye views, Human Factors in Computing Systems CHI 86 Conference Proceedings, Boston, pp. 16-23. Holmqvist. L.E (1997), Fokus + Context Visualization with Flip Zooming and the Zoom Browser, SSKKll, Göteborgs universitet, Sweden Juola, T.F. (1995) Reading text presented on small display, Applied Ergonomics, 26, 3, 227-229. Kang, T.J. & Muter, P. (1989) Reading Dynamically Displayed Text, Behaviour and Information Technology, 8, 1, 33-42 Mullet.K & Sano, D. (1995), Designing Visual Interfaces, Communication Oriented Techniques, SunSoft Press, Garcia Avenue, USA. Muter, P. (1996) Interface design and optimization of reading of continuous text, I. van Oostendorp, H & de Mul, S. (red:er) (1996) Cognitive aspects of electronic text processing, Ablex Publishing Corp, Ablex. Rahman, T. & Muter, P. (1999) Designing an interface to optimize reading with small display window, Human Factors, 41, 1, 106-117. Robertson, G.G., & Mackinlay, J.D. (1993) The Document Lens, Proceedings of UIST '93, pp. 101-108, ACM Press. Shneiderman, B. (1998) Designing the user interface, strategies for effective humancomputer interaction, Addison-Wesley, Harlow. Greeking: http://www.pcwebopedia.com/term/g/greeking.html 16