EXAMENSARBETE INOM TEKNIK, GRUNDNIVÅ, 15 HP STOCKHOLM, SVERIGE 2017 MAP DESIGN A development of background map visualisation in Digpro dpPower application FREDRIK AHNLÉN KTH SKOLAN FÖR ARKITEKTUR OCH SAMHÄLLSBYGGNAD Acknowledgments Annmari Skrifvare, Digpro AB, co-supervisor. For setting up test environment, providing feed- back and support throughout the thesis work. Jesper Svedberg, Digpro AB, senior-supervisor. For providing feedback both in the start up process of the thesis work as well as the evaluation part. Milan Horemuz, KTH Geodesy and Geoinformatics, co-supervisor. For assisting in the structur- ing of the thesis work as well as providing feedback and support. Anna Jenssen, KTH Geodesy and Geoinformatics, examiner. Finally big thanks to Anders Nerman, Digpro AB, for explaining the fundamentals of cus- tomer usage of dpPower and Jeanette Stenberg, Kraftringen, Gunilla Pettersson, Eon Energi, Karin Backström, Borlänge Energi, Lars Boström, Torbjörn Persson and Thomas Björn- hager, Smedjebacken Energi Nät AB, for providing user feedback via interviews and survey evaluation. i Abstract What is good map design and how should information best be visualised for a human reader? This is a general question relevant for all types of design and especially for digital maps and various Geographic Information Systems (GIS), due to the rapid development of our digital world. This general question is answered in this thesis by presenting a number of principles and tips for design of maps and specifically interactive digital visualisation systems, such as a GIS. Furthermore, this knowledge is applied to the application dpPower, by Digpro, which present the tools to help customers manage, visualise, design and perform calculations on their electrical networks. The visualisation and design of the network was analysed together with the usage of two common background maps, GSD-Fastighetskartan by Lantmäteriet and Primärkartan by the municipalities, whose default appearances are defined by Digpro. The aim was to answer whether there is a more suitable design of the background maps and network to better complement the usage of dpPower and if so, what is the better design? When designing interactive systems that will later have various end-users, a user-centred de- sign is important. Therefore, the initial step was to collect user inputs and feedback on the current design via customer interviews. This gave a set of user criteria for good map design of dpPower specifically. A study of existing relevant literature and previous work was also performed where several general key principles for good design could be identified. Finally, a comparison between the dpPower design and other existing map products, such as e.g. Google Maps and Eniro, was made where key similarities and dissimilarities were identified and discussed. These user criteria and design principles could be combined, both to present an answer to the general question “What is good design?” and to present a suggestion of new map appearance in dpPower. Key considerations in the new design suggestions were e.g. to have a toned down background map with all features in the same hue family. However, for GSD-Fastighetskartan the important convention of land classes, blue = water, green = vegetation & yellow = open land, should be kept. Colour combinations and contrast is the most important design element and since a design cannot be optimally adapted for all types of colour vision deficiencies, the suggestion is to separate the designs to specifically target user groups of different colour vision abilities. Important map information such as e.g. detailed road data should be kept while unnecessary features such as contour lines and polygon borderlines should be hidden. Text positions should also be considered. The results were evaluated both via a survey, distributed to users of dpPower, GIT-students and users with no previous experience of GIT or dpPower, and a seminar with employees at Digpro. The conclusions drawn from the evaluation was that the presented design suggestions and principles are good, but adjustments should be made. E.g. a use of yellow for low voltage cables, as suggested for Red-Green impaired, is perhaps not the best solution. The results present a good foundation for design of dpPower but more adjustments should be made based on the evaluation and then another evaluation can be performed. It would give an even better result. ii Sammanfattning Vad är bra design och hur ska egentligen information visualiseras på bästa sätt för en användare? Det är en generell frågeställning som är relevant för alla designformer och i synnerhet för design av digitala kartor och olika geografiska informationssystem (GIS), med tanke på den snabba dig- itala utvecklingen. Denna generella fråga besvaras i den här rapporten genom att presentera ett antal principer och tips för bra kartdesign och design av interaktiva digitala visualiseringssysem, så som ett GIS. Denna kunskap appliceras sedan på applikationen dpPower, skapad av Digpro, vilken presen- terar verktyg för underhåll, visualisering, design och beräkningar av kunders elnät. Analysen av nätets design gjordes tillsammans med användandet av två vanliga bakgrundskartor, Lanmäteri- ets GSD-Fastighetskartan och kommunernas Primärkartan, vars utseende i dpPower definierats av Digpro. Målsättningen var att svara på om det finns en mer passande design av bakgrundskartorna och nätet som underlättar användandet av dpPower och i så fall, vad är denna bättre design? När man designar ett interaktivt system för olika användartyper är det viktig med en använ- daranpassad designprocess. Därför var det första steget i analysen att samla in användarsynpunk- ter och feedback på nuvarande design från kunder genom intervjuer. Detta gav en uppsättning användarkriterier för bra kartdesign specifikt i dpPower. En studie av tillgänglig relevant litteratur genomfördes också där flera generella principer för bra design kunde noteras. Slutligen genomfördes en jämförelse mellan designen i dpPower och andra kartprodukter, som t.ex. Google Maps och Eniro där viktiga likheter och olikheter kunde identifieras och analyseras. De framtagna användarkriterierna och generella designprinciperna kunde sedan kombineras till att både ge svar på den generella frågan "Vad är bra design?" och till att presentera förslag på nytt utseende i dpPower. Viktiga faktorer i de nya designförslagen var t.ex. att ha en ned- tonad bakgrundskarta med alla objekt i samma typ av färgton. För GSD-Fastighetskartan däre- mot borde den viktiga konventionen om marktypers redovisning bevaras. Det vill säga att blått = vatten, grönt = vegetation och gult = öppen mark. Färgkombinationer och kontrast är de vikti- gaste designelementen och eftersom en design inte kan optimeras för användare med alla typer av färgblindhet är förslaget att separera designen i mallar optimerade för olika typer av färgseende. Viktig kartinformation som t.ex. detaljerad information kring vägar ska bevaras medan onödig information som t.ex. höjdkurvor och vissa polygongränslinjer kan döljas. Positioneringen av texter bör också ses över. Resultatet utvärderade både genom ett frågeformulär, som distribuerades till användare av dpPower, GIT-studenter och användare med ingen tidigare erfarenhet av GIT eller dpPower, samt genom ett seminarium med anställda på Digpro. Slutsatserna som drogs från utvärderingen var att de nya presenterade designförslagen och principerna är bra, men behöver fortsatt justering. T.ex. är användandet av gult för lågspän- ningsledningar, vilket föreslås för användare med Röd-Grön färgblindhet, troligen inte den bästa lösningen. Resultaten i denna rapport ger en bra grund för design av dpPower men fler justeringen borde göras baserat på utvärderingen vilka sedan kan utvärderas ytterligare en gång. Detta hade gett ett ändå bättre anpassat resultat. iii Contents 1 Introduction 1 1.1 Background . .1 1.2 Problem Formulation . .4 1.3 Objectives . .4 1.4 Limitations & Delimitations . .4 1.5 Disposition . .4 2 Related Work 5 2.1 Human Perception . .5 2.1.1 Human Perception . .5 2.1.2 Colour Vision and Colour Vision Deficiency . .6 2.2 Interactive Visualisation . .8 2.2.1 Visual Analytics . .8 2.2.2 User Interactions . .8 2.2.3 Visualisation Principles . .9 2.2.4 Visual Representations . 12 2.2.5 Visulisation Displays . 12 2.2.6 The Visual Information Seeking Mantra . 13 2.3 Cartography . 13 2.3.1 Cartography . 13 2.3.2 Digital Cartography . 13 2.3.3 Map Conventions . 14 2.3.4 Map Design . 16 2.3.5 Interactive Design . 23 3 Research Methodology 23 3.1 User Input . 23 3.1.1 Interviews . 23 3.1.2 Criteria . 25 3.2 Literature Study . 25 3.3 Map Comparisons . 25 3.4 Formulation of New Map Appearance . 25 3.5 Evaluation and Feedback . 25 3.5.1 Quantitative . 26 3.5.2 Qualitative . 26 4 Results 26 4.1 Map Comparisons . 26 4.2 Answer to Problem Formulation . 27 4.2.1 What is good design? . 27 4.2.2 New suggestion for map appaerance in dpPower . 34 4.3 Quantitative Feedback . 50 4.4 Qualitative Feedback . 57 iv 5 Discussion 58 5.1 General . 58 5.2 Related Work . 60 5.3 Interviews . 60 5.4 Map Comparisons . 60 5.5 Analyse in dpPower . 60 5.6 Evaluation . 62 6 Conclusions 63 7 Future Work 63 References 65 v List of Figures 1 Example of GSD-Fastighetskartan. .2 2 Example of Primärkartan. .2 3 Example of dpPower. .3 4 Perceptual trick - figure-ground relationship. .5 5 Most common Red-Green colour deficiencies. .7 6 Similarity Principle. A dissimilar object is significantly different from the rest. 10 7 Closure principle. The eye fills in the missing lines to complete the shape. 10 8 Sky and Water, by MC Escher, uses the figure-ground relationship. 11 9 Red = Danger, Amber = Caution, Green = Safe. Traffic lights use the convention of safety for colours. 14 10 Elevation map using the altitude colour conventions. 15 11 Temperature map with convention dark = more, light = less. 15 12 Example of how simultaneuos contrast affect the visual significance. 17 13 Badly considered line designs can hurt the eyes.