projekthemsida it-universitetet kurshemsida projekthemsida
                                   

Informationsvisualisering | 02












projektmedlemmar  








































mer info  
projektets egna sida

projektets egna sida

projektets egna sida

projektets egna sida

projektets egna sida

projektets egna sida

projektets egna sida

projektets egna sida

visualiseringsteknik  

in English    
EyeNavigate består av tre huvuddelar, Adress- och navigeringsfält, Översikten samt Text- och bildvisaren. Designresultatet stödjer nöjessurfning och sökning av specifikt syfte. Fördelarna med EyeNavigate är att webbrowsern visar helhet/detalj, kan hantera bilder, text och länkar samt att användaren har möjlighet att navigera på ett flertal sätt. EyeNavigate implementerades i Java och prototypen hanterar länkning mellan olika sidor på Internet, delar upp HTML-sidorna utifrån förspecificerade element och hanterar bilder, text och länkar. Vi vill i framtiden utveckla en fullständig prototyp samt göra ett användbarhetstest på Denna rapport handlar om utvecklingen av en webbläsare för dessa små skärmar. Genom en iterativ designprocess har vi kommit fram till det förslag vi i denna rapport presenterar. Vårat mål har varit att skapa en ny webbläsare och vi har arbetat efter riktlinjerna enkelhet, överskådlighet och valfrihet. Frukten av vårt arbete blev en webbläsare som möjliggör en focus+cotext användning. Webbläsaren är utformad på ett sätt som gör att man om man så önskar hela tiden kan ha en överblick över hela sidan. Vi har givit webbläsaren en avskalad design utan att inskränka på funktonaliteten. Webbläsaren erbjuder även användaren att inom ramverket kunna påverka utseendet. Designen återger sidan i tre fält, ett översiktsfält, ett menyfält och ett textfält. Bilderna är ersatta med en bildicon och man navigerar med gester och tryck. Scrollan är en webbläsare för handdatorer och ska underlätta surfning på små skärmar. Läsaren bygger på en informationsvisualiseringsteknik vilken behåller sidans originaldesign intakt och underlättar läsning av längre texter. Gränssnittet byggs huvudsakligen upp av tre delar, en översiktsbild, ett textfält samt en bildruta. Översiktsbilden är en kraftigt förminskad klon av orginalsidan och är även klickbar för att underlätta navigation. Om användaren vill läsa ett textstycke på sidan klickas detta direkt i översikten på skärmen. När ett stycke klickas börjar texten automatiskt presenteras dynamiskt i textfältet med hjälp av Leadingteknik (rullande textremsa). I bildrutan visas bilder som ligger nära den text som för tillfället presenteras i textfältet och kan även enkelt förstoras till helskärm. För att navigera mellan redan besökta sidor används fram- och tillbaka-knappar, vilka är placerade direkt på skärmen. Vår visualiseringsteknik tillämpar dels fokus + kontext tekniken men även en form av zoomning. Vad gäller den första tekniken tycker vi att den är bra då den ger ett gott stöd för användaren då han/hon behöver en god överblick av all information och ändå samtidigt kunna se vissa delar lite mer noggrant. Vidare anser vi att zoomning är lättanvänd och intuitiv teknik som i vårt fall kommer till sin rätta användning. Rent praktiskt zoomar man in, d v s går från kontext till fokus, genom att vrida PDA: n 90 grader till liggande läge. För att zooma ut, med andra ord att gå från fokus till kontext, vrider man 90 grader tillbaka igen. För att veta vilken del av sidan som hamnar i fokus när vridningen sker, använder vi oss av en ram i kontextläget. Ramen i kontextläget är proportionell i storlek med en liggande PDA. Vår teknik bygger på detalj+översikt Vi har valt att dela upp webbsidan i ett antal delsidor. Varje delsidas information visas i tre olika vyer, en textvy, en länkvy och en bildvy. Utöver detta finns en övergripande indexvy med rubriker för hela webbsidan. De olika vyerna representeras av ett fliksystem, där varje flik har en egen färg. Varje delsida representeras av en pärla i navigationsfältet, tillsammans bildar pärlorna ett pärlhalsband, vilket ger en överblick över webbsidan. De olika pärlorna visar vilken sorts information som finns på varje delsida genom att flikarnas färger återspeglas. Användaren navigerar sig genom de olika delsidorna genom att förflytta sig i pärlhalsbandet. Aktuell delsida visas genom att motsvarande pärla i pärhalsbandet är fokuserad, d v s förstorad. SatElite is the product of a months worth of intensive work within the project of Information Visualization during fall -02. The scope of the project was to develop a new way of browsing with a Personal Digital Assistant(PDA). We chose to completely change the way one "normally" view and scan a page in for example Microsoft Explorer. Instead we introduced a planetary system in which each satellite presented different types of information such as headlines, pictures, email adresses, links to other pages and ordinary texts. We used a visualization technique similar to that of a "wap card" in order to present lengthy texts. Vår browser tillämpar fokus-kontext-tekniken på så vis att informationen från html-sidor fördelas på olika vyer. Informationen i en vanlig html-sida kan kategoriseras i länkar, text och bilder. Länkarna utgör kontexten, som den enskilda html-sidan befinner sig i, därför visualiseras de i länkvyn. Här kan användaren välja att navigera till en annan sida eller gå tillbaka till föregående sida. Texten visas i browservyn. Denna vy innehar en funktionalitet som tillåter att visualisera den viktiga informationen. I vår browser utgår vi ifrån antagandet att samtliga sidor har en rubrikstruktur. Vid öppnandet av en sida visas bara dessa rubriker i fönstret. Användaren kan genom en aktivering av respektive rubrik välja att se hela texten. Är texten för lång för att visualiseras på PDA´ns skärm, så delas den in i cards som användaren lätt kan bläddra sig igenom. Bilderna visas i texten i form av ikoner. Genom en aktivering av respektive ikon visas bilden i en ny vy. Tekniken bakom SpaceWarp går ut på att den aktuella HTML-sidan måste ha texten definierad av rubriktaggarna <H1> och <H2>. Det är genom dessa taggar webbsidan sedan kan delas upp av webbläsaren. Handdatorns skärm är uppdelad i två delar. Överst finns det stora dokumentfönstret som visar bilder, länkar och texten 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 HTML-filen av en stor sol i översiktsfönstrets ena kant. Ett antal mindre planeter symboliserar varsin rubrik definierade av HTML-taggen <H1>. När användaren klickar på en <H1>-planeter ersätter denna planet solen och användaren tar ett steg ner i hierarkin. Ett textavsnitt som är för långt för att få plats i dokumentfönstret delas upp i erforderligt antal planeter - ett klick på nästa planet ger att nästa del av texten kommer upp. Bilder visas inte i den löpande texten, utan symboliseras av planeter; en planet är en bild.
 
  The web pages of today are not designed to be read from the small and delicate space of a screen on an iPaq. This paper is about the process of developing and designing a browser for the small screens of an iPaq. Through the iterating design process we have come to the conclusion presented in this paper. Our aims have been to create a new browser with the main characteristics of simplicity, easy to grasp overview and with freedom of choice. The result of our work was a browser that makes a focus - context use possible. The browser is designed in a matter that an overview is at all times present. The design is simple without making it less functional. The design allows the user to, within the framework, make changes according to his/her preferences. The browser is divided into three fields; a menu field, an overview and a text field. Pictures are replaced with picture icons and the navigation is done with gestures and clicks. Scrollan is a browser for pocketPC which will ease browsing web pages on small screens. The technology of the information visualization method keeps the webpage design intact and simplifies reading larger parts of texts. The design is structured into three major parts, an overview, a text field and space for pictures. The overview shows the webpage you are browsing reduced in size, which in itself is clickable to simplify navigation. If the user wishes to start reading at a certain part of the page, this part is clicked on using a stylus or finger on the overview. When a section of the page is clicked upon, the text is scrolled in a text field using leading technology (a scrolling row of text). The picture field is activated automatically to display a picture when the text arrives at the part of the text that holds information about the picture. The picture displayed in the picture space can easily be resized to full screen for closer inspection. To navigate between the visited pages, navigation buttons are used, front and back. These buttons are graphic and placed on the left part of the screen. Our information visualization technique is a detail+overview technique. We have chosen to divide the webpage into several small pages. The information on every small page is then divided into three different views, a text-view, a link-view and a picture-view. There is also an overall index-view with headings for the whole webpage. The different views are represented by a tab-system, where every tab has its own color. Every small page is represented by a pearl in the navigation-field, together all the pearls form a pearl necklace, which gives an overview of the webpage. The different pearls show what kind of information there are on every small page, through a reflection of the colors of the tabs. The user navigates through the small pages by moving in the pearl necklace. The pearl that is focused (that is enlarged) shows which one is the current small page. Our browser uses the focus-context technique so that the information from html-pages is visualized into different views. An html-page's information can be categorized into links, text and images. Links define the context of an html-page; therefore links are visualized in a link view. Here the user can navigate to another page or go back to the page he came from. The text is shown in the browser view. In the beginning this view only shows the headers of an html-page. The user can chose to read the whole article by activating the header. If the text is too long for the PDA-screen, it is divided into cards the user can browse through. Pictures are shown as icons. If the user whishes to view an image, the icon can be activated and the image will pop up in an image-view. We have identified businessmen who want to get quick and up-to date information as our group of interest. Therefore the goal of our project is to optimize our product for news-pages such as online-newspapers. The SpaceWarp browser requires that header tags (<H1> and <H3>) are defined in the HTML page. Due to these tags, our web browser is able to create an adequate structure of the webpage. The frame is divided in two windows sectors. The upper part is the document window, showing text, links, and pictures. In the lower segment, the user will find an overview of the entire webpage. A big yellow "sun" in the overview window symbolizes the very HTML document. A number of smaller planets symbolize different headers defined by the tag <H1>. When the user clicks on one of the <H1> planets, this planet replaces the sun. This action take the user one step down in the hierarchy. If a block of text is too long to fit in the document window, the block is divided into required number of planets. Just click on the next planet to get the next part of the text. Pictures are shown separated from the text. Small shady planets in the overview windows symbolize pictures; one planet for one picture.