Department of Science and Technology Institutionen för teknik och naturvetenskap Linköping University Linköpings universitet

gnipökrroN 47 106 nedewS ,gnipökrroN 47 106-ES

LiU-ITN-TEK-A--17/035--SE

Real-time visualization of adigital learning platform

Kristina Engström

Mikaela Koller

2017-06-20

LiU-ITN-TEK-A--17/035--SE

Real-time visualization of adigital learning platform

Examensarbete utfört i Medieteknikvid Tekniska högskolan vid

Linköpings universitet

Kristina Engström Mikaela Koller

Handledare Jimmy JohanssonExaminator Daniel Nyström

Norrköping 2017-06-20

Upphovsrätt

Detta dokument hålls tillgängligt på Internet – eller dess framtida ersättare –under en längre tid från publiceringsdatum under förutsättning att inga extra-ordinära omständigheter uppstår.

Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner,skriva ut enstaka kopior för enskilt bruk och att använda det oförändrat förickekommersiell forskning och för undervisning. Överföring av upphovsrättenvid en senare tidpunkt kan inte upphäva detta tillstånd. All annan användning avdokumentet kräver upphovsmannens medgivande. För att garantera äktheten,säkerheten och tillgängligheten finns det lösningar av teknisk och administrativart.

Upphovsmannens ideella rätt innefattar rätt att bli nämnd som upphovsman iden omfattning som god sed kräver vid användning av dokumentet på ovanbeskrivna sätt samt skydd mot att dokumentet ändras eller presenteras i sådanform eller i sådant sammanhang som är kränkande för upphovsmannens litteräraeller konstnärliga anseende eller egenart.

För ytterligare information om Linköping University Electronic Press seförlagets hemsida http://www.ep.liu.se/

Copyright

The publishers will keep this document online on the Internet - or its possiblereplacement - for a considerable time from the date of publication barringexceptional circumstances.

The online availability of the document implies a permanent permission foranyone to read, to download, to print out single copies for your own use and touse it unchanged for any non-commercial research and educational purpose.Subsequent transfers of copyright cannot revoke this permission. All other usesof the document are conditional on the consent of the copyright owner. Thepublisher has taken technical and administrative measures to assure authenticity,security and accessibility.

According to intellectual property law the author has the right to bementioned when his/her work is accessed as described above and to be protectedagainst infringement.

For additional information about the Linköping University Electronic Pressand its procedures for publication and for assurance of document integrity,please refer to its WWW home page: http://www.ep.liu.se/

© Kristina Engström , Mikaela Koller

Linkopings Universitet

Real-time visualization of a

digital learning platform

Kristina Engstrom

Mikaela Koller

Examiner: Daniel NystromTutor: Jimmy Johansson

Norrkoping, June 28, 2017

Abstract

This master thesis report presents the development and results ofa dashboard developed for Sanoma Utbildning. The learning platform,called SUD - Sanoma Utbildnig Digital, is a combination of exercisesand reading material used by both students and teachers. The pur-pose of the application is to provide Sanoma Utbildning with valuableinsights of the activity in SUD and was developed using agile meth-ods. The dashboard should be easy to understand for both employeesat Sanoma Utbildning and possible customers. The user interface hasbeen developed with help from theory and by conducting three userevaluations. The data is collected from logs produced by SUD and sentwith webhooks to the dashboard. The result is a web based MEAN-stack application visualizing real time data and statistical data of theevents in the learning platform.

Acknowledgements

We would like to thank Sanoma Utbilding and Frost for giving usthe opportunity to do our master thesis at their companies. Especiallythanks to Madeleine Shemweta for answering all our questions and TosteJunestrand for always making sure we were doing ok. Thanks to oursupervisor Daniel Nystrom and a special thank to our tutor Jimmy forall your help! ♥

CONTENTS CONTENTS

Contents

1 Introduction 1

1.1 Sanoma Utbildning and SUD . . . . . . . . . . . . . . . . . . . 11.2 Background and problem description . . . . . . . . . . . . . . . 11.3 Research questions . . . . . . . . . . . . . . . . . . . . . . . . . 31.4 Limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2 Background and related work 5

2.1 Information visualization . . . . . . . . . . . . . . . . . . . . . . 52.1.1 Cognitive mechanisms . . . . . . . . . . . . . . . . . . . 52.1.2 Perception . . . . . . . . . . . . . . . . . . . . . . . . . . 52.1.3 Data types . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.2 Visualization techniques . . . . . . . . . . . . . . . . . . . . . . 82.2.1 Pie chart . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.2.2 Bar chart . . . . . . . . . . . . . . . . . . . . . . . . . . 92.2.3 Line chart . . . . . . . . . . . . . . . . . . . . . . . . . . 92.2.4 Area chart . . . . . . . . . . . . . . . . . . . . . . . . . . 102.2.5 Scatter plot . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.3 Usability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.3.1 Designing information graphics . . . . . . . . . . . . . . 112.3.2 The Visual Information Seeking Mantra . . . . . . . . . 142.3.3 Colour . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142.3.4 Pattern of behaviour . . . . . . . . . . . . . . . . . . . . 162.3.5 Scientific Evaluation . . . . . . . . . . . . . . . . . . . . 17

3 Method 19

3.1 Development methodology . . . . . . . . . . . . . . . . . . . . . 193.2 User study . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193.3 Data retrieval . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

4 Implementation details 21

5 Results 23

5.1 First evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . 235.2 Second evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . 245.3 Third evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . 255.4 Final prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

6 Discussion 30

6.1 Online users - pie chart . . . . . . . . . . . . . . . . . . . . . . . 306.2 Daily login activity - area chart combined with line chart . . . . 306.3 Weekly login activity - stacked bar chart . . . . . . . . . . . . . 316.4 Top three most used books - line chart . . . . . . . . . . . . . . 316.5 Colours . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

i

CONTENTS CONTENTS

6.6 The charts overall . . . . . . . . . . . . . . . . . . . . . . . . . . 326.7 Development process . . . . . . . . . . . . . . . . . . . . . . . . 336.8 Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336.9 User testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

7 Future work 35

8 Conclusion 36

A Scientific evaluation 39

A.1 Evaluation 1 - Questionnaire . . . . . . . . . . . . . . . . . . . . 39A.2 Evaluation 2 - Interviews . . . . . . . . . . . . . . . . . . . . . . 45A.3 Evaluation 3 - Interviews . . . . . . . . . . . . . . . . . . . . . . 49

B Sprints 52

C Prototypes 55

ii

CONTENTS CONTENTS

Abbreviations and explanations

Abbreviation ExplanationD3 D3 is a JavaScript library for visualizing data with HTML,

SVG and CSS.Git Git is a version control system. Git make it easier when

working with code projects in group.GitHub Github is used to save data in the cloud. This minimalises

the risk of loosing code.Heroku Heroku is a cloud application platform and is used to host

the application online.MEAN 2.0 It is a full-stack development toolkit of the JavaScript-based

technologies MongoDB, Express.js, Angular 2 and Node.js.MongoDB MongoDB is a NoSQL database. MongoDB is free and open

source.Papertrail A cloud base service where all the logs produced by SUD is

saved.Socket.io Socket.io is a Javascript library enabling real-time event-

based communication.SUD Sanoma Utbildning Digital, a digital learning platform for

teachers and students in middle school.Trello Trello is a web-based project management application. It

was used to manage the backlog during the project.Ultrahook Ultrahook is a webhook used locally.Webhook A webhook is a HTTP callback that occurs when something

is triggered.

iii

1. Introduction

1 Introduction

This is a master thesis written at the Media Technology and Engineering -Master of Science in Engineering program at ITN1, Linkoping University. Thethesis has been done in collaboration with Frost2 and Sanoma Utbildning3.This following section will describe the background of the thesis work.

1.1 Sanoma Utbildning and SUD

Sanoma Utbildning (hereafter simply Sanoma) is a company situated in Stock-holm producing teaching material for teachers and students in middle schoolsince 1993. All literature is written by teachers and almost all employees areformer teachers. Sanoma are now testing a beta version of a new digital learn-ing platform in a number of schools providing learning material and exercisescalled SUD - Sanoma Utbildning Digital.

SUD is a digital learning platform with complete teaching materials. Studentscan read theory and do exercises just like they would do in a physical book(see figure 1). There are many different types of exercises for the students todo. Teachers can follow the students’ progress and results, both in studentand class level (see figures 2 and 3).

SUD is developed by Frost; a digital agency in Stockholm building mobileapps and web solutions. Sanoma is one of Frost’s clients and SUD is one ofthe projects Frost is developing for Sanoma.

1.2 Background and problem description

Sanoma wish to have an overview of what is happening in SUD. They wouldlike to have both real time data and statistical data saved over time. A list ofrequirement specifications is shown below.

• Total number of users in SUD right now

– How many of these that are teachers

– How many of these that are students

• Statistics saved over time of log-ins

1Department of Science and Technology2www.frostdigital.se3www.sanomautbildning.se

1

1.2 Background and problem description 1. Introduction

Figure 1: This is how SUD looks in theory and exercise view for a teacher. In this figure, theexercise panel is expanded, visible on the right side. The teacher can see exercises for a specificchapter: Kapitelovningar and interactive exercises: Interaktiva ovningar. In the left hand sidetheory about algebra is visible.

Figure 2: This is the progress dashboard for a whole class. Every row represents a studentsprogress in each of the chapters. The light blue colour in the progress bar represents unansweredquestions and the dark blue represents answered questions.

– A day view

– A week view

• Which of the books that are most used by the users

• Schools using SUD and where they are situated in Sweden

• How many real time exercises that have been started during the pastweek

This information is supposed to be displayed with a dashboard on a big screenat Sanoma’s office. They want this dashboard for their own sake to know whatis happening in SUD, but they also want to be able to show it to potentialcostumers.

2

1.3 Research questions 1. Introduction

Figure 3: This is the progress dashboard for a single student. On the top of the figure, progressbars for every chapter is visible. The light blue colour in the progress bar represents unansweredquestions and the dark blue represents answered questions. Below the progress bars the progressfor a particular chapter is visible, in this case the chapter 1. Statistik is selected. Each row isa sub chapter and each column is a exercise type. Each circle with a line means that the subchapter does not have exercises of that type, see Tabeller/Uppvarmning. A light blue circle is aexercise type with no progress, see Tabeller/Niva ett. A circle with multiple colours is a exercisetype with progress, see Avlasa och tolka diagram/Niva ett. The colours have different meanings:green = correct, red = incorrect, yellow = unassessed, gray = question with key and light blue= unanswered.

The data from SUD will be obtained from user logs. Unnecessary data will befiltered out and useful data will be processed and saved in a database. Thethesis will focus on how to visualize the data as user-friendly as possible. Ithas to be clear which data that is real time and which is statistical data. Sincethe dashboard mainly will be shown on a screen in an office, there will be noneor limited interactions with the visualization. Therefore it has to be intuitiveand easy to understand.

The project will be developed using agile methods and a user centered devel-opment technique. The sprints will be short and at least two user evaluationswill be held.

1.3 Research questions

• How can data from a learning platform be visualized to give relevantinformation for the product owners to see how the product is used?

• How can data from a learning platform be visualized to give relevantinformation for possible clients interested to buy the product?

• How can real time data and statistical data be combined together?

3

1.4 Limitations 1. Introduction

1.4 Limitations

The project will result in a web application, therefore it will require Inter-net connection from the user. The application will be developed with GoogleChrome as main web browser since it is the browser that the developers prefersand is the most used web browser according to Sitepoint [1]. Therefore, possi-ble errors occurring in other browsers will not be considered in development.

Except those provided from Frost, frameworks and development environmentsthat are free of charge will be used in the project.

4

2. Background and related work

2 Background and related work

This section describes the theoretical background to the thesis work. It wasused as a pre-study for the work.

2.1 Information visualization

Information visualization is the study of transforming abstract data to visualrepresentations easy for a user to understand [2]. One great benefit with datavisualization is the quantity of information that can be rapidly interpreted ifit is presented well. Visualizations can also reveal properties that were notanticipated and give the opportunity to understand huge amounts of data.

2.1.1 Cognitive mechanisms

The brain structure and cognitive mechanisms have enabled humans to achievethe huge knowledge that exists today [2]. However a person working withthinking aid tools is much more cognitively powerful than a person only work-ing with the thoughts. The tools can mean working with paper and pens orworking with advanced computer-based systems such as MATLAB. Visualiza-tions are an increasingly important part of cognitive systems, partly becausea person acquire more information through vision than all other senses com-bined. To improve a cognitive system, the search for data and possibility tosee patterns must be easier.

Graphic representations of data must be designed by adapting to human sen-sory capabilities in a way that important data patterns and elements can bequickly perceived [2]. The important data should be represented with graphicalelements that are visually distinct and therefore easy to find.

2.1.2 Perception

The human perception, the state of becoming aware of internal or externalstimuli or events, has an important role in visualization [2]. The degree towhich a data visualization effectively communicates depends on how well thevisual perception is considered. The human visual system seek for patterns.But if the patterns are presented in ways that do not consider the perceptionby the user, the patterns become invisible or misleading. At first, the hu-man vision extract features, orientation, color, texture and movement patters.Second, active processes in the brain divide the visual field into regions andpatterns such as regions of the same color or texture. By following the rules

5

2.1 Information visualization 2. Background and related work

of perception, data can be presented in ways that makes the important andinformative patterns stand out.

Further, the number of data components must be limited to seven at most in agraph [3]. More components cannot be held in short term memory and forcesthe user go back and forth between explanation and the components in thegraph. Also, preattentive visual attributes should be used when encoding thedata to make certain data stand out from the rest.

2.1.3 Data types

Generally data is categorized into two categories: quantitative and categorical.Quantitative data is the numbers that measure things and categorical dataidentifies what the numbers measure [4]. In a graph, the quantitative datarepresents the values and the categorical data can be text labels telling theuser what the values represent. Graphs almost always include at least onequantitative scale and one or more categorical scales.

As presented in [4], the interval of the data must be handled with care, oth-erwise the data may be presented incorrectly giving the user misinformation,see figure 4. The graphs illustrate the division between ages in a company,presenting it differently depending on the intervals. The graph to the left hasequal interval scales and the other one has unequal intervals. The intervalsshould always be equal for a correct presentation.

Figure 4: Both figures show the number of employees for different age groups working at acompany. The left figure show the data scaled with equal intervals and therefore showing thecorrelations correctly. The right figure show the data scaled unequal and different from the leftfigure. Therefore, changing the scale interval may lead to misinformation.

Data presentation has a number of possibilities. The choice of which graphto use should be motivated by identifying the quantitative message type andunderstanding the relationship between quantitative data and graphical meth-ods.

6

2.1 Information visualization 2. Background and related work

Data can also be time-oriented, meaning data that is connected to time. A re-quirement for achieving expressive and effective visualization is to consider thecharacteristics of the data to be presented [5]. Important aspects to considerare listed below:

• Linear time vs cyclic time: Linear time has a starting point anddefines a linear time domain from past to future. Many natural processesare cyclic such as the seasons and to visualize such phenomena a cyclictime domain can be used.

• Time points vs time intervals: Time points have no duration incontrast to time intervals that has an interval scaled time domain suchas days or years.

• Ordered time vs branching time vs time with multiple perspec-

tives: Ordered time intervals describe things that happen one after theother. Branching time facilitates description and comparison of alterna-tive scenarios with multiple time strands branching out. Can be used forproject planning and supports decision making where only one alterna-tive will happen. Time with multiple perspectives allows more than onepoint of view.

Figure 5: Different representations of a time-oriented dataset with cyclic behaviour. Demon-strating the benefit with a cyclic graph and the importance of correct parameterization. Left:time series plot where it is hard to recognize repetitive patterns. Center: spiral graph withincorrect parameterization, making it hard to see if any patterns exist. Right: spiral graph withcorrect parameterization making it easy to recognize cyclic patterns.

When looking for cyclic time patterns in a simple time series plot it is easyto recognize recurrent peaks in time, see figure 5 (left). But it is hard to seeif repetitive quantitative patterns exist. The spiral graph one the other handfocuses on cyclic characteristics by using a spirally shaped time axis. Thatmay reveal unknown periodic behaviour but requires correct parameterizationof the visualization method, see figure 5 (center and right). But finding thecorrect parameterization can be difficult for unknown data sets. One solutionis to spot patterns when animating through possible parameter settings [5].

7

2.2 Visualization techniques 2. Background and related work

All aspects listed are characteristics that influence the appropriateness of thevisualization methods and is a must for a properly insight into time-orienteddata [5]. Integrating appropriate interaction methods is also a key concern. In-teraction enable the user to re-parameterize and facilitate user tasks includingnavigation in time, search, comparison and manipulation.

Concluded, to achieve expressive and effective visual representations, it is re-quired to choose the appropriate techniques, parameterize them correctly andhave useful interaction methods.

2.2 Visualization techniques

Large amount of data are generated and stored in various formats. The is-sue today is how to represent this data and extract valuable knowledge [6].The goal of visualizing data is making huge amounts of complex informationaccessible and easy to understand for a user.

Choosing the correct graph is not an easy task, it has to give the correctmessage to the viewer. It is not the data, it is not the measure, it is themessage [7]. If visualizing the data incorrectly it can actually end in tragedy.In Stephen Few’s The Information Cannot Speak for Itself [8] he mentionedthat the 1986 explosion of the space shuttle Challenger [9] could have beenavoided if the potential risks of O-ring failure had been presented in a betterway. Now, most graphs and charts may not risk lives if being misleading but itis good to have in mind what could happen if a bad implementation is chosen.

2.2.1 Pie chart

A pie chart, also called circle graph, is divided into a number of sectionsdescribing a proportion in a whole quantity [6]. The proportions of the slicesare usually shown in percentage which can be effective when comparing oneslice with the rest of the slices in the pie chart. Figure 6 shows a basic piechart.

Pie charts have received a lot of criticism. Mico Yuk et al [10] presents intheir book Data Visualization for Dummies that searching for avoid pie chart

in a search engine will generate more than 1 million entries. However, if usedcorrectly pie charts can be very effective. There are two main points to beaware of when creating a pie chart:

• Do not have more than five slices - If the slices gets too small theviewer will ha hard time reading the graph and may risk to loose themain point.

8

2.2 Visualization techniques 2. Background and related work

Figure 6: A pie chart with six slices. Each slice have a different colour and the size in percent.The lilac slice is the biggest with 40% and the green is the smallest with 4%. The total percentagesums up to 100%.

• Do not have slices of relatively equal size - The point with a piechart is to compare the size of the slices. If the slices are too equal insize, the pie chart will not give much to the viewer.

2.2.2 Bar chart

Bar charts are the most common visualization method and is mostly used fordiscrete data [6]. Each bar represent an object in the database, the length ofthe bar represent the value of the data set. This type of chart is good to usewhen comparing activities that occurs within a period of time [7], for examplecompare sales between 2000 - 2004 where each year represent a bar (see figure7). Bar charts can easily be cluttered if comparing to many values. When theamount of bars is greater than eight, it should be considered using anothertype of graph.

2.2.3 Line chart

Line charts, just as bar charts, are one of the most commonly used in visu-alization [7]. Each dot in the line chart represent a value in the data set, aline goes through all dots to create a curve. A line chart’s message is clear, itshows weather a trend is increasing, decreasing or constant. With the usageof several data sets it is possible to compare different trends and see patterns,i.e if data set A is increasing, will data set B decrease and vice verse? Seefigure 8 for an example of a line chart. Just as with any graph, the number oflines should be limited. With too many lines the graph gets cluttered makingit hard to read.

9

2.2 Visualization techniques 2. Background and related work

Figure 7: This is a bar chart with five bars each representing a year. The length of the bar isbased on the value in the data set. A bar chart works very well when comparing values duringa period of time. This particular chart could represent sales between 2000 - 2004. The red barrepresenting year 2005 has the highest value and the lilac bar representing 2000 has the lowest.

2.2.4 Area chart

An area graph is similar to the line graph but with the area between the lineand the baseline coloured [7]. The most important segment should be placedat front and the others behind. Try to limit the segments to at most five. Ifthere are more than five segments, keep the four most important separate andcombine the rest to an ”others” category [7].

A problem with area charts is that any segment that is not upfront risk to gethidden behind other segments. One solution for this is to have transparentlayers, see figure 9.

2.2.5 Scatter plot

The graph to use when showing correlation is the scatter plot [4]. In a scatterplot each data point from the data set is drawn one by one. In a scatter plot itis possible to identify patterns and clusters in the data. For example, if a valueincreases does the other value increases or decreases in a similar manner? Itis also easier to identify data items that differ from the rest of the data [6].

In a scatter plot each point is defined by two parameters; position on the x-axis and on the y-axis. There is a similar chart called bubble chart where eachpoint has a third parameter; the area of the bubble. A scatter plot is shownin figure 10.

10

2.3 Usability 2. Background and related work

Figure 8: A basic line chart comparing two trends between 2000 - 2008. The green line isdecreasing between 2000 - 2005 and starts to increase after 2006. The blue line is mostlyincreasing between 2000 - 2007 and then a hard abatement after 2007.

2.3 Usability

The importance of designing good interfaces has become more apparent thelast years. But the human mind is still the same, meaning visual hierarchyis still applicable and patterns based on fundamental design principles are asvalid as they were twenty years ago [11]. However it is still not easy to designgood interfaces because users’ expectations is higher than they used to be. If asite is not fast enough or is not designed as the users prefer, they will probablyswitch to a competitor’s site instead. Hence the cost of designing a mediocreinterface is higher than it used to be.

2.3.1 Designing information graphics

Information graphics means data presented visually with the goal of givingknowledge to the user [11]. The purpose of information graphics for a user isto learn something. The designer need to know this and design thereafter. Theuser may want to find something specific or get an overview. The ability tosearch, filter and zero in on details is therefore crucial. Good interactive infor-mation graphics give the user the possibility to see how the data is organized,related and give possibility to rearrange and filter.

Further, a visual hierarchy build on the fact that the most important contentshould stand out the most and the least important should stand out the least[11]. The user should be able to distinguish the elements and deduce theinformational structure.

11

2.3 Usability 2. Background and related work

Figure 9: Left: An area chart comparing three trends. The most important segment is the blueone, hence why it is placed foremost. Behind the blue one there is a green and then a yellow. Aproblem with area charts is that segments can cover other segments that are behind. A solutionto this is to make the segments transparent, see the figure on the right.

Figure 10: This is a scatter plot. Scatter plots are used to easy identify clusters and patternsin data. In this figure there is one big cluster and one point far off to the right. In scatter plotsthe data has two parameters, position on the x-axis and position on the y-axis.

The hierarchy can be set by changing text attributes such as size, color, weight,position etc. A user can ignore things that they do not think they need to lookat and only focus on the parts of the page that they think is important. Tocontrol the readers’ eyes as they scan a page, focal points are used. Focalpoints are spots the eyes cannot resist going to. That pulls the eyes to theright places in the right order. The visual flow in a page can be manipulatedby using implied lines or a call to action button.

How to arrange the visual attributes is presented by Jenifer Tidwell [11]. Shepresent the theory behind grouping and alignment that was developed early bypsychologists in the 20th century and are still used when designing interfaces.The theory was put into a number of gestalt principles listed below.

• Proximity: Puts objects close to each other, making the viewers group

12

2.3 Usability 2. Background and related work

Figure 11: The five different gestalt principles. Top left is showing proximity: grouping thingstogether. Top right is similarity: the viewer group things depending on their shape, size, colouror orientation. Middle left displays continuity: the eye search for continuous lines and curvesby combing smaller elements. Middle left shows closure: searching for rectangles and blobs inwhite space. Bottom: All previous principles mentioned above combined to one.

them.

• Similarity: If objects look similar - having the same shape, size, coloror orientation, they will also be grouped and associated with each otherby the viewer.

• Continuity: Our eyes want to see continuous lines and curves formedby the alignment of smaller elements.

• Closure: Our eyes also want to see closed forms such as rectangles andblobs of whitespace. The viewer can perceive an incomplete object byfilling in the missing information.

These design principles are built on the human visual system and how it re-sponds cognitively to certain inputs as explained in sections 2.1.1 and 2.1.2.See figure 11 to understand the principles further.

13

2.3 Usability 2. Background and related work

2.3.2 The Visual Information Seeking Mantra

One popular guideline to follow when designing information visualization is”The Visual Information Seeking Mantra”, presented by Ben Shneiderman in1996 [12]. The mantra describes how data should be presented to users to be aseffective as possible. The mantra follows: Overview first, zoom and filter, then

details-on-demand. The mantra can be expanded to seven high level abstracttasks:

• Overview: Get an overview over the entire collection

• Zoom: Being able to zoom in or out on point of interest

• Filter: Filter out uninteresting data

• Details-on-demand: Select data and get more details

• Relate: See relationships between data

• History: Being able to go back to previous steps

• Extract: Allow users to extract data

Since it is guidelines, it only gives a direction on what to think about whendesigning information visualization. Not all of the tasks can be applied onall applications. Craft and Cairns discuss the importance of Shneiderman’smantra in their paper ”Beyond Guidelines: What Can We Learn from theVisual Information Seeking Mantra” [13]. They describe the mantra as aguideline that serve as recommendation for a certain approach to a particularproblem. Even though Shneiderman’s mantra has been mentioned in numerouspapers there is no study to validate Shneiderman’s recommendations.

2.3.3 Colour

There are several factors to be aware of when choosing colour for an interfaceas presented by Jeff Johnson [14]. First of all, it is important to understandthe human colour perception. The way the human visual system is designedmakes it easier to distinguish differences in contrast between colours and edgesthan different levels of brightness. Edward H. Adelson [15] created the illusionshown in figure 12. It is a perfect example of the humans insensitivity toabsolute brightness and the sensitivity to contrast. Even thought it looks likesquare A and B have two different colours they are actually the same. SquareB appears to be brighter since it lays in the shadow of the cylinder.

The ability to differentiate colours depends on how they are represented. Thereare some factors to be aware of.

14

2.3 Usability 2. Background and related work

Figure 12: In the left image the shadow behind the cylinder creates the appearance thatsquare A is darker than square B. However, by looking at the right image it is clear that thisis not the case. This example shows the humans insensitivity to absolute brightness and thesensitivity to contrast. (Source: ©Edward H. Adelson, 1995 - Checkershadow Illusion, http://persci.mit.edu/gallery/checkershadow)

• Paleness: The less saturation two colours have, the harder it is forhumans to tell them apart.

• Colour patch size: The smaller an object is, the harder it is to seewhat colour it has. For example, if the lines in a line chart is to thin,the viewers will have a hard time separating which colour patch belongto which line.

• Separation: The more separated colour patches are, the harder it is todistinguish their colour from another.

When choosing colours for information visualization it is important to takecolour blindness in mind. Approximately 8% of all men and 0,5% of all womenhave some sort of colour blindness [14]. Fortunately there are colour-blindnesssimulators4 to use when picking colours. Figure 13 shows the colours in one ofthe earlier prototypes in different types of colour blindness.

John Johnson[14] ends his chapter about colour with a few guidelines to havein mind when choosing colours:

1. Separate colours using saturation, brightness and hue

2. Use distinctive colours: Red, green, blue, yellow, white and black

3. Avoid to pair colours that color-blind people cannot separate

• Do: Dark red-light yellow, dark blue-light green

• Do not: Dark red-black, blue-purple, light green-white

4Coblis color blindness simulator lets the user see how their images are per-ceived by those who are colour blind. URL: http://www.color-blindness.com/coblis-color-blindness-simulator/

15

2.3 Usability 2. Background and related work

Figure 13: This figure shows how the colours in a early version of the dashboard would beperceived in three different types of colour blindness. Top left: The dashboard in original colours.Top right: Protanomaly - weakness for red colours. Bottom left: Deuteranomaly - weakness forgreen colours. Bottom right: Tritanomaly - weakness for blue colours.

4. Use colour with other elements: Combine colours with other ele-ment, for example colour and a symbol

5. Do not place two strong colours right next to another: Guideline2 mentioned to use distinctive colours, but using them to close to eachother can be quite disturbing, see figure 14

Figure 14: Combining four very strong colours, blue, yellow, red and green, is not a recommen-dation. It gets to bright which can be disturbing for the viewer.

2.3.4 Pattern of behaviour

John Johnson [14] presents how humans have a cyclical pattern that appearsin many different activities: find a goal, execute to make progress towards the

16

2.3 Usability 2. Background and related work

goal, evaluate the actions to see if it worked, repeat until the goal is reached.

People runs through this cycle constantly and in different levels at the sametime. Bigger tasks can be divided into sub tasks. As an example, a typicaltask for a student who studies at Campus Norrkoping; drink a cup of coffee.The primary goal is to drink coffee, but to get there the goal has to be dividedinto sub goals; i.e go to Studentfiket and buy coffee. These sub tasks can bedivided into sub tasks.

Drink a cup of coffee:

1. Go to Studentfiket

(a) Calculate best route to Studentfiket

(b) Follow route to reach destination

2. Buy coffee

(a) Stand in line for the coffee

(b) Pour coffee in cup

(c) Pay for the coffee

After each sub task is finished, the sub task is evaluated to see if it helped toreach the sub goal. To have user cases like this when designing the layout ofan application is good. If it is hard or tedious for the user to reach its goals,then the user might stop using the application, which is usually not the goalfor the developers.

The main goal of the dashboard is for Sanoma to get an overview of their ap-plication. As mentioned in 1.2 Background and problem description, Sanomaamong others would like to know the amount of online users in SUD rightnow and how many of these that are teachers and students. These could beconsidered as a sub goal. When Sanoma is trying to achieve this sub goal theydo not want to confuse the values of number of users online right now with thevalue of users who logged in to SUD yesterday. Therefore it has to be apparentwhich value represent which goal.

2.3.5 Scientific Evaluation

Scientific evaluation is a key research challenge in information visualization[16]. The aims to perform an elevation study are many, see examples below.

• Evaluates strengths and weaknesses of different techniques

17

2.3 Usability 2. Background and related work

• Gives insight to why a special technique perform good

• Demonstrates that a new technique is better than an existing one

Initially, a research question should be decided depending on the aim of theresearch, since that will specify what to investigate and how [16]. The nextstep is to decide whether to examine performance of the same participants orcompare different groups. When using the same participants, the difference ofexperience, motivation and age is the same across all conditions. This is calleda related design or a within-subjects design. When comparison is betweengroups their scores are unrelated, called an unrelated design or a between-subject design. What kind of design to use is dependent of the number ofparticipants and the aim of the study. When testing how easy it is to perceivedifferent elements on a display, it is enough to use a within-subjects design.A within-subjects design is known to be more sensitive to small differencesbetween conditions and are more likely to detect differences if they exist. Butif the first task will affect the result in the following, it is important to use thebetween-subjects design. The number of participants should not be less then12-14 per group. It is also important to apply randomization and/or balancingthe participants to groups and conditions properly. Otherwise the outcome ofthe evaluation may be meaningless.

The tasks in the evaluation need to be representative, meaning it should aimtowards the intended users and have a data set as big and complex as theintended. Even though the test should strive to use real data, sometimes it ismore suitable to use a synthetic data set to control structures in the data.

Before conducting the evaluation, it may be relevant to collect backgroundinformation from the participants. For instance, color blindness and stereovision ability could affect the result. The participants should have understoodwhat they need to know and this should be tested before beginning with thetasks. Whether to be with the participant during the test is another issue. Itis usually best to leave the room and let the participant perform the test aloneto reduce stress and avoid having the participant asking questions. But by notbeing present, it is harder to control what happens. A pilot study should beconducted to refine the evaluation.

18

3. Method

3 Method

This section describes the different methods used in the development process.It discusses the methodologies used in development, the conducted user studiesand how the data was retrieved.

3.1 Development methodology

The project was developed with the agile development in mind. The projectwas divided in sprints of one to two weeks. Tasks was added and sorted inpriority in a backlog. Before every sprint started, a planning meeting was held.A list of the project’s sprints can be found in appendix B

Some of the typical agile tasks were not used in this project since the teamonly consisted of two persons. Examples of these tasks are backlog refinement,stand up and sprint demo. Instead of sprint demos, the team had a closecommunication with the customer and showed the progress of the applicationcontinually.

Coding was done both in pair and separate. Git and Github were used for ver-sion control in the project. The team strived to always have the master branchas a working version of the application, and every new feature was developedin a separate branch. To make sure the code withheld a high standard, codereviewing was performed before merging with the code on the master branch.

Trello is a web-based project management application used as backlog in theproject. In Trello, the project was divided into boards with the current sprint,what was under development, what was done and what needed to be doneahead. The tool facilitated the planning of the project together with a Ganttchart.

In the end of each working day, the team documented what they had done in adiary. The diary helped when looking back at what the team had accomplished.

3.2 User study

User evaluations were conducted during the development process to ensurethe final product would satisfy the customer’s needs and have a user-centereddesign by being easy to understand. Three evaluations were held, one ques-tionnaire and two sets of interviews.

A typical user of the dashboard is either an employee working at Sanoma,or a possible client. Depending on the role of the employee, the dashboard

19

3.3 Data retrieval 3. Method

will be a tool or an interesting information board. For an employee workingwith support the dashboard will give valuable information about when extraresources is needed. An employee working with market will on the other handuse the dashboard to see how well it is used and to market the applicationfor possible customers undecided whether to buy it or not. Most users willprobably only use the dashboard out of curiosity.

First, a questionnaire (see appendix A.1) was sent out targeting a large numberof people. The aim of the questionnaire was to complement the interviews heldlater in the process and to let some users do the evaluation alone with no stress,which was recommended in section 2.3.5. When closing the questionnaire 38persons had participated.

With help from the questionnaire, the prototype was updated before the secondevaluation was conducted (see appendix A.2). The evaluation was performedon a static prototype made in a prototype tool and was tested on the targetgroup: the employees working at Sanoma. The aim of the evaluation was totest how easy it was to perceive different elements on the display. Ten personsparticipated.

The third evaluation was done with the real prototype and tested on the em-ployees at Sanoma and Frost, but with new participants. The aim was onceagain to test how easy it was to understand the elements on the dashboardby measuring how long it took for a user to understand the charts. Thereforethe first impression was found as the most important task to test and it wasdecided to use a between-subjects design as explained in section 2.3.5. Tenpeople were interviewed.

3.3 Data retrieval

The data was collected from the logs produced by SUD. The application storedall logs in Papertrail, a cloud-hosted log management tool. In Papertrail,searches were saved for logs needed for the dashboard data, i.e when a userlogged in, logged out and used a book. For every search a web hook was added.Every minute the web hook checked if there were any new data, if there wereany it was sent to the dashboard. The data was stored in a mongoDB database.

20

4. Implementation details

4 Implementation details

This section discuss the frameworks and techniques used in development of theapplication.

As web framework, the MEAN framework was used. It is a full-stack de-velopment toolkit of the JavaScript-based technologies MongoDB, Express.js,Angular 2 and Node.js. The toolkit was used because it is well known and itbuild fast and maintainable web applications. MEAN.stack 2.0 indicates thatAngular 2 is used instead of its predecessor AngularJS. Another benefit withusing MEAN is the scalability which was an important aspect in the project.

MongoDB is NoSQL database who uses JSON-like document with schemas.To manage the database Robomongo was used. Robomongo is a free to usemangement tool. Node.js is lightweight and efficient, it is written in JavaScriptand built on Chrome’s V8 JavaScript engine. It is asynchronous event drivenand built to build scalable applications. It is commonly used in web applica-tions and therefore easy to find help online. The Express.js framework is aNode.js framework, it is de facto standard framework for server developmentand API for Node.js. Express.js served as the backend framework in the dash-board. As front-end framework, the recently released Angular 2 was used.Angular 2 is an open source JavaScript framework to build web applications.The framework consists of components, making it possible to create customHTML tags. TypeScript, Microsoft’s extension of Javascipt, allows the useof all ES2015 features, type checking and object-oriented features. Becausenot all browsers are compatible with ES2015 yet, TypeScript is compiled toJavaScript code. When working with real time updates, the framework hadthe advantage of only updating the affected graph instead of updating thewhole page.

D3, Data-Driven Documents, was used for the visualizations in the project. Itis a JavaScript library bringing data to life using HTML, SVG and CSS. As acomplement to D3, the library Ngx-charts were used. It is an angular 2 and D3chart framework. Because TypeScript did not accept all type checking fromthe D3 library, problems occurred when implementing examples from the D3webpage. Therefore it was time saving using the Ngx-charts library for some ofthe graphs. Even though it was a fast way of creating graphs in TypeScript, itwas restricted in how much it could be manipulated compared to the featuresoffered in the regular D3 framework. Therefore it was not used to the graphscontaining special features this framework did not offer.

The project required real time updates. For that, Socket.io and webhookswere used. A webhook is an HTTP callback that occurs when somethingis triggered; like an event-notification. The web application implementingwebhooks will send a HTTP POST message to a given URL when a specified

21

4. Implementation details

event happens. Instead of continually retrieve data without knowing if it isupdated with new values, webhooks retrieve data only when needed. It isa great tool when working with real time data. In the project webhookswere implemented connecting Papertrail who hosted all logs from SUD to theweb application. For receiving webhooks when running the dashboard locallyUltraHook was used. UltraHook makes it possible to receive webhooks behinda firewall. There were some problems with the UltraHook crashing, but sinceit was only used locally it was never a problem when running the applicationlive. Socket.io is a Javascript library for real-time web applications. It enablesreal-time event-based communication between web clients and servers. Thelibrary is popular among large companies such as Microsoft and Trello and isone of the most popular JavaScript frameworks on GitHub. It was thereforechosen to use for the project. When the application received a webhook fromPapertrail, the Socket.io library forwarded the data to the client side and thegraphs were updated with the new data.

22

5. Results

5 Results

This section describes the findings and modifications made from each of theevaluations conducted in the development of the dashboard. It also presentsthe final prototype of the dashboard.

5.1 First evaluation

A majority of the participants thought it was easy to distinguish the differentcharts. The questionnaire showed that the pie chart was the most popularand easiest to understand and the area graph was the most difficult. Theparticipants wanted labels on the axises on all graphs and wanted to know thesize of each slice in the pie chart, preferably in percentage.

Two of the total 34 participants were colour blind, but they did not find ithard to distinguish the colours. Most people liked the colour scheme in thedashboard, though some questioned the turquoise in the area chart and thecolours on the lines in the line chart.

When questioning if the participants wanted each bar in the bar chart to bestacked instead of just the one for the current day, 78% said yes.

Some got confused that the line graph showed data for the days after thecurrent day, it made it hard to understand which day that was the currentday. One participant gave the suggestion to always have the current day asthe last item on the x-axis.

After the questionnaire and meeting with the tutor the prototype was updatedto prototype 1.1. The colour in the area graph was changed from a gradient toa solid green. The number of online users was added to the real time markerto make it more apparent that it showed the same value as the pie chart. Alegend describing what the green area and black line represented was added.The heading was changed since some of the participants found it unclear.

In the bar chart, every bar was changed to stacked. The bar representing thecurrent day was given a darker colour than the other bars with the valuesdisplayed on the bar. To make it possible for the user to know the values forthe other bars, a tooltip was added when hovering. The item for the currentbar in the x-axis was rendered in bold to make it stand out.

In the line graph, the lines were changed to cyan, magenta and yellow afteradvise from the tutor. Just as with the bar chart the item for the current daywas changed to bold. The grid line for the current day was also made moreapparent. Finally, values and labels were added to the y-axis for clarification.

23

5.2 Second evaluation 5. Results

5.2 Second evaluation

Again, the participants found the area graph hard to understand because itboth showed activity for today and statistical data. They did not notice thelegend and thought the title was misleading. Another finding was that themean value may be misleading when the value is calculated with days theschools have holiday.

Like the respondents in the questionnaire, the pie graph showing number ofonline users was perceived as easy to understand and very often noted asthe most important graph. The bar graph showing number of online usersthe last week was found confusing for many respondents. Some respondentsdid not understand where the bar was that represented today. They meantthat it was hard to understand that the graph visualized both the last weekand the current week. They only wanted the days of the current week to beshown to understand better and faster. The same problem occurred in theline graph showing the books. From the questionnaire, the prototype had alsobeen updated with a hovering function to the bar chart, but very few noticedthat functionality.

In the line graph, the y-axis appeared as vague even though it was enoughfor most respondents only to see that the books differed from each other andnot exact numbers. However it was recommended to use a categorical datathat is more clear what it means and which is not free of interpretation like”popularity” is. One respondent also noted that the graph may look strangewhen it is a large difference between the books.

Depending on the area of responsibility the respondent had at Sanoma, theanswers were different on what level of importance the graphs had. The onesworking at support implied that the area graph showing the login activitywas the most important one. In contrast, the ones working in market andpublishing found the graph unnecessary. They thought the line graph withthe books and the pie graph with the number of online users were the mostimportant ones.

The settings in the menu was thought as general settings changing all graphs,and therefore it was suggested that the settings were placed next to the con-cerned graphs. Lastly, the numbers shown was told to be hard to know if itrepresented a large or a small value. The respondent wanted some kind of per-spective. Many of the respondents wanted to be able to compare the currentdata with other days or weeks to see patterns.

After discussion with the client, it was decided that the pie chart showingnumber of online users was the most important visualization. Therefore it wasplaced in the top left corner because that is the place a user usually first lookat. The large and bold text work as a focal point forcing the eye to go to that

24

5.3 Third evaluation 5. Results

graph first as told in the theory about visual hierarchy in section 2.3.

Most respondents associated all bars in the bar graph with each other. Thatwas probably due to the gestalt principle similarity listed in section 2.3 whichmay have made it harder to understand that they belonged to different weeks.By only showing data from the current week the risk of misunderstanding isreduced. This solution was implemented in prototype 2.0.

The settings to change the data shown was moved from the settings sidebar tothe concerned graphs. In that way the setting was grouped together with thegraph. And by having them close to each other, the user can more easily see thefeedback. This is because the eyes do not need to shift back and forth as toldin section 2.1.2 where it is explained that the short term memory aggravatethe understanding of what elements are connected. All modifications made toprototype 2.0 can be seen in appendix C.

5.3 Third evaluation

The area graph was the hardest to understand. But that was partly becausethe data was misleading due to problems with the logout functionality andthat the deployment hosting platform turned inactive if the application wasnot used. Other than that, the amount of time it took for the respondents toanswer the questions was quicker this time and the amount of problems thatoccurred was far less.

One respondent with colour blindness thought the lines in the line chart wasa bit hard to distinguish. It was proposed that the lines should be thickerfor clarification. Generally the colours were told suiting, but one respondentthought a gray background may give a sad impression.

Another respondent thought the titles was to long to read and proposed theyonly should contain one word to make it as easy as possible for the users.

When asked for more features to the dashboard, the respondents wished forvisualization of more books, the ability to filter out data, number of licensesbought and the time each user is logged in.

In the UX prototype, the lines in the line chart was made thicker. But due tothe limitations in the visualization framework, it was not implemented in thereal prototype. The real prototype was updated with a few design modifica-tions since the respondents had noticed issues during the evaluation.

25

5.4 Final prototype 5. Results

Figure 15: The final version of the dashboard. It contains four different charts: one pie chart,a combination of an area and line chart, a bar chart and a line chart. The pie chart shows thedistribution of online teachers and students, above the chart the total number of online usersis visible in big letters. The combined area and line chart shows the login activity during theday. The line shows the real time activity for the current day and the green area chart showsthe average activity on this week day four weeks back. The stacked bar chart shows the totalnumber of logged in users during the past week. Each bar shows the division between teacherand student similar to the pie chart. The line chart shows the usage for the three most usedbooks in SUD. Each grid line in the graph represents a day. The usage is measured in percentage.

5.4 Final prototype

The final implementation of the dashboard has four different charts, three ofthem visualize login activity on some level and the forth shows the usage of thethree most popular books, see figure 15. An information-icon is located in theupper left corner, when clicking on it a panel slides out and shows informationabout the dashboard.

A pie chart was used as graph to represent online users, see figure 16. Thewhole graph represent the total number of online users and the slices are di-vided by teachers and students. Next to each slice is a popover displaying thepercentage value. Instead of using regular boxes as legends two foxes are used.

The graph showing the daily login activity is a combination of two charts, seefigure 17. The real time data is a line that updates every minute showingthe number of online users during the day. The statistical data is showing theaverage activity based on the current weekday four weeks back. The statisticaldata is represented by an area graph that is regenerated every day. The real

26

5.4 Final prototype 5. Results

Figure 16: The pie chart showing the distribution of teachers and students online right now.A label next to each slice shows the percentage amount. Above the chart the total numberof online users is shown in numbers. Students is represented by orange and teachers by blue.Instead of using a regular legend with boxes, a orange and blue fox were used.

Figure 17: The combined area and line chart. The line is showing the login activity for thecurrent day and is updated in real time. A vertical line with the current time and online users isshowed next to the real time line. The green area segment represent the average login activitybased on the current week day four weeks back.

time line has a vertical line with the current hour at the top and number ofonline users in brackets underneath.

A stacked bar chart was chosen as chart when showing the weekly login activity,see figure 18. When hovering above the segments a pop over shows the exactvalue of that segment. The colours of the teacher and student segments arethe same as in the pie chart and the legend has two foxes replacing the regularboxes. The value on the x-axis represent weekdays and the value on the y-axisrepresent the total number of logged in users. The y-axis re-scales dependingon the max value of the data set.

A line chart was used to represent top three most used books, see figure 19.The chart displays at most three lines were each line represent a book. When

27

5.4 Final prototype 5. Results

Figure 18: A stacked bar chart is representing the login activity during the week. Each barrepresents a day, were the blue part is number of teachers logged in and the orange part isnumber of students logged in. Replacing an ordinary legend with boxes, two foxes were used.One blue for teachers and one orange for students.

hovering over a grid line a popover displays the values of the lines on thatparticular grid line. As with the bar chart, the x-axis represent the days of theweek and the y-axis represent the percentage usage. The range on the y-axisgoes from zero to the max value of the data set, which naturally cannot behigher than 100%. The y-axis re-scales depending on the max value of thedata set.

The colours in the dashboard are rather soft. The background colour is a lightgray and each of the charts are surrounded by a white box. Apart from theline chart in the daily login activity and the highlighted grid line in the bookchart being black, no harsh colours were used. See figure 20 for all the coloursused.

28

5.4 Final prototype 5. Results

Figure 19: A line chart with tree lines represent the top three most used books during the week.The usage is measured in percentage. The grid line for the current day is black to highlightwhich day it is.

Figure 20: This is the colours used on the dashboard. The orange colour represent studentsand the blue represent teachers. The green is used in the area chart representing average loginactivity during the day. The cyan, magenta and yellow is the colours used in the line graph. Thelight gray one is used as background colour. Other than these colours black and white was alsoused.

29

6. Discussion

6 Discussion

This section discuss the visualization techniques and frameworks used in theproject together with alternative suggestions.

An important aspect when choosing visualization techniques was that the userswere not familiar with visualizations. The visualizations needed to be simpleto understand and this was considered in the process.

6.1 Online users - pie chart

The pie chart showing the number of online users was the most popular graphin all of the evaluations. As mentioned in section 2.2, the pie chart has receiveda lot of hate, probably because of it being miss used. However, in this case apie chart is the perfect choice. Since it only compare two properties and thechance of both slices being equal size is small, it will not break any of the twomain points in subsection 2.2.1. An alternative to using a pie chart would beto use a bar chart, either two separate bars or a stacked bar.

6.2 Daily login activity - area chart combined with line

chart

In the chart showing the daily login activity, the goal was to make it easy forthe user to follow the login activity during the course of the day and at thesame time being able to compare it with how it usually is. This will make itpossible for the user to identify patterns and if something is out of the norm.

This was the chart most participants in the evaluations thought was difficultto understand. Probably because it is a mix of two visualization techniques,a line- and an area chart. Instead of the real time data being represented asa line, it could also have been represented as an area chart. Most users haveseen an area chart before and know how to read it. But as mentioned in 2.2.4,a problem occurring with area charts having several segments is that the oneupfront might cover the ones in the back. By making the segments transparentthe problem with the foremost layer covering the others can be reduced. Seefigure 9 for an example. Even if it is possible to see the green and yellowlayer through the blue it is still not a perfect solution. By having the samevisualization technique on both the real time data and the statistical data, itmay have been harder to separate the data from each other. Therefore it waschosen to have two different visualization techniques.

30

6.3 Weekly login activity - stacked bar chart 6. Discussion

6.3 Weekly login activity - stacked bar chart

Instead of using a stacked bar chart showing the weekly login activity, onepossibility would be to have two bars for each day, one representing teachersand one representing students. This would have doubled the number of barsfrom seven to fourteen, and according to section 2.2.2 it is not recommendedto use more than eight bars. Also, the user would loose the ability to see thetotal number of users that day without adding the teacher and students bar.

Another possibility is to display the the data in a spiral graph, see section 2.1.3.Since the data is cyclic a spiral graph could have been used. A spiral graph canbe used to show periodical behaviors that are hard to see in a regular bar chart.However, a spiral graph need to be parameterized correctly to show patternsand is not something a common user have experience of. It might take to longfor the user to interpret what the graph is displaying. As mentioned above,one important aspect is that the dashboard should be simple to understand,especially because the dashboard’s purpose is to get a quick overview of whatis happening in the application. Therefore a spiral graph was not considered.For a more analytic application used by a few amount of people responsible toanalyze the activity more deeply, a spiral graph may be a good choice.

6.4 Top three most used books - line chart

In the line chart visualizing the top three most used books, each of the books isrepresented by a line. A problem with this chart was to decide what quantityto have on the y-axis. The usage is measured by how many times users haveinteracted with the book. In the first prototypes no numbers were visible onthe y-axis, this was changed to actual usage numbers after feedback from thefirst questionnaire. The first evaluation showed that this was not an optimalsolution, what does it mean when a book has 168 usages on a Monday? Per-cental usage is easier to understand, hence the value on the y-axis was changedto this.

The choice of using a line chart was simple since the charts purpose is tocompare three different data sets during a time span. A stacked bar chartcould have been used as with the Weekly login activity-chart. However in thecase with the weekly login activity, the user is interested in the total number ofactivity per day and how many of those that are teachers and students. Thisis not the case with the book chart. In this case the user would like to comparethe usage of three books, they do not want to know the total percentage usageof these three books every day.

31

6.5 Colours 6. Discussion

6.5 Colours

Both the online now-chart and weekly activity-chart are displaying studentand teacher data, therefore they both have the same colour scheme. SUD isinternally called FOX among Sanoma and developers at Frost, hence there arefoxes on the dashboard.

The colours for the daily activity and book chart were chosen so they wouldnot be confused with the teacher and student colours. In the daily activity-chart the average has a light green colour and the real time line is black. Thebook-chart have soft versions of cyan, magenta and yellow.

One of the participants in the third evaluation thought that the gray colourcould give a sad impression. Some other alternatives were tested, but nonewas as good as the gray one. The gray colour works very good with theother colours in the dashboard, when changed the other colours were perceiveddifferently. If the background colour were to be changed, the other coloursshould be looked over as well.

In all of the evaluations a total of four participants were colour blind. One hadsome problem separating the blue and purple lines in the book chart, this couldbe fixed by making the lines thicker. Other than that none of the participantsgave any negative feedback on the colours.

6.6 The charts overall

In the earlier prototypes the bar- and line chart showed data for seven days,e.g if the current day was Wednesday the charts would show data for the pastThursday - Sunday after Wednesday. The questionnaire and first evaluationshowed that many was confused by this. To solve this there were two alterna-tives considered; 1. only show data from Monday to current day or 2. alwaysshow the current day outermost on the x-axis.

Choosing the first alternative means that the user cannot compare the currentday with past days if it is Monday, however the previous problem with usersconfused by data after the current day wont be a problem any more. Choosingthe second alternative will make sure that the user always can compare thecurrent day with past days. A problem with this alternative is that is does notshow weekdays in a regular order, this could cause the users to get confused.If a user want to see the data for Thursday in a bar chart he or she wouldprobably look at the forth bar, but if the current day always is outermostThursday may not be the forth bar. This could result in the user reading datafrom the wrong bar or having to read all ticks on the x-axis to find the soughtbar. In the final prototype the first choice was implemented.

32

6.7 Development process 6. Discussion

6.7 Development process

In the early stages of the project Herkou was chosen as deployment platform.It was simple to use and have a free version available. The problem withusing the free version of Heroku is that it falls asleep after 30 minutes ofinactivity, that is if no web hook receives any call within 30 minutes. Theapp gets activated again when Papertrail send new data to the app. However,when being activated again it misses the call from Papertrail that awoke theapplication and no data is saved in the database. Suppose that every call fromPapertrail would be 35 minutes apart, then the app would fall asleep betweenevery call and hence only get woken up by the next call. If this was the case,no information would be saved in the database and the dashboard would showno data, which is far from desirable.

The problems with Heroku can be solved, but in the end Sanoma will probablyuse another platform when deploying the dashboard. Therefore the time spenttrying to fix Heroku-problems might have been unnecessary.

6.8 Frameworks

Two visualization frameworks were used for the project, D3 and ngx-charts. Atfirst, problems occurred when implementing D3 in TypeScript and alternativeswere investigated. Ngx-charts was found easy to implement and time-saving.But as more features and design choices were to be implemented, ngx-chartswas restricted and hard to manipulate beyond the given features. In the end,D3 was used for the most complicated chart and the ngx framework was usedfor all others.

Using the MEAN-stack as development toolkit turned out to be a good choice.Since it is well known and used by many, a lot of information and tutorials areavailable online. Angular 2 uses TypeScript instead of JavaScript, this causedsome problems with libraries not yet supported by TypeScript. This was nota major problem since there were plenty of alternative libraries.

6.9 User testing

For the evaluations, it was chosen to use a between subjects design, see section2.3.5. The advantages of testing the first impression was considered moreimportant than testing if the same participants recognized the changes madeto the dashboard in the second test. The dashboard’s purpose was partlyto attract new customers, requiring the dashboard to be easily understood.An advantage to use a within subjects design is that the conditions are the

33

6.9 User testing 6. Discussion

same among the participants. But the groups in the tests were deliberatelychosen from different departments to have a bigger range of experience ofvisualizations. In that way, the dashboard could be tested if it satisfied bothexperienced and inexperienced users. The range of experience gave a wideramount of feedback but may have had a negative impact on the focus of makingthe dashboard easily understood. An experienced user may notice and focuson different things than an inexperienced user.

The evaluations included questions the participant answered, making the par-ticipant focus on the tasks rather than exploring the dashboard. Because ofthis, it was never investigated how the experience was for a user seeing thescreen for the first time in the office. Hence it is not known if the dashboardis perceived interesting and easy enough for a user to stay and look at for awhile. The reason for using questions in this case was to have more controland test the user scenarios.

34

7. Future work

7 Future work

Problem occurred when tracking the log-outs from the application becausemost users do not actively log out, they close the window and let the sessionrun out. Therefore the number of online users is not correct in the dashboard.For future work this should be recognized. As a suggestion, the users can betracked to see if they are inactive or not. Another solution is to set a timer forhow long a user usually is online. The different solutions should be discussedwith the client.

In the problem description 1.2, a list of requirements show what the dashboardshould visualize specified by Sanoma. The two last items, schools using SUD

and where they are placed in Sweden and how many real time exercises that has

been started during past week, was not prioritized as high as the other items onthe list, hence they the are not in the final prototype. However, it is featuresto consider adding to the dashboard in the future.

Requests of having more statistical data came up during the user tests andshould also be considered for future work. The users wanted to be able tocompare the current day or week with earlier occurrences. The ability tocompare with earlier weeks was put in the design but not implemented in thefinal product. The users also requested the ability for them to choose book tocompare because their book of interest may not be one of the top three listedin the dashboard.

The importance of having user interaction in visualizations is mentioned re-peatedly in theory. The ability to rearrange and filter is crucial when designinginformation graphics as mentioned in section 2.3. Hence the dashboard shouldbe considered to be further developed with the features mentioned which im-plicate user interaction. It is still important to keep the dashboard adaptedfor no user interaction. In that way the dashboard can both be shown on ascreen in the office and be a tool to interact with on a computer.

The framework ngx-charts was efficient but restricted in case of modifyingdesign and functionality. However, the D3 framework provided large opportu-nities for manipulating and styling and should be implemented on all graphsin further development.

35

8. Conclusion

8 Conclusion

The aim of the thesis was to create a dashboard visualizing the events hap-pening in a learning platform. The dashboard should be easy to understandand give relevant information for both employees at Sanoma and possible cus-tomers interested in buying the product. The resulting application combinevisualizations of real time data and statistical data in shape of a dashboard.The application fulfills most of the requirements given by Sanoma and henceshow relevant information for the product owners. It shows the online activityand popular books used with possibility to more features and is proven easyto understand from user tests.

Answering the research questions, to visualize relevant information about howthe product is used for the product owners, the data should be chosen from thecriterion’s given. It should also be visualized in a way that is understandablefor a user not experienced with visualizations. It can be gained by using simplevisualizations and should always be user tested. As proven in the user testsmade for the thesis, the combination of real time data and statistical data inthe same graph may confuse inexperienced users and should be designed withcare if used.

The online activity also provide relevant information for clients interested inbuying the product. If the product has many users, it will presumably indicatethat the product is popular. This assumes that the product is used by anamount of users large enough to attract customers.

Finally, the application was appreciated by Sanoma and had potential to bedeveloped further.

36

REFERENCES REFERENCES

References

[1] Sitepoint - browser trends January 2016, Retrieved:2017-02-10. Available from: https://www.sitepoint.com/browser-trends-january-2016-12-month-review/

[2] Ware C. Information Visualization: Perception for Design, Third edition.Morgan Kaufmann, 2013

[3] Few S. Tapping the Power of Visual Perception. Intelligent Enterprise.2004, Vol. 7 Issue 13, p. 33-37

[4] Few S. Eenie, Meenie, Minie, Moe: Selecting the Right Graph for YourMessage. Intelligent Enterprise. 2004, Vol. 7 Issue 14, p. 35-39.

[5] Aigner W, Miksch S, Muller W, Schumann H, Tominski C. Visual Methodsfor Analysing Time-Oriented Data. IEEE Transactions on Visualization

and Computer Graphics 2004, Vol. 14, Issue 1, p. 47-60.

[6] Khan M, Khan S. Data and Information Methods, and Interactive Mech-anisms: A Survey. International Journal of Computer Applications, 2011

[7] Gene Zelazny, Say It With Charts: The Executive’s Guide to Visual Com-munication, Fourth Edition, 2013

[8] Few S. The Information Cannot Speak for Itself. Intelligent Enterprise.

2004, Vol. 7, Issue 11, p. 20-27.

[9] The 1986 Challenger explosion, Retrieved: 2017-03-30. Available from:http://www.history.com/topics/challenger-disaster

[10] Mico Yuk, Stephanie Diamond. Data Visualization for Dummies 2nd ed.John Wiley & Sons, 2014

[11] Tidwell J. Designing interfaces. 2010

[12] Shneiderman B. The Eyes Have It: A Task by Data Type Taxonomy forInformation Visualizations. Proc. IEEE Visual Languages ’96, pp. 336-343,(1996)

[13] Craft B, Cairns P. Beyond guidelines: what can we learn from the visualinformation seeking mantra? IEEE Proceedings of the Ninth International

Conference on Information Visualization, 2005. p. 110–118

[14] Johnson J. Designing with the Mind in Mind: Simple Guide to Under-standing User Interface Design Guidelines. 2nd ed. Morgan Kaufmann Pub-lishers Inc.; 2014

37

REFERENCES REFERENCES

[15] Edward H. Adelson, 1995 - Checkershadow Illusion, Retrieved: 2017-06-01. Available from: http://persci.mit.edu/gallery/checkershadow

[16] Forsell C. A guide to Scientific Evaluation in Information Visualization.IEEE, 14th International Conference Information Visualisation, 2010 p.162-169

38

A. Scientific evaluation

A Scientific evaluation

In this appendix all information from the evaluations are gathered. Eachsection begins with the questions or tasks from that specific evaluation andends with an summary concluded afterwards.

A.1 Evaluation 1 - Questionnaire

This appendix include the questions and the conclusions from the question-naire. Question marked with an * was mandatory to answer.

Del 1 - BakgrundDetta ar en enkat for ett examensarbete i Medieteknik pa Linkoping Univer-sitet.

Exjobbet gar ut pa att skapa en panel som visualiserar aktiviteten i en digitallaroplattform. Datan kommer dels att visas som statistisk data men aven attuppdateras i realtid. Fokus ligger pa hur manga som ar inloggade, vilken tid padygnet plattformen anvands och vilka larobocker som anvands mest. Panelenska visas pa en skarm pa kundens kontor for att visa hur plattformen anvandsoch for att kunna visa for deras potentiella kunder.

• Alder*

– Yngre an 20

– 20 - 25

– 26 - 30

– 31 - 40

– 41 - 50

– Aldre an 50

• Sysselsattning*

– Studerar

– Jobbar

– Arbetslos

– Pensionar

– Foraldrarledig

– Annat

• Ar du fargblind?*

39

A.1 Evaluation 1 - Questionnaire A. Scientific evaluation

– Ja

– Nej

Del 2 - Overblick

Figure 21: Questionnaire. Left: Alternativ 1. Right: Alternativ 2.

• Prototypen ska framst fokusera pa hur manga som ar inloggade just nuoch hur antal inlogg har sett ut tidigare. Vilket av upplaggen tycker dubast representerar detta?*

– Alternativ 1 (See figure 21, to the left.)

– Alternativ 2 (See figure 21, to the right.)

• Vad fokuserar du pa forst i alternativ 1?*

• Vad fokuserar du pa forst i alternativ 2?*

• Ar det latt att forsta skillnaden mellan diagrammen i panelen?*

• Hur upplever du fargvalet?*

• Om fargblind: Har du latt att sarskilja fargerna?

• Egen kommentar

Del 3 - Areagraf

• Ar det latt att forsta vad i diagrammet som representerar det genom-snittliga inloggningsantalet?* (See figure 22)

– Ja

– Nej

40

A.1 Evaluation 1 - Questionnaire A. Scientific evaluation

Figure 22: Questionnaire - Area graph

• Ar det latt att forsta vad i grafen som representerar antal inlogg idag/justnu?* (See figure 22)

– Ja

– Nej

• Egen kommentar

Del 4 - Linjegraf

Figure 23: Questionnaire - Line graph

• Ar det enkelt att folja hur en bok har anvants under veckan?* (See figure23)

– Ja

– Nej

41

A.1 Evaluation 1 - Questionnaire A. Scientific evaluation

• Ar det enkelt att se hur de olika bockerna skiljer sig at varje dag?* (Seefigure 23)

– Ja

– Nej

• Egen kommentar

Del 5 - Cirkelgraf

Figure 24: Questionnaire - Circle graph

• Ar det enkelt att forsta vad diagrammet representerar?* (See figure 24)

– Ja

– Nej

• Vilken farg i cirkeldiagrammet representerar larare?* (See figure 24)

– Orange

– Bla

• Tycker du att cirkeldiagrammet ger en tydlig bild over uppdelningenmellan larare och elever?* (See figure 24)

– Ja

– Nej

• Egen kommentar

42

A.1 Evaluation 1 - Questionnaire A. Scientific evaluation

Figure 25: Questionnaire - Bar graph

Del 5 - Stapeldiagram

• Ar det enkelt att avlasa vardet i varje stapel?* (See figure 25)

– Ja

– Nej

• I diagrammet ar stapeln for onsdag uppdelad i tva eftersom att det arden aktuella dagen.* (See figure 25)

– Jag vill att alla ska vara uppdelade

– Jag vill inte att nagon ska vara uppdelad

– Jag tycker att det ar bra som det ar nu

• Egen kommentar

Summary of the first evaluation

The questionnaire was closed two days after it was sent out. 34 persons par-ticipated.

• 90% ar antingen studenter eller jobbar

• 2 av de 34 svaranden var fargblinda

Areagraf

• Grafen som ar svarast att forsta

43

A.1 Evaluation 1 - Questionnaire A. Scientific evaluation

• Borde ge axlarna rubriker

• Tydligare visa att det ar en realtidskurva (kanske en rod linje?)

• Ha kolon pa klockslaget istallet for punkt

• Tar ett tag att forsta grafen, men sedan ar det uppenbart vad den rep-resenterar

Cirkeldiagram

• Det allra lattaste att forsta!

• Vill ha procent eller siffertal pa pajbitarna

Stapeldiagram

• De flesta vill att alla ska vara uppdelade

• Alla utom en ville att det skulle vara uppdelat (antingen alla dagar ellerdagens dag)

• “Dock kanns det allra mest relevant att se den har infon under areagrafenda man vill veta vilken tid pa dygnet man ar mest trolig att fa kontaktmed en viss person”

• Hur gor vi med siffrorna om de inte far plats?

• Vill kanske bade kunna se totala och uppdelade antalet?

Linjegraf

• Hyfsat enkel att forsta

• Svart att veta vad y-axeln representerar

• Kanske prick pa dagarna vid varje streck?

• Svarfoljt eftersom veckan ar splittrad (Om det ar onsdag finns data franforra torsdagen kvar)

• Tjockare linjer for att gora det tydligare

Fargval

• Fargerna i linjegrafen passar inte riktigt med resten

44

A.2 Evaluation 2 - Interviews A. Scientific evaluation

• Gillar inte fargen i areagrafen, for skrikig/hen forstar inte varfor vi harvalt den fargen

• Ingen farg star inte ut/mesigt och andra tycker det ar bra med kontrast

• Fargerna i linjegrafen inte lika dova som resten

Layout

• Alternativ 1:

– Popularast

– Fokuserar pa de 2 ovre graferna (area och pie, ”antal inloggade”-texten vid pie chart).

– Kanske behover fundera pa fargvalet. Varfor turkos?

• Alternativ 2:

– Fokuserar mest pa stapeldiagrammet eller areagrafen

• Folk gar pa farger och den stora texten for antal inlogg

• De flesta tycker att det ar latt att sarskilja diagrammen

• Nagra sager att de inte ar sa latta att skiljas at

Ovrigt

• Varfor spetsigt i linje och mjukt i area?

A.2 Evaluation 2 - Interviews

This appendix shows the tasks and questions asked to the participants duringthe first evaluation. The evaluation was written and held in Swedish.

Innan intervjun

• Forklara bakgrunden till varfor anvandartesten halls och information omprojektet.

• Fraga respondenten om det ar ok att spela in intervjun

Uppgifter

45

A.2 Evaluation 2 - Interviews A. Scientific evaluation

• Vad ar klockan just nu? (enligt prototypen)

• Hur manga ar inloggade just nu?

• Vilken dag verkar flest ha fysik?

• Dagens datum star uppe till hoger. Kan du pa nagot annat satt se vilkendag det ar idag?

• Vilken dag verkar flest anvanda plattformen?

• Var det fler eller farre som var inloggade idag runt kl nio jamfort medhur det brukar se ut?

• Ungefar vilket klockslag brukar flest vara inloggade?

• Vilken bok ar popularast pa tisdagar?

Fragor

• Gick det snabbt att hitta/forsta?

• Vad tycker du om fargvalen?

• Skulle du vilja att nagon graf bytte plats? Eller att det ar battre att haen annan graf?

• Tycker du graferna ger intressant information eller skulle du vilja ha enannan parameter pa nagon axel? (medelvarde/senaste veckan osv)

• Vilken var svarast/enklast att forsta?

• Finns det nagon irrelevant information?

• Finns det nagot du saknar?

• Vilken/vilka grafer tycker du ar viktigast/mest intressant? (dessa bordeda placeras pa basta stallet)

• Nagot annat du tanker pa?

Summary of the second evaluation

10 persons participated.

Areagraf

• Byt rubrik sa det blir tydligare att det galler en dag

46

A.2 Evaluation 2 - Interviews A. Scientific evaluation

• 30 dagar bakat eller senaste kalendermanaden?

• Realtid borde bytas ut mot “idag”

• For manga tar det lang tid att tolka grafen. Vad betyder det grona? Vadar strecket?

• Manga missar legend - forklaringsrutan

• Manga missar siffran 6190

– Vissa tyckte den var bra, andra tyckte att den var overflodig

– Vissa tyckte att den skulle ligga i jamnhojd med det svarta strecket

• Ha fler klockslag pa x axeln

• Genomsnitt kan vara missvisande (skollov, om det gar uppat el nedat)

• Vissa tyckte att den var irrelevant, “man vet redan att det kommer attvara ett glapp vid lunch osv”, supporten tyckte att den var viktig!

Cirkeldiagram

• Inga klagomal

• Bra med stora och tydliga siffror

• Ravarna olika stora eftersom lararkakbiten kommer vara minst

• Viktig och borde kanske ligga till hoger istallet och ev paras ihop medbar chart

• Funkar med ravar om det ar internt i Sanoma. Enligt marknads/forsaljningschefaven ok att ha sa infor kund.

Stapeldiagram

• Svarast - veckan otydlig

• Inte logiskt att tor-son syns tyckte manga. Forslag: dagens stapel langsttill hoger eller inga varden pa dagar framat.

• Markeringen av onsdag inte sa uppmarksammad.

• Kanske mojlighet att bladdra mellan veckor eller jamfora med annanvecka

47

A.2 Evaluation 2 - Interviews A. Scientific evaluation

• Kunna se totala antalet inloggade for en vecka (aggregerade5 varden)

• Byt rubrik. Forvirrar

• Inte alla som fattade hover-funktionen

Linjegraf

• Vad betyder popularitet?

• Kanske byta ut mot anvanda bocker

• Antal unika anvandare som anvant en bok istallet?

• Fixa till y axeln, vissa tycker inte ens att det borde vara siffor pa axeln

• Kan se konstigt ut om det ar stor skillnad mellan bocker, en person varosaker pa om vi kunde ha med denna graf alls.

Fargval

• Generellt gillade folk fargvalen.

• Lugna, dova, matta farger

• Matematik kanske blatt? Champ varmare?

• Bra att inlogg larar + elev haller samma fargskala

Layout

• Installningar borde inte vara en meny-ikon utan ett kugghjul

• Om vi tar bort installningar kan vi ha en info-ikon istallet

• Vissa ville kunna andra installning vid grafen.

• Installning i meny kan man koppla till att alla grafer andras (generellainstallningar)

• Ratt Sanomalogga

• Behovs datum undrade en person

• Beroende pa vad personer var intresserad av (jobbade med) tyckte deolika grafer var viktiga och darav borde ligga hogst upp.

5Sammanslagna

48

A.3 Evaluation 3 - Interviews A. Scientific evaluation

Ovrigt

• Tar tid att lasa rubrikerna - De borde ga snabbare att forsta!

• Hur vet man hur stor en siffra ar? Vill fa perspektiv.

• Statistik over laxor/real time/flipped

• Vill kunna fa total siffror - antal inloggade forra veckan, hur manga ijanuari, veta forhallanden mellan dessa siffror

A.3 Evaluation 3 - Interviews

This appendix shows the tasks and questions asked to the respondents duringthe third evaluation. The evaluating was held in Swedish so the tasks andquestions will be written in Swedish.

Innan intervjun

• Forklara bakgrunden till varfor anvandartesten halls och information omprojektet.

• Fraga respondenten om det ar ok att spela in intervjun

Uppgifter

• Vad ar klockan just nu? (enligt prototypen)

• Hur manga ar inloggade for tillfallet?

• Vilken dag verkar flest ha byt till aktuell bok?

• Dagens datum star uppe till hoger. Kan du pa nagot annat satt se vilkendag det ar idag?

• Vilken dag har flest personer anvant plattformen hittills denna vecka?

• Var det fler el farre som var inloggade idag runt kl nio jamfort med hurdet brukar se ut?

• Ungefar vilket klockslag brukar flest vara inloggade?

• Vilken bok anvandes mest igar?

• Det gar att lasa pa om vad dashboarden ar for nagot, var tror du attman kan gora det?

49

A.3 Evaluation 3 - Interviews A. Scientific evaluation

• Kan du ta reda pa hur manga elever som var inloggade i mandags?

Fragor

• Gick det snabbt att hitta/forsta?

• Vad tycker du om fargvalen?

• Vilken var svarast/enklast att forsta?

• Finns det nagot du saknar?

Summary of the third evaluation

10 persons participated.

Areagraf

• Svaraste grafen pga konstig data

• Eftersom realtidslinje lag langt over genomsnittet fokuserade testarnamest pa genomsnittet (grona fargen)

• Legend-infon lastes inte sa tydligt. Gjorde att vissa hade svart att forstavad som var vad.

• Genomsnitts-texten i legenden ar lang

Cirkeldiagram

• Enklaste grafen att forsta - alla hittade hit fort

Stapeldiagram

• Ingen forvirring kring barcharten denna gangen!

• De forstod att fargerna var andelen larare/elever

• Kanske hade varit bra med horisontella linjer langs med y-axeln for atttydligare se vardena pa staplarna

Linjegraf

• En del sager att de skulle vilja valja bocker som ska visas i grafen

50

A.3 Evaluation 3 - Interviews A. Scientific evaluation

• Har anvandes legend flitigt

Fargval

• tyckte att gratt ar en sorgsen farg, kanske byta till en gladare?

• Annars lugna farger, vissa tycker att fargerna pa bokgrafen ar for neoniga

• En som var fargblind hade lite svart att urskilja det lila och blaa strecketpa linje grafen, hade varit battre om de var tjockare

Layout

• En tittade med pa bilderna, laste inte texten

• En tyckte att rubrikerna var for langa, det tog for lang tid att lasa.Alternativ ar att skriva veckodag for areagrafen och veckonummer forbargrafen

Ovrigt

• Visa data per manad/ar/termin osv. Visa fler bocker. Kunna filtrera paklass, tidpunkt osv

• Ha en graf som visar kop av produkter (licenser osv)

• Namndes att aven om area grafen tar en liten stund att forsta blir detlatt sen

• Generellt hittade alla anvandare fortare bland graferna denna gang

• Flytta ner info-knapp sa att den syns battre

• Veta hur lange anvandarna ar aktiva i SUD. Ar de inloggade i 10 mineller 1 h?

• Namndes att man inte behover veta exakta siffror pa alla grafer och attdet darfor ar bra som det ar

51

B. Sprints

B Sprints

A list of the sprint goals during the project.

Sprint 1: Vecka 7-8 (13/2 - 1/3)

• Ta fram enkel prototyp

• Satt upp hemsida: papertrail, angular 2, d3 exempel, Heroku

• Undersoka loggar

• Las om d3 och angular 2

Sprint 2: Vecka 9 - 10 (1/3 - 10/3)

• Fortsatt med prototyp

• Satt upp hemsida 2.0

• Hantera loggar

• Spara till databas

• Strukturera upp server/backend

• Skicka data fran server.js till egen kod

Sprint 3: Vecka 11 (13/3 - 17/3)

• Gor klar ux prototyp

• Lagg in D3 grafer

• Fixa Heroku

• Inte spara dubbletter i databas

• Forbered anvandartester

Sprint 4: Vecka 12 (20/3 - 24/3)

• Las om UX och skriv i rapport

• Forbered intervjuer

52

B. Sprints

• Skicka ut formular och utvardera resultat

• Fixa layout av d3 grafer

• Testa lagga in riktig data i prototyp

• Ev hantera nya loggar (om det blir en release av SUD)

Sprint 5: Vecka 13 (27/3 - 31/3)

• Traffa Jimmy (blev inte av)

• Ga pa MTD

• Lagg in riktig data

• Fixa grafer

Sprint 6: Vecka 14 - 15 (3/4 - 14/4)

• Ha mote med Jimmy

• Ha intervjuer

• Lagg in riktig data

• Fixa grafer

• Utvardera anvandartester

• Halvtidskontroll via skype: datum ej bestamt

Sprint 7: Vecka 16 - 17 (17/4 - 4/5)

• Fortsatt med prototyp 2.0

• Skriv om anvandartester i rapport

• Fixa linjegraf

• Se varfor areagraf inte funkar for bada

• Styla grafer

• Fixa bar graph

Sprint 8: Vecka 18 - 19 (5/5 - 12/5)

53

B. Sprints

• Forebereda och ha anvandartester 2.0

• Fixa styling i samtliga grafer

• Ha mote med Jimmy

Sprint 9: Resten av exjobbet

• Skriva klart rapport

• Smafix pa dashboarden

54

C. Prototypes

C Prototypes

This appendix shows the different prototypes of the dashboard during theproject. Prototype 0 - 2 was made in a prototype tool.

Prototype 0.0 - First draft showed for Sanoma, see figure 26. This was thebase for the following prototypes.

Figure 26: Prototype 0 - the first draft of the dashboard.

Prototype 1.0 - First official prototype, see figure 27. The colour in the areachart was changed to a turquoise colour. The colours in the line graph werealso changed. This is the prototype used in the questionnaire.

Prototype 1.1 - With feedback from the questionnaire and tutor prototype 1.1was made before the first evaluation at Sanoma. See figure 28.

The colour in the area chart was changed once again, this time to a solid green.The heading was changed and a legend was added. The number of online userswere added below the time on the marker for real time data.

Bubbles with percentage size of the slices in was added to the pie chart.

The bars was updated so that all were separated. To highlight which day itis, the current day has darker colours and also numbers of how many studentsand teachers that has been online. When hovering over a bar that is not thecurrent day a label becomes visible showing number of students or teachersthat has been online that day, see figure 29. Also the day in the x-axis is bolder

55

C. Prototypes

Figure 27: Prototype 1.0 - The colours on the area and line chart were changed.

on the current day.

The colours in the line chart was changed once again. The header now indicatesthat the graph shows the three most used books. As in the bar graph thecurrent day in the x-axis is rendered in bold, also the grid line for the currentday is more prominent. Numbers were added to the y-axis.

Labels were added to the y-axis on all graphs and on the x-axis on the areachart.

A menu icon were added in the upper left corner where users could accesssettings for the time interval on the two lower charts. The side bar also displaysa text about the dashboard, see figure 30. The hour were below the date inthe upper right corner.

Prototype 2.0 - This is the prototype with changed after the user tests, seefigure 31. The pie and area chart changed places.

The headings on the area and bar chart were changed to make it clearer theyboth shows the login activity, one with a day view and the other with a week-view.

The legend text on the area chart where changed. A toggle button were addedabove the legend for the user to switch between which day the average shouldbe based on.

This version only shows data until the current day in the bar and line chart.

56

C. Prototypes

Figure 28: Prototype 1.1 - The colour on the area chart were changed to a solid green colourand number of online users was added below the time. A legend was also added. Two labelsshowing the percental size was placed next to each slice in the pie chart. The colours on thebar chart were updated, all bars have colours and are stacked. All bars except the one for thecurrent day has toned down colours of the main orange and blue. The line chart has new colourson the lines and a value on the y-axis.

A toggle button was added to both graphs to switch between weeks.

The heading in the line graph was updated and y-axis was changed from actualnumber of users to percentage.

Since the time interval settings was moved to each separate graph the menubutton in the upper left corner was changed to an information button. Whenpressing the button the sidebar now only shows information about the dash-board, see figure 32.

The sanoma logo beside the information button was updated. The previousone was outdated.

57

C. Prototypes

Figure 29: Prototype 1.1 with hover over the bar showing number of students.

Figure 30: Prototype 1.1 with the settings panel expanded.

58

C. Prototypes

Figure 31: Prototype 2.0 - The chart on top has shifted places. The foxes in the pie chart arenow equal to size. The legend in the area chart is updated and a toggle button for toggle whichday to base the average on has been added. The bar chart and line chart only shows data untilcurrent day. A button for toggle between weeks were added to both charts. All bars have thesame colour and the bar for the current day has number for teachers and students. The valueon the y-axis in the line chart has been changed to percentage.

Figure 32: Prototype 2.0 - the settings panel has been changed to an about panel.

59