Evaluating and improving the user-interface of existing GIS-applications by the use of HCI evaluation techniques

(1)

DEGREE PROJECT, IN MEDIA AND INTERACTION DESIGN (MID) , SECOND LEVEL

STOCKHOLM, SWEDEN 2015

Evaluating and improving the

user-interface of existing

GIS-applications by the use of HCI

evaluation techniques

MARTIN ANDERSEN

(2)

(3)

Abstract

Geographical Information Systems (GIS) are large systems that handles, stores and manipulates geographical data. This report is based on the fact that GIS-applications, in general, tend to be quite complex and contain large quantities of data as well as lots of functionality. Because of this, it is a challenge to design a good user-interface for such applications and the ones who suffer from this are the users. Thereby, the motivation for this report is formed, which is about proposing improvements to a user-interface of existing GIS-applications in order to increase the users satisfaction with it. The GIS-applications that are the focus of this report are the applications of the company Digpro.

The question that attempts to be answered in this project is: "What can be done to improve the user-interface of existing GIS-applications from a general HCI-perspective and from the perspective of the users?".

The method for doing this is to research for theory about HCI, and also through interactions with the users. These interactions are done by using Query Evaluation Techniques in the form of interviews and questionnaires. By using the result of these Query Evaluation Techniques combined with the theory got-ten from the research, a number of improvement ideas have been developed and presented as mock-ups and concept sketches. These ideas have been evaluated using Heuristic Evaluation and a final prototype has been developed.

In the end, the final prototype is the result of this project. The prototype in-cludes all, but one, of the improvement ideas and shows the interaction between the ideas and the already existing user-interface. Further, since the prototype has been developed with a lot of regard for the users opinions in order to in-crease their satisfaction with the user-interface, the results are very much in line with the motivation for this master thesis.

(4)

Sammanfattning

Geografiska Informations System (GIS) är stora system som hanterar, lagrar och manipulerar geografisk data. Rapporten är baserad på att GIS-applikationer, ge-nerellt, tenderar att vara ganska komplexa och innehåller stora mängder data och mycket funktionalitet. På grund av detta, är det en utmaning att designa ett bra gränssnitt för sådana applikationer och de som får lida av detta är an-vändarna. Därigenom kommer motivationen för denna rapport, som handlar om att föreslå förbättringar till ett gränsnitt för existerande GIS-applikationer för att genom detta kunna göra användarna nöjdare med det. GIS-applikationerna som är i fokus för denna rapport är applikationer från företaget Digpro.

Frågan som försöker besvaras i detta projekt är: "Vad kan göras för att förbättra gränssnittet hos existerande GIS-applikationer från ett generellt MDI-perpektiv och från användarnas perspektiv?".

Metoden för att göra detta är att studera teorin bakom MDI, och även genom interaktion med användare. Dessa interaktioner görs genom

Fråge-utvärderingstekniker i form utav intervjuer och enkäter. Genom att använda resultatet från dessa Fråge-utvärderingstekniker i kombination med teorin från studien, har en mängd förbättrings-idéer blivit utvecklade och presenterade som mock-ups och konceptskisser. Dessa idéer har utvärderats genom att använda Heuristisk utvärdering och en slut-prototyp har utvecklats.

I slutändan, är slut-prototypen resultatet av det här projektet. Prototypen inkluderar alla, förutom en, förbättrings-idéer och visar interaktionen mellan dessa idéer och det redan existerande gränssnittet. Dessutom, eftersom prototy-pen har utvecklats med användarnas åsikter i åtanke för att göra dem nöjdare med gränssnittet, ligger resultatet i linje med motivationen för det här examens-arbetet.

(5)

Introduction

1.1 About Digpro

The company Digpro1offers multiple GIS-applications (Geographic Information System) for their users. The base for these applications is dpSpatial, which, a little simplified, is a database that handles, stores and presents geographical, or spatial, data which can be used for a number of different purposes. This leads to the applications of Digpro, which uses the functionality of dpSpatial to allow Digpro’s customers to use this data in various ways depending on which application is used. For example, dpPower is used to provide a graphical representation of power lines in a desired area while dpCom provides the same functionality for Telecom-wires. Further, these applications can be combined with a number of modules for further functionality.

The relationship between dpSpatial, the servers and the clients of Digpro can be seen in image 1.1 below. The client that will be in focus for this project will be the Java Applet.

The interface of the different applications all follow the same basic con-cept. Also, the main graphical components are the same across the applica-tions. Thereby, these similarities plays a huge part in how the user experiences the interface of the applications, and Digpro want to know what can be done to improve it.

(8)

Figure 1.1: Relation between database-servers-clients of Digpro

1.2 Problem statement

GIS-applications in general should be able to store and handle a lot of data. Further, they should provide a wide choice of functionality which should be easy and intuitive for all users regardless of how they use it. Thereby, the GIS-applications should provide a very simple and clean user interface which makes it possible for a user of the application to manipulate and navigate a geographic system with seamless effort.

However, this is not always the case. Because of the huge systems containing a lot of data and functionality, the problem of having a clean and simple interface is not easy to solve. This is a challenge but there are techniques that can be used to minimize this problem. By using Query Evaluation Techniques from the field of HCI, namely interviewing and sending out questionnaires to users of an application, it is easier to understand how the GIS-applications are perceived by the users.

The focus of the project is to evaluate and improve the user interface of existing GIS-applications by using Query Evaluation Techniques combined with HCI theory. This will be done by answering the following question:

What can be done to improve the user-interface of existing GIS-applications from a general HCI-perspective and from the perspective of the users?

1.3 Motivation

Since it is a challenge to maintain a good quality for the user-interface of GIS-applications, the ones that suffers from this are the customers. Thereby, the main motivation for this master thesis is to increase the customers satisfaction by formulating improvements for the user-interface of the applications. These improvements are based on scientific research in the area of HCI and customer interaction.

(9)

1.4 Intended readers

This master thesis is first and foremost intended to be read by students that are in their senior years of a university, preferably with a focus in science and/or technology.

1.5 Related work

The different techniques that will be used to gather information from users about the interface, interviews and questionnaires, are two common techniques in the category Query Evaluation Techniques in the field of HCI [14]. The techniques are widely used for evaluating different interfaces, and there are many works that are related to this project. An example of such a work is described in the paper by Alencar, Raposo & Barbosa from 2011 which can be seen in [12]. In this paper, the authors describes an evaluation they have performed of the usability of HybridDesk, which is a system for creating virtual environments. The technique they have chosen for doing this is a combination of multiple evaluation techniques. The authors sets up an experiment to test the usability of HybridDesk. The techniques for evaluating this experiment are, among others, interviews and questionnaires which in the end plays a big part in the results gotten from the experiment.

Another project which is quite similar to the one described in this report can be seen in [19]. This is a paper by Könik from 2003 in which the author describes an evaluation of a music software. The author uses HCI evaluation techniques very similar to the ones that will be used for this project, namely questionnaires and interviews. And even though her paper is more about the functionality of the software and not the interface, there is a clear focus on HCI and evaluation techniques which makes it closely related to this report.

(10)

Chapter 2

Background

2.1 About HCI

HCI, human-computer interaction, can be defined as the study of interaction between people and computers. This interaction is made at the user-interface of an application [18]. The main goal in the field of HCI is to develop a user-interface that is as usable and effective as possible, in the eyes of the users. In order to do this, there are three general dimensions in HCI: Theory devel-opment, engineering construction and evaluation techniques. The first phase, theory development, is about studying human perception and cognition in order to understand how people perceive and interpret things. Engineering construc-tion, which is the second phase, is about designing the desired interface. Many professional user-interface designers start with sketching some kind of layout for the interface on a paper at first. This helps in exploring and constructing the interface as a whole instead of refining small details in the beginning of the design-phase. Further in this phase, a storyboard is usually developed by num-bering the sketches and drawing arrows in them to show how the navigation and transitions of the application will look like. Lastly, some kind of prototype is preferably created before actually implementing the ideas for the user-interface into the system [3].

The last phase, evaluation techniques, is used to evaluate the designed user-interface from phase two [1]. Evaluation of a user-user-interface is a key-component in HCI [13]. It is used to identify any problems with the usability of the interface, and it is also used to collect information and to determine the satisfaction of the users [18, 13, 14].

2.2 Query Evaluation Techniques

When it comes to evaluating a user-interface, a number of different techniques and methods exist. There are empirical studies which are studies through obser-vations or measurements of the users. On the other hand there are analytic stud-ies which are studstud-ies for reasoning and working by analysing a user-interface. Further, there are qualitative and quantitative evaluations. The results from qualitative evaluations are usually reports containing detailed information about

(11)

a small number of users, while the results from quantitative evaluations are usu-ally numbers which can be used to compare a larger number of users [15].

Query Evaluation Techniques represents a specific category of evaluation techniques in the field of HCI. In this category, evaluation through question-naires and interviews are very common [14]. These techniques are an important part of the method for this project, which will be presented in more detail in chapter 3. In the section below, the techniques will be described, as well as their advantages and disadvantages.

2.2.1 Questionnaires

The advantage of using questionnaires as an evaluation technique for an appli-cation is that it provides a fast way of reaching out to many users. Furthermore, the results gotten from questionnaires are often quite simple to analyze, and to visualize in tables or diagrams. You can easily see what the users think of, for example, a feature of an application by simply letting the users rank the qual-ity of that specific feature with a value between 1-5 in the questionnaire. This makes it simple to get a quick overview of what features are good and which ones needs to be focused on to maintain the quality of the user-interface. Also, since the questionnaires usually generate a lot of answers from many users, the results can be considered quite reliable [14, 15].

The disadvantages of using questionnaires, on the other hand, is that it can be hard to know exactly what to do with the results. If the users say that the quality of a certain feature is "quite bad", it isn’t exactly clear what should be done to improve it or what the users think is bad with the feature. Hence, a big challenge with developing a good questionnaire is to make the questions as specific enough so that the results are useful and also non-specific enough so that the questionnaire still generates a lot of results and not takes too much effort and time to complete for the users.

To summarize, the best way to use this technique might be to confirm the results gotten from using other techniques, or to get a quick overview of the quality of the application. However, a good questionnaire can still provide very useful results on its own.

2.2.2 Interviews

Interviews as an evaluation technique for an application has the advantage of providing results that contain a lot of insight into how the users of the applica-tion actually perceive it. Through the use of interviews it might be more clear what is hard or intuitive for a user to understand, and it will be easier to un-derstand what should be done in order to improve a certain feature or a general aspect of the user-interface. Further, the results gotten can be quite easy to analyze, since the questions throughout these interviews are the same, only the answers differ. So, if some answers to the same question all point towards a common factor, you can understand that you need to focus on that factor [14]. The disadvantage of this technique is that it is quite time-consuming and that it is complicated to reach a very large number of people. Thereby, a small crowd will have to represent the opinions of all users, which might lead to bad results. Further, the results are very hard to visualize since the answers for the interview-questions will all be different [14].

(12)

So to sum up the features of using interviews as an evaluation technique, this technique is good to use when a deeper knowledge about how the users experience and perceive the user-interface is needed to improve it. But it should probably be combined with a quantitative evaluation technique which generates a larger number of results quicker.

2.3 About GIS

GIS stands for Geographic Information System which is a system for storing, manipulating and presenting geographical data. The GIS-applications are built upon a database which can store spatial, or geographic, data and the data can be presented to the user through the use of queries to the database. Say, for example, that a user wants to be able to see all electric lines in a certain area, a query will be sent to the database for retrieving that specific infor-mation and is then presented to the user by visualizing the inforinfor-mation on a map [7]. GIS-applications tend to be quite complex, as they usually hold a huge amount of spatial data, and should be able to handle it with good scala-bility [2]. The spatial data of the GIS-applications is mapped, or georeferenced, to locations on a map. This makes the applications very flexible, allowing them to present and manage data with high speed [7]. GIS-applications can be used for a lot of different purposes including resource management, network-planning and location-based services in general [9]. When it comes to this project, the GIS-applications that will be focused on are the applications of Digpro, which can be read about in the next section.

2.3.1 The applications of Digpro

As mentioned in chapter 1 Introduction, the company Digpro provides multiple GIS-applications, or actually NIS-applications to be specific. NIS stands for Network Information System which is more specified for managing networks, like for example electrical networks and water networks. Six of these appli-cations will be focused on in this project, namely dpPower, dpCom, dpGas, dpHeating, dpWater and dpCadaster. The applications allows the users to cre-ate and manipulcre-ate objects, or components, and display them on a geographical interface.

The applications also offer an easy way for the users to generate questions for the spatial database of Digpro, dpSpatial, which in the background is handled by SQL-queries to the database.

In the figure below, a selection of three different applications of Digpro can be seen, dpCom, dpPower and dpCadaster. As can be seen, the general user-interface of the applications are very similar (which holds for dpWater, dpHeat-ing and dpGas as well) in terms of the top-bar, the window for the map and also the tools and features of the application. The side-bar, not activated in the figures, is also very similar between the applications, and the only thing that differs is basically which objects that can be created through it. A more detailed overview and description of the interface can be seen in the next section of this report, "The current interface".

(13)

Figure 2.1: The user-interface of the applications dpCadaster (top-left), dpCom

(top-right) and dpPower (bottom)

2.3.2 The current interface

Some pictures of the general user interface of the applications of Digpro can be seen in the figures below, and even though all features of the applications aren’t shown in the figures, it still provides a clear overview of the user-interface.

Figure 2.2 displays how the applications looks the first time it is launched. The map covers most of the window, except the top toolbar which contains icons for providing different functionality, as well as drop-down menus for File, Edit, Settings et.c. Further, there is a status-bar in the bottom of the interface, which provides information about different aspects of the applications, as well as printing out hints and help to the users.

Figure 2.3 displays the application with the side-bar activated. The side-bar provides functionality for searching, creating object, storing favorites, as well as hiding and showing different objects/components of the map. Further, it offers an alternate way of finding the commands in the top-bar.

These specific figures are from the application dpCom, which is used for vi-sualising telecom wires in a desired area. But, as mentioned and seen earlier, the general interface is the same in the other applications of Digpro as well.

(14)

Figure 2.2: The user-interface of dpCom at the first start of the application

(15)

2.4 How we perceive a user-interface

This section will treat the H in HCI, namely the human aspect. Psychology is a big aspect when it comes to understanding how people perceive a user-interface. There is a reason to why people are drawn to a specific user-interface, or to why people tend to notice certain components more than others in a user-interface. The psychology aspects needs to be taken into consideration when designing a good and understandable interface.

2.4.1 The power of the first impression

People always develop a first impression of someone or something, whether they like it or not. Sometimes it’s positive as it allows us to make initial judgments very fast, but at the same time it can be negative as the first impression might not always be right. The process of creating a first impression, or an initial hypothesis, of something is extremely quick, some studies suggests as fast as 50-100 ms [4, 8]. Studies show that first impressions are almost solely made by the visual appeal of someone or something. Basically, if we don’t like what we see, the first impression makes us build up a bad impression before we have taken in all the information about the object we’re looking at [8, 11].

The reason why the power of the first impression is brought up in this report is that it, of course, is a very important factor to consider in a user-interface. If the user of an application gets a good first impression of the interface, it is a very good start when it comes to the usability of the application. Studies show that the stimulus presented or detected first gets an inappropriate amount of attention which leads to our judgments being overwhelmingly based on our first impression [11]. Therefore, it cannot be ignored as an important factor when it comes to the interface of an application. Further, the first impression is also very difficult to change according to a study made by Bertram Gawronski. The study suggests that new experiences that contradicts the first impression we have built up, become bound to the context in which they were experienced. This means that the first impression is still dominant in all other contexts [6]. There is also a term called confirmation bias which means that it is hard for us to accept facts that contradicts our first impression of something, which might happen to us sometimes [4]. For these reasons, the first impression we get might be very hard to change.

To put this in context with this report, the summary of this section is that the first encounter with the user-interface of an application might actually determine how the users will feel about the interface, as well as the application, in general, regardless of how good, useful and complex the application might be. Thereby, the start-screen of an application is extremely important, and it is a significant factor which is worth to put a lot of thought and time into.

2.5 Design ideas for interfaces

There are some proposed ways of making a user-interface as successful and well-perceived as possible. Some key-aspects include making the interface as consistent as possible, cleaning up the interface to make it feel lighter/simpler and helping the user as much as possible [10, 16, 17].

(16)

2.5.1 Consistency

To be able to make the interface as consistent as possible, there are some things that can be done. Making sure that components look the same throughout the application is one way of doing this. The basic structure of a window should be the same for all windows, a basic example is that if the button for closing the window is in the top-right corner of one window, it should be in the top-right corner for other windows as well. Further, making sure that gestures and mouse-clicks are consistent is also an important part. If a right-click with the mouse on an object in the application has a certain functionality, it should have the same functionality when clicking on other objects [10, 16]. Another aspect that needs to be taken into consideration is the consistency with other applications. If it is conventional to have the close-button in the top-right corner of an application, it might be appropriate to follow that convention in order to make your own interface as consistent with the convention as possible [16, 17].

2.5.2 Cleaning up

In order to make the interface feel as light and clean as possible, it is good to group things together in a logical sense and also to avoid making the interface look busy. An example of where it is a good idea to group things together is if you have many different functions that are quite similar and have similar functionality. Instead of having these functions separately, you could group them under one function or window and let the user choose which one of them that should be used there instead. To have a busy interface can mean that there are a lot of things happening in the interface at the same time, or that the screen is too crowded. Avoiding this will make the interface feel lighter [10]. Further, decreasing the number of options for the user will also make the interface feel lighter and easier to use. Breaking one big step into several small steps will have the same effect, as the user will not get overwhelmed by all the information. Last but not least, it is good to know which are the key-aspects, or most important factors, of the application in order to make these aspects easily reachable in the interface. This will help the users a lot, allowing them to avoid navigating through many different steps in order to find them, and thus making the interface seem cleaner and simpler [17].

2.5.3 Helping the user

It is very important to have an interface which helps making it easy for the user to use the application. To do this, there are many different approaches. One idea is to constantly provide the user with feedback or help, but do it in a very subtle way. It can be done for example with hover-over text that describes an icon or function when the user holds the cursor over that icon. Another way to do it is to alert or notify the user with colors and descriptive text when something is unclear, in order to make them notice it and thereby more easily be able to help. Further, using appropriate names or icons that properly describe their functions helps the user a lot when it comes to understanding the application. Also, explaining the features of the application in a good way through the interface is also very helpful for the user [10, 16, 17].

(17)

Another thing that needs to be thought about when developing a good user-interface is that the users will make mistakes. When they do, the user-interface needs to be forgiving and provide functionality for handling this. A common example is an undo-button for when the user wants to undo something, for example when a mistake was made [5, 10, 16, 17].

2.5.4 Other ideas

Other ideas that might be good to take into consideration when developing a user-interface is that it should be easily navigated, it should use colors and contrasts in a good way, fields should be aligned effectively, there should be support for both beginner and expert users of the applications, the interface should work fast and be efficient (and if something takes a little more time, provide a progress bar for the loading time) and it should provide some freedom for the users to sort/filter/organize/manage objects in the application [13, 10, 16, 17]. Lastly, it is a good idea to ask the users for feedback in order to maintain the quality of the application as well as improving it [17].

(18)

Chapter 3

Method

The method for this project can be divided into four different phases: Phase I - Setup & Research, Phase II - Performing the evaluation of the user-interface, Phase III - Evaluating the results and Phase IV - Improving the user-interface. All of these phases will be presented in this section.

Figure 3.1 illustrates how each phase and its sub-parts relates and affects each other.

Figure 3.1: A figure displaying the workflow of this project, as well as how the

different sub-parts of each phase affects each other

3.1 Phase I - Setup & Research

The first phase of this project was about getting a good insight into the user-interface of Digpros applications. This phase also included researching for re-lated topics, similar applications, design guidelines and general theory of HCI and its evaluation techniques.

(19)

3.1.1 Setup

The setup in the beginning of the project was about getting a better insight into the applications as well as getting a better feeling for the user-interface. The main reason why this was necessary was to better understand how the appli-cation worked, and which the good aspects and the flaws of the user-interface were. Because of this, it was easier to select which parts to be evaluated and focused on in the interviews and questionnaires, which will be described later in the report. I also took a three-day course about how to work with one of Digpros applications, dpPower, in this part of the first phase. This was good in order to better understand its intended purpose and see how Digpros customers work with the applications.

3.1.2 Research

The research part also played a major role when it came to understanding which aspects of the user-interface that should be focused on throughout the project. Studies of similar applications and different guidelines for useful and good interface design, which can be read about in the chapter 2, helped in that aspect. These studies were also necessary for the comparison of the theory of HCI and the actual user-interface of the applications of Digpro in the next phase of the project.

Furthermore, research about HCI Evaluation Techniques provided important information about how to think when applying the Query Evaluation Techniques and how to evaluate the results which will be presented later in this report. Studying previous research in the area of HCI and the general theory behind it, as well as the human-aspect of HCI, provided further information which was needed to compare the theory of HCI with the user-interface of the applications of Digpro.

Lastly, some inspiration for this project has been found through researching related studies of user-interfaces which was mentioned in the introduction of this report.

3.2 Phase II - Performing the evaluation of the

user-interface

This phase describes the method for developing and performing/sending out questionnaires and interviews which was used to understand how the users of the applications of Digpro perceived the user-interface. As mentioned in chapter 2, the questionnaires were used in order to get a lot of answers from a variety of users quickly, while the interviews were used to get a deeper insight and understanding about how they perceived and worked with the applications of Digpro.

3.2.1 The questionnaires

Development

As mentioned earlier, the first phase of this project helped a lot when it came to developing the questionnaires. The key-aspects to focus on in the

(20)

user-interface were identified and the design of the questionnaire could be constructed accordingly. As mentioned in chapter 2, one of the biggest challenges was to design the questions of the questionnaire to be as easily answered as possible but still provide useful results. Another challenge was that the questions needed to be quite general because the users of these applications don’t necessarily use the same functions, but they still needed to be quite specific in order to generate something useful.

In the end, the questionnaire consisted of three different categories of ques-tions, or statements to be precise. The statements stated something about the interface of the applications, and the person answering the questionnaire chose if he/she agreed to the statement or not. The categories differed a bit, where Category A was about the whole interface in general, Category B was about the interface and usability of specific functions and Category C was non-mandatory questions where the person could express her-/himself about the interface in questions that could be answered with a little more depth. Except from statements, some non-mandatory questions could be found throughout the questionnaires in order to allow the person answering to specify a little more about how he/she perceived the user-interface.

Some figures presenting the design of the questionnaire can be seen in figure 3.2 and 3.3. To see all questions of the questionnaire, as well as their result, please refer to Appendix A

Figure 3.2: A figure showing an example of a statement in the questionnaire

(screenshot from Google-Forms)

Figure 3.3: A figure showing an example of a non-mandatory question in the

questionnaire (screenshot from Google-Forms)

Execution

The questionnaires were sent to 469 customers of Digpro through a Google Form2by which they could submit their answers. This allowed the questionnaire

(21)

to generate answers not only from a specific type of customer, but from a large variety of customers using different applications of Digpro and different functions in these applications. From this, a more fully-covered and trustworthy result could be obtained. The questionnaire was only sent once to the customers and no reminders were sent to them.

3.2.2 The interviews

Development

The development of the interviews differed a little bit from the questionnaires. The questions needed to be less specific than in the questionnaire in order to allow the persons to speak more freely about their experience with the appli-cations and its user-interface. Still, some of the questions in the interviews reminded of the non-mandatory questions in the questionnaires. The result can be seen in the figure 3.4 below.

Figure 3.4: Figure displaying the structure of the interview

Execution

The interviews were held with 8 customers. The customers were selected based on their work-tasks and their geographical location. In the end, the customers that were interviewed were all based in Stockholm, had a variety of work-tasks and used different applications. The interviews were performed individually with the customers in order to minimize the risk of them getting affected of each others opinions.

(22)

3.2.3 Comparing the user-interface to HCI theory and

guidelines

The theory obtained, partly from the study of similar applications and guide-lines for designing a good interface and partly from studying HCI evaluation techniques and the human-aspect of HCI (seen in chapter 2), was compared to the user-interface of the applications of Digpro in this part of the project. It was necessary in order to come up with ideas for improvements for the user-interface and helped answering one part of the problem statement, namely "what can be done to improve the user-interface of existing GIS-applications from a general HCI perspective".

3.3 Phase III - Evaluating the results

This section will describe how the results from the interviews and questionnaires were evaluated.

3.3.1 The questionnaires

As mentioned earlier, the questionnaires consists of two different questions, non-mandatory questions and statements. The answers for the statements was visu-alized in diagrams which was an easy process since the results was in the form "17 persons answered 4 on statement 1, 16 persons answered 2 on statement 3" and so on.

A bigger challenge, however, was to evaluate the text obtained from the non-mandatory questions. The method for that process was to pick some keywords from the answers and create a matrix. A row in the matrix represented a key-word and a column represented a person which had answered at least one non-mandatory question in the questionnaire. If a specific person mentioned a specific keyword in his/her answer to the questionnaire, that row/column was then marked. In the end, the matrix showed the number of persons who mentioned the chosen keywords throughout their answer to the non-mandatory questions.

3.3.2 The interviews

For the interviews, the method for evaluating the answers was the same as for the non-mandatory questionnaire-questions described in the previous section of this report.

3.4 Phase IV - Improving the user-interface

This section will describe the method for improving and showing improvements for the user-interface.

3.4.1 Concept sketches

From the analyzed interviews and questionnaires, as well as the information gotten from comparing the user-interface with HCI theory and guidelines, a lot

(23)

of ideas sprung and a number of mock-ups and concept sketches were created. The evaluation of these mock-ups and sketches were done through a heuristic evaluation, which means that a number of experts judge a user-interface based on some criteria, or heuristics [14]. For this project that meant that the sketches and mock-ups were shown to 3 user-interface experts at Digpro, which had a lot of knowledge about the user-interface of the applications, as well as the devel-opment of them. These experts were shown the mock-ups through occasional meetings and judged them based on a number of heuristics.

3.4.2 Prototype

The ideas that were considered good when evaluated led to the final part of this project. A prototype for showing these improvements of the user-interface was developed using Justinmind3_.

(24)

Chapter 4

Result

The results that will be presented in this section are the analysis of the answers gotten from the questionnaire and the interview.

4.1 Statistics of questionnaires

The results from the questionnaires will be presented in two parts, first the statistics of the statements and then the statistics of the non-mandatory ques-tions.

4.1.1 Statements

The statistics for all the statements in the questionnaire were made in circle-diagrams and can be seen in Appendix A. The results from these circle-circle-diagrams are presented in this section. In total, 85 persons from a variety of different companies and with a variety of work-tasks answered the questionnaire, which corresponds to a response-frequency of about 18%.

The results from the questionnaire statement were the following, and as mentioned in chapter 3, the answers to the statement were either "4 - I totally agree", "3", "2", "1 - I don’t agree at all", and "I don’t know". Also, to avoid any confusion, the user-interface that these statements refers to is the user-interface as it was before any ideas for improvements (described later in the report) were made:

• Statement: "The user-interface is intuitive to use and understand"

– 60% of the customers has answered with either 4 or 3 – 40% has answered with 2 or 1

• Statement: "The user-interface is simple and neat"

– 63.5% of the customers has answered with either 4 or 3 – 36.5% has answered with 2 or 1

• Statement: "There are situations where the user-interface can be perceived as messy"

(25)

• Statement: "The user-interface was hard to get familiar with at first"

• Statement: "There are some things in the user-interface that hasn’t be-haved the way I thought it would"

– 53% of the customers has answered with either 4 or 3 – 29.4% has answered with 2 or 1

• Statement: "Icons in the user-interface describes its functions well"

• Statement: "My main functions are easily navigated in the user-interface"

• Statement: "The user-interface provides good help when problems or am-biguities are encountered"

• Statement: "I always have the sidebar activated"

– 91.8% of the customers has answered with either 4 or 3 – 7% has answered with 2 or 1

• Statement: "The sidebar should be activated at the start of the applica-tion"

and lastly, the result from asking the customers which of the three images below that best described their most preferable start-zoom.

(26)

Figure 4.1: A circle-diagram showing the result from asking the customers about

their most preferable start-zoom

4.1.2 Non-mandatory questions

As mentioned in chapter 3, the non-mandatory questions were analyzed by cre-ating a matrix with keywords and count how many of the customers that men-tioned the keyword. The requirement for the customers to appear in the matrix was that they had answered at least one non-mandatory question and that they wrote something about the user-interface and not about the functionality of the applications or about Digpro in general. In total, 42 customers fulfilled these requirements as can be seen in figure 4.2. For the full matrix, please refer to Appendix B.

(27)

Figure 4.2: The result of the non-mandatory questionnaire questions (UI in the

figure is an abbreviation for user-interface)

4.2 Statistics of interviews

The same method that were used for analyzing the non-mandatory questions in the questionnaire, were used to analyze the interviews. The result can be seen in 4.3 below.

(28)

Chapter 5

Improvements

Judging from the statements in the questionnaire, the majority of customers still think that the user-interface is quite simple, intuitive and neat in many cases. So when coming up with ideas, I have chosen to keep the main features of the user-interface rather similar to not confuse the customers who thinks that the user-interface is good the way it is. So an attempt have been made to introduce discreet changes, or discretely refine existing features, that will help the customers who wants to use the new changes/features while not disturbing the customers who don’t want to use them.

5.1 Idea 1 - Create own shortcuts

The first idea is about letting the users create their own shortcuts. Many of the users mention that there are a lot of clicking in the applications of Digpro, and some say that they want to have more shortcuts. Others, about 30%, say that they think it’s hard to navigate to their main functions in the interface. I believe that it will be easier and quicker for the users to navigate main functions if they can store them as shortcuts instead. Further, the number of clicks would decrease since the shortcuts can be used instead of clicking with the mouse.

In order to understand idea 1, the sidebar for the applications needs to be described in more detail. As mentioned in chapter 2 Background, the sidebar provides functionality for creating objects (the Create Object-tab), handling what to be shown or hidden on the map (the Map-tab), searching for objects on the map (the Search-tab), reaching different commands (the Command-tab) and handling favorites (the Favorites-tab). The objects in Create Object, the objects in Search and the commands in Command are what can be stored as favorites. This is done by right-clicking on for example a command in the sidebar and choose "add to favorites".

5.1.1 Version 1

Version 1 of idea 1 combines the opinions: • From the questionnaire:

– Should be more customizable, which 11 persons mentioned in

(29)

– Much clicking, which 5 persons mentioned in the non-mandatory

questions

– Want more shortcuts ("short-commands"), which 5 persons

mentioned in the non-mandatory questions

– Uses sidebar much, which 91.8% agreed to in the statements – Hard to navigate to main functions, which 29.4% agreed to in

the statements • From the interviews:

– Much clicking, which 7 persons mentioned during the interviews

• From the theory:

– Make it easier to navigate the user-interface – Provide freedom for the user

The first version of this idea aimed to let the users store shortcuts for the tabs Create object, Search, Command and Favorites. They should be able to do so using any non-reserved key-combination and they should be able to handle their shortcuts in the sidebar where a shortcut-tab was added. This can be seen in 5.1 below.

Heuristic evaluation

The result of the heuristic evaluation of this version was that the experts thought that it would be hard to handle shortcuts for Create Object, Search and Fa-vorites, but it would be possible to do so for Commands. Also, they thought that it would be too many tabs in the sidebar if a shortcut-tab would be added, it would be better if it was somehow connected to Command.

(30)

Figure 5.1: Idea 1, version 1. The shortcuts are shown listed in the sidebar

in the Shortcuts-tab. If a shortcut is right-clicked on, options for removing or changing the shortcut will be available

5.1.2 Version 2

Version 2 of idea 1 includes all opinions and theory of version 1, but also adds:

Group things in a logical way, from the theory.

The second version of Idea 1 let the users store shortcuts for the commands using any non-reserved key-combination. The shortcuts could be handled in the sidebar as a sub-tab to the Command-tab. Version 2 can be seen in 5.2.

From the heuristic evaluation of this version, the result was that the experts thought that it might be a problem if the customers can use any kind of non-reserved key-combination, since that key-combination might not be non-non-reserved in a later version of the applications. So it would probably be better to have a set of key-combinations that are reserved specifically for making own shortcuts instead. What was good with this version was that shortcuts were a sub-tab to Command, so it can be a good idea to let Favorites be sub-tabs in each individual tab, Create object, Search and Command, as well. Although, it might look better and more discrete with icons instead of sub-tabs.

(31)

Figure 5.2: Idea 1, version 2. The command-tab in the sidebar now contains

one sub-tab for showing all commands and one sub-tab for showing all personal shortcuts

5.1.3 Version 3

Version 3 of Idea 1 includes all opinions and theory of version 1 and version 2 and adds: Keeping the same structure to maintain consistency, from the theory.

In version 3 of Idea 1, the users can create own shortcuts using any of the key-combinations in the list of pre-reserved key-combinations specifically for that purpose. The shortcuts can be reached using an icon in the Command-tab, and the favorites for each tab can also be reached using an icon in each individual tab. This can be seen in 5.3 below.

The result from the heuristic evaluation for this version was that the experts thought it was an interesting idea that will make it easier to work with the applications for at least some of the customers.

(32)

Figure 5.3: Idea 1, version 3. The command-tab (seen in the middle of the

figure) now contains icons for showing all commands, favorite commands and shortcuts for commands. The create object-tab (seen in the top of the figure) now contains icons for showing all objects and favorite objects. The same goes for the search-tab (seen in the bottom of the figure)

5.2 Idea 2 - Cleaning up in command-list

Idea 2 is about cleaning up some of the lists in the command-bar, namely the Tools- and the Show-tab, since they contain a lot of functions. Some customers have pointed out that the user-interface can be messy and illogical at some times, and that it can be hard to find the sought function. I believe that this proposed idea will help making the user-interface feel lighter, simpler and less messy. This proposition is further backed up by the theory in chapter 2 which talks about grouping together functions in a logical sense in order to construct a cleaner and simpler user-interface.

Idea 2 combines the opinions: • From the questionnaire:

(33)

– Hard to find the sought function, which 13 persons mentioned

in the non-mandatory questions

– Not logical, which 11 persons mentioned in the non-mandatory

questions

– Much functionality, which 7 persons mentioned in the non-mandatory

questions

– Messy, which 7 persons mentioned in the non-mandatory questions

and 65.8% agreed to, in the statements, that the user-interface can be at some times

– Not simple and neat, which 36.5% agreed to in the statements – Not intuitive to use and understand, which 40% agreed to in

the statements • From the interviews:

– Much functionality, which 4 persons mentioned during the

inter-views • From the theory:

– Make it easier to navigate the user-interface – Group things in a logical way

The changes that has been done can be seen in 5.4. The figure shows the changes in the Show-tab, where the previous list can be seen on the left and the updated list can be seen to the right. The functions from the previous list have been grouped together in the new list. An example is that the two functions "History from view" and "Object history" has been grouped under "History ->" in the new list. In the end, the 34 items in the previous Show-tab were grouped into 21 items in the new Show-tab. As for the Tool-tab, the 27 items in the previous Tool-tab were grouped into 20 items in the new Tool-tab.

The result from the heuristic evaluation for this idea was simply that the experts thought it was a great idea.

(34)

Figure 5.4: Idea 2. The changes in the show-tab can be seen in this figure. The

number of items in the list has gone down from 34 items to 21 items

5.3 Idea 3 - Making the commandbar and the

iconbar customizable

The third idea aims to let the users customize the commandbar and the icon-bar by choosing what to be shown in them. A lot of the customers answering the questionnaire mention that it can sometimes be hard to find the sought function in the user-interface, which might be a consequence of that the ap-plications contains much functionality. Further, some customers talks about that they use rather few functions when they are working with the applications. Judging from these opinions, I believe that this idea of allowing the users to significantly decrease the number of visible functions in the user-interface, will make it feel much lighter and simpler. Also, maybe most importantly, it will give a more personal experience for the customer where she/he can customize the user-interface to show the functions he/she uses and hide the rest.

In order to understand Idea 3, it is important to understand what the com-mandbar and the iconbar are in the user-interface. The comcom-mandbar is sim-ply the bar containing the commands in the top of the applications. It has

(35)

dropdown-lists for File, Edit, Show, and so on. The iconbar is more specific for these applications and holds some of the most popular functions represented as icons. It can be seen directly under the commandbar in the applications.

5.3.1 Version 1

Version 1 of Idea 3 combines the opinions: • From the questionnaire:

– Hard to find the sought function, which 13 persons mentioned

– Not logical, which 11 persons mentioned in the non-mandatory

questions

– Much functionality, which 7 persons mentioned in the non-mandatory

questions

– Messy, which 7 persons mentioned in the non-mandatory questions

and 65.8% agreed to, in the statements, that the user-interface can be at some times

– More customizable, which 11 persons mentioned in the non-mandatory

questions

– Needs to be familiar with the UI to understand it, which 6

persons mentioned in the non-mandatory questions

– Different ways to do the same thing, which 4 persons mentioned

– Not simple and neat, which 36.5% agreed to in the statements – Some things in the user-interface doesn’t behave as expected,

which basically means that it isn’t logical. 53% agrees to this in the statements

• From the interviews:

– Much functionality, which 4 persons mentioned during the

inter-views

– Works with few functions, which 4 persons mentioned during the

interviews • From the theory:

– Make it easier to navigate the user-interface – Provide freedom for the user

– Decrease the number of options in the user-interface

The first version of this idea allowed the users to customize the commandbar using an option in the Settings-tab which was called "Customize command-bar..." , see 5.5 below. If that option was clicked, a new window with a tree-structure for all commands appeared, where the users could check the boxes corresponding to the functions that they wanted to show in the commandbar. For the iconbar, one icon for adding icons to the bar and one icon for removing

(36)

icons from the bar were added, seen in figure 5.5 as a green plus-sign and a red cross. When the green plus-sign was clicked, a tree-structure showing all icons appeared in a new window, where the users could choose which icons to be show in the iconbar. The principle for removing icons were similar, a new window appeared with the icons currently shown in the iconbar where the users could choose which ones to remove.

Heuristic Evaluation

The result from the heuristic evaluation of this version was that the experts thought that the idea for the commandbar was good but that it should be placed under preferences in the Settings-tab instead. Also, it would be good to have an option in the end of all drop-down lists in the commandbar that says "show hidden functions ->", which shows the functions that aren’t currently shown in that specific list. As for the iconbar, they thought it would make more sense to add groups of icons instead, as some of them are quite connected with the others. Further, it would be better to have the option of customizing the iconbar under preferences as well.

Figure 5.5: Idea 3, version 1. The way to customize the commandbar can be

seen to the left, while the way to customize the iconbar can be seen on the right

5.3.2 Version 2

Version 2 of Idea 3 includes all opinions and theory of version 1.

In the second version of this idea, the options for customizing the com-mandbar and the iconbar is located under preferences in the Settings-tab. An alternative way for handling favorites and shortcuts was also added to prefer-ences. The customers can add or remove groups of icons for the iconbar and choose which commands to be shown in the commandbar. An option for show-ing hidden functions has been added to the end of each dropdown-list in the commandbar. Figure 5.6 shows version 2 of Idea 3.

(37)

The result from the heuristic evaluation of this version was that the experts thought that the idea of letting the customers customize the commandbar would work well and make it easier to navigate the user-interface for a lot of customers, if they would use this new feature. The risk is that the process of hiding a lot of functions might take too long for the users to have the energy to do it. But nev-ertheless, an interesting idea. The idea of allowing the customers to hide/show groups of icons in the iconbar, was considered a good idea. Lastly, to have the ability of customizing these things under preferences was also considered good.

(38)

Figure 5.6: Idea 3, version 2. In the top image, the customize tab in preferences

can be seen. A result of how a customized commandbar and iconbar can look is seen in the bottom image. Number 1 in the bottom image displays the window-tab with 6 items instead of the 17 items that originally are in that list. "2" displays an area which usually holds icons but has been customized to not contain any icons right now

5.4 Idea 4 - The statusbar

Idea 4 is about making the statusbar more noticeable and adding a loading-bar for situations when the user-interface is slow or unresponsive. The idea is based on some customers mentioning that the user-interface can be slow at some times, and that the theory in chapter 2 Background states that a progress-bar might be good in such a situation. A number of customers have also mentioned that the learning curve for the user-interface is high, and that users needs to be familiar with the user-interface in order to understand it. I believe that this might be a problem caused by lack of feedback to the user, which is the reason for the attempt of making the statusbar more noticeable.

The statusbar is located in the bottom of the user-interface. It’s main pur-pose is to guide the users through the use of a function and to alert the user if needed, so it’s where most of the feedback to the user is printed.

(39)

The theory in chapter 2 Background talks about two main ways of providing feedback to the users. The first one is through hover-over text which is shown when a user hovers the cursor over a component of the user-interface. This kind of feedback is very good in the current user-interface so this will not be the focus for this idea. Instead, the attempt will be to provide feedback by the second way proposed in the theory, through the use of color.

– Needs to be familiar with the UI to understand it, which 6

persons mentioned in the non-mandatory questions

– High learning-curve, which 2 persons mentioned in the non-mandatory

questions

– The user-interface doesn’t provide good help when problems of ambiguities occur, which 52.9% agrees to in the statements – The user-interface was hard to get familiar with at first,

which 54.1% agreed to in the statements • From the interviews:

– Sometimes slow, which 2 persons mentioned during the interviews – High learning-curve, which 3 persons mentioned during the

inter-views • From the theory:

– The user-interface should be fast and efficient, provide a progress-bar if there are long times for loading

– Help the users by providing them with discrete feedback, for example by using colors

In this idea, a loading-bar was added for when the user-interface is slow and the color of the text in the statusbar was simply changed to red instead of black. The idea can be seen in figure 5.7 below.

The result of the heuristic evaluation of this idea was that the experts thought it was an interesting idea to experiment with colors, but that it will be hard to implement a loading-bar for different reasons. Although, they didn’t really believe that the statusbar would be much more noticeable only by changing the color of the text in it.

(40)

Figure 5.7: Idea 4. An idea for making the statusbar more noticeable can be

seen above. A loading-bar has been added and the text has been changed from black to red

5.5 Idea 5 - New icons

This idea is about updating some of the icons and propose new appearances for them. Since a number of customers are confused about some of the icons in the user-interface, I believe that they need to be changed in order to decrease the level of conceptual confusion.

– Similar icons with different functionality, which 5 persons

men-tioned in the non-mandatory questions

– Conceptual confusion, which 2 persons mentioned in the

non-mandatory questions

– Doesn’t think that all icons describes their functionality in a good way, which 25.9% agreed to in the statements

• From the interviews:

– Difficulties with concepts, which 2 persons mentioned during the

interviews • From the theory:

– Use appropriate icons and names in the user-interface

The first set of icons which I think are quite similar are Undo/Redo and Previ-ous/Next location. The proposed change can be seen in figure 5.8 below, where Repaint has been updated as well since it is related to Previous/Next location.

(41)

Figure 5.8: Idea 5, icon set 1. A figure showing the current icons to the left and

their proposed update to the right

The next set of icons that can be confused is Move/Remove/Rotate object and Move/Remove/Rotate component where object is represented as a cube and component are represented as three smaller cubes. The difference is that a component is for example an entire electric network in dpPower, while an object can be a cable or a fuse. The proposed change can be seen in figure 5.9 below.

Figure 5.9: Idea 5, icon set 2. A figure showing the current icons to the left and

(42)

The result of the heuristic evaluation of this idea was that the experts thought it was a good idea. Although, it is hard to say if the second set of new icons, the move/delete/rotate components/objects, will be more distinguishable or if the confusion will be on the same level as it is today.

5.6 Idea 6 - The startscreen

Idea 6 is an attempt to make a better first impression of the user-interface. Right now, the map at the start of the applications doesn’t really give a very good overview due to its start-zoom. I believe that this might give a bad first impression of the user-interface, and that it might be perceived as messy and not very clean and simple. This first impression might, as mentioned in chapter 2 Background, influence the attitude and opinion of the whole user-interface.

So a simple attempt of making the user-interface feel simpler and cleaner is to provide more overview in the map and also to activate the sidebar at the beginning of the applications, since that is how the majority of the customers work with the applications. This will give a more authentic first impression of the user-interface and will thereby do the startscreen more justice than it currently does.

– The middle picture represents the most preferable start-zoom, which 62.4% agrees to in the statements

– The sidebar should be activated at the start of the applica-tions, which 62.3% agrees to in the statements

– Uses sidebar much, which 91.8% agreed to in the statements

• From the theory:

– The first impression is very important

The result of this proposition can be seen in figure 5.10 below, and the previous startscreen can be seen in figure 2.2 in chapter 2 Background.

Heuristic Evaluation

The result of the heuristic evaluation of this idea was that the experts thought it was a good idea.

(43)

Figure 5.10: Idea 6. A figure presenting the proposed new startscreen of the

applications

5.7 Final prototype

In the end, the proposed ideas presented above will together affect almost every opinion seen in the results of the questionnaire and the interviews, as well as a lot of the theory mentioned in sections 2.4.1 and 2.5. This is the main reason why these specific ideas are proposed.

After all these ideas, or the last version of them, had been evaluated, a final prototype was developed. This prototype displayed more in detail the functionality and looks of the new ideas, as well as their interaction with the rest of the user-interface. All ideas except idea 4, which was about making the statusbar more noticeable, was included in this prototype. This was basically because it wasn’t considered good enough after the heuristic evaluation had been made of that idea.

Except all the comments and opinions in the individual heuristic evaluations of each idea, the experts thought that the interaction between the respective ideas, as well as the rest of the user-interface was good in the final prototype.

(44)

Chapter 6

Discussion & Conclusions

6.1 Difference in results - interviews vs

ques-tionnaire

An interesting observation when the results from the interviews and the non-mandatory questions were analysed, was that they differ quite a lot in some aspects. The two most popular opinions in the interviews were that there was much clicking in the applications, and that the customers uses quite few func-tions when working with the applicafunc-tions. While 7 out of 8 customers has mentioned that there is "much clicking" during the interviews, only 5 out of 42 customers mentions this in the questionnaire. Also, 4 out of 8 people men-tions that they "work with few funcmen-tions" during the interview, while this isn’t mentioned by anyone in the questionnaire.

I believe that the main reason for this difference is due to the focus of the interview and the questionnaire. As mentioned in chapter 3, one of the main focuses of the interviews was to get a better insight about how the customers work with the applications while this wasn’t the focus for the questionnaire. Be-cause of this, the questions differed between the interviews and questionnaires. For the interviews, this meant that the customers could speak more freely and describe in more detail how they work with the applications as well as mention smaller, everyday distractions such as for example "much clicking" and "the ap-plication can be slow sometimes". I think that this is the biggest reason to why there is a difference in the results from the interviews and the non-mandatory questionnaire questions.

Other than that, I think that the opinions are quite alike when compar-ing the questionnaire and the interviews. They are just described in different ways. When it comes to the non-mandatory questions in the questionnaire, the three most popular opinions, "hard to find the sought function", "not logical" and "should be more customizable", cannot be found in the result from the interview answers. But if we look into the interview answers, the opinions "high learning-curve", "difficulties with concepts" and "hard to find info in sidebar" might be an effect of the application not being logical. Also, the opinions "much func-tionality", "working with few functions", "difficulties with concepts" and "hard to find info in the sidebar" from the interview answers, might be the problem that causes the customers to find it hard to find the sought function and want

Evaluating and improving the user-interface of existing GIS-applications by the use of HCI evaluation techniques