Informationsvisualisering av släktträd, Grupp 7 Bakgrund Projektet baserar sig på att skapa en applikation, där det ska finnas möjlighet att utforska släktdata. Applikationen ska tillåta användare att grafiskt utforska en samling människor som är släkt med varandra och det ska gå att börja från flera olika stampersoner. Ett koncept för ett grafiskt gränssnitt samt en implementation av en prototyp ska utföras. Förstudie Vid projektets början utforskade vi möjligheterna att kunna göra ett släktträd i olika dimensioner och i olika vinklar. Vi sökte på Internet för att se prov på olika sätt att representera släktträd på. Utifrån undersökningen identifierade vi tre huvudkategorier; statiska, halvt dynamiska och helt dynamiska släktträd. De statiska släktträden visar hela släkten i form av ett stort träddiagram med alla dess förgreningar [1]. Halvt dynamiska släktträd visar bara en delmängd av släktträdet, men möjliggör förflyttning till släktträdets andra delar. Det möjliggörs till exempel med hyperlänkar mellan statiska webbsidor [2]. I de helt dynamiska släktträden kan man från varje person ta sig vidare i släktträdet, som då uppdaterar den aktuella vyn [3]. Vi identifierade även olika sätt att starta sin vandring eller sökning i släktträdet. Det vanligaste sättet verkar vara att utgå från ett håll, t ex en stamfader eller sig själv, och från denne person följa släkten i en riktning. Andra varianter var att från en lista välja antingen en ort eller ett namn på en person [4]. Vi hittade inget släktträd med sökfunktion. Den informationsmängd som fanns kopplad till varje person i släktträdet varierade kraftigt hos de släktträd vi studerat. Även sättet att visa denna information på skilde sig åt men gemensamt var att alla visade för- och efternamn på alla personer. De flesta släktträd visar dessutom födelse- och dödsdatum och i undantagsfall även summerad ålder. Andra vanliga attribut som förekom var ort, land, titel och källor. I få fall var även personernas relationsförhållande till någon utskrivet, t ex farmor eller gammelmorfar. Målgrupp Vem som helst ska i stort sätt kunna navigera runt i släktträdet, gammal som ung, van eller ovan datoranvändare. Viss erfarenhet av datorer krävs dock, t ex bör man kunna hantera en mus. Vi tror att målgruppen främst är intresserade av att studera släktträdet ur två synvinklar. Det finns de som vill se bredden, för att på så vis se vilka som finns levande just nu, och det finns de som vill se sina förfäder genom att vandra i djupled.
Önskvärda egenskaper Tillsammans diskuterade vi kring resultatet av förstudien och de system som beskrivits i kursens artiklar och övrig kursdokumentation. Vi definierade fyra olika huvudegenskaper som ansågs viktiga för att kunna skapa en bra representation av ett släktträd. 1. Översikt kontra detaljer Att erbjuda användaren en översikt av informationsmängden (hela släkten) ansågs vara av stor vikt. Inte minst för att underlätta navigering (se varifrån man kommer och vilka valmöjligheter som finns för fortsatt navigering) genom att visa alla alternativa vägar i informationsmängden, men också för att användaren ska få ett grepp om hur mycket information som totalt finns tillgängligt i systemet (hur många släktingar existerar egentligen?). Samtidigt ska det finnas möjlighet för användaren att dyka ner i informationsmängden för att kunna komma åt detaljerad och specifik information (vad heter mina kusiner och när är de födda?). Detta tankesätt följer det resonemang Tufte [1] för rörande Micro/Macro Readings där man i stora informationsmängder ska kunna se enskilda delar, om än små, för att förstå delarnas betydelse i det stora sammanhanget. Micor/Macro Reading illustreras bland annat på varierande sätt med de olika grafiska teknikerna Fisheye [9], Treemaps [8], Document Lens [6] och Hyperboliska geometrier [7]. 2. Zoomfunktion För att användaren ska kunna komma åt mer detaljerad information (vad heter mina kusiner och när är de födda?) anser vi det viktigt att man kan zooma in denna typ av information. De olika grafiska teknikerna beskrivna ovan har alla olika metoder för att zooma i informationsmängden. I princip modellerar både Document Lens [6] och Perspective Wall [6] en stor textmängd på en töjbar duk som sträcks ut över en geometri med en plan topp närmast användaren. Den zoomade texten visas på ytan av den plana toppen och man navigerar i textmängden genom att flytta runt den töjbara duken. Genom att geometrin visas i perspektiv visas informationen i periferin på ett naturligt sätt mindre och mindre. I Spiral Calendar [6] sker zoomningen i informationsmängden stegvis i djupled där detaljeringsnivån ökar för varje vy. Hyperboliska Geometrier [7] zoomar den information som är lokaliserad i centrum och minskar storleken exponentiellt ju längre bort från centrum informationen befinner sig. Med Flip Zooming [10] delas informationen upp i olika delar där användaren får välja ett fokusobjekt som ges mer utrymme och centreras. 3. Presentation av detaljer När användaren väl hittat en lämplig detaljnivå ska informationen presenteras på ett så konsistent sätt som möjligt (t ex en persons relationer till föräldrar, syskon och barn ska presenteras på liknande sätt som vilken annans persons närmaste släktrelationer). Tufte [1] introducerar begreppet Small Multiples som ett presentationssätt för att uppmuntra och förenkla visuella jämförelser. Tanken med Small Multiples är att utgå från ett och samma presentationssätt men att den information som visas kan vara olika. Detta ger användaren naturligt fokus på skillnaderna i informationen (t ex antalet olika syskon) istället för eventuella skillnader i presentationen (t ex godtycklig placering av syskonen).
4. Relevant information Den detaljerade nivån bör inte innehålla för mycket information, men samtidigt vara så pass informativ att onödig navigering kan undvikas. Fisheye Views [11] är ett exempel på en lösning för liknande problem med hierarkiskt strukturerad information. Tanken med Fisheye Views är att viss information tas bort för att bereda plats på skärmen för information som för stunden anses vara viktigare (t ex kan det vara mer intressant för användaren att se sina egna syskon än sina föräldrarnas syskon). Den matematiska algoritm som används i Fisheye Views för att bestämma graden av viktighet kanske inte är fullt tillämpbar i vårt fall. Dock bör intentionen att presentera relevant information anammas. Idégenerering En av de idéer som genererats fram under diskussionens gång var att använda sig av en navigeringskarta. En variant av denna navigeringskarta skulle, i likhet med Document Lens [6] och Hyperboliska geometrier [7], visa en detaljerad vy som är förstorad i förhållande till omgivningen. En annan variant av navigeringskartan skulle kunna fungera på samma sätt som Photoshops Navigator [12] eller navigationstabben Pages i Acrobat 6 [13]. I Photoshop kan man zooma in en detalj av en bild men fortfarande överblicka hela bilden i en separat palett vid sidan om den förstorade detaljen. Den del av bilden som visas förstorad representeras av en färgad rektangel i paletten. På så sätt visas detaljens del i helheten. På motsvarande sätt fungerar navigationstabben Pages i Acrobat 6.
Nedan visas ett exempel på principen för denna typ av navigeringskarta. Vi diskuterade även om släktträdet skulle kunna få egenskaper från molekyler. Exempelvis skulle egenskaper som storlek och placering i förhållande till varandra kunna appliceras på personerna i släktträdet. Andra egenskaper som färg och form skulle kunna användas för att tydliggöra förhållanden i släktträdet. Kopplingarna mellan personerna skulle t ex kunna motsvaras av de olika bindningar (t ex enkel- dubbeloch trippelbindningar) som existerar molekyler emellan. Eventuellt skulle släktträdet även kunna presenteras i 3D, vilket skulle möjliggöra att man kan vrida och snurra på trädet och se det från olika vinklar. Vårt koncept Efter det att vi genererat idéer och tagit fram olika skissförslag har vi kommit fram till ett koncept för att representera släktträdet. Konceptet bygger på att användaren ska kunna få en överblick av släktträdet (översiktlig vy) men samtidigt kunna få detaljerad information presenterad på ett överskådligt vis (detaljerad vy). Översiktlig vy med trädstruktur Vår tanke är att släktträdet ska baseras på den filstruktur som finns representerad bland annat i Windows Utforskaren. Detta val baseras främst på att användarna därigenom kan få en snabb och tydlig överblick över hela släkten och hur strukturen i släktträdet är uppbyggd. Genom att placera filstrukturen, eller trädstrukturen, till vänster blir det lätt för användaren att känna igen sig då det är placerat på samma ställe i liknande applikationer i olika operativsystem.
Ett annat argument till att använda filsystemet som översikt var att vi i flera av de släktträd som studerades inledningsvis gick vilse och tappade bort var i släktträdet vi befann oss. En annan fördel med att använda sig av ett filsystem är att man bara behöver öppna de kopplingar som man för tillfället önskar att se. För mycket information kan försvåra överblicken för användaren - Less is more. Denna tanke följde oss sedan genom hela projektet. I vårt val av design finns inga begränsningar på hur stort släktträdet kan vara. Storleken ska därför kunna variera från ett litet familjeträd till ett stort träd, som t ex en konungaläkt. Trädstrukturen i vår lösning kan växa hur mycket som helst med hjälp av scrollbars. Flikar Förutom trädstrukturen finns det andra sökmöjligheter som kan väljas via fyra olika flikar. Under fliken Träd ska alla personer som finns med i släktträden visas i en trädstruktur. Under fliken Namn listas alla personer i bokstavsordning efter personernas efternamn. Här fås en snabb överblick över vilka som har samma efternamn, vilket kan vara intressant om man vill följa en viss familj. Under fliken Platser visas personerna i en lista efter var de är födda. Platserna i sin tur är listade i bokstavsordning. Det kan vara bra om man bara vet att personen man letar efter föddes i en viss socken eller en viss stad. Under fliken Sök är det tänkt att man ska kunna söka efter en person om man exempelvis bara vet förnamnet. Det kan ju vara fallet om en person gift sig och bytt efternamn. Alla personer med det önskade förnamnet listas då i bokstavsordning efter personens efternamn. Man ska även kunna söka efter namnet på platser och då listas alla personer i bokstavsordning som är bosatta där. Ikoner Vi har valt att illustrera vilka kön personerna i trädet tillhör med hjälp av ikoner. Tre olika förslag togs fram och utvärderades med avseende på förståelse (hur lätt det är att uttyda vad ikonerna ska illustrera) och tydlighet (möjlighet att skilja på ikonerna med hjälp av t ex form eller färg).
Förslag 1 Symboliserar könstecken för man och kvinna. Förståelse: Kräver att användaren har kunskap om vad tecknen betyder. Tydlighet: Har små geometriska skillnader som gör dem svåra att särskilja. Könen skiljs i huvudsak åt med hjälp av tunna streck. Förslag 2 Symboliserar huvudet av en man och en kvinna. Förståelse: Avsaknaden av detaljer gör det svårt att se vad figurerna illustrerar. Tydlighet: Har små geometriska skillnader som gör dem svåra att särskilja. Könen skiljs i huvudsak åt med olika färger. Förslag 3 Symboliserar en man och en kvinna i helfigur. Förståelse: För de flesta användare redan välkända arketyper. Tydlighet: Har små geometriska skillnader som gör dem svåra att särskilja. Könen skiljs i huvudsak åt med hjälp av konturen. De tre förslagen har liknande brister när det gäller tydlighet men skiljer sig åt mer i avseende på förståelse. Vi har därför valt att utveckla Förslag 3 som representeras av välkända arketyper och således inte kräver lika mycket förkunskaper från användarna som de andra två förslagen. Genom att särskilja de båda könen med hjälp av klarare konturer och olika färger fick vi fram ett tydligare förslag. För att säkerställa att ikonerna även kan användas av färgblinda användare genomfördes ett test som utvecklats av BTexact [14]. Testet simulerar färgblindhet genom att visa testbilderna med olika färgpaletter (som representerar olika typer av färgblindhet). Vi har testat våra ikoner mot de två vanligaste synfelen, protanope och deuteranopes. Resultatet visade att de färger vi valt (rött och grönt) båda visas som bruna med de båda paletterna. De ändrades till färger (blått och brunt) som gav liknande färgupplevelser med alla paletterna. Normal färgpalett Protanope paletten Deuteranopes paletten I vårt ursprungliga förslag upplevdes färgskillnaderna större för användare utan färgblindhet medan skillnaden för färgblinda blev mycket liten. Det valda förslaget ger alla användare en tydlig färgskillnad som dessutom kompletteras med symbolernas form.
Ursprungligt förslag Valt förslag Detaljerad vy för presentation av relationssamband För att kunna åskådliggöra relationer mellan personer på ett tydligt och lättöverskådligt sätt visas en detaljerad grafisk vy över en delmängd av släktträdet till höger om trädstrukturen. Denna vy är främst avsedd för att navigera på bredden medan trädstrukturen till vänster förespråkar vandring i djupled. I den detaljerade vyn till höger visas den person som för tillfället är vald i en ruta som är centrerad i mitten av vyn. Storleken på rutan är förstorad i förhållande till de andra rutorna i vyn. På detta sätt visas det tydligt och klart vem i släktträdet som är i fokus. Detta har vi också valt att förstärka genom att färgsätta rutan. Personens närmaste släktled visas men i mindre storlek. Vi har valt att i den detaljerade vyn inte visa mer information än vad vi tror är mest relevant för målgruppen. Vi visar därför ett släktled uppåt (föräldrar) och ett led nedåt (barn) samt släktled på samma nivå (syskon). Vill man sedan se längre ner eller upp i leden klickar man vidare på t ex en förälder. Den person användaren klickade på kommer då att placeras i mitten av den detaljerade vyn. För att på ett så tydligt sätt som möjligt visa de olika relationerna som de olika personerna i trädet har med varandra, har vi valt att använda oss av linjer. Dessa har utformats med olika utseende som färg, tjocklek och typ av linje (hel tunn, hel tjock eller tunn streckad) och fungerar även i monokroma miljöer. Detta stöd tror vi har en stor betydelse i fråga om att tyda släktträdet rätt och förstå sammanhanget. Blodsband Skilda/separerade Mer information om släkt/relationer finns Om det finns mer information under någon utav personerna har vi markerat dessa med en pil, som visar att släktträdet fortsätter och att man kan klicka vidare i det.
I vårt koncept visas inte huvudpersonen och dennes kusiner samtidigt i den detaljerade grafiska vyn. Det har gjort att visualiseringsproblem som kan uppkomma rörande komplicerade förhållanden, som giftermål med kusiner, undviks. För att få reda på om så är fallet måste man stega vidare i trädet eller vandra uppåt i den detaljerade vyn. Vi har valt att endast visa de förhållanden som har resulterat i barn samt om man har ett aktuellt förhållande, oavsett om man i detta förhållande har barn eller inte. Det finns inga begränsningar när det gäller antal giftermål/förhållande som en person kan tänkas ha, men det blir i dessa särskilda fall mer plottrigt på skärmen. Å andra sidan speglar det verkligheten på ett ganska bra sätt som ju också blir invecklad ibland. I de fall där visningen i den detaljerade vyn växer på bredden läggs en scrollbar till i sidled. För att särskilja de personer som är ingifta i släkten har vi använt oss av färg och form. Dessa personer representeras av en grå cirkel istället för en vit ruta. På så sätt visar vi användaren att de gråmarkerade personerna tillhör ett annat släktträd (utgående från den aktuella vyns huvudperson). När man för musen över dessa personer dyker det upp en hjälptext som talar om att man byter släktträd om man klickar på personen. Denna information tyckte vi var viktig för navigeringen därför när man byter släktträd är det lättare att tappa bort sig. Hjälptext (tooltips) dyker också upp när man försöker klicka på en person som inte har någon fortsatt relation i släktträdet. Vi har i den detaljerade vyn valt att visa informationen i tre olika nivåer, alla utgående från den för tillfället valda personen. Överst visas föräldrar och deras eventuella partners. På den mellersta nivån visas hel- och halvsyskon och i den understa nivån visas barn. För att tydligt visa för användaren vad som är klickbart ändrar musmarkören utseende när den passerar över objekten (från pil till pekande hand). För att få ytterligare information om personerna klickar man på deras namn för att visa en ruta längs ner på sidan. Man kan då få information om: Förnamn (tilltalsnamn understruket) och efternamn Foto på den valda personen Födelseår (ort) Datum då personen avlidit (ort) Yrke Mor (namn, födelse & död) och far (namn, födelse & död) Maka/make/sambo/särbo (namn, födelse & död) Barn (namn, födelse & död) Exempel på information om personer i släktträdet.
Placerad längst ner på den detaljerade vyn finns en ram där användarens väg genom släktträdet visas. De personer som användaren redan tittat på representeras som klickbara rutor i historisk följd. Vi har valt att visa maximalt fyra steg bakåt i tiden. Vid fler steg förskjuts rutorna till vänster varefter det att användaren stegar sig vidare igenom trädet. Genom att visa den senaste historiken avlastas användarens minne då det är lätt att glömma var man har varit och lätt att tappa bort sig medan man vandrar runt i släktträdet. Ramen kan även användas för navigering genom att klicka på de olika namnen för att snabbt komma tillbaka till redan besökta personer. Om användaren klickat på fyra personer visas följaktligen dessa personers namn i historisk följd med den första personen längst till vänster och den senaste personen längst till höger. Väljer användaren att åter gå till den första personen klickar han på dennes namn. Vi har i detta läge valt att man går tillbaka i historiken och bara visar denna persons namn i ramen. Väg:>> Staffan Björk Väg:>> Staffan Björk Maj Björk Väg:>> Staffan Björk Maj Björk Bo Ljungqvist Väg:>> Staffan Björk Maj Björk Bo Ljungqvist Maria Ljungqvist Väg:>> Staffan Björk Exempel på vår implementation av historisk navigering. Ett alternativt sätt skulle kunna vara att personens namn läggs till i den historiska följden som nummer fem. Oavsett vilket exempel som används bör den kompletteras med en ångrafunktion eller en bakåt-knapp. Väg:>> Staffan Björk Väg:>> Staffan Björk Maj Björk Väg:>> Staffan Björk Maj Björk Bo Ljungqvist Väg:>> Staffan Björk Maj Björk Bo Ljungqvist Maria Ljungqvist Väg:>> Maj Björk Bo Ljungqvist Maria Ljungqvist Staffan Björk Exempel på alternativ implementation av historisk navigering samt funktionen dynamisk ram. Prototyper När väl konceptet funnit sin form påbörjades arbetet med att visualisera den. Vi har valt att göra två prototyper, en fungerande i Java och en för själva konceptet i PowerPoint.
Konceptprototyp För att på ett enkelt sätt kunna visa vårt koncept och dess grundläggande funktionalitet producerades en interaktiv prototyp med hjälp av Photoshop och PowerPoint. Denna har under projektets gång justerats, omarbetats och förfinats. Vid projektets slut visar den hur vi avser att släktträdet ska fungera. Javaprototyp Parallellt med framtagandet av konceptprototypen har utveckling av en fullt fungerande prototyp i Java pågått. Vi hade vid projektets slut inte lyckats med att implementera alla funktioner fullt ut, men den klarar av grundläggande navigering och visning av släktdata.
Implementation Applikationen är kodat i Java med filerna FamilyTree, DataBase, PersonParser & Person som Staffan lagt ut på webben. Utifrån dessa har vi byggt en prototyp. Klassen Database var vi tvungna att ändra i för att den skulle passa våra behov. Funktionen GetUglyFamilyTree är ändrad så att den returnerar en nod till trädet istället för en sträng. FamilyTree är den klass där som innehåller Main-funktioner samt sätter upp layouten för programmet. Den är uppdelad i splitpanes. Till översiktsvyn till vänster byggs trädet upp med komponenten JTree från Swingpaketet. I den detaljerade vyn till höger ritas trädet upp grafiskt med den valda personens barn, föräldrar och information. En dummy-version, för att visa personer, har implementerats, men den är inte komplett. Noderna i trädet ritas upp i paneler och trycks upp i högerkanten. På grund av tidsbrist har inte alla våra tänkta funktioner implementerats men är möjliga att genomföra med det skal som vi har skapat. Avgränsningar/Framtida arbete I nuläget kan man inte lägga till nya personer i trädet men denna begränsning ses inte som ett problem i framtiden. Det grafiska gränssnittet kan med enkla medel vidareutvecklas för ett mer tilltalande utseende. För tillfället kan man endast navigera med hjälp av mus, men detta bör utökas så att man t ex kan använda piltangenter eller en tryckbar skärm för navigation. Arbetsfördelning Samtliga deltagare var i projektets början delaktiga i diskussioner, funderingar och beslut av vald struktur och upplägg. Därefter delades arbetet upp i koncept och implementation. Utformning av koncept, skärmdumpar och rapportskrivning har utförts av Cecilia, Mattias och Lina. För den programmering som krävdes vid implementation av projektets koncept, har Tobias haft huvudansvaret. Grupp 7 Tobias Gillberg Cecilia Gustavsson Mattias Ludvigsson Lina Pettersson
Referenser 1. http://www.kagedal.org/slakttrad.htm 2. http://hem.passagen.se/jwimmerstedt/html/mitt_sl_kttr_d.html 3. http://historiska-personer.nu/dft/regenter.html 4. http://w1.370.telia.com/~u37007243/thoraslakttrad/svstart.html 5. Tufte, E. R. Envisioning Information. Graphics Press, UK, 1990. 6. Rao, R., Pedersen, J.O., Hearst, M.A., Mackinlay, J.D., Card, S.K., Masinter, L., Halvorsen, P-K., & Robertson, G.C. (1995) Rich interaction in the digital library. Communications of the ACM. 7. 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 Systens. New York: ACM. 8. van Wijk, J.J., & van de Wetering, H. (1999) Cushion Treemaps: Visualization of Hierarchical Information, Proceeding 1999 IEEE Symposium on Information Visualization (InfoVis 99), Octover 25-26, 1999, IEEE Computer Society. 9. http://www.cs.chalmers.se/idc/ituniv/kurser/03/gg/forelasningar/infovis.2.ppt, sida 11 (29). 2003-10-06 17:08. 10. Björk, S. Hierarchical Flip Zooming: Enabling Parallel Exploration of Hierarchical Visualizations. Proceedings of Advanced Visual Interfaces (AVI), 2000. 11. Furnas, G.W. (1986) Generalized fisheye views. Human Factors in Computing Systems CHI '86 Conference Proceedings, Boston. 12. http://www.adobe.se/products/photoshop/main.html, 2003-10-06, 17:16. 13. http://www.adobe.se/products/acrobat/main.html, 2003-10-06, 17:15. 14. http://more.btexact.com/people/rigdence/colours/index.htm