PROJEKT 2. INFORMATIONSVISUALISERING AV SLÄKTTRÄD. IT-universitetet MDI - Grafiska Gränssnitt

Relevanta dokument
Slutrapport: Informationsvisualisering av släktträd

Rapport Projekt 2 Informationsvisualisering av släktträd

Informationsvisualisering av släktträd, Grupp 7

IT-universitetet, Chalmers Grafiska Gränssnitt, 6p Kursansvariga: Staffan Björk, Sus Lundgren

Projekt 2: Informationsvisualisering av släktträd

Fam iljefabrik en. Grupp 5: Christine Cronwall Filip Karlsson Pia Hammargren Robert Larsson Stefan Strömqvist Tomas Andersson

Släktforskningsapplikationen:

INTERACTION DESIGN: GRAPHICAL INTERFACES

SPF/MiRiaM Manual avancerad sökning

I dokumentet beskrivs hur man i medlemsregistret (MiRiaM) utför en så kallad avancerad sökning.

behövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare.

Kom igång med Disgen. 1 Startfönstret. 1.1 Här finns 3 länkar för att komma igång:

Registrera dina barn, farföräldrar och syskon - modul 3

SVAR (Riksarkivet) Nu är det dags att gå in och se vad man kan hitta hos SVAR.

Marknadsföringslistor

Projekt 2 Informationsvisualisering av släktträd

Kom igång med Disgen. 1 Startfönstret. 1.1 Här finns 3 länkar för att komma igång:

Miljön i Windows Vista

Att komma igång med DISGEN 8.2

LATHUND TILL GOOGLE SITES

Verktygsfält. Hantering av webbkarta Grundinstruktion. Sida 1 av 6. De olika verktygen och delarna förklaras i detalj längre ner i dokumentet.

Handledning för utskrift av Grafisk antavla med porträtt

Vad utmärker ett bra användargränssnitt?

Vad påverkar designen?

PDA-program till vakter

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel:

Efter att ha gjort ett urval av patienter i förlossningsliggaren kan du göra en rapport som visar de uppgifter du är intresserad av.

ANVÄNDARGUIDE. ViTex

Grafiska användargränssnitt i Java

IdrottOnline Klubb manual medlemsregistret

Avstämning med Referensgrupp Sprint 11 lnu.se + Mina saker

En arbetssätt du bör lära dig Så använder du ort- och kartfunktionen

Nyheterna i Visma Tendsign 4.0

Registrera dina närmaste - modul 2

Jenny Dafgård, Fredrik Johansson, Nils Järgenstedt, Yael Katzellenbogen och Klara Mälarberg. IT-Universitetet i Göteborg, HT03

ALEPH ver. 16 Introduktion

Flytta, koppla eller koppla loss personer i din databas (del 1 av 2)

Slutrapport: Design av Hemsida för PolyPlast+

Manual HSB Webb brf

Presentationer med power-point 2013

Fönster och dörr. Kapitel 3 - Fönster och dörr... 3

STOCKHOLMS UNIVERSITET. Handbok 2. Funktionaliteter moveon 4

Windows 8.1, hur gör jag?

Rapport Projekt 1 Från material till webb

Word Grunderna 1. Om du kan det allra enklaste i Word, hoppa över uppgifterna A-E.

Registrera dina barnbarn och kusiner - modul 4

Registrera dina barnbarn och kusiner - modul 4

Gör en modern släktbok för CD eller webben

Nyheter i PowerPoint 2010

Dessa tre fönster kan enbart visas i datavyn, inte i layoutvyn. Det är också möjligt att ha flera fönster öppna samtidigt.

Har du dubbletter i din databas?

Nya utskriftsinställningar

Importera och använda en textdatabas i Excel

Kapitel 3 Fönster och dörr... 3

DK-serien. Introduktion till släktforskning med SVAR

Datatal Flexi Presentity

WEBB OCH INFORMATIONSDESIGN

Manual till Båstadkartans grundläggande funktioner

Live Sök Export. ExacqVision användarguide Live Sök Export. Teletec Connect AB Emil Warnicke

Datatal Flexi Presentity

1. Abstrakt Introduktion Problemspecificering Vår teknik Designval Abstract Colour Visualization

Kom igång med. Windows 8. DATAUTB MORIN AB

Utveckling av Läsaren

DESIGNDOKUMENT 1(8) 1. Idé & koncept. Grundidé, syfte & innehåll. Målgrupp, koncept & sammanhang

Bonus Rapport Kommersiell Design KTH

Grupp 3. Projektplan

Word-guide Introduktion

Kom igång med Disgen 6 röd

Grundkurs i släktforskning på distans

ANVÄNDARBESKRIVNING FÖR PERSONAL

Lär dig POWERPOINT. Lars Ericson datorkunskap.com

Formulärredigering, inställningar, visningssätt och versioner Innehållsförteckning

Registrera dina barn, farföräldrar och syskon - modul 3

Spel som interaktiva berättelser

KLARA Lathundar för inventerare (inför versionslyft 2013) Version 2.4 ( )

Objektorienterad programmering med Java Swing: Händelser, lyssnare och applets

Rolf Andersson och Kerstin Carlborg, mars och sist och slutligen: ta backup Tsff

Kravspecifikation TDP005 Projekt: Objektorienterat system

Lathund till Publisher TEXT. Skriva text. Importera text. Infoga text. Dra och släpp

Universitetskanslersämbetets Högskoleutforskare. En introduktion till analysvyn exemplet måluppfyllelse

PP7Mobile User s Guide

Kapitel 3 Fönster och dörr... 3

IT-system. BUP Användarmanual

TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215/TIG091

Nedan visas en översikt av verktygen där de olika funktionerna är numrerade. En beskrivning av funktionerna följer.

Lathund Slutattestant. Agresso Self Service

Ansvarsfull Design. Inledning. Målgrupp. Bakgrundsstudie. Appen. Idéutformning

Linjalens inställningar och formatering i ordbehandling.

Användarmanual Detta dokument beskriver användningen av xvis, för besökare såväl som receptionister och anställda.

Statistiska centralbyrån. Statistikatlasen

Design av användargränssnitt

Användarmanual. 88 SEA för iphone. OBSERVERA! 88 SEA för iphone och 88 SEA HD för ipad är två separata produkter.

PowerPoint. Kapitel 1. Vasen

Användarhandledning för VD Link för Småhus Vitec

EPi Skapa och redigera sidor

SPRINT-HANDBOK (version 0.4)

En trevlig form av utskrift från Disgen är en grafisk antavla med foton.

INSTÄLLNINGAR FÖR IRONCADS 2D-RITNING

Skapa mappar, spara och hämta dokument

och Lär dig surfa på Internet Bilden nedan föreställer Södertälje kommuns hemsidans startsida Adressen till hemsidan

Transkript:

IT-universitetet MDI - Grafiska Gränssnitt PROJEKT 2. INFORMATIONSVISUALISERING AV SLÄKTTRÄD Jenny Dafgård, Fredrik Johansson, Nils Järgenstedt, Yael Katzenellenbogen, Klara Mälarberg

INFORMATIONSVISUALISERING AV SLÄKTTRÄD Sammanfattning Denna rapport beskriver hur grupp 8 gick tillväga för att skapa en applikation för utforskande av släktdata. Processen började med en förstudie av användare och analys av existerande släktträd. Med detta som grund och med inspiration från andra visuella informationslösningar skapades de specifika målen som det nya släktträdet skulle uppnå: det skulle bland annat vara dynamiskt, visa flera vinklar (både uppåtstigande- och nedåtstigande led) och kunna utgå ifrån flera olika personer som stamfäder. Den slutliga applikationen består av ett avskalat och strikt grafiskt gränssnitt, uppdelat i tre delar över visningsytan. Den vänstra delen visar alla personer som ingår i släkten, med sökmotor där användaren kan välja utgångspunkt/ fokus. Mittendelen visar arvsträdet (uppåtstigande led) för den valda personen. Härifrån kan olika personer väljas i form av stamfäder, vilka visas med nedåtstigande led i den högra delen. FÖNSTER 1: Sc rollista med alla släktmedlemmar samt en ruta för att söka. FÖNSTER 2: Visar arvsträdet (uppåtstigande led) för den valda personen i fönster 1. FÖNSTER 3: Visar barnaträdet (nedåtstigande led) för den valda personen i fönster 2. Koncept av släktträd, med tre fönster

INNEHÅLL 1. BAKGRUND...1 1.1 Användaranalys... 1 1.1.1 Personas... 2 1.2 Befintliga lösningar av släktträd... 3 1.2.1 Stående släktträd... 3 1.2.2 Liggande släktträd... 4 1.2.3 Dynamiskt släktträd... 5 1.3 Inspiration från andra hierarkiska miljöer... 6 1.3.1 Hierarc hic al Flip Zooming... 6 1.3.2 Generalized Fisheye Views... 7 1.3.3 Cushion Treemaps... 8 1.4 Mål med släktträdet... 9 2. METOD...11 2.1 Designskisser... 11 2.1.1 Grekisk amfiteater...11 2.1.2 Subway -trädet...11 2.1.3 Fa mily c hemistry...12 3.1.4 Del utav en del utav en del...12 2.2 Konc ept: Tre fönster... 13 3. PROTOTYP...15 3.1 Designmotivering... 18 3.2 Kommentarer... 21 4. ARBETSFÖRDELNING...23 5. REFERENSER...24

1. BAKGRUND Syftet med släktapplikationen är att tillåta användare att grafiskt utforska en samling människor som är släkt med varandra. Det ska gå att börja från flera olika stampersoner. Den färdiga applikationen presenteras i ett grafiskt gränssnitt med bakomliggande kod (implementerat i prototypform). 1.1 Användaranalys Tidigt i processen identifierades de tänkta användarna till systemet. Identifieringen gjordes för att underlätta det fortsatta arbetet och för att anpassa applikationen efter deras önskemål. Till en början var den givna målgruppen folk i största allmänhet, men efter undersökning framkom det att användarna är: Ålder: 30-65 år Kön: Kvinnor 30 %, män 70 % Sysselsättning: Användning av dator: Affärsman/ kvinna, egen företagare Bra förmåga, används dagligen både i jobbet för att kommunicera, strukturera och som källa för information, och privat för att betala räkningar, surfa på nätet, skicka e-post och hantera familje- och högtidsfoton. Vana av datorprogram: Arbetar med olika datorprogram som exempelvis kalkyl-, ordbehandlings-, presentations- och statistikprogram. Använder sig av snabblänkar och snabbkommandon. Inställning till dator: Information ska finnas lättillgänglig, vara till stöd och underlätta arbetsuppgiften. Den ska vara lätt att använda, mycket fakta utan utsmyckning. 1

1.1.1 Personas Baserat på användaranalysen skapades en fiktiv person så kallade Persona för att förstärka medvetandet av användarna i designprocessen. Den skapades för att representera användarna och ge en klar bild över vilka de är och hur de kommer att använda släktträdet. Personan har varit till grund för de val vi gjort under processens gång. Persona: Ove Ove, 57 år är ekonom och arbetar sedan tio år tillbaka på Nordea i Norrköping. Han är gift med Annika och de har en son på 22 år som för två år sedan flyttade hemifrån för att studera vid Linköpings Universitet. De senaste åren har Ove ägnat mer tid på kvällar och helger åt att släktforska om att söka sitt arv. Han drivs av att försöka komma så långt tillbaka i tiden och hoppas att han en dag ska upptäcka att just han är släkt med någon känd person. I sitt arbete på Nordea söker Ove en hel del information på Internet och är även van att arbeta i olika ekonomrelaterade program. Han har med åren blivit kräsen med utformning och funktionalitet i program och på webbplatser. Allt oftare väljer han att besöka webbplatser eller program han tidigare tilltalats av på ett eller annat sätt. Ove tycker ofta att stora släktträd är svåra att få överblick över och vill hellre kunna bedriva mer systematisk sökning i ett släktträd. Visserligen tycker han det är intressant att se sin egen släkt i sin helhet och se kopplingar mellan människor långt tillbaka i tiden. Men när det kommer till andras släkter som han inte har någon kännedom om tycker han det blir komplicerat och vill då hellre kunna fokusera på vissa delar av släktträdet, framförallt sin egen.

1.2 Exempel på olika släktträd För att respektera de grundläggande konventioner som finns i släktträdsstrukturer betraktades tre olika sorters släktträd som hittades på webben. 1.2.1 Ett stående släktträd Stående släktträd för Jarlabakeätten. Fördelar: Färgkoder och traditionella symboler för man/ kvinna. Illustrerar omgifte, liksom halvsyskon. Nackdelar: Upptar stor plats. Statisk, tillåter inte användaren själv att navigera. Visar inte kusiner eller den större delen av släkten.

1.2.2 Ett liggande släktträd Liggande släktträd för prästsläkten Knös från V ästergötland. Fördelar Visar generationer och årtal tydligt i övre kant. Visar giftermål utan att uppta mycket plats. Nackdelar: Mycket tomutrymme, som inte används. Visar inte kusiner och de större delarna av släkten. Visar onödig information av varje persons generationsnummer (exempelvis 6/ 21). Statiskt, tillåter inte användaren själv navigera.

1.2.3 Ett interaktivt släktträd Tommy blombergs släktträd Fördelar: Tillåter användaren att byta fokus i visualisering av släktträdet. Visar olika sorters information (personinnehåll och antavla). Visar specifik information om varje person. Nackdelar: Visar bara en del av släktträdet, har ingen scrollbar. Fokus ändras när användaren letar sig framåt i släktleden (genom att tycka på dubbel pilarna till höger kommer en ny bild upp). När specifik information visas försvinner antavlan. Den första stampersonen upptar onödig plats (se till vänster).

1.3 Inspiration från andra hierarkiska miljöer Genom att studera andra typer av hierarkiska miljöer (till skillnad från släktträd) kan flera perspektiv och vyer analyseras och visualiseras på olika sätt. 1.3.1 Hierarchical Flip Zooming Hierarchical Flip Zooming Fördelar: ƒ Uppdelning av information i separata delar. ƒ Alla delar är närvarande i logisk ordning, även när fokus finns på en del (exempelvis ruta 6). ƒ Användaren kan dynamiskt interagera med objekten och välja ett som ges mer utrymme och centreras. Nackdelar: ƒ Det finns en del tomutrymme som inte används.

1.3.2 Generalized Fisheye Views Kod formaterad i fisheye Fördelar: Man kan se vilken information som är viktigare då den är högre upp i strukturen. Utifrån detta kan användaren beräkna hur viktig varje informationsdel är. Nackdelar: Man kan inte få överblick över all information samtidigt. Svårt att ta bort irrelevant information (allt hänger ihop). Detaljinformationen är svårare att se. Användaren kan inte bestämma fokus.

1.3.3 Cushion Treemaps Cushion Treemaps Fördelar: ƒ Visa hierarkiska strukturer genom att placera undernoder inuti noder. ƒ Av en 2D yta har det lagts till en tredje dimension (på höjden) och mer information får plats. Nackdelar: ƒ Det är svårt att representera information i form av text, då detta skulle bli väldigt plottrigt.

1.4 Mål med släktträdet Krav, funktionalitet och vad man ska kunna göra Från analys av befintliga släktträd och med inspiration från andra hierarkiska miljöer sammanfattades följande mål med systemet: Undvika Chartjunk o Då information presenteras är det viktigt att presentationen tar hänsyn till Chartjunk, Envisioning Information (1990). Chartjunk kan vara utsmyckning som inte förtydligar eller irrelevant information. Utformningen av detta beror på målgruppen. Stödja fördelar med Fisheye effekten o Relevant information ska visas tydligare, exempelvis ska stamfadern och dennes närmast anhöriga få större utrymme och plats. Stödja Flip Zooming o Tekniken Flip Zooming bygger på grundidén uppdelning av information i separata delar (Flip Zooming, Björk, S., 2000). Genom att låta användaren välja ett fokusobjekt som ges mer utrymme och centreras. Ingen Kognitiv belastning o Enligt Card, Mackinlay & Shneiderman (1999) kan kognitionen förstärkas genom att förenkla sökningen. De anser även att visualiseringar kan ses från olika vyer vilket kan ge bättre överblick över större förmåga att utforska informationsmängden. o Inom informationsvisualisering är det bra att använda sig av samma sorts mönster eftersom ögat är bra på att upptäcka mönster och samband snabbt. (Staffan, 2003) o Navigeringen skall bygga på igenkänning istället för ihågkomning. Att underlätta sökning kan förverkligas genom att t ex lokalisera sökningar till vissa regioner.

Gränssnittet ska vara dynamiskt: o Genom att använda sig av ett manipulerbart medium kan visualiseringen anpassas efter speciella behov. Visualisering som ges från skiftande vyer ger en bättre förmåga till att utforska informations mängd som ges. Den visuella representationen kan underlätta ovanliga händelser att framträda tydligare. Gränssnittet ska vara konsistent: o Informationsvisualisering skall på ett tydligt sätt vara konsistent i sin formgivning genom att den uppfyller naturlig fokus på skillnaderna i information och fokus på förändringar i presentationen ska undvikas, enligt Tufte (1990). Viktigt med överblick och detalj: o Utmaningar för navigering och överblick kan lösas genom att skapa Zoomable User Interfaces. Det ger användaren möjlighet att zooma in och ut ur en presentation. Bederson, B.B., Hollan, D. (1994). o Med Fisheye views (Furnas, 1986) kan inte all informationsmängd som användaren vill se få plats på skärmen samtidigt. Alternativet bli då att ta bort irrelevant information och antaganden för vad som måste visas ska beslutas. Grundidén är att informationen som finns högre upp i strukturen är viktigare. Presentationen som görs beror på hur mycket plats som finns att tillgå för informationsvisualiseringen.

2. METOD 2.1 Designskisser Vid första brainstorming om funktionalitet och utseende gjordes skisser. De första skisserna är gjorda utan hänsyn till programmeringskunskaper och tid för genomförandet. 2.1.1 Grekisk amfiteater: Denna idé framkom från två skisser, där den första (övre) lade grunden till den andra (nedre). Här ska man enkelt kunna se byggklossarna respektive lager i generationer där den understa, respektive mittersta, är personen som släktträdet utgår ifrån och i uppåtstigande led kan man se vem som arvet kommer ifrån. De olika delarna (olika färger och storlek för att förmedla information) delar sig snabbt in i moderns och faderns släkt och deras mor och farföräldrars släkt i sin tur. Detta är en estetisk form som skulle passa fint på en väg och ändå bära information. 2.1.2 Subwa y - trä det: Med denna idé skulle ändhållplatserna för varje familj signalera föräldrarna och mellanstationerna barn. I livets gång är vi alla på väg någonstans. För att signalera att ett utav barnen är gift och har barn, skapas en ny subway-linje med barnet som den ena ändhållplatsen och dennes make/ maka som den andra. För att se skillnad på de olika familjerna - bar vinkeln på subway-linjen denna information och för att se skillnad på de olika åldrarna/ generationerna valdes prickarnas storlek att förmedla detta. Med denna lösning kunde halvsyskon och giftermål mellan kusiner tydligt förklaras.

2.1.3 Family chemistry : Med inspiration från hur molekyler, atomer och neutroner är sammankopplade och hur de bygger upp en enhet, efterliknades detta för att framställa familj och släktband. Modellen består av cirklar, där varje enskild cirkel representerar en familj. Pappan och mamman i en familj ligger på cirkeln och innanför cirkeln ligger barnen. Om barnen i sin tur är gifta bildar de även en cirkel med en annan person (utanför sin egen cirkel) och deras barn finns då i den ringen. 3.1.4 Del utav en del utav en del : Den här modellen påminner lite om Cushion Tree maps (van Wijk, 1999) där de olika familjerna skjuter upp som pyramider och det lagret på pyramiden som finns längst upp representerar de yngsta (barnen) i familjen, respektive de som ligger i grunden är förfäderna till dessa. På bilden intill kan man se att den nedersta pyramiden har ett barn (genom att det översta lagret inte är delat), medan den övre pyramiden har två (genom att det översta lagret är delat i 2, 3 4 eller fler delar). Ett färdigutarbetat släktträd av denna variant skulle ge ett estetiskt uttryck med inslag av Kandinskys (se referenslistan) konst och kunna smälta in i periferin på en vägg.

2.2 Koncept: Tre fönster Med hänsyn till kravanalysen, idéer från grundskisserna och efter värdering av yttre begränsningar (tidsplan och programmeringskunskaper) utvecklades en mer traditionell modell som baserades på den allmänt kända filstrukturen som bland annat används av Windows operativsystem. I och med att användaren har tre olika fönster på skärmen, kan denne få flera perspektiv på släktträdet och på så sätt få en god överblick. Med hjälp av de dynamiska funktioner och olika perspektiv på släktträdet kan användaren manipulera information i den ordning som han eller hon vill. I släktträdsapplikationen finns en sökfunktion längst upp till vänster. Sökfunktionen hjälper användaren att hitta den information som han/hon söker i applikationen. För att användaren ska veta hur han/hon kan söka finns det en textruta med exempel på hur sökning kan ske (Ex. Bo Jansson el. 1920-1945). Under sökfunktionen finns en lista med alla personer som finns i det valda släktträdet. Vid start av applikationen är personerna listade i bokstavsordning efter deras efternamn. Personerna i listan har som innehåll förnamn, efternamn

och levnadsår. Listan kan med hjälp av två knappar sorteras efter efternamn eller födelseår. Sökning av en person kan ske enligt följande: o skriva in förnamn eller efternamn och/eller årtal. Personen/-erna som stämmer in på det valda sökordet placeras längst upp i listan. Användaren klickar därefter på den person som han/hon vill titta närmare på. o välja fritt från listan genom att skrolla upp och ner och klicka på den person som verkar intressant. Personen som markerats i vänstra spalten hamnar sedan i fokus i det mittersta och i det högra fönstret. Ju längre ut från den valda stampersonen som är placerad i mitten desto mindre fokus. Personer längre bort från stampersonen får mindre teckenstorlek och gråtonen blir ljusare (från att vara svart i mitten). Det mittersta fönstret visar varifrån personen fått sitt arv, alltså information om personens uppåtstigande led (föräldrar, far- och morföräldrar). För att visa generationerna i släktträdet sker ett indrag till varje ny generation. Personnamnen med dess indrag för olika generationer bildar ett mönster som gör det lättare för användarens att skapa sig en bild över släkten. Längst ner på sidan finns en generationssaxel som visar vilken generation som personerna på skärmen tillhör (i förhållande till alla personer i släktträdet). Den valda personen i centrum har en understrykning under generationssiffran för att visa att han eller hon är vald som rotperson. Med hjälp av generationsaxeln kan användaren på ett enkelt sätt se att en person till vänster är äldre än en person till höger. Ett tredje fönster finns på högra delen utav skärmen. Även här visas personen som valts i den vänstra spalten, men här ur ett annat perspektiv. Här visas med vilka som personen har samma blod som, barnaträdet. Fönstret visar släktträdet i nedåtstigande led vilket innebär att du kan se barn och barnbarn till exempel.

3. PROTOTYP Vy efter val av fokusperson från söklistan. Vy efter fokusperson från arvsträdet.

Vy efter fokusperson från barnaträdet. Vy över sökning samt val av fokusperson ur sökresultat.

Vy efter val av fokusperson från sökresultatet, scrollning i barnaträdet och justering av fönsterstorlek.

3.1 Designmotivering av konceptet I denna designmotivering har grundläggande principer om MDI, såsom the top ten UI design principles (Nielsen and Norman group, www.useit.com) inte tagits upp explicit, men har implicit legat i grunden för konceptets gränssnitt och design. Utöver detta har vikten lagts på följande punkter för att förstärka visualiseringen av släktträdet. Undviker Chart Junk: o Vi har värderat den information som ges till användaren genom att vi har satt en gräns för irrelevant information. Exempel på detta är att vi hade en idé med att ge information i släktträdet (fönster 1 och 2) om när en person är född och eventuellt död. Efter en utvärdering kom vi fram till att bara indikera årtal i fönster 1, då det blir för mycket information att presentera i fönster 2 och 3 på macro-nivå. För att möjliggöra visualisering på micronivå i fönster 2 och 3, kan användaren peka med musen på ett objekt och på så sätt få mer detaljerad nivå om den valda personen (van Wijk, 1999). o Dock har det framtagna konceptet grafisk utsmyckning där vi tycker att det förtydligar informationen för vår målgrupp. T ex har vi använt oss av ikoner för att symbolisera kön där blå pjäs representerar män och röd pjäs representerar kvinnor. Stödjer Fish Eye Effekten: o För att visualisera den viktigare texten som är i fokus har detta presenterats i större typsnitt och fetstil. Ju längre ifrån fokusobjektet man tittar, visas denna mindre viktiga information i mindre teckensnitt och i en ljusare gråskala. För att undvika en alltför liten text (då man är långt bort från fokusobjektet) har vi satt en gräns där textstorleken inte får understiga en given texthöjd. Stödjer Flip-Zooming o Konceptets gränssnitt förverkligar Flip Zooming genom att ge möjlighet till användaren att i släktträdet (fönster 3) se ytterligare ett perspektiv av släktträdet. Detta kan göras genom att i fönster 2 välja en person som användaren vill se mer utav, exempelvis om man klickar på mormor i uppåtstigande led får användaren se mormors alla barn och barnbarn. Denna teknik behåller den normala läsordningen från vänster till höger och uppifrån och ned. Dock när

det gäller läsordningen av trädstrukturen stämmer inte detta, utgångspunkten är fokusobjektet vilket gör att fönster 2 läses från höger till vänster (se 2.2 Koncept: Tre fönster ). Anledningen till detta är att underlätta för användaren genom att visa fokusobjektet i fönster 2 och fönster 3 bredvid varandra. På så sätt ges användaren möjlighet att kunna jämföra de två vyerna och känna av systemstatusen dvs var fokusobjektet befinner sig i förhållande till övriga släktingar i släktträdet. Fönster 3 läses från vänster till höger. Belastar inte kognitiva förmågor: o Vi har arbetat med att konceptet ska ge ögat incitament att upptäcka mönster och samband snabbt. Denna egenskap utnyttjade vi på så sätt att programmet skulle presentera olika information precis på samma sätt oavsett vilket fönster användaren tittar på. På så sätt skapade vi även ett naturligt gränssnitt för att låta användaren interagera med en visualisering. Underlättar dynamisk navigering: o I vårt koncept görs den på ett enkelt sätt nämligen genom tre möjliga sökalternativ beroende på vilket sätt användaren själv väljer. Den förenklar upptäckten av mönster genom att navigeringen är idiomatisk. Vana datoranvändare känner igen sig och mindre vana användare kan lista ut vad de olika navigeringsmöjligheterna ger för resultat. Vårt koncept är lätt att manipulera för vår persona Ove. Användarna ges på ett naturligt sätt incitament till perceptuell slutledning och övervakning. Gränssnittet är konsistent: o Vi löste problemet med konsistens i formgivningen genom att inte ha skillnader i informationsvisualiseringen. Vårt koncept visar på ingen naturlig fokus på förändringarna i presentationen utan fokus kvarstår i fönster 2 och utökas med hjälp av fönster 3 som visar en annan dimension av släktträdet. Koncept ger då naturlig fokus på skillnaderna i informationen utan att ändra fokus (från fönster 2 till fönster 3). Underlättar övervakning och detalj o Den perceptuella övervakningen har varit i fokus i vårt koncept. Exempelvis kan en komplicerad släktrelation plötsligt vara helt

uppenbar genom rätt informationsvisualisering som tydliggör relationen. o Vidare prövades konceptet mot hur vi kunde uppmuntra och förenkla visuella jämförelser för användaren genom att förändra data. Ett exempel på detta är när användaren söker på sig själv och därefter vill se en vy med sina kusiner. Då får användaren välja pappas eller mammas föräldrar för att se deras barn och barnbarn, som också är fokuspersonens kusiner. Jämförelsen här består av att denne person kan både se sin släkt i uppåtstigande led men även få möjlighet i att se sina kusiner i en annan vy. Denna valfrihet ger möjlighet att skilja på de olika objekten samt ger valfriheten att se vyn med alla kusiner eller varför inte sina halvsyskon. o För att skapa flera dimensioner av informations och ha den tydlig och tillgänglig har vi i vårt koncept löste det genom att dela upp fönstret i två delar (fönster 2 och fönster 3) utan att tappa informationens inbördes relation. En del som visar arv och den andra som visar barn. Stödjer Perceptuell slutledning: o Konceptets gränssnitt visar en generationsindikator nedanför de tre fönstren där användaren lätt kan avläsa vilken generation en person i släktträdet tillhör (tex generation 3). Eftersom fokusobjektet presenteras i stor, svart och tjock text är visualiseringen i generationsindikatorn relaterat till detta och visas därmed med en svart färg. Den angivna siffran i detta fält är dessutom understrykt för att förstärka att det är just denna person som befinner sig i fokus för tillfället. Ju längre ifrån huvudobjektet man tittar, har varje objekt i släktträdet en generationstillhörighet som markeras i en ljusare gråskala.

3.2 Kommentarer En av de stora utmaningarna i vårt koncept var att presentera en vy där användaren kan välja att se alla sina kusiner när denne finner sig i fokus. I dagens koncept kan personer i roten endast se relationer i uppåtstigande eller nedåtstigande led. Istället måste användaren vända sig till sina föräldrar och sätta en utav dessa i fokus för att se sina syskon (och halvsyskon) och välja sina far- eller morföräldrar för att se sina kusiner, och så vidare. För oss var dessutom en av de stora utmaningarna att informationen användaren vill se inte får plats på skärmen samtidigt. Hur skulle vi då bära oss åt för att ta bort irrelevant information? Vi kom fram till att vi inte hade irrelevant information utan frågan var hur mycket information som skulle visas beroende på varje fönster. För mycket information kan verka förvirrande och därför skalade vi av informationen till lämplig storlek till 4 generationen i fönster 2 för att i fönster 3 få ett annan perspektiv beroende på menyval. Antagandet med att ha en hierarkisk strukturerad information passade inte på den informationsvisualisering som ett släktträd skall ge. Vi kom fram till att konceptmodellen inte skulle representeras i form av hierarkier utan överlåta fokus till användaren på viktig information. Vi kunde inte använda oss av Fisheyes grundidé eftersom vårt koncept är tänkt att ge information som inte kan värderas ur ett hierarkiskt perspektiv utan den skall vara lika viktig oavsett var och vad som visas. Detta gör att information som kommer högre upp i strukturen är inte viktigare än den information som kommer längre ner. Vi värderade detaljinformation som användaren fokuserar på som viktig.

Till nästa iteration av konceptet och prototypen har vi tänkt på en del detaljer som skulle kunna förbättras. Dessa är till största del grafiska hjälpmedel för att underlätta dels navigering och dels sökning. Följande vore bra att belysa i nästa iteration: Tidsaxeln bör utökas för att även visa första samt sista generationen för att förtydliga var i det nuvarande släktträdet man befinner sig i. Släktrelationer skulle kunna färgkodas för att tydligare visa vilka som är halvsyskon, syskon, kusiner, sysslingar, etc. Ett försök skulle kunna göras i att visa alla typer av föräldrar och inte bara de biologiska såsom styv- och adoptivföräldrar i arvsträdet. I barnaträdet skulle man istället kunna visa en persons alla partners och under dessa visa barnen för att tydligare visa halvsyskon och tidigare partners. Praktiskt skulle detta kunna lösas genom att varannan nod i horisontell riktning visar partners respektive tillhörande barn. Man kan av praktiska skäl snabbt vilja se vilka som fortfarande är vid livet och därför införa en ikon som visar om personen ifråga är död eller ej. Av implementationsskäl gick det inte att visa kön samt att personer som inte existerar i en given databas ibland kommer med ändå och namnges då som Okänd. För närvarande kraschar trädet om dessa tas bort. Detta bör absolut åtgärdas i nästa iteration.

4. ARBETSFÖRDELNING Användaranalys: Jenny, Nils, Yael Befintliga lösningar, Inspiration: Yael Målsättning: Klara, Nils, Yael Designskisser: Fredrik, Yael (brainstorming från alla) Koncept: Jenny (brainstorming från alla) Designmotivering: Klara, Nils Framtagande av Prototyp (Programmering och design av GG): Fredrik i huvudsak, Klara assisterade Presentations material: Klara, Nils, Presentation: Fredrik, Jenny, Nils Rapportgenomgång: Fredrik, Jenny, Nils

5. REFERENSER Bederson, Benjamin B, Hollan, James D, Pad++:A Zooming Graphical Interface for Exploring A lternate Interface Physics, UIST 94, November2-4, 1994 Björk, S. Hierarchical Flip Zooming: Enabling Parallel Exploration of Hierarchical V isualizations. Proceedings of Advanced Visual Interfaces (AVI), 2000. Card, Mackinlay & Shneiderman 1999 http:/ / www.cs.chalmers.se/ idc/ ituniv/ kurser/ 03/ gg/ forelasningar/ infovis.1.ppt Furnas, G.W. (1986) Generalized fisheye views. Human Factors in Computing Systems CHI '86 Conference Proceedings, Boston, pp. 16-23. Kandinksy http:/ / www.allposters.com/ gallery.asp?aid=999354&item=335877 Staffan,2003 http:/ / www.cs.chalmers.se/ idc/ ituniv/ kurser/ 03/ gg/ forelasningar/ infovis.1.ppt, 2003-10-06. Tufte, E. R. Envisioning Information. Graphics Press, UK, 1990 van Wijk, J.J., & van de Wetering, H. (1999) Cushion Treemaps: V isualization of Hierarchical Information, Proceeding 1999 IEEE Symposium on Information Visualization (InfoVis'99), Octover 25-26, 1999, IEEE Computer Society, pp. 73-78.zzz Släktrträd för Jarlabakeätten http:/ / w1.864.telia.com/ ~ u86408152/ Slakttrad.htm 2003-10-02 Släktträd för prästläkten Knös från Västergötland http:/ / w1.457.telia.com/ ~ u45705772/ stamtavla.htm 2003-10-02 Tommy blombergs släktträd http:/ / www.bahnhofbredband.se/ ~ wb081161/ Slakttrad/ default.html 2003-10-02