Grafiska Gränssnitt 2003-10-29 Informationsvisualisering IT-Universitetet Projekt 2 - Grafiska Gränssnitt - IT-Universitetet Lindholmen 2003 Niklas Mårdby - Johan Bergsten - Marie Lönnqvist - Evelina Johansson - Mia Malmberg - Jenny Christensson Släktforskningsapplikationen: Grupp 10 Johan Bergsten Jenny Christensson Evelina Johansson Marie Lönnqvist Mia Malmberg Niklas Mårdby
Innehållsförteckning 1. INLEDNING... 2 2. METOD... 2 2.1 MÅLGRUPP... 2 2.2 ARBETSPROCESS... 2 3. RESULTAT... 4 3.1 FUNKTIONELL DESIGN... 4 3.2 GRAFISK DESIGN... 5 3.3 PROGRAMMERING... 6 3.4 APPLIKATIONEN... 7 4. DISKUSSION... 7 4.1 FÖRSLAG TILL FÖRBÄTTRINGAR... 8 5. VEM GJORDE VAD... 9 REFERENSER... 10 1
1. Inledning Vår uppgift var att skapa en applikation där användaren ska kunna utforska släktdata i form av ett släktträd. Applikationen ska grafiskt visualisera en samling människor med möjlighet att utgå från flera olika stampersoner. Uppgiften består dels av ett koncept för grafiskt gränssnitt, dels en implementerad prototyp. Programmeringsspråket Java var rekommenderat att använda. 2. Metod Beskrivning av vår målgrupp och hur vårt arbete fortlöpte i utvecklingen av applikationen. 2.1 Målgrupp Vi har valt att rikta oss mot en målgrupp, bestående av män och kvinnor i alla åldrar, som är intresserade av att släktforska som fritidssyssla men som inte är några experter inom området. Målgruppen ska inte behöva ha särskild datorvana, utan applikationen ska vara enkel att förstå och att använda. 2.2 Arbetsprocess Gruppen började med att titta på uppgiften och brainstormade fram lösningar på det givna problemet. Brainstormingen ledde till ett antal skisser på papper. Ex på skisser. För att gå vidare i vår utveckling satte vi oss i par och skapade prototyper, på dator och med mock-ups, på hur applikationen skulle kunna se ut och vilka funktioner som skulle kunna ingå. 2
Vi tog bland annat fram en prototyp som innehöll ett tidsperspektiv, där det var möjligt för användaren att se på en tidslinje när personer levt eller om de fortfarande lever. Idén lades dock ner eftersom vi hade problem med hur visualiseringen exakt skulle gå att lösa. Prototyp med tidsperspektiv Denna idé med tidsperspektiv omsattes i två prototypers som provades på testpersoner. Dock ansåg dessa att det var svårt att ta till sig informationen och trots att det var positiva till idén ansåg de att de andra prototyperna var bättre alternativ. Efter dessa tester och våra egna konstateranden kom vi fram till en prototyp som vi bestämde oss för att mer eller mindre använda oss av. Denna vidareutvecklades och ledde fram till ett förslag som ses nedan. 3
Denna prototyp testades på en person i den tänkta målgruppen. Den blev väl mottagen men med önskan om justering av färgerna. Användaren tycke att applikationen var lätt att förstå och använda. Vi diskuterade resultatet av användartestet i gruppen men, till trots för en god feedback, så beslutade vi oss för att göra vissa förändringar. Vi beslutade att göra det översiktliga trädet, till vänster i illustrationen ovan, liggande. Vidare diskuterade vi om att lägga in personupplysningar, nere till höger på illustrationen ovan, in i det inzoomade trädet. Men tillslut så fick de detaljerade personupplysningarna vara kvar i en egen ruta. Dettta för att stödja funktionen med enkelklicking på en person i trädet (se mer under punkt 3.1 Funktionell design). Nu började programmeringen. Fyra av gruppens medlemmar programmerade och det två andra fördjupade sig i designmetoder och skrev rapporten. Detta arbete pågick parallellt, desto mer vi lärde oss om design desto mer kunde vi specificera utseendet på applikationen. Våra kunskaper i programmering samt den begränsade tiden fick oss att ibland finna nya lösningar till vår funktionalitetsdesign. 3. Resultat Presentation av resultatet av vårt arbete. Beskrivning av den funktionella designen, den grafiska designen samt apspekter och val gjorda i programmeringen. 3.1 Funktionell design Vi valde att använda 2D för att illustrera på ett tydligt sätt. 2D gör det enkelt att illustrera en mer fokuserad, mindre mängd data. Användningen av 2D ger kanske en mindre flashig illustration men en tydlig lättförstålig bild. Vår person som vi har i fokus har vi kallat Jaget, denna har Föräldrar och, eventuellt Barn. Denna så kallade kärnfamilj är genomgående i hela projektet för att skapa en logisk konsekvens. Visualiseringen är indelat i tre delar. Från ett översiktligt perspektiv vidare till kärnfamiljen och slutligen ner på personnivå. Vi kallar nivåerna Släktträd, Familjeträd och Information. Vår visualisering av Släktträd kan kopplas samman med en Fisheye view modell. När fokus flyttas i trädet, släcks vissa delar ner och andra delar lyses upp och visas tydligt. Modellen visar, om det finns tillgänglig material i databasen, jaget, tre generationer i nedstigande led och tre generationer i uppstigande led. Generell illustration av fisheye view För att ge en mer detaljerad illustration av en utvald del av släktträdet har vi skapat en dynamisk vy, det så kallade Familjeträdet. Illustrationen är dynamisk på så sätt att 4
noderna är klickbara (se förklaring nedan), jaget ändras men inte formatet på presentationen. Målet med detta träd är att visa kärnfamiljen till Jaget (personen i fokus). Jaget visas, en generation i neråtstigande led och en generation i uppåtstigande led. Mer utförlig data om jaget fokuserats visas i informationsfältet under trädet. I Informationsfältet visas statisk data: namnet på personen i fokus (Jaget), födelsedatum, eventuell dödsdag, namn på maka/make. Detta fält är väl tilltaget för att kunna visa mer information om databasen skulle innehålla mycket information som till exempel användarens personliga kommentarer om personen. I vår applikation har vi i använt oss av navigation med hjälp av musens enkelklick och dubbelklick. Innehållet i fälten förändras när användaren dubbelklickar på en ny nod (person). Ett nytt Jag visas i alla tre fälten oavsett om klickningen ägde rum i Släkteller Familjeträdet. Om användaren enkelklickar på en nod så visas det vem denna person är i informationsfältet men utan att sätta personen i fokus, i Jag. Detta för att skapa ytterligare en fokus så användaren kan jämföra jaget med ytterligare en person, eller bara titta runt i släktträdet utan att flytta fokus och ändra alla träds utseende. Vidare har användaren möjlighet att välja personer i en kombobox ovanför släktträdet för att snabbt kunna hitta en person utan att behöva klicka sig igenom varenda nod. Personerna är fördefinierade i en lista, så att användaren ser namnen och slippa skriva in namnet själv. Detta minskar risken för att användaren stavar fel när den ska välja personer. 3.2 Grafisk design Den grafiska designen ville vi hålla enkel och tydlig. Dels för att vi tyckte det passade sig i samanhanget då det ska vara enkelt att använda med tanke på målgruppen. Dels för att vi helt enkelt hade tidsbrist och insåg att det skulle vara svårt att hinna skapa något avancerat gränssnitt. Applikationen består grafiskt av olika fält där informationen presenteras. I fältet till vänster ges en överblick över släktträdet i en kartliknande form där ingen information om personerna i släktträdet är tillgänglig. Här kan användaren få en bild av hur släktträdet ser ut i sin helhet och navigera runt i det (hur det fungerar står skrivet under rubriken Funktionell design). I fältet till höger ges en mer detaljerad bild av släktträdet, eller rättare sagt en del av släktträdet är inzoomat så att användaren kan få information om individerna i släktträdet, samt se deras närmaste släktförhållanden. Detta designval kan kopplas med Tuftes (1990) teori om makro och mikro perspektiv, to clarify, add detail (s. 37). Det är vad vi har för försökt uppnå genom dessa fält, för att förtydliga visualiseringen som finns i det vänstra fältet har vi lagt till mer detaljer i det högra fältet. I ett tredje fält nere i högra hörnet har vi ett informationsfält som presenterar information om vad som är markerat när navigering sker i de övriga fälten. Detta för att göra det tydligare för användaren om var den befinner sig i släktträdet. Färgen röd använder vi även för att visa användaren vilken som är det valda jaget (mer om det nedan). Rött för att det är en tydlig färg som drar uppmärksamhet till sig, och för att vi är vana vid färgen från kartornas här är du nu. En röd ram visar sig runt den ruta 5
som är dubbelklickad på i det högra fältet, och samma röda ram runt en ruta går även att finna i inzoomningsområdet till höger. Information om jaget återfinns även i informationsrutan. På så sätt får användaren feedback i alla tre fälten var den befinner sig. Om användaren bara klickar en gång på rutan förstärks bara ramen något så att användaren vet var den har klickat. Längst upp i applikationen har vi lagt en menyrad med t ex skriv ut funktion och en hjälpfunktion (som just nu inte är programmerade, utan bara visualiserade) som användaren kan ta till om den vill skriva ut sitt släktträd eller inte förstår hur applikationen fungerar och vill ha hjälp med hur navigering i applikationen ska ske. I menyn finns även en kopieringsfunktion (som inte heller är programmerad) som gör det möjligt för användaren att kopiera information om personerna om den önskar, och t ex samla informationen i ett separat dokument. Menyn följer standardutseende så att användaren snabbt kan känna igen sig och veta hur det fungerar. Vidare har vi efter genomgången litteratur anammat andra designdiscipliner, som Tufte (1990) anser vara bra för visualisering av information. T ex rekommenderar författaren att designen ska vara i ungrid style, d v s linjer och ramar ska inte vara för starka eftersom de då har en förmåga att ta uppmärksamheten ifrån det mera viktiga innehållet inuti ramarna. Denna designdisciplin har vi tagit tillvara på genom att inte låta fälten vara begränsade av tjocka ramar, utan användaren ska fokusera på innehållet och inte det som delar av informationen. Tufte (1990) pratar även om att visualisera i olika lager. Det är viktigt att olika lager skiljer sig i färg, textur, form och value. Våra olika fält kan tänkas vara lager med olika form där olika färger används för att göra applikationen enklare att förstå. Våra val av färger är påverkade av de regler som Tufte (1990) tar upp om att starka färger kan påverka designen negativt och göra den skrikig om den används på stora fält. Författaren föreslår att använda naturfärger till bakgrundsfärg. Vidare säger Tufte att color spots against a light gray or muted field highlight and italicize data, and also help to weave an overall harmony (s. 83). Detta tips har vi tagit tillvara på genom att använda en neutral bakgrund, och lägga in små färginslag i designen, genom t ex den röda markeringen. För att göra det tydligare för användaren har vi använt samma färg i översiktsträdet som i det inzoomade trädet. De noder som finns i fältet till höger har samma färg som i fältet till vänster, så att användaren ska förstå att det är samma del av trädet. 3.3 Programmering Vi använde oss av den kod och det släktträd som vi fick tilldelat oss av vår handledare. Eftersom Java är ett objektorienterat språk så var det möjligt att dela upp uppgiften på flera olika programmerare. Vi använde inte någon färdig Javastruktur, som t ex JTree, för att skapa grafiska trädstrukturer. Vi ritade istället egna träd med linjer och paneler med ramar. Detta för att exakt kunna visualisera den information vi tyckte var viktig för användaren. Det är svårt att få till trädstrukturen, just för att linjer och paneler ritas ut dynamiskt och det krävs det krävs många matematiska beräkningar. Programmeringen var väldigt svårt att bedöma ur ett tidsperspektiv och det blev svårt att avgöra hur lång tid vissa saker skulle ta att programmera. 6
3.4 Applikationen En bild av vår färdiga applikation. 4. Diskussion Att definiera vad som är släkt kan göras med genetiska band men ibland är det inte så enkelt. Hur hanteras t ex adoptivbarn? Detta är inte ett genetiskt band men bör det inte ses som släkt? En annan fast mindre svår problemställning är halvsyskon där ena föräldern eller bägge föräldrarna har barn med en annan partner. Detta kan lösas relativt enkelt förutsatt att applikationen har utrymme för det. Vidare är det tillåtet att ingå partnerskap med kusiner, hur ska detta då hanteras för att undvika redundans i applikationen? Homosexuellt partnerskap är också en aspekt som bör tas hänsyn till. Vår kärnfamilj i projektet är baserad på vad vi i gruppen förknippar med en kärnfamilj. Detta är till högsta grad påverkat av vår kultur. Denna kärnfamilj är troligen en typisk västerländsk familj som bara inkluderar de närmaste och skulle kanske inte gå hem i en annan kultur där kärnfamiljen består av betydligt fler personer. 7
4.1 Förslag till förbättringar Vi är medvetna om att vår applikation kan utvecklas om vi hade haft mer tid och kunskap tillgänglig om hur vi praktiskt kunde genomföra våra idéer. Den begränsade tiden krävde också att vi förenklade den grafiska designen och minimerade viktig användartesting. Designen är just nu ganska hård och fyrkantig och hade säkert sett annorlunda ut om vi inte hade haft dessa begränsningar. Vi har pratat mycket om att vår applikation ska vara så enkel att använda. Efter ett användartest som gjordes när applikationen var halvklar på en användare med ganska lite datorvana, visade det sig att applikationen trots allt var ganska svår att använda. Förbättring hade varit att lägga in ett introduktionsfönster som förklarade för användaren hur applikationen ska användas, eventuellt med en visa inte detta meddelande igen så att användaren kan välja att stänga av fönstret och inte behöver se det varenda gång användaren öppnar applikationen. Att jaget uppenbarar sig på samma ställe på skärmen var en bra tanke som skulle underlätta navigeringen för användaren, men ändå är det lätt att tappa bort sig i applikationen. Detta kan t ex bero på att inte hela trädet visas på samma gång och att detta kan skapa förvirring. Att använda en 3D modell hade varit fint om vi hade haft tid, eftersom det möjligen hade gjort det lättare att se, t ex en Document Lens modell. Ett förslag till förbättring som det var tänkt att vi skulle ha med från början, är att göra en röd linje på skärmen som visar förhållandet eller vägen mellan Jaget och den person som användaren klickar en gång på. Då skulle användaren grafiskt tydligt kunna se kopplingen mellan Jaget och en för användaren intressant släkting. En annan tanke i samma tema, en röda tråd, är för att visa vart man varit. Om jag dubbelklickar och går vidare i släktträdet så ritas en linje från det senaste jaget till det nya jaget. Detta vore bra eftersom att applikationen är skapad för stora släktträd. Har man ett mindre släktträd så ändras vyn till vänster sig mycket och det kan upplevas hoppigt när man navigerar runt i trädet. Den röda linjen skulle hjälpa användaren se vart denne var sist och känslan av att man tappar bort sig skulle minska tror vi. En annan förbättring som vi även tänkt på och tänkt ha med i applikationen är på något sätt visa halvsyskon relationer, för att göra denna relation tydligare. Denna relation har ju en förälder som inte visas i släktträdet, eftersom denne inte tillhör släkten. 8
5. Vem gjorde vad En eloge till våra programmerare som har fått dra ett tungt lass och har jobbat många timmar för att skapa en fungerande applikation. Faserna i vårt projekt har varit som följer: Analys Brainstorming", skisser -> prototyp, målgrupp Design Färger, paneler, trädstrukturer, typsnitt, menyer, val av information, programmeringsspråk, klassdefinitioner Implementation Kod, databas Utvärdering Test av applikation, leta buggar Förankra designval i litteraturen Dokumentation Rapport, kommentering, korrekturläsning Presentation Muntlig 9
Referenser Böcker Tufte E. (1990), Envisioning Information, Connecticut USA: Graphics Press, ISBN: 800 822-2454 Preece J, Rogers Y, Sharp H. (2002), Interaction Design beyond human-computer interaction, New York USA: John Wiley & Sons, ISBN 0-471-49278-7 Artiklar Rao R, Perdersen J. O, Hearst M. A, Mackinlay J. D, Card S. K, Masinter L, Halvorsen P-K, Robertson G. G, Rich Interaction in the Digital Library, Communications of the ACM (april 1995, vol. 38, no. 4) Furnas G. W, Generalized Fisheye Views, Human Factors in Computing Systems CHI 86 Conference Proceedings 16-23. 1986 10