IT-Universitetet Grafiska gränssnitt, 6 p Göteborg 031010 Rapport Projekt 2 Informationsvisualisering av Grupp1: Vilhelm Bergman, d96v@dtek.chalmers.se Hanna Friberg, friberg_hfr@yahoo.se Björn Nord, d00nord@dtek.chalmers.se Ulrika Olsson, d00ullis@dtek.chalmers.se Marlene Sjöberg, d00mars@dtek.chalmers.se
Innehållsförteckning Introduktion... 3 Målgrupp... 3 Metod... 3 Arbetsfördelning... 6 Resultat... 7 Att välja släkt och utgångsperson... 7 Programmets layout... 8 Färgsättningen... 9 Att navigera i et... 9 Generationsbarometern... 9 Expanderingssymboler... 10 Allmänt om programmet... 10 Det sista användartestet... 11 Diskussion... 11 Val av modell... 12 Slutord... 13 Referenser... 13 2
Introduktion I det här projektet har vi konstruerat en applikation som låter en användare utforska släktinformation genom att navigera i en grafisk miljö. Det är möjligt att börja på valfri person i en släkt och från denna person sedan leta sig vidare. En förutsättning är att man läser in information till applikationen via xml-filer som innehåller en personakt med information. Målgrupp Målgruppen för programmet är en av släktforskning intresserad allmänhet. Vi förutsätter att målgruppen vill se nära släktskap till en vald person. Därför har vi skapat ett program med möjlighet att se blodsband i max fem generationer samtidigt och information mer på bredden än på djupet. Metod Den första gången vi träffades började vi med allmän brainstorming om själva uppgiften och om hur vi skulle kunna tänkas angripa problemet. Vi började diskutera utformningen av programmet och hur släktskap mellan olika personer kan visas rent grafiskt. Vi fastnade för tanken om någon slags trädstruktur, då det kändes mest uppenbart, även om vi också funderade på andra alternativ. Nästa gång vi träffades började vi med att göra användarintervjuer. Vi frågade några slumpmässigt utvalda personer om hur de skulle göra för att representera släktdata, samt vilken data som skulle vara relevant att se. Informanterna fick själva rita och förklara hur de tänkt (se bild 1 och 2). Alla byggde någon form av träd. Här presenteras två exempel: Detta gav oss lite idéer som vi kunde fortsätta att arbeta med. Bland annat kände vi oss säkrare på att vi verkligen skulle presentera släktdatan i form av en trädstruktur. Vi 3
började skissa upp applikationen på en whiteboardtavla för att se vilka olika fält som skulle ingå (se bild 3). Vad vi ville visa var ett enkelt "inzoomat" träd. Vi ville komma åt en detaljrik del av en större struktur och visa den, med den inzoomade delen markerad och samtidigt visa hela trädet. Sedan ville vi kunna visa mer information om en specifikt vald person. Här tänkte vi mycket i "flip zoomingtermer". I informationen skulle det finnas möjlighet att klicka på make/maka, barn och syskon. Här kommer bilden: Bild 3: Initial tavelskiss. Vi gjorde användartest på denna bild, viken sade oss att själva det inzoomade trädet var svårt att förstå. Vi jobbade vidare utifrån detta och kom fram till att översiktsträdet kunde bli väldigt stort och komplicerat. Vi funderade också på vad vi kunde realisera rent tekniskt i java. För att underlätta navigeringen skapade vi istället en "generationsbarometer", vilken visar var i generationerna man befinner sig. Här efter flyttade vi runt fälten så att vi bara fick tre vertikala fält (se bild 4). Generationsbarometern lade vi längst till vänster, et i mitten och till höger en personakt, som innehöll födelsedatum, dödsdatum, giften och barn samt personens syskon. Dessa personers namn skulle vara länkar så att man kan sätta dem till fokusperson. Egentligen ville vi ha med dessa personer i trädet, men det skapade lite problem (hur skulle man till exempel få plats med 15 hel- och halvsyskon?). Dessutom så kändes det som om trädstrukturen skulle bli mer svårförståelig. 4
Bild 4: Omarbetat koncept med generationsbarometer. Detta ritade vi upp på papper och utförde användartester på ett flertal personer. Vi frågade vad de tyckte om upplägget, om de saknade något och hur de skulle vilja kunna navigera igenom trädet. De flesta var positiva, men generationsbarometern krävde lite förklaring. Angående navigeringen så tyckte de att det kändes mest intuitivt att klicka en gång för att markera en person och kunna läsa information om honom/henne och för att flytta personen till fokus så skulle man dubbelklicka. Med denna skiss (se bild 4) kom vi till handledartillfället på måndagen den 29/9. Där blev vi ombedda att fundera vidare på hur man skulle kunna placera in make/maka, barn och syskon i trädet. Vi lyckades arbeta fram en ide. Denna ritade vi upp på dator (se bild 5). Vi kom fram till att vi var tvungna att lägga informationsrutan under trädet på grund av platsbrist. Denna bild tog vi med oss till nästa handledartillfälle och den fick vi godkänd. Nu kunde vi börja koda. 5
Bild 5: Godkänt koncept som vi har arbetat utifrån. Under våra första möten funderade vi en del på hur trädstrukturen skulle se ut. Valet låg mellan att antingen placera den yngsta personen längst ner, det vill säga en "V-struktur", eller placera den yngsta personen överst, det vill säga en "A-struktur". Denna frågeställning styrktes av våra första användartester (se bild 1 och 2). Slutligen valde vi att lägga den yngste personen nederst. Motiveringen till detta är de personer som finns först skrivs ut först och att det kan kännas naturligt att barn kommer under föräldrar. En annan motivering handlar om hur man lägger till i generationerna, något som kommer att presenteras senare. Arbetsfördelning Alla har varit involverade på ett sätt eller annat i konceptmodellering och användartester, men vid olika tidpunkter. Ville, Björn och Marlene har hållit i programmeringsdelen. Hanna och Ulrika har skrivit rapporten och sammanställt egen släktdata utifrån Ulrikas släkt. Ulrika ritade skisser på dator. Våra roller, som vi delades in i på första föreläsningen, har vi också hållit ganska bra, detta gäller bäst för åtminstånne Hanna (skribent), Ville (programmerare) och Ulrika (ej fack). Designen har vi alla varit tvungna att diskutera och vi har inte behövt en koordinator, fast Marlene har kanske skött sitt jobb så bra så att vi inte har märkt av hennes styrning. 6
Resultat Om vi går vidare till resultatet och tittar på själva applikationen, så ser vi att den följer den sista skissen väl. Givetvis blir vissa saker lite annorlunda när man programmerar upp det, men det handlar bara om smärre detaljer. För att hänga med i våra resonemang kan man med fördel öppna programmet, men det går också bra att bara titta på skärmdumparna nedan. Att välja släkt och utgångsperson När man öppnar programmet så hamnar man automatiskt i en släkt med en person markerad (se bild 6). Så ska det egentligen inte vara, men vi kunde inte lösa det på annat sätt. Tanken är att användaren skall mötas av en tom yta för att själv välja släkt och utgångsperson. Om vi börjar med att titta på menyraden längst upp, så ser vi att det finns följande val: Arkiv: öppna, stäng fönster, skriv ut och avsluta, Redigera: sök person och Hjälp: hjälp, om. Det första man ska göra är att välja den släkt man vill titta närmare på. För att välja släkt så går man till Arkiv-menyn och väljer öppna. Där väljer man en katalog som innehåller xml-filerna (med släktdatan). Då får man upp ett träd med den informationen i programmet. Bild 6: Det första man ser när programmet öppnas. 7
Man ser på fönstrets titel högst upp till vänster vilken släkt man valt. I denna version skrivs katalognamnet ut. När trädet ritas upp är det personen med nummer 1 i xml-filen som blir vald till utgångspunkt. För att välja en annan person kan man under Redigera: sök välja en person ur släkten. Som det är nu är det en lista på alla personer som finns inlagda. I denna version skulle det vara möjligt att sortera på förnamn, efternamn, född eller död, men vi prioriterade bort den implementationen eftersom det fanns andra saker att implementera som utgjorde större påverkan av programmets funktionalitet. Egentligen skulle det här ha funnits en sökfunktion där man själv skriver in namn (för- och/eller efternamn) eller datum (exakta eller ungefärliga). Programmets layout Härefter är en släkt med en utgångsperson vald. Det grafiska trädet visar personens eventuella gemål och barn, samt de förfäder i 3 generationer bakåt som finns inmatade i databasen. Man kan alltså se max fem generationer samtidigt, vilket grundar sig i ett beslut om hur mycket vi ville visa på skärmen och att man fortfarande skall kunna läsa namnen och se relationerna (se bild 7). Bild 7: En utgångsperson är vald. Man ser släktrelationerna. Här ser vi hur programmet hanterar en relation mellan många syskon utritat från Ivars perspektiv. Utgångspersonens ruta är markerad med en gul bakgrundsfärg samt en röd ram. Till vänster i bilden ligger en generationsbarometer som visar i vilken generation man befinner sig. Den hjälper användaren att hålla reda på var i trädet man befinner sig 8
(utförligare förklaring nedan). Underst i bilden finns en del med mer textbaserad information om den valda personen. Informationen som visas är personens födelse- och dödsdatum, dess barn och gemål. Till vänster om denna informationsruta ligger bakåtoch framåtknappar, som man kan använda sig av för att komma tillbaka eller framåt i trädet beroende på hur man har klickat sig fram. Vi hade egentligen velat ha haft dessa knappar direkt under menyraden till vänster, men på grund av tekniska problem gick det inte att lösa. Färgsättningen Vad det gäller färgsättning så har vi valt en ljusblå bakgrundsfärg som är behaglig för ögat. Den röda ramen är kopplad till personen och därför är pilen på generationsbarometern också röd liksom namnet i informationsrutan. Tanken är att man lätt skall inse att det finns ett samband mellan dessa element. Den gula färgen skiljer sig från den ljusblå och röda, men det är samtidigt en färg som ögat drar sig till. En röd-grönfärgblind person kan dessutom lätt skilja alla färgerna åt. Att navigera i et För att navigera runt i et används musen och klickningar. Klickar man en gång på en person så markeras den med den röda ramen, generationsbarometern ändras och informationen undertill ändras så att den tillhör den valda personen. För att välja en ny utgångsperson så dubbelklickar man istället. Då flyttas han/hon till den gula rutan och trädet ritas om med utgångspunkt från den personen. För att gå tillbaka till föregående utgångsperson kan man antingen klicka sig dit eller välja att använda den bakåtknapp som ligger under generationsbarometern. Det finns även en framåtknapp om man vill gå framåt igen. För att navigera och byta mellan skilda släkter i databasen skulle vi velat ha flikar uppe vid menyraden, men detta blev inte implementerat på grund av tidsbrist. Som hjälpinstrument för navigering finns generationsbarometern som ligger på vänster sida om trädet och expanderingssymboler inuti trädet. Generationsbarometern Generationsbarometern visar i vilken generation man befinner sig (jmfr bild 6 och 7). Pilen förflyttar sig om man rör sig uppåt eller nedåt i generationerna. I denna barometer kan man se hur man förflyttar sig i generationerna genom att titta på den röda pilen. Pilen refererar till i vilken generation personen, kring vem den röda ramen sitter runt i trädet, tillhör. Generationerna läses nerifrån och går från 1 och uppåt beroende på hur många generationer som finns i databasen. I en släkt kan till exempel barometern stå på 6 generationer och i en annan 12. Det finns ingen begränsning i hur många generationer som kan finnas. Dock blir det en begränsning i programmet är om fler än ungefär 30 generationer läggs in. Då kommer pilen och siffrorna i generationsbarometern att bli väldigt små och svårlästa jämfört med om man har ett mindre antal generationer. Detta hade kunnat lösas genom att bara skriva ut ett visst antal generationer på barometern åt gången, till exempel 1-6, 7-12, 13-18 och så vidare. Vi valde, som tidigare nämnts, efter många diskussioner att bygga trädet nerifrån och upp. Detta för med sig att brometern även den måste läsas på samma sätt. Den yngsta personen blir generation 1. Om en ny 9
generation föds, kommer generationerna i alla led att ändras. Om vi hade haft ett omvänt träd hade just detta fall inte påverkat generationsnumrerna, utan en siffra hade bara lagts till. Men ett problem uppstår då äldre genrationer "hittas" och skulle behövas läggas till. Då skulle generationsnumrerna nedanför ändras. Vår motivering till och tanke om att ha generationerna nedifrån och upp är att släktforskning handlar om att hitta äldre generationer. Det är alltså vanligare att fler äldre generationer tillkommer än att nya föds. Detta gäller så länge som man letar sig bakåt i tiden. När man inte kan komma längre bakåt i sin släktforskning kommer det förstås att bli vanligare att nya generationer tillkommer. Då kan man ställa sig frågan om det verkligen är släktforskning längre eller om det bara handlar om att man vill hålla sitt uppdaterat. Expanderingssymboler Vi har valt att lägga varje person i en box och att visa relationer mellan personer med svarta linjer. I boxen finns för- och efternamn, samt födelse- och eventuellt dödsdatum. I boxarnas nederkant ser vi bokstäverna f, m, s och b (se till exempel bild 7). De står för föräldrar, maka/make, syskon och barn. Dessa bokstäver symboliserar hur man kan "klättra" i och expandera trädet. De fungerar alltså som navigeringsinstrument. Om det står f så kan trädet expanders uppåt. Om det står m så kan trädet expanderas i sidled. Detsamma gäller s. Om det står b så kan trädet expanderas nedåt. Riktningarna bestäms av att trädet ritas upp med föräldrar överst, jag i mitten med make/maka och syskon i samma ledd och barnen undertill. Vi hade velat ha ikoner istället för bokstäver, men tidsramarna för projektet satt stopp för detta. Ett förslag är att ha pilar som symboler för de olika riktningarna. Allmänt om programmet Det finns flera funktioner i programmet. Om man högerklickar på en person så kan man lägga till relation. Funktionen i sig är oimplementerad, men det är meningen att den ska fungera i ett riktigt program. Man kan också välja att lägga till information om den valda personen. Denna information visas då i rutan under trädet. Även denna funktion är oimplementerad. I menyraden finns alternativet Hjälp, som ännu inte är implementerad. Här är det tänkt att finns en steg-för-steg manual på hur programmet fungerar. I en släkt kan det finnas många olika varianter av relationer; kusiner som gifter sig med varandra, en familj med många barn, eller en person som gifter om sig flera gånger och får barn med flera olika personer. Vad gäller det senare har vi ett exempel att illustrera med. Exemplet är taget ur Ulrikas släkt och visar hur det kan se ut om en person gifter om sig och få fler barn (se bild 8). Vi har valt att lägga fruarna på samma ledd med den först frun först och den sista efter. De barn som Anders har med Alma läggs till vänster, med streck emellan så att, man ser att barnen hör samman med Alma och Anders. De barn som Anders fick med den nya frun Anna läggs till höger. Strecket som visar att Anders och Anna hör ihop går bakom Alma. Därifrån går sedan streck ner till deras gemensamma barn. 10
Bild 8: Ett exempel på hur det kan se ut om en person gifter om sig och har barn med båda makarna. Det sista användartestet När vi närmade oss slutet i programmeringsfasen genomförde vi ett antal användartester. Användartestet gick bra, då de flesta kommentarerna var positiva. De negativa kommentarerna sammanföll med vad vi redan tänkt var lite felaktiga, såsom sökfunktionen och färgerna (vi hade först en mild grön färg som bakgrundsfärg, samt en starkare gul). Informanterna efterlyste också mer personlig information i informationsrutan. Navigeringen fungerade ganska bra, det behövdes en kort kommentar angående dubbelklickandet, då en person inte tyckte att det var helt uppenbart vad som hände. Detta berodde till viss del på att han inte tittade så noga på trädet innan han klickade. Framåt- och bakåtknappen hade kanske behövt en förklarande text, men har man väl använt de en gång så vore en text mer stjälpande än hjälpande. En person trodde att man kunde klicka på generationsbarometern för att ställa in hur många generationer som skulle visas samtidigt. Användartesterna ledde till att vi bytte bakgrundsfärg till en ljusblå färg med en lite ton av rött i samt tonade ner den gula färgen till en ljusare nyans. Diskussion I vår applikation kommer man inte direkt att lägga märke till problem med utrymme, då dagens datorer har så pass mycket minne att släkter med tusentals personer kan läggas in. Det kommer inte att uppstå lagringsproblem. Dock hade vi föredragit att lägga in all 11
släktdata i en databas istället för i separata filer som det är i dagsläget. Eftersom man inte heller ser mer än 5 generationer samtidigt så blir det inte heller något problem med utritningen. Vår applikation kan ha mer eller mindre hur många personer som helst. Om det finns 500 eller 50 personer spelar ingen roll; navigeringen blir lika dan och man mister ingen översikt. Det enda är, som vi tidigare tagit upp, att generationsbarometerns siffror kan bli små. Val av modell Vi har funderat på val av modell för vår applikation. Det finns många intressanta som skulle kunna passa in på den här typen av uppgift. Vi insåg dock snabbt att vi var begränsade, då vi inte har den kunskap om till exempel 3D programmering som hade krävts för att kunna använda många av modellerna så som vi hade velat. På grund av detta har vi inte kunnat följa en specifik modell, utan istället fått låta oss inspireras av olika delar från olika modeller. En av våra inspirationskällor är den hyperboliska geometri (focus+ context teknik) som Lamping och Pirolli (1995) presenterar i sin artikel "A Focus+Context Technique Based on Hyperbolic Geometry for Visaulizing Large Hierarchies". Det vi finner av intresse i denna modell är "klickandet" och den fokusändring som man har möjlighet att göra i den typen av cirkulär hierarki. Fokusändringen har vi tagit till oss. Detta har vi förverkligat i vår applikation i form av att man kan genom att dubbelklicka på en person rita upp et utefter just den specifika personen. På så sätt byter man perspektiv och navigerar i trädet. En annan variant på focus+ context tekniktemat, är vår inspirationskälla flip zooming, som Björk (2000) diskuterar i sin artikel "Hierarchical Flip Zooming: Enabling Parallel Exploration of Hierarchical Visualizations". I vårt program syns detta i och med att man genom att dubbelkicka på en ny person får upp ett träd som är ritat specifikt utifrån den personen. Fokusen läggs då på den utvalda personen och man kan se just den personens relationer till andra. Furnas (1986) pratar om fisheye lens, där man genom att använda en lins kan visa på detaljer i ett stort sammanhang/struktur. Detta skulle kunna ha varit ett alternativ att välja, som skulle ha haft störst effekt i ett väldigt stort. Utifrån denna modell hade vi kunnat rita upp och visa hela trädet, men bara förstora den del man valt till utgångspunkt. Vi ansåg dock att våra tekniska begränsningar satte stopp även för att följa denna modell. Med tankarna i denna modell, valde vi att bara visa upp den del man var intresserad av att se. Zoomable user interfaces, som Bederson och Hollan (1994) diskuterar, ville vi inte använda oss av. Detta beslut grundar sig i att om man har en stor trädstruktur blir texten väldigt liten och kan vara svår att läsa. Det blir då svårt att veta vad man vill zooma in och läsa. Om vi jämför med fisheye lens, som är lite liknande, så bygger den på att man föra en lins på strukturen, vilket vi tycker gör det lättare att hitta än om man behöver klicka för att zooma in och ut och på det viset förstora en specifik del. 12
Slutord För att sammanfatta detta projekt kan vi säga att det har varit intressant att följa de olika faser som ett projekt av den här typen innefattar. Under detta projekt har gruppen varit mer splittrad än i det föregående projektet. På grund av sjukdom och andra hinder har gruppens konstellation sett olika ut. Det har varit först sista veckan av projektet som alla har kunnat vara samlade. Detta har lett till att den inledande fasen tagit längre tid än den annars hade gjort, vilket i detta projekt inte har varit så positivt på grund av den snäva tidsramen. Trots detta har vi kunna vända detta delvis till något positivt. De personer som var sjuka kom med nya idéer och synpunkter på modellens framväxt, vilket har gett de resterande personerna tillfälle för eftertanke och för att skärpa resonemanget. Detta har inneburit att tiden för själva implementeringsfasen har blivit förkortad, vilket har lett till att vi inte har kunnat skapa all den funktionalitet som vi hade önskat. Ett sådant exempel är en funktion där man kan välja två personer och se släktskapet dem emellan. Vi kan också tillägga att vi har tänkt på många olika lösningar, men hela tiden utgått från vad vi skulle kunna realisera rent praktiskt i java. Lösningar som vi inte ansett oss kunna realisera har vi helt enkelt förkastat. Referenser Bederson, B.B., & Hollan, D. (1994). Pad++: A Zooming Graphical Interface for Exploring Alternate Interface Physics, ACM UIST'94, pp 17-26. Björk, S. (2000) Hierarchical Flip Zooming: Enabling Parallel Exploration of Hierarchical Visualizations. Proceedings of Advanced Visual Interfaces (AVI). Furnas, G.W. (1986) Generalized fisheye views. Human Factors in Computing Systems CHI '86 Conference Proceedings, Boston, pp. 16-23. Lamping, J., Rao, R. & Pirolli, P. (1995) A Focus+Context Technique Based on Hyperbolic Geometry for Visaulizing Large Hierarchies. In CHI '95, ACM Conference of Human Factors in Computing Systems. New York: ACM. 13