Slutrapport: Informationsvisualisering av släktträd Grupp 11 Behzad Charoose, Johan Magnuson, Mikael Onsjö och Sofie Persson 2003-10-10 Göteborg, Chalmers/GU
Innehåll 1. INLEDNING...3 2. SYFTE...3 3. METOD...3 3.1 MODELLER... 3 3.1.1 Trädstruktur... 3 3.1.2 Relationsring...4 3.2 MAPPAR...5 4. DESIGN...5 4.1 FÄRG... 6 5. FUNKTIONER...6 5.1 ÖNSKELISTA...7 6. PROGRAMMERINGEN... 8 7. DISKUSSION... 8 8. REFERENSER... 8 2
1. Inledning Vi har fått till uppgift att skapa en applikation för att utforska släktdata. Applikationen ska kunna erbjuda människor att grafiskt utforska en släkt med utgångspunkt från olika personer. Vi har valt att göra ett traditionsenligt släktträd som enkelt visar hur människor i en släkt förhåller sig till varandra. Vi testade olika modeller för hur vår design skulle se ut men kom till slut fram till att traditionella släktträd är de som fungerar bäst i många avseenden eftersom det är svårt att skapa en komplett applikation som samtidigt är översiktlig. Alla i gruppen har varit med och designat hur det grafiska gränssnittet ska se ut, vilket är viktigt för att olika perspektiv ska kunna diskuteras och komplettera varandra. Som vanligt bestämde vi designen genom att diskutera i gruppen. När det bar av till implementering började Sofie på rapporten, Behzad skapade vårt egna släktträd utifrån släkten Bernadotte och Mikael och Johan gjorde java-prototypen. 2. Syfte Vårt syfte var att göra släktträdet så enkelt som möjligt för användaren att navigera i. Vi vill att användaren med en gång ska förstå vad han eller hon ska göra när de öppnar systemet. Användaren ska inte behöva fundera någon längre tid på hur systemet fungerar, istället ska det vara mer eller mindre givet hur användaren ska gå tillväga. 3. Metod Innan vi kom fram till vår design och kunde börja implementera diskuterade vi olika designförslag med olika lösningar. Vi ville egentligen designa ett annorlunda släktträd som skulle skilja sig från traditionella släktträd med bas- och subnoder. Vi testade och utforskade olika alternativa designförslag som vi tyvärr inte fann tillräckligt bra för att börja utveckla. Då det är svårt att visa all information på ett översiktligt sätt samtidigt som det ska vara tydligt valde vi att gå tillbaka till den traditionella trädstrukturen. 3.1 Modeller På väg mot vårt resultat har vi designat olika prototyper som vi också avfärdat en efter en. Här kommer en presentation av några utav dem. 3.1.1 Trädstruktur Först började vi att designa ett vanligt traditionsenligt släktträd. Vi märkte då ganska snabbt vi hade fastnat i den traditionella trädstrukturen, vilket vi helst ville undvika. Trots detta började vi att designa en prototyp, för att komma vidare i 3
arbetet. Det här var en mycket enkel prototyp, där personer med samma efternamn också har samma färg i trädet. Vi ritade också in en linje för årtal, för att användaren skulle kunna läsa av födelseår på samtliga personer i släktträdet. Figur 1. Pappersprototyp med färgkodade efternamn samt årtalsaxel. 3.1.2 Relationsring Vi hade till exempel en slags ring på förslag som design. Längst in är barnet och runt om i nästa ring är dess föräldrar och adoptivföräldrar och i nästa ring visas faroch morföräldrarna. Den här modellen höll dock inte eftersom det är omöjligt att se eventuella syskon i familjen. Figur 2. Hierarkisk ring som visar relationen förälder barn. 4
3.2 Mappar Vi fortsatte att diskutera och tänka på olika alternativ. En annan variant som vi också diskuterade var ett vanligt arkivsystem med mappar som släktträd. Mappar används för att visa hierarkiska strukturer genom att placera barnnoder inuti sina föräldranoder. Gun Marie Tilde Sofie Lasse Bengt Figur 3. Schematisk skiss över en mappstruktur. Det fanns inget naturligt sätt att visa maken på när man använder mappar, så i vår lösning skulle det finnas en genväg från Bengts mapp som leder till Guns och likadant i Maries mapp, en genväg till Tildes pappa Lasse, vilket vi inte ansåg vara tillräckligt bra. Lasse och Bengt har egna mappar med sina barn samt genvägar till sina fruar, Gun och Marie. Anledningen till att vi inte fortsatte att utveckla den här designen var att vi tyckte att det var svårt att få en översiktsbild över hela trädet med tanke på att mapparna måste öppnas innan innehållet blir synligt. Vi ville skapa något mer översiktligt som kunde ge en helhetsbild över hela släkten och dess relationer. 4. Design För att undvika frågetecken hos användaren har vi valt att inte dölja något, och istället dela in sidan i tre delar och därmed göra alla komponenter synliga samtidigt. Högst upp i fönstret finns det en drop down meny med namn på de personer som inte har några föräldrar i släktträdet. När man väljer en person i listan visas dennas släktträd. 5
Figur 4. Gränssnittet i vår färdiga javaprototyp. Vårt system visar tre fönster, först ett stort fönster, huvudfönstret, och sedan två mindre fönster under det stora. Huvudfönstret visar den del av trädet som användaren valt, i större format så att det går att tyda namnen på personerna i släktträdet. Fönstret nere till vänster visar släktinformation om personen i släktträdet som är markerad och fönstret till höger visar en översiktsbild över hela släktträdet. 4.1 Färg Vi har valt att använda milda färger för att göra systemet behagligt att navigera i. Att blanda olika starka färger tröttar ut ögonen och är inte behagligt att använda. Grå färg är basen i vårt system, vilket vi har använt i flera olika nyanser på olika ställen. För att utmärka vart i systemet användaren befinner sig har vi valt att använda rosa färg. Hade vi använt ytterligare en nyans av grå färg hade det förmodligen inte blivit lika uppenbart för användaren att se var han eller hon är i systemet. 5. Funktioner I huvudfönstret kan användaren välja att klicka på en person. Då ändrar den personen färg i översiktsträdet till rosa vilket medför att användaren tydligare kan se vart i systemet de befinner sig. Gemåler som är ingifta i släkten har en ännu ljusare grå ton för att tydligt markera att de är ingifta. Det går dock att trycka på de ingifta personerna och då visas deras släktträd på liknande sätt. Då byter också makarnas namn plats med varandra så att den person som användaren har tryckt på visas först, längst till vänster. Samtidigt ändras givetvis också informationen i informationsboxen för att matcha den aktuella personen. Informationsboxen 6
innehåller uppgifter om personens födelse- och dödsdatum samt kön, tanken var också att den också skulle visa vart personen bor eller bodde etc. Figur 5. Gränssnittet med utfälld drop down meny, för val av stamfader. Vi har också valt att användaren ska kunna dra trädet med muspekaren för att navigera runt i trädet. Eftersom släktträd i princip kan bli hur stora som helst både på längd och bredd, tror vi att det blir krångligare för användarna att använda scroll eftersom det kräver två scrollfunktioner, på bredden och på längden. Vi anser att det blir enklast att kunna dra och släppa med musen för att förflytta sig i trädet. 5.1 Önskelista Om vi hade haft mer tid, så hade vi också kunnat implementera lite fler funktioner som vi hade tänkt på tidigare. Vi skulle t.ex. gärna haft med årtal som y-axel i huvudfönstret, vilket vi visade i Figur 1. Översiktsbilden ger för närvarande ingen annan feedback på var man är i trädet, mer än att markera vilken person man har valt. Meningen var att det skulle finnas en liten ruta, eller lins, som man kunde flytta runt och på så sätt både få en indikering på var man är i trädet samt en möjlighet att lite snabbare och smidigare förflytta sig runt trädet. Men eftersom personernas bredd i huvudfönstret kan variera i storlek så överensstämmer inte huvudfönstrets bild med översikten i ett 1:1 förhållande, vilket omöjliggör en sådan funktion. Man skulle kunna tänka sig att kompensera för den varierande bredden i översikten genom att fylla ut med tomrum, men vi prioriterade bort det. Andra saker som kan nämnas är att vi hade bland önskat att när man klickar på en gemål borde denna stanna under pekaren. Det hade också varit bra om man hade 7
kunnat se vem en person hade barn tillsammans med, om personen hade många gemåler. Ett annat problem som uppstod med drop-down listan där man väljer stamförälder är att den ganska blint visar alla personer utan föräldrar, det hade varit bättre om den hade sorterat undan några personer, t.ex. personer utan vare sig barn eller föräldrar. 6. Programmeringen Vår prototyp är gjord i java, vilket var ett lätt val då stödfunktionerna som följde med uppgiften var gjorda i java. Trädet ritas ut genom att vi ber den aktuella stamfadern rita ut sig, stamfadern frågar då sina barn hur breda deras underträd är, sedan ber stamfadern alla sina barn att rita upp sig i tur och ordning på den plats som beräknats från bredden. Stamfadern ritar också ut de streck som förbinder den med sina barn. Denna metod är relativt lätt att implementera men lämnar mycket att önska vad gäller utnyttjandet av skärmyta, träden hade en tendens att bli väldigt breda. 7. Diskussion Vi tycker att vi har löst uppgiften på ett bra och översiktligt sätt. Systemet ger en klar och tydlig överblick och det är väldigt enkelt att använda. Vårt syftet var att utveckla ett så enkelt och lättförståligt system som möjligt, vilket vi tycker att vi har lyckats med. De tre delarna har olika syften och vi avdelar dessa genom att skilja på bakgrundsfärgerna i dem. Vi har också försökt att arbeta efter Micro/Macro design, så som beskrivs i Envisioning Information sid. 56, då vi har försökt att på bästa sätt presentera all data men att ändå förminska den mängd information en användare måste se på samma gång. Vi har också försökt utnyttja platsen i gränssnittet på bästa möjliga vis. Tufte skriver i Envisioning Information om hur viktigt det är att framhäva information på rätt sätt i tabeller och tydligt markera skillnaden mellan raderna och samtidigt samla information som tillhör samma del i tabellen genom att till exempel växla färg. Det här gör det enklare för användaren att tyda tabellen. Därför har vi valt att ha olika färg på de tre olika delarna, vilket gör det lättare för användaren att tyda informationen i systemet än om vi haft ett och samma fönster för all information. Informationsboxen skulle också innehålla mer personuppgifter och informationsraderna skulle vara markerade. 8. Referenser Edward R. T. (1990) Envisioning Information, Graphics Press 8