fam fab Fam iljefabrik en Projekt 2: Informationsvisualisering av släktträd - Ett projekt i kursen Grafiska Gränssnitt lp1-2003 Projektledare: Staffan Björk Grupp 5: Christine Cronwall Filip Karlsson Pia Hammargren Robert Larsson Stefan Strömqvist Tomas Andersson
Innehållsförteckning 1 INTRODUKTION... 3 1.1 PROBLEM... 3 1.2 VÅR SYN PÅ VAD SOM SKALL GÖRAS... 3 1.3 MÅLGRUPP... 3 2 UTVECKLINGSMETOD... 3 2.1 FÖRANKRING I FISHEYE VIEW... 4 2.2 HYPERBOLISK GEOMETRI... 5 3 UTVECKLING... 5 3.1 INLEDNINGEN AV PROJEKTET... 5 3.2 UTVÄRDERING AV FÖRSTA ITERATIONEN... 6 3.3 UTVÄRDERING AV ANDRA ITERATIONEN... 7 3.4 UTVÄRDERING AV TREDJE ITERATIONEN... 8 3.5 PROTOTYPER... 8 4 RESULTAT... 8 4.1 FUNKTIONSBESKRIVNING... 9 4.1.1 Implementerade funktioner... 9 4.1.2 Ej implementerade funktioner... 10 5 DISKUSSION... 11 5.1 VAL AV DESIGN... 11 6 ARBETETS GÅNG... 11 6.1 VÅRA ROLLER I PROJEKTET... 12 7 REFERENSER... 13 Bilagor BILAGA 1 - UTVECKLINGEN AV GRÄNSSNITT I FEM BILDER BILAGA 2 - SKÄRMDUMPAR PÅ FÄRDIG PROTOTYP 2
1 Introduktion 1.1 Problem Vi ska i detta projekt utveckla en applikation med ett grafiskt gränssnitt med vilket man kan utforska ett släktträd. Det svåra i uppgiften ligger i att kunna presentera en stor mängd grafisk information utan att göra avkall på detaljrikedomen, samt att förutse komplicerade relationer mellan släktingar. I ett släktträd som är väldigt brett är det svårt att se kopplingar mellan personer utan att behöva använda rullisten i sidled. Detta uppstår exempelvis då en förälder har många barn och förälderns syskon i sin tur har många barn. Vid fokus på en enskild del i trädet är det svårt för användaren att få en helhetsbild. Det kan t.ex. bero på att personer utanför den enskilda familjen bort såsom kusiner, mostrar, syskon etc. 1.2 Vår syn på vad som skall göras Vi tänker designa en applikation för att utforska ett förbestämt släktträd. Applikationen skall låta användaren grafiskt utforska en grupp människor som är släkt med varandra. Träden skall utgå från ett antal stampersoner och skall kunna visa tillhörande släkt med varierande detaljrikedom. Denna design skall mynna ut i en prototyp innehållande en mängd fungerande funktioner. 1.3 Målgrupp Målgruppen vi vänder oss till består av personer med intresse för släktforskning, varav de flesta personer har intresse för just sina egna släktband. Vi beräknar att dessa individer är både kvinnor och män, befinner sig i mycket varierande åldrar, men tror ändå att de främst är mellan 30 och 50 år. Vi tror att de blivande användarna kan ha vitt skilda yrken och bakgrunder, vilket gör att bekantskapen med datorer och program kan variera lika mycket. Vidare tror vi att vår användare kommer att använda programmet på sin fritid och därmed i hemmet samt att användningsfrekvensen kan vara olika stor hos olika individer. 2 Utvecklingsmetod Vi kommer att arbeta efter den designmetodik som vi har tagit del av i MDI-kursen, där olika designnivåer leder fram till en kravspecifikation och sedan till den slutgiltiga produkten. Flera iterationer kommer att utföras under projektet för att på så sätt förbättra släktprogrammet under arbetets gång. För att jobba effektivt har vi valt följande utvecklingsstrategi, vilken består av fyra steg: 1. Komma överens om en övergripande design på vår prototyp. 2. Utveckla denna design med nya funktioner. 3. Utvärdera ovanstående och kontrollera om informationen visualiseras på ett bra sätt. 4. Iterera steg 2 till 3 i mån av tid och idéer.
Med ovanstående strategi ser vi följande fördelar: All kodning kommer inte sist i projektet, utan påbörjas tidigt, vilket leder till att vi undviker att koda i panik vid projektets slut. Det blir möjligt att ändra strukturen under arbetets gång vilket ger oss flexibilitet i arbetet. Det underlättar kontrollen av hur vi ligger till i arbetet, det vill säga att vi hela tiden kan mäta vårt resultat mot våra specificerade krav inom projektet. 2.1 Förankring i Fisheye view Vi har valt en modell som kallas Fisheye view i designen av projektet. Modellen bygger på att det som är närmast ögat syns tydligare och är mer detaljrikt. Den här modellen används ofta när man arbetar med att få fram information ur databaser. Svaren visas i gränssnittet medan koden bakom gränssnittet hämtar uppgifter från databasen. Eftersom vi har valt att ha design i form av Fisheye view, har vi läst in oss på ämnet. Artikeln Generalized Fisheye Views av Furnas (1986) tar upp följande rubriker i modellen: Naturally occuring fisheye views Formalizing generalized fisheye views Fisheye interfaces Naturally occuring fisheye views - förklarar att vi har lättare att komma på svaret på en fråga om det har prioriterad fakta för vår situation. Det är t.ex. mycket lättare för oss att snabbt komma på vem som är statsminister idag än för 35 år sedan. Formalizing generalized fisheye views Strategin bygger på Degree of Interest (intressegrad) vilket i sin tur bygger på att vi söker efter det som är viktigt för oss. Här diskuterar artikeln den hierarkiska organisationen som finns i en mappstruktur. Fisheye interfaces Gränssnittet är upplagt efter användarens prioritet. Här ges exemplet för syntaxen hos programspråk som PASCAL. Användaren kan direkt få en överblick var han/hon befinner sig i texten och hur den här uppbyggd. För att återknyta ovanstående modell i projektet kommer vi att ha: Markering runt den ättlingen som användaren klickat på. Ättlingarna kommer att synas som noder med olika detaljrikedom. Den ättling som användaren klickar på kommer visas med alla uppgifter. De noderna som ligger närmast vald nod kommer att ha begränsade uppgifter, medan de som ligger i tredje nivån eller längre ifrån endast kommer att visas som punkter/rutor. Den valda ättlingen är den som är viktigast för användaren och skall därför vara den som har ett centrerat fokus. De noder som ligger nära valt objekt i strukturen kommer att visas i gränssnittet i en struktur som visar var han/hon befinner sig i trädet. Vi väljer därmed att arbeta med vad man kallar local detail global context. 4
2.2 Hyperbolisk geometri Det finns även andra liknande visualiseringsmetoder som använder sig av en något förändrad typ av Fisheye. I artikeln A Focus+Context Technique Based on Hyperbolic Geometry for Visaulizing Large Hierarchies av Lamping, Rao och Pirolli (1995) tar författarna upp en metod som använder sig av så kallad hyperbolisk geometri. Det går ut på att visa en informationshierarki på en konvex halvcirkel med den högsta detaljnivån i mitten av cirkeln. För att få ett objekt i fokus drar användaren helt enkelt denna till mitten av halvcirkeln och detaljnivån samt storleken på resterande information avtar sedan ju längre ifrån centrum den är. Fördelen med denna metod är att det skapar en jämnare övergång mellan objektet i fokus och den övriga informationen då förflyttningen är flytande. Hyperbolisk navigering tillåter även en mycket mer effektiv interaktion med större mängder information än andra metoder. En relativt stor nackdel med denna metod är att positionen av specifik information inte är statisk utan kan röra sig från olika platser på sfären. Ett objekt som till en början kan hittas i det övre högra delen av sfären kan efter en kort tids användande vara förflyttat till nedre delen av sfären istället. Detta kan i sin tur skapa en förvirring hos en användare som inte lika effektivt kan använda sitt minne för att hitta var en specifik information fanns på sfären. Att använda sig av en hyperbolisk visualiseringsmetod hade varit väldigt intressant då det tar steget ifrån traditionell visualisering av information. Dock bedömde gruppen att det inte fanns tid nog att utveckla de mycket mer komplicerade funktionerna/algoritmerna för att skapa en fungerande hyperbolisk geometri. 3 Utveckling Under projektets gång följer vi de steg som tidigare angivits i kapitlet Utvecklingsmetod. Rubrikerna i detta kapitel reflekterar arbetsgången i kronologisk ordning och innehåller beslut och motiveringar för viktig information som framkommit under våra möten. 3.1 Inledningen av projektet Vi började vårt arbete med en diskussion kring hur ett släktforskningsprogram fungerar i praktiken och vilka behov som finns, för att få en bild över hur vi skulle lösa problemet. Efter några informella samtal med ett antal användare av redan befintliga program framkom att det är problematiskt att få översikt på sitt släktträd. Användaren tyckte att det var svårt att avgöra exakt var i trädet denne befann sig. Nästa uppgift blev att identifiera de användningsområden som finns för ett släktforskningsprogram. Vi kom fram till att programmet först och främst skulle tjäna den enskilda användarens intresse av släktband. Denna inriktning mynnade ut i en rad olika funktioner som vi kategoriserade i tre grader av prioritet. Under dessa diskussioner 5
framkom även ett antal begränsningar på systemet som vi ansåg vara av vikt att ta hänsyn till. Nödvändiga funktioner är att kunna: Öppna ett nytt släktträd Visa släktträdet grafiskt Lista alla personer i släkten Stänga aktuellt släktträd Avsluta programmet Viktiga funktioner är att: Kunna välja vilka fönster som skall vara synliga och inte för att maximera arbetsytan. Söka efter en specifik person Ha möjlighet att sortera personer i listan efter deras egenskaper, såsom efternamn och födelseår Zooma in och ut för att få varierande översikt på släktträdet Genom en översiktskarta snabbt kunna navigera över hela släktträdet Med hjälp av färgkodning och hierarki förtydliga objekten o Nivå 1 = Fet grön ram runt objektet och vit bakgrund o Nivå 2 = Enkel svart ram med vit bakgrund o Nivå 3 = Ljusgrå mindre ram med ljusgrå bakgrund. Önskvärda funktioner blir att: Kunna utgå från sig själv i trädet och se släkt i rakt uppstigande led, det som kallas anträd Ha tillgång till en hjälpfunktion Lägga till, ta bort och ändra personuppgifter i släktträdet. Skriva ut en vald del av eller hela släktträdet. Lösenordsskydda släktträdet. Med detta ser vi dock följande begränsningar: Programmet kräver att användaren tidigare har arbetat med en dator. Systemet kan bara visa en släkt åt gången och arbetar mot en specifik databas. Vi har enbart en begränsad mängd information om varje individ i släkten. Användaren måste själv känna till och bestämma relationerna mellan individer i släkten. 3.2 Utvärdering av första iterationen Vi samlades åter i gruppen för att diskutera hur arbetet fortskrider. Under dessa diskussioner framkom en rad olika punkter, nämligen: Hur vi skulle strukturera upp släktträdet på den tilltänkta arbetsytan. Detta visade sig nämligen ställa till med mer problem än vi från början räknat med. Metoden som skulle rita släktträdet jämnt fördelat över skärmen, skulle bli alldeles för avancerad för 6
projektets tidsramar. Vi valde därför att försöka förenkla metoden så mycket som möjligt. Struktureringen och en jämn fördelning av trädets grenar fick komma i andrahand, medan vi istället fokuserade på att få en fungerande uppritning av trädet. Vi valde att låta den tilltänkta översiktskartan få lägre prioritet. Den flyttas nu ner till de önskvärda funktionerna vilka implementeras om det finns tid och möjlighet. Den utritade trädstrukturen på arbetsytan förändrades också. Vi bestämde oss för att försöka rita ut hela släktträdet på skärmen samtidigt. Detta för att undvika att användaren behöver använda rullistor, när hela trädet inte får plats. För att trädet fortfarande skulle vara översiktligt valde vi att utöka de tre redan befintliga illustrationsnivåerna men ytterligare en nivå. De tilltänkta nivåerna blir då: Nivå 1 = Fet grön ram runt objektet och vit bakgrund. All information om personen visas. Nivå 2 = Enkel svart ram med vit bakgrund. Enbart initial på förnamn och hela efternamnet visas. Nivå 3 = Ljusgrå mindre ram med ljusgrå bakgrund. Enbart initialerna visas. Nivå 4 = Svart liten ruta. Ingen personinformation visas. Under projektets gång har vi börjat inse att släktträdet behöver visa mer information och personer än vad vi först antagit. Programmet skall inte endast rita ett släktträd med blodsband, utan skall inkludera släktingar utan blodsband. Som ett exempel behövde även en ingift persons släkt illustreras. Vi valde att vänta med att ta beslut om hur vi skulle lösa detta, tills att vi hade en mer fungerande prototyp som ritade upp ett genetiskt släktträd. 3.3 Utvärdering av andra iterationen I denna fas av projektet hade vi fått en fungerande kod, vad gällde placering av personer i släktträdet på arbetsytan. Vi skulle nu fortsätta implementera funktioner och design för att bättre anpassa oss till målgruppen. Från början använde vi oss av enkla ritade figurer för att illustrera släktträdet. Detta valde vi nu att frångå för istället använda oss av Java-objekt och på så sätt lättare kunna göra våra rutor interaktiva och hanterbara. Listan till vänster visade vid tidpunkten alla som räknas som stamfäder, vilket innebär även ingifta personer som inte har några kända föräldrar i släktträdet. Detta ville vi ändra på genom att enbart lista de personer som räknas som verkliga stamfäder, d.v.s. de som tillhör den första generationen i de olika släktträden. Det skulle därmed bli möjligt att växla mellan två olika släkter genom denna funktion. Att en person tillhör ytterligare en släkt än den som visas, valde vi att illustrera grafiskt i släktträden med en markering i högra hörnet i form av symbolen >>. Vi valde denna symbol eftersom vi anser att den ofta används för att illustrera att mer information finns tillgänglig. Detta skall dock utvärderas när det väl är implementerat. Vidare skall det 7
finnas en möjlighet för användaren att välja bort denna funktion på vissa personer i släktträdet. Det är nämligen inte säkert att användaren vill släktforska på alla ingifta släkter. Denna funktion kommer dock förmodligen inte implementeras utan skall ses som en framtida utvecklingsmöjlighet. Vi diskuterade även vad som händer om en person förekommer två gånger, t.ex. om två kusiner gifter sig. Vi valde att i så fall rita upp dessa personer på två ställen i trädet. En gång som blodssläkt och en gång som ingift. De personer som förekommer fler än en gång skall på något sätt vara markerade, för att visa att det är möjligt att växla mellan de platser där personen förekommer. 3.4 Utvärdering av tredje iterationen I den slutgiltiga utvecklingsfasen framkom ett antal funderingar. Funktionen att växla mellan olika släktträd genom ingifta personer var ett av ämnena som diskuterades. Som funktionen skall fungera i nuläget skall man på alla ingifta personer kunna klicka för att växla till deras eget släktträd. Vi insåg dock att även den ingifta personens barn ju kommer att finnas med i det andra släktträdet. Det kanske då skulle vara begränsande för användaren att inte ha möjligheten att växla träd via dessa personer, utan enbart med hjälp av deras förälder. För att överkomma detta problem skulle funktionen att växla släktträd implementeras på alla personer som förekommer i andra släkter och inte enbart på ingifta personer. Om denna utbyggnad av funktionen skulle komma att realiseras var dock tveksamt då det vid tidpunkten hade låg prioritet. 3.5 Prototyper Under arbetets gång har vi skissat och diskuterat olika lösningar både funktionella och designmässiga. Dessa skisser och pappersprototyper har fokuserat sig på separata delar av applikationen och inte så mycket på helheten. Vi har valt att inte ta med dessa skisser i dokumentation eftersom det hade skapat avbrott i det pågående utvecklingsarbetet. När den funktionella strukturen av systemet hade grundlagts, valde vi att tydliggöra göra våra gemensamma designidéer med hjälp av bilder i PowerPoint. Utvecklingen sammanfattas i fem bilder som bifogas som Bilaga 1. 4 Resultat Utvecklingen mynnade ut i en prototyp, vilken vi visar skärmdumpar på i Bilaga 2. Dessa skärmdumpar inkluderar Översiktsbild (med ToolTip) Ger en övergripande bild av systemet, samtidigt som det visar på ToolTipfunktion, vilken hjälper användaren att lättare identifiera enskilda individer i trädet. Funktion: Visa allt Visar funktionen som skriver ut all information om samtliga personer i släktträd. Syftar till att ge användaren möjlighet till en fullständig bild av trädet. Denna är även lämplig för utskrift. 8
Funktion: Zooma ut För ytterligare tydlighet kan användaren nyttja tre olika zoomnivåer (Zoom Ut, Normal och Zoom in). Denna bild visar ett träd i läge Zoom ut Sökresultat När användaren har fyllt i sökrutan på någon av listans flikar presenteras resultatet i Sök. Sökresultaten är även klickbara för att man ska kunna finna personens placering i släktträdet. 4.1 Funktionsbeskrivning Nedan har vi beskrivit hur systemet verkligen fungerar med sina funktioner. När användaren öppnar programmet möts han/hon av programfönstret. I fönstret ser man överst en list med programmets namn FamFab - FamiljeFabriken samt en knapp för att minska fönstret och för att avsluta programmet. I menyraden har vi fem rubriker med varsin rullningslist. I den första Arkiv finner vi underrubriker där användaren kan hantera programmet i sig och ladda släktträd. Vi har försökt att välja logiska val i dessa menyer som är allmänt vedertagna i andra program. Andra menyalternativet är Visa där användaren kan manipulera utseende av programmet samt hur informationen skall visas på arbetsytan. Tredje menyn Person skall kunna hantera funktioner såsom att ta bort och lägga till personer. I fjärde menyn finner man Träd där användaren skall kunna växla mellan stam- och anträd. I sista alternativet som sig bör har vi en Hjälp. I nuläget är inte alla funktionerna i menyraden implementerade. I listan till vänster finner användaren en listpanel med flikmeny där valen står mellan Katalog och Sök. I den första finns två olika listor där man kan välja mellan antingen stamfäder eller personer som finns listade i dennes släkt. Längst ned finns en textruta där användare kan fylla i något han/hon söker efter. I söksektionen finner man sedan resultatet av denna sökning. Arbetsytan ritar upp det släktträd som man har öppnat. Personerna visas i olika nivåer från stamfadern sett. Här finns ytterligare ett fönster som visar en översiktsbild av hela trädet. Denna bild är dock inte dynamisk i nuläget utan visar en infogad bild. Vi kommer nedan lista alla de funktioner som vi har och önskar implementera. 4.1.1 Implementerade funktioner Meny Ladda släktträd Stäng släktträd Avsluta program Dölj översiktsfönster Dölj lista Visa allt Zooma in / ut 9
Lista En lista med stamfäder En lista med alla personer i aktuell stamfaders träd Möjligt att sortera efter namn, död och född Välj person i listan och få fokus på denna på arbetsyta Sök person Visa sökresultat Arbetsyta Välja att sätta olika personer i fokus genom att klicka De övriga personerna presenteras på olika sätt beroende av sitt avstånd från fokusobjektet. Få upp en informationsruta när man håller musen över personer Klicka på en ruta i anslutning till personer som är stampersoner i ett annat träd och då växla till detta träd o När man växlat träd kan man via en liknande ruta ta sig tillbaka till det ursprungliga trädet Om en person förekommer på två ställen i samma träd, indikeras detta med en *. Denna symbol är inte klickbar utan finns enbart för informativt syfte. Flytta på den flytande översiktskartan 4.1.2 Ej implementerade funktioner Meny Spara Skriv ut Lägg till person Ändra person Ta bort person Hjälp Inställningar (ex val av växla träd automatiskt och ta bort dekoration) Växla mellan an- och stamträd Om (En ruta för allmän information om systemet) Ett verktygsfält med knappar för de mest använda funktionerna. Arbetsyta Kunna välja mer än ett fokusobjekt i taget Låta översiktskartan bli dynamisk Kunna navigera med hjälp av översiktskartan Växla träd inte bara via en stamperson utan genom alla som förekommer i ett annat träd 10
5 Diskussion Vi är nöjda med resultatet av vår prototyp och känner att vi fick implementerat både det vi trott att vi skulle hinna med, plus lite till. När det gäller saker som vi vill utveckla, hänvisar vi främst till punkterna under stycket Ej implementerade funktioner ovan, men har även funderat kring andra behov, såsom en utökad sökfunktion för att erbjuda systemets användare ytterligare funktionalitet. 5.1 Val av design Produkten som vi presenterar har en medveten mjuk och tydlig design för att tilltala vår målgrupp. Vi har genom hela projektet tänkt på att vårt system skall förenkla för användaren i hans/hennes intresse för släktforskning. Framför allt har vi fokuserat på att skapa överblick i släktträden, vilket vi förstod att användaren har behov av. Vidare har vi ansett att metaforen för hur ett släktträd brukar presenteras är viktiga att följa för att användaren genast ska känna igen sig. Prototypen kan sammanfattas med ett enkelt och tydligt gränssnitt med grundläggande funktioner. Vi har försökt hålla oss till ett begränsat antal funktioner för att inte förvirra användaren och för att bibehålla den enkla designen. Programmet kräver en viss bekantskap med program, menyer är dock uppbyggda på ett sådant sätt att man ska känna igen sig om man tidigare använt program såsom bl.a. Internet Explorer eller Microsoft Word. Programmets färger är inspirerade av naturfärger för att på något sätt skapa en trädmetafor. I nederkanten har vi dessutom valt att lägga en liten ram i form av träd för att höja mysfaktorn på systemet. Det skall tilläggas att detta är en frivillig utsmyckning och att användaren enkelt kan välja att inte visa den via menyn Inställningar. Vi har vidare försökt få en mild och lugn framtoning med bland annat ljusa nyanser av blått och grönt. När vi sätter fokus på en person i trädet, förändras informationen och rutorna för de kringliggande personerna. Ju större avstånd man har från personen i fokus, desto mörkare nyans av grönt och mindre rutor. Om användaren vill frångå visningen med olika fokus, kan han välja funktionen Visa allt för att få samma fokus på alla personer och på så sätt få all information på en gång. Vill han/hon dessutom få mer yta på skärmen för sitt träd, finns möjligheten att dölja listpanelen och översiktsbilden. Ytterligare möjligheter för överblick och detaljer ges dessutom genom en zoomfunktion. Det kan vara skönt med en inzoomingsfunktion för de användare som ser lite sämre. 6 Arbetets gång Vi har under arbetets gång delat upp de olika momenten mellan oss. Trots detta har vi arbetat tillsammans på plats den övervägande delen av tiden. Det har medfört att samtliga medlemmar har varit involverade i arbetets alla delar. Vi har haft en öppen diskussion om allt från design och programmering till dokumentation. Gemensamt kom vi fram till den slutgiltiga lösningen av projektet. 11
6.1 Våra roller i projektet Så här delade vi upp arbetet: Christine Cronwall: Design, dokumentation och programmering Filip Karlsson: Programmering, design Pia Hammargren: Dokumentation, design Robert Larsson: Dokumentation, design Stefan Strömqvist: Programmering, design Tomas Andersson: Design, dokumentation 12
7 Referenser 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 Systens. New York: ACM. 13
Bilaga 1: Utvecklingen av gränssnitt i fem bilder 1. 2. 14
3. 4. 5. 15
Bilaga 2: Skärmdumpar på färdig prototyp 1. Översiktsbild (med ToolTip) 2. Funktion: Visa allt 16
3. Funktion: Zooma Ut 3. Sökresultat 17