INTERACTION DESIGN: GRAPHICAL INTERFACES

INTERACTION DESIGN: GRAPHICAL INTERFACES GROUP PROJECT 1: INFORMATION VISUALIZATION Grupp 6: Per Hjalmarson Mattias Johannesson Billy Norén Martina Olsson Anna Persson

Sammanfattning Den här rapporten beskriver arbetet med och resultatet av Information Visualization, det första grupprojektet i kursen Graphical Interfaces på IT-Universitetet i Göteborg. Projektet går ut på att ta fram ett visualiseringssystem som på ett överskådligt sätt visar ett antal företags relationer till varandra i en komplex ägandestruktur, samt att åskådliggöra en del fakta om företagen och de personer som har relationer till dem. Förutom visualiseringssystemet och en rapport, ska en algoritm som underlag till programmeringen tas fram. Resultatet av vårt arbete är en prototyp av ett system med möjlighet att överblicka ett flertal företag och personer i samma vy, samt även möjligheten att se en mer detaljerad bild av ägandeskap och fakta om företagen. På ett enkelt sätt kan användaren navigera sig i systemet för att hitta den information denne söker. Den initiala bilden av systemet blev en tvådelad skärmbild där den ena delen visade själva översikten av ägandet. Den andra delen innehöll en indikation av på vilken nivå man befinner sig samt en förklaringsdel av färg och mönster som förekommer i den stora sektionen. Den större skärmbilden visar ett flöde av företagen och personerna och mellan ägarna och de ägda företagen finns det pilar som visar riktningen av ägandet. Denna översiktliga del är inte så detaljerad utan är tänkt att visa ägandet i ett större perspektiv. För att se på ett företag eller en person mer detaljerat kan användaren dubbelklicka på eller välja en person eller ett företag ur en lista. Användaren kommer då till en vy med bland annat ett träddiagram med hierarkisk struktur där han eller hon utifrån det företag eller den person som ligger i fokus enkelt kan navigera sig till relaterade företag och personer. Huvudsyftet med vår översikt är att man lätt ska kunna se ägandestrukturen för alla företag och personer, för att sedan kunna välja att få mer detaljerad information om detta företag eller denna person. Genom att ha en översikt som visar alla personer och företag med tillhörande ägandeförhållanden på en gång, antog vi att det skulle göra vår översikt lätt att använda och snabb att navigera i. Eftersom ingen i gruppen har några större kunskaper inom ekonomi, hade vi svårt att avgöra vilken information om företagen och personerna som var viktigast att visa i vårt program. En användaranalys och/eller en enkätundersökning skulle kunna ge oss information om vad användarna värderar högst. 2

Innehållsförteckning 1. Sammanfattning...2 2. Innehållsförteckning...3 3. Introduktion...4 Bakgrund...4 4. Metod...5 Problemet...5 Teori...5 5. Resultat...7 Struktur...8 Placering, färg och form...9 Navigering...9 Begränsningar...10 Detaljerad beskrivning av algoritmerna...10 Algoritm för uppritning av översiktsvyn...10 Algoritm för uppritning av trädvyn...11 Ett exempel...12 6. Analys...13 Översikten...13 Inzoomade vyn...13 Pilar...13 Konsistens mellan vyerna...13 Färgval...14 Algoritmerna...14 7. Diskussion...15 8. Litteratur...16 9. Referenslista...16 Appendix A Javadoc.zip - Javadoc, klass- och sekvensdiagram. Appendix B Projektsida.zip - Körbar prototyp. 3

Introduktion Detta arbete är det första projektet som ingår i kursen Graphical Interfaces under första terminen på MDI-programmet på IT-Universitetet i Göteborg. Projektet går ut på att göra en informationsvisualisering av ett kluster företag och personer. Bakgrund Under början på 90-talet var en grupp företag nära att orsaka en nationell ekonomisk kollaps i Sverige. Orsaken till detta var att denna grupp företag, som ägde varandra i olika komplexa former, hade lånat stora summor pengar av Nordbanken och använt varandra som säkerhet för lånen. Nordbanken insåg inte att delar av denna säkerhet bestod av pengar som banken redan lånat ut, säkerheten bestod alltså av Nordbankens egna pengar. Eftersom Nordbanken inte hade något system för att upptäcka misstag av denna typ ledde detta så småningom till en finansiell kris för både banken och företagen. Målet med detta informationsvisualiseringsprojekt är att ta fram ett system för att kunna undvika misstag som detta. I uppgiften ingår att ta fram ett visualiseringssystem som på ett överskådligt sätt visar ett antal företags relation till varandra i en komplex ägandestruktur. Detta för att kunna kontrollera hur ett företag ägs och vad det äger. Visualiseringssystemet ska även visa personligt ägande i företagen. I uppgiften ingår även att presentera 3-5 övriga fakta om företagen. Systemet får inte innehålla någon form av scrollfunktion. Klustret består av 30 företag och 11 personer med givna data. Förutom visualiseringssystemet och en rapport, ska en algoritm som underlag till programmeringen tas fram. 4

Metod Problemet För att uppnå det mål vi satt upp, startar projektarbetet med att säkerställa vad problemet är och vilken information som är relevant för vårt visualiseringssystem. Frågor som dök upp var; måste vi visa alla företagen på en gång? hur många företag skulle vårt system klara? skall vi kunna fokusera på ett företag i taget, och i så fall vilka led i kedjan är relevant, ägandet eller ägarna eller båda? är det viktigt att visa dotterbolag, procent i ägande och värdet på företaget? hur kan vi visa en loop i ägandestrukturen? skall ett företag ritas ut mer än en gång? Vi använde post-it lappar där vi noterade alla företagsnamn på varsin blå lapp och personer på varsin gul lapp för att på ett enkelt sätt få en överblick över ägandestrukturen så använde. Lapparna applicerade vi sedan på ett fönster och sorterade dem på olika sätt utefter dess relation till varandra. Vi satte ett företag i fokus och såg vad som hände om man satte ägarföretagen ( föräldrarna ) över det företag vi fokuserade på, och ägande-företagen ( barnen ) under. Vi fortsatte sedan kedjan nedåt så att endast barnen syntes. Vi insåg snart att en begränsning i kedjan måste ske på något sätt. För att få en översikt över alla företagen och personerna satte vi upp alla lapparna efter nummerordning och ritade pilar mellan dem, där pilarna fick symbolisera ägandeskapet. Eftersom pilarna då kunde sträcka sig över hela strukturen, insåg vi att vi behövde sortera företagen efter hur nära de står varandra ägandemässigt. Vi kunde använda oss av olika metoder för att visa vår översikt med alla företagen bland annat fisheye 1, trädstruktur 2, flipzoom 3, butterfly application 4, perspective wall med flera. Alla metoder har sina fördelar och nackdelar och anpassas för att användas till vald applikation. Vi ville undvika att skriva ut fakta om företagen i text och istället visa detta i form av placering, färg och form. Detta för att utnyttja alla resurser av visualiseringsteknik. Teori För att förenkla navigeringen i systemet har vi valt att använda oss av en flerstegsprincip. Vid en första anblick möter användaren ett fönster som är indelat i två sektioner. Den ena sektionen är mindre till storleken och har en fast layout. Den andra sektionen tar upp resterande utrymme av skärmen och innehållet är varierbart så att den kan anpassas efter aktuellt visuellt läge. Den mindre sektionen är dels tänkt till att innehålla någon form av navigeringskompass som visar var i systemet man befinner sig. Den skall även innehålla hjälpmedel till att förklara information som kommer till att vara i form av färg och form i den stora sektionen. Då det kan vara svårt att direkt överblicka och hitta ett specifikt företag så bör det finnas en sökruta någonstans i systemet där man enkelt skriver in det företag eller person man söker. Alternativt skall man kunna leta efter det man söker i en lista om man inte exakt vet den rätta stavningen eller det fullständiga namnet. 5

I den stora sektionen kommer en övergripande bild över alla företag och privatpersoner att visas. För att skilja på företag och privatpersoner i strukturen väljs olika färger på dessa. Varje företag och privatperson visas endast en gång vardera så att antalet minimeras. Det är tänkt att man bara skall få en överskådlig bild för att sedan ha möjligheten att zooma sig in mot ett specifikt företag eller person i detalj. För att komma till den mer detaljerade nivån så klickar man på företaget eller personen man är intresserad av. I detta fall så förflyttas man in i bilden och ser det val man gjort fokuserat och mer detaljerat och med dess kopplingar till angränsande företag och personer. När man befinner sig i steg två så bibehålls den lilla sektionen med navigeringskompassen och förklaringsdelen, det tillkommer dock en miniatyrbild av översiktsbilden med någon form av markering som visar var man befinner sig. I detta läge kan man navigera sig till angränsande företag som i sin tur hamnar i fokus. Då detta görs så följer markeringen i miniatyrbilden med så att man hela tiden vet vart man befinner sig i systemet. Verktyget kallas fish-eye och bygger på att man förflyttar fokus i valfri riktning i ett system där man annars endast har ett övergripande och mindre detaljerat informationsflöde 1. I vår ägandestruktur utgick vi från ett träddiagram som modifieras för att passa vårt system. 6

Resultat Resultatet av vårt arbete har arbetats fram efter mycket tester och utvärderingar så att ett slutligt system har blivit möjligt. Detta system har möjlighet att överblicka ett flertal företag och personer i samma vy samt även möjligheten att se en mer detaljerad bild av ägandeskap och fakta om företagen. På ett enkelt sätt kan användaren navigera sig i systemet för att hitta den information denne söker. Den initiala bilden av systemet blev en tvådelad skärmbild där den ena delen visade själva översikten av ägandet. Den andra delen innehöll en indikation av på vilken nivå man befinner sig samt en förklaringsdel av färg och mönster som förekommer i den stora sektionen. Den större skärmbilden visar ett flöde av företagen och personerna i ett mönster i form av en cirkulär rörelse runt centrum. Denna rörelse styrs av en algoritm. Mellan ägarna och de ägda företagen finns det pilar som visar riktningen av ägandet. Denna översiktliga del är inte så detaljerad utan är tänkt att visa ägandet i ett större perspektiv. För att se på ett företag eller en person mer detaljerat så markerar man denne, vilket sedan tar användaren till ett inzoomat läge där detaljerad information kan avläsas i den större skärmbilden. I det inzoomade läget bibehålls den lilla skärmbildens layout och den större skärmbilden ges ett tillägg som är en förminskad bild av den initiala bilden av strukturen som visas i steg ett. I denna förminskning visas var i systemet man befinner sig med en röd markering som följer ens navigering. Det inzoomade läget utgörs av en hierarkisk struktur där vi valde att använda oss av ett träddiagram där man utifrån ett företag som ligger i fokus enkelt kan navigera sig till ägda företag samt dess ägare. För att skilja privatpersonerna och företagen åt ger vi dem olika färger. Privatpersonerna har samma färg medan företagen gavs en färg där man kunde avläsa ett värde. 7

Även i det inzoomade läget så finns det pilar mellan företagen och personerna som visar i vilken riktning som ägandet sker. Ägandet kan även ske dubbelriktat och visas med en dubbelpil. Strukturen i sin helhet är fördelat så att ett företag är centrerat på skärmen i detaljerat läge och har till vänster sida sina ägare och det företaget äger placerat till höger om sig. Detta kändes mer naturligt då vi i Europa läser från vänster till höger och kan koppla detta till vår struktur. Ägarna visas bara i en nivå medan de ägda visas i tre nivåer vilket kan ställas in av användaren beroende på antalet ägda företag. Personerna och företagen placeras uppifrån och ner i rangordning där placeringen utgörs i höjdled efter ägda antal procent gånger värdet av företaget. På detta vis så kan man på ett enkelt sätt se vilket företag som utgör det största värdet hos ägaren. Struktur Eftersom vi i en översikt vill kunna se alla företagen på en gång, kom vi fram till att en trädstruktur skulle passa vår visualisering bra. Men istället för att visa strukturen uppifrån och ned bestämde vi oss för att visa den från vänster till höger. Detta för att spara plats på skärmen eftersom grenarna breder ut mer och mer, och våra rutor i form av företag tar mer plats på bredden än på höjden. Vi bestämde att företagen bara skulle ritas ut en gång, och att pilar skulle visa åt vilket/vilka håll ägandet sker. Med en relevant placering av företagen skulle vi nu kunna visa alla ägandeformerna samtidigt på ett tydligt sätt. Däremot skulle eventuellt inte all övrig information om företagen få plats i denna vy. Dessutom kanske det skulle vara svårt att med många företag på skärmen fokusera på enbart ett enda företags relationer. Med detta i åtanke kom vi fram till att vi ville ha två vyer. En översiktsvy med alla företagen och hela ägandestrukturen och en mer detaljerad vy i vilken vi fokuserar på endast ett företag. I den mer detaljerade vyn fokuserar vi endast ett företag och dess närmsta relationer med andra företag. Denna vy fungerar dessutom som en fisheye-view 1 där detaljerad information syns av det fokuserade företaget och även de företag det har närmast relation med. 8

Placering, färg och form I översiktsvyn är det vår algoritm som bestämmer var företagen hamnar på skärmen. Algoritmen tar hänsyn till vilka företag som har den närmsta kopplingen så att de hamnar bredvid varandra. Detta görs för en snabb översikt av äganderelationerna som visualiseras utav pilar och dubbelpilar. På dessa pilar finns en markering som visar hur många procent ett företag äger ett annat. I den detaljerade vyn placeras det företag med störst värde i det fokuserade företaget högst upp och sedan i fallande ordning. På detta vis så kan man på ett enkelt sätt se vilket företag som utgör det största värdet hos ägaren, oavsett företagets eget värde. En gråskala på rutorna med företagen visar i en skala hur mycket företagen är värda i sig själva. Anledningen till färgvalet var att vi ville ha en behaglig färgskala som inte blev för gräll så att man kan använda systemet under längre perioder utan att anstränga ögonen. 5 Detta även så att inte fokus försvåras kan missvisas. Efter att först ha provat att ha färgade ramar bestämde vi oss för att ha helfärgade rutor. Anledningen var att ramarna utgjorde ett rörigare mönster än de helfärgade rutorna. Med färgen kan man även utläsa om det är en person eller ett företag som utgör ägaren. Till personerna har vi valt en mild orange färg, som inte heller den stjäl för mycket uppmärksamhet på skärmen. I formen på rutorna kan man utläsa om ett företag eller en person verkar i Sverige, Europa eller har en världsomspännande verksamhet. För att man tydligt ska se vilket företag som är i fokus, har vi gjort det lite större där även mer information kan utläsas jämförbart med övriga rutor. Navigering Systemet vi skapat bygger på att man enkelt skall kunna navigera sig till den information man söker. Dock så kan det krävas en enklare genomgång av programmet då detta skall användas utav vana banktjänstemän. Detta medför att alla funktioner inte behöver vara självklara och enkla, genom detta så kan vi skapa mer funktioner för att öka kvalitén på systemet och öka användningsområdet för användarna. För att navigera sig fram så kan man använda sig av flertalet metoder. Man kan börja med att söka det namn på företag eller person man letar efter genom att skriva det i sökrutan som sedan listar upp alla företag och personer som finns registrerade i systemet. Alternativt kan man skriva första bokstaven i det namn användaren söker så visas de företag och personer som börjar på denna bokstav i rullistan. Genom detta så markeras det företag eller person man sökt genom att lysas upp i rött. Pilarna som visar relationen till andra företag visas även de i rött. Man kan även i denna lista godtyckligt söka ett namn utan att skriva något i listan. Till höger om sökrutan finns det två stycken snabbknappar som tar en antingen till den detaljerade vyn eller till översiktsvyn. Genom detta kan man snabbt navigera sig fram och tillbaka genom systemet. En annan metod som man kan använda sig av är musklick, som dessutom troligtvis kommer till att vara den mest användbara av dem. Genom att enkelklicka på en ruta så kommer den att byta färg till rött och även de angränsade pilarna byter färg. Efter det kan man dubbelklicka på rutan och då hamnar man i den detaljerade vyn och rutan blir fokusobjekt. Sedan kan man fortsätta sin förflyttning vidare till andra angränsande rutor som då kommer att hamna i fokus. Allt eftersom man förflyttar sig i detaljvyn så kan man se var i systemet man befinner sig tack vare en förminskning av översiktsvyn, där en röd markering visar vart i systemet man befinner sig. 9

Begränsningar Efter att ha funderar på hur många steg som var relevant att visa i vardera riktningen, kom vi fram till att i vår detaljerade vy räcker det att se en nivå uppåt i strukturen (föräldrarna) och tre nivåer nedåt (barnen). Även om kedjan sedan fortsätter har vi antagit att företagen senare i kedjan inte har så stor påverkan på vårt fokuserade företag. Detta görs för att enkelt och snabbt analysera ett företags ekonomiska situation och betalningsförmåga vid ett eventuellt låntagande från en bank. Banken har ett behov av att kunna kontrollera betalningsförmågan samt vilken säkerhet ett företag har så att exempelvis inte banken lånar till ett företag som i sin tur har lån någon annanstans som denne anger som säkerhet. Detaljerad beskrivning av algoritmerna Det första som händer när programmet startas är att databasen läses in med all information om företagen och personerna, inklusive varje företags barn och föräldrar, vilket i det här fallet innebär vilka företag det äger och vilka som äger varje företag. Detta lägger sedan grunden till båda våra uppritningsalgoritmer; Algoritm för uppritning av översiktsvyn och Algoritm för uppritning av trädvyn. Den vy som användaren först kommer till när programmet startas är översiktsvyn. Algoritm för uppritning av översiktsvyn För att kunna placera företag och personer som med avseende på ägande är relaterade nära varandra, finns det en särskild algoritm som räknar ut i vilken ordning objekten ska ritas ut. Detta för att underlätta för användaren att se loopar och grupperingar eller kluster samt för att undvika allt för långa pilar som går från den ena änden av skärmen till den andra. Denna algoritm börjar med det första företaget och fortsätter sedan framåt, och det spelar för algoritmen i sig ingen roll om ordningen baseras på företagets och personernas ID-kod, deras namn eller någon annan godtycklig ordning, så länge denna inte ändras. Vi har i våra exempel utgått ifrån företagens ID-kod. Algoritmen börjar med att lägga in ett företag först i en lista som har lika många poster som det finns företag och personer sammanlagt. Denna lista skall användas för att rita ut företagen i rätt ordning. Efter att det första företaget lagts till läggs de företag som företaget i den första posten äger till i listan och därefter läggs också de personer och till sist de företag som äger företaget i den första posten in. När alla företag och personer som äger det första företaget och det första företagets äganden är tillagda flyttas till nästa post i listan. Där sker samma sak, alla personer och företag som äger eller ägs av företaget i den aktuella posten läggs till om de inte redan finns i listan, varpå algoritmen går vidare till nästa post och så vidare. Om posten algoritmen kommer till är tom, detta händer när en kedja av företag tar slut, läggs nästa företag i id-nummer ordningen till, varpå algoritmen kan fortsätta som förut tills alla företag och personer har lagts in i listan. Uppritningen av företagen på skärmen kommer att ske enligt den tidigare beskrivna listans ordning. Det första företaget placeras längst upp i det vänstra hörnet och dess ägda företag och dess ägare placeras sedan ut så nära det aktuella företaget som möjligt. För att utnyttja hela skärmen strävar algoritmen först efter att placera ut relaterade företag till höger om det aktuella företaget, tills företagen kommer över på den högra halvan av uppritningsytan då den i stället söker sig neråt. När de relaterade företagen sedan hamnar i den nedre högra halvan strävar de åt vänster och därefter uppåt, så att grafen blir lite som en spiral. Detta leder till att företagen inte grupperar sig uppe i en hörna, vilket skulle leda till ett behov av många långa och korsande pilar, utan sprider ut sig över det mesta av uppritningsytan, med kortare och enklare pilar som följd. Nya orelaterade företag eller personer placeras ut på första lediga 10

plats nära det övre vänstra hörnet, varpå uppritningsalgoritmen fortsätter på samma sätt som innan för de nya företagens ägarrelationer. För att undvika att algoritmen tvingas att rita upp de sista, eventuellt relaterade företagen, långt ifrån varandra på de enda lediga platser som finns kvar i grafen lämnas alltid en del platser i uppritningsytan tomma. Antalet rader och kolumner räknas ut genom att antalet_rader*antalet_kolumner antalet_kolumner + 1 måste vara mindre än eller lika med antalet objekt som ska ritas ut och där antalet_rader och antalet_kolumner antingen är lika många, eller skiljer sig åt med högst ett. Om det finns exempelvis 41 objekt så väljer vi därför att göra plats för 7*7=49 objekt istället för det möjliga scenariot 6*7=42 objekt. När alla företag och personer har kommit på plats ritas pilar som visar ägande mellan företagen och personerna ut på skärmen. Algoritm för uppritning av trädvyn Algoritmen ritar ut två träd som utgår ifrån det företag som är i fokus. Ett träd som utgår ifrån det företag som har fokus och växer åt vänster innehåller alla ägare som äger minst 14 % av företaget. Anledningen till att gränsen sattes vid just 14 % beror på att det då kan bli högst sju noder vilket är max antal som kan visas på ett bra sätt. Detta träd kan som start inställning ha högst två nivåer (företaget i fokus + en nivå ägare) men detta skulle kunna ställas in av användaren. Det andra trädet utgår också ifrån det företag som har fokus men växer åt höger. Detta träd innehåller de företag som företaget i fokus äger minst 14 % i och kan ha högst fyra nivåer (företaget i fokus + tre nivåer med ägda företag). Detta skulle kunna ställas in av användaren precis som antal nivåer av ägare skulle kunna ställas in. Algoritmen börjar med att skapa fyra fält, ett för ägarna till företaget och tre fält för de tre nivåer av ägda företag som kan förekomma. Dessa fyra fält är till för att lagra noderna som skall ritas ut temporärt innan de ritas ut. En rekursiv funktion löper sedan igenom alla noder i båda träden och placerar dem i rätt fält. Om ett företag förekommer fler än en gång, placeras de ändå bara ut på ett ställe, i trädet med ägda företag på den högsta av nivåerna som det förekommer. Den rekursiva funktionen räknar ut bredden i antal noder för varje träd. Efter genomlöpningen vet alla noder hur brett trädet är under dem. Detta gör att alla noder kan ritas ut symetriskt kring sina respektive föräldrar. Nu är noderna klara för att ritas ut. Algoritmen börjar med att rita ut det företaget som är i fokus det vill säga roten till de båda träden. Efter roten ritas trädet med ägarna ut till vänster om roten och sedan ritas trädet med ägda företag ut till höger. Träden ritas ut ifrån grundaste nivån, den närmast roten, till djupaste nivån. Eftersom vi använder oss av objektorientering så behöver bara algoritmen säga till noderna att rita ut sig själv. Noderna vet hur de skall ritas beroende på vilken nivå i trädet de ligger. 11

Ett exempel Börja med att öppna index.html. Det finns tooltips med förklaringar för de flesta av figurerna, så håll musen över dem för att få reda på information. Välj ett företag i översiktvyn (Råslätt är det enda fungerande) genom att enkelklicka för att se vilka kopplingar det har till andra företag, eller dubbelklicka för att titta på den detaljerade trädstrukturen för företaget. Alternativet till att dubbelklicka är att först markera företaget och sen använda sig av vyknapparna i navigeringsmenyn. Knapparna är översiktsvy och trädvy, och de blir oklickabara om man befinner sig i den vy som knappen går till. För att få reda på information om företaget så får man jämföra färg och form med beskrivningarna i menyn. Om man nu väljer att titta på trädstrukturen för ett företag, så kommer det valda företaget att förstoras upp och information om företaget skrivs ut i dess box. Till vänster om företaget finns de företag eller personer som äger det valda företaget. Till höger finns de företag som det valda äger, och fortsätter med vilka de företagen i sin tur äger i 2 nivåer till. På trädvyn tillkommer runda ringar med ett tal i som motsvarar ägandet i procent, ringen ligger närmast det företag som blir ägt. Under företagen finns en liten infälld översiktsvy som ser var man befinner sig i översikten. Man kan nu fortsätta navigera sig vidare till andra företags eller personers trädvyer (Eglerio och Marcus Rosenburg går att välja). Personer fungerar på samma sätt, med undantaget att det aldrig finns företag eller personer som äger en person. Nu kan man välja att klicka på knappen för översiktsvy i menyn, så kan man börja om och välja ett annat företag, men vi nöjer oss med Råslätt som exempel. 12

Analys Översikten Huvudsyftet med vår översikt är att man lätt ska kunna se ägandestrukturen för alla företag och personer, för att sedan kunna välja att få mer detaljerad information om detta företag eller denna person. Genom att ha en översikt som visar alla personer och företag med tillhörande ägandeförhållanden på en gång, antog vi att det skulle göra vår översikt lätt att använda och snabb att navigera i. Vår översikt är optimerad för att visa upp till cirka 100 stycken företag och personer. En nackdel med översikten är att vid visning av fler företag eller personer skulle texten med namnen antingen försvinna eller bli så liten att den blir oläsbar. I detta fall kan man endast söka företag eller personer i scrollboxen på menybaren. Vi skulle även få lägga till någon form av skal- eller zoomfunktion i programmet. En annan nackdel med översikten är att det kan vara svårt att på en gång se var i strukturen det uppkommer så kallade loopar i ägandet. Man skulle kunna låta användaren själv ställa in hur många steg i ägandet han/hon vill se, för att på så sätt lättare kunna upptäcka sådana loopar. Inzoomade vyn I den inzoomade mer detaljerade vyn fokuserar vi på endast ett företag eller en person. Ägandet ritas upp utifrån det företag vi fokuserar på. Vi valde att visa denna vy i en trädstruktur, där företaget vi fokuserar på befinner sig i mitten och har större storlek än de övriga. Genom placeringen höger-vänster syns tydligt vilka företag vårt fokuserade företag äger, och vilka företag det ägs av. Även de direkta looparna syns tydligt i denna vy genom att pilar korsar företaget i mitten. En nackdel med denna struktur är att företagen kan förekomma på båda sidor av vårt fokuserade företag, och eftersom företagen bara ritas ut en gång vardera, representeras de i vissa fall enbart av pilar. Pilar Vi valde att använda pilar för att representera ägandeförhållanden. Vi tyckte att pilar kändes intuitivt och vedertaget för detta ändamål. En nackdel med att använda pilar kan vara att då det finns många på samma ställe kan det lätt bli rörigt, men i vår översikt har vi begränsat oss till 30-100 företag och då fungerar de bra. Ett annat problem är att det kan vara svårt att se var pilarna kommer ifrån då de korsar andra företag på vägen, detta skulle exempelvis kunna lösas genom att pilarna vid krock med andra företag blir streckade. Konsistens mellan vyerna I översikten ritas företagen ut så att de med flest relationer mellan varandra hamnar nära. I trädstrukturen syns företagen på ett annat sätt. Endast de företag som har med vårt fokuserade företag att göra syns, och de hamnar i en annan ordning på skärmen än i översikten. För att visa att vår inzoomade vy är upplagd på ett annat sätt och inte är en egentlig pixel-inzoomning av översikten, ville vi undvika att använda oss av ett förstoringsglas som ikon vid byte av vy. Vi använde istället en färdig ikon som föreställer just en trädstruktur. 13

Färgval Vi valde att visa alla företagen som rutor i olika grå nyans som indikation på företagens värde. Fördelen med en färgskala är att man snabbt kan jämföra värdet mellan olika företag. En nackdel med färgskalan kan vara att texten på de mörkgrå företagen är svårare att urskilja än på de ljusgrå. En annan nackdel med gråskalan är att företagsvärdena inte kan visas så exakt med tanke på att det är svårt att med ögat urskilja fler än 4-5 nyanser. Algoritmerna En fördel som båda algoritmerna har är att de bara kräver linjära resurser. Det vill säga att när antalet företag och personer i programmet växer ökar resurskraven proportionerligt. I princip skulle algoritmen kunna hantera alla företag och alla personer i världen utan att saktas ner nämnvärt. Detta gör att programmet skulle kunna skala upp utan att algoritmerna satte begränsningar. Båda algoritmerna är förhållandevis enkla och skulle kunna förbättras. Algoritmen för uppritning av översikten skulle till exempel optimeras genom att man genom ett stort antal tester kom fram till hur många tomma rutor som det skall finnas i matrisen för att få så kort medellängd på pilarna som förbinder noderna som möjligt. Detta måste man sedan väga mot hur stor matrisen skulle bli, alltså hur små noderna skulle bli. För att göra en stor förbättring av algoritmen skulle det gå att inte använda en matris för att placera ut noderna. En mer dynamisk metod för att placera ut noderna där företag och personer bildar tydligare kluster och de pilar som förbinder dem kan optimeras skulle ge en tydligare och mer lättläst bild. Den algoritm som används för att rita ut den hierarkiska vyn skulle också kunna förbättras. Det går att tänka sig att noderna i trädet har olika detaljnivå beroende på hur många noder som skall ritas ut. Om det finns mycket plats eftersom det är få noder kan man få plats med mer information. 14

Diskussion Eftersom ingen i gruppen har några större kunskaper inom ekonomi, hade vi svårt att avgöra vilken information om företagen och personerna som var viktigast att visa i vårt program. Vi valde t ex att genom formen på företags- och personrutorna visa var i världen de verkar. Det kanske finns intressantare saker att visa på detta sätt och man kan tänka sig att en användaranalys och/eller en enkätundersökning skulle kunna ge oss information om vad användarna värderar högst. Man kan även tänka sig att programmet låter användaren själv kan ställa olika funktioner. Man skulle också kunna vidareutveckla programmet och lägga in mer information som till exempel i vilka företag de olika personerna sitter i styrelsen eller är vd för. Algoritmerna har begränsat hur företagen och personerna skall ritas ut på skärmen. De algoritmer som används i prototypen bör förbättras om ett verkligt system skall utvecklas ifrån den här prototypen. En algoritm som ritar upp företagen och personerna i tydligare kluster skulle ge en stor grafisk förbättring. Anledningen till att vi har låtit algoritmerna begränsa visualiseringen är av tids och resursskäl. Med tanke på den tid som utvecklingen av algoritmerna har tagit så har det varit väl investerad tid. 15

Litteratur Book: Tufte, E. R. Envisioning Information. Graphics Press, UK, 1990. Referenslista 1 Furnas, G.W. (1986) Generalized fisheye views. Human Factors in Computing Systems CHI '86 Conference Proceedings, Boston, pp. 16-23. http://www.si.umich.edu/~furnas/papers/fisheyechi86.pdf 2 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, pp. 73-78 http://www.win.tue.nl/~vanwijk/ctm.pdf 3 Björk, S. Hierarchical Flip Zooming: Enabling Parallel Exploration of Hierarchical Visualizations. Proceedings of Advanced Visual Interfaces (AVI), 2000. http://play.tii.se/publications/2000/hierarchical.pdf 4 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, 38(4):29-39. http://www.ramanarao.com/papers/richinteraction-cacm95-acm.pdf 5 Book: Tufte, E. R. Envisioning Information. Graphics Press, UK, 1990 Chapter: Color and Information 16