MASTER'S THESIS
Railway Decision Support
A Graphical user Interface to Display Train Maintenance
Oscar Flack
2014
Master of Science Thesis in Industrial Design
Engineering/Civilingenjörs/Högskoleingenjörsexamen i Teknisk design Institutionen för Ekonomi, Teknik och Samhälle
Railway decision support
A graphical user interface to display train maintenance
Oscar Flack
2013 Supervisor: Phillip Tretten Examiner: Åsa Wikberg-Nilsson
Master/Bachelor of Science Thesis Railway Decision Support
A graphical user interface to display train maintenance
Master/Bachelor of Science Thesis in Industrial Design Engineering- Product design and development
© Oscar Flack
Published and distributed by Luleå University of Technology SE-971 87 Luleå, Sweden Telephone: + 46 (0) 920 49 00 00
Printed in Luleå Sweden by
Luleå University of Technology Reproservice Luleå, 201
Acknowledgement
It is finally over after twenty weeks of hard work and five years of studying I have almost reached the status of a Master of Science. With this new degree I hope a good and well paid job is just around the corner.
I would like to thank my supervisor Phillip Tretten for the support during this thesis and also my examiner Åsa Wikberg-Nilsson that gave me advice on what to do during this thesis. Carl Jörgen Normark also deserves thanks for the help I got when it came down to the usability study.
Finally I would like to give a big thanks to all the teachers and the students whom made these five years of studies some of the most memorable years of my life.
Luleå 27th of May, 2014
Oscar Flack
Abstract
The project illustrated in this report is led by eMaintenence LAB which is a part of the division of Operations and Maintenance at Luleå Technical University. The object of the thesis project was to develop a graphical user interface from a previously made thesis called Graphical Interface for eMaintenance Solutions made by Malin Bergqvist in the spring of 2013. The development should go from a paper prototype to a stage where it could be tested. To do that the paper prototype had to be programed using Microsoft visual studio.
The aim of the thesis was to help eMaintenance get their graphical profile into a user interface so that they can use it in further development of their systems. The goal of the thesis was to be able to hand over a graphical user interface displayed as a Windows 8 application to use in further development of their systems.
To reach the aim and goal of the thesis a literary study had to be conducted in order to gather enough information to complete the thesis and make the final concept. The literary study focuses on graphical design and user interfaces, all of this is described in the theoretical frameworks chapter.
During the development some parts of the project circle process where used which is explained in the methods chapter. It basically says that the development process should go in circles where you do the steps you need to develop something over again in a circular pattern.
The idea development phases where carried out by using different methods described in the methods chapter. The different methods used where individual brainstorming, experienced prototyping and mind-mapping.
The system was pilot tested with eight students. All the participants were asked to do a task on each of the systems and then had to answer a couple of questionnaires. The questionnaires used were a revised version of the Computer System Usability Questionnaire and Microsoft´s Product Reaction Cards.
At the end of the thesis the final concept displayed as a Windows 8 application along with this report were handed over to eMaintenance for further development.
KEYWORDS: Graphical, Design, Interface, Application, Maintenance, Usability, Programming
Sammanfattning
Projektet som är beskrivet i denna rapport leds av eMaintenence LAB som är en del av institutionen för drift och underhåll på Luleå Tekniska Universitet. Objektet med detta examensarbete var att utveckla ett grafiskt användargränssnitt som tidigare hade utvecklats i ett examensarbete kallat Graphical Interface for eMaintenance Solutions skrivet av Malin Bergqvist våren 2013. Utvecklingen skulle gå från att vara en pappersprototyp till ett steg där systemet gick att testa. För att utföra det var prototypen tvungen att utvecklas och programmeras genom att använda Microsoft visual studio.
Syftet med arbetet var att hjälpa eMaintenance att få in deras grafiska profil i ett användargrässnitt så det kan användas vid vidareutveckling av deras system. Målet för arbetet var i sin tur att överlämna ett grafiskt användargränssnitt i form av en Windows 8 applikation som eMaintenance kan använda för att utveckla detta system.
För att nå målen för detta arbete krävdes en litterär studie, där nog med information behövde samlas in för att klara detta examensarbete och kunna slutföra konceptet. Studien fokuserar på grafisk design och användargränssnitt, allt detta finns under teorikapitlet.
Under utvecklingen användes delar av projektcirkeln process vilket är beskrivet i metodkapitlet. Med processen menas at man utvecklar i en cirkel där man hela tiden gör olika steg för att vidarutveckla i ett cirkulärt mönster.
I ideutvecklingsfasen användes olika metoder vilka också är beskrivna i metodkapitlet.
De olika metoderna som användes var individual brainstorming, experienced prototyping och mind-mapping.
Systemet testades sedan av åtta studenter. Alla som utförde testet var tvungna att göra en uppgift på båda systemen och sedan svara på två frågeformular. Frågeformulären som användes under testet var en omarbetad version av Computer System Usability Questionnaire och Microsoft´s Product Reaction Cards.
Mot slutet av examensarbetet lämnades systemet som en Windows 8 applikation och denna rapport över till eMaintenance för vidareutveckling.
NYCKELORD: Grafisk, Design, Gränssnitt, Applikation, Underhåll, Användbarhet, Programmering
Content
Project incentives 2
Project stakeholders 2
Project objectives and aims 3
Project scope 3
Thesis outline 4
Analyses of the previous thesis 5 The color used in the interface 5 The Pages of the interface 6
Design 12
Product development 12
Human Computer interaction 13
Information Design 13
Graphical user interface 14
Semiotics 14
Color and contrast 15
Fonts 17
The process 18
Project planning 18
Literature review 19
Idea development 19
Concept development 20
The Layout 21
Detail design 21
User study 22
Reliability and validity 23
Results of the usability test 24 Results of idea and concept
development 26
Results of detail design 28
Color choice 29
Final result 30
Positioning the results 35
Reflection 36
Recommendation 37
Research questions 38
Project objectives and aims 38
Figure 1: Tree diagram over Besgquist´s solution. ... 6
Figure 2: showing lack of luminance contrast ... 16
Figure 3: The project circle ... 18
Figure 4: Revised project circle ... 18
Figure 5: Mind map of the overview page ... 20
Figure 6: Mind map of the train page ... 20
Figure 7: Color samples used in the different systems ... 21
Figure 8: Graph over the results from the CSUQ ... 24
Figure 9: Word-cloud new GUI ... 25
Figure 10: Word-cloud old GUI ... 25
Figure 11: Early solution of a page ... 26
Figure 12: Early solution of a page ... 26
Figure 13: Prototype of the overview page... 27
Figure 14: Prototype of the train page ... 27
Figure 15: Prototype of the train cars page ... 27
Figure 16: Prototype of the repairs page ... 27
Figure 17: Prototype of the capacities page ... 28
Image 1: Log in page ... 6
Image 2: Home page ... 7
Image 3: Trains overview page ... 8
Image 4: Trains page ... 8
Image 5: Train car page ... 9
Image 6: Repair Availability page ... 9
Image 7: Statistics page ... 10
Image 8: Repair capacities page ... 10
Image 9: Traffic capacities page ... 11
Image 10: Login page ... 28
Image 11: Home page ... 29
Image 12: Overview page ... 29
Image 13: Final login page ... 30
Image 14: Final home page ... 31
Image 15: Final home page scrolled ... 31
Image 16: Final overview page ... 32
Image 17: Final train page ... 32
The focus of this report is a master thesis project for a Master of Science in Industrial design engineering at the Luleå University of Technology. The objective has been that of developing a graphical user interface for a Windows 8 application. The interface is later to be implemented in a program with the purpose of visualizing the maintenance of trains for Luossavaara-Kiirunavaara Aktiebolag(LKAB) and Trafikverket. The work is performed as part of a research-project for the division of Operations and Maintenance at LTU during 20 weeks in spring semester of 2014.
Project incentives
LKAB engages in mining and processing of iron ore with a long-term perspective and focus on sustainability.
The sustainable development bases on and reflects LKAB's work for social, economic and environmental sustainability according to LKAB (n.d.).
LKAB´s competitiveness is directly linked to making continuous improvements that increase efficiency in operations. According to LKAB (n.d.) a safe, smooth and uninterrupted production is the backbone of their business.
According to eMaintenance (n.d.) the focus on a more responsible use of recourses and the drive to make a sustainable production increases the need of Maintenance. Since maintenance is a large part of keeping the costs of logistics and production down to a minimum, every company needs to work on maintaining their machines.
eMaintenance is a part of LKAB´s maintenance team. Measuring problems and maintain them before they escalate is a key factor in good maintenance.
However to get the information out to
the people who need it they cannot rely on technical systems. They need a graphical interface which is user friendly and easy to use.
Graphical Interface for eMaintenance Solutions is an earlier thesis project made by Malin Bergqvist(2013) in which she made a paper prototype of a graphical user interface (GUI) for eMaintenance. In the context chapter, Bergqvist´s final design is illustrated as the starting point of this thesis.
In this thesis, Bergqvist´s GUI will be further developed and programmed to look like a Windows 8 application. The aim of this project is to critically analyze the design and find out which aspects of the system to implement and which to re-design.
eMaintenance is currently developing systems to many companies, but they need to implement their own graphical profile into the different systems. With the use of styles and templates this thesis outcome can be used to keep the same graphical profile throughout all systems.
Project stakeholders
The division of operation and maintenance at LTU are the clients for
the current thesis project. However, the main stakeholder is LKAB, the company that needs an application for visualizing train maintenance and repairs, and potentially also Trafikverket for the same purpose as LKAB and in order to get the same information. The user of the potential product is maintenance personnel and supervisors at LKAB and Trafikverket.
The application is later to be used by LKABs and Trafikverkets personal too quickly find information and support and to be able to handle errors in the train network.
Project objectives and aims
The questions rose at the beginning of this thesis where.
How can a graphical user interface be designed to be usable and user friendly?
What design principles influence the usability and user friendliness of the interface, i.e. colors, contrasts, semiotics etc?
How can visual communication be displayed as usable and userfriendly as possible?
These questions have been used as a guide to make the system more user- friendly. Some of the questions are quite large and may not be investigated in depth. However, the thesis work is not about finding a general "right answer"
but finding solutions for the particular
they can use this in further development of their systems.
The goal of the thesis is to be able to hand over a graphical user interface displayed in as a windows 8 application to use in further development of systems.
The system should be user friendly and help the user navigate to the information.
With the literature study, find enough information in order to get a good grasp of the design of user systems.
Project scope
This thesis is about further developing Bergqvist's final design in order to make it work in windows 8 applications, which means that no completely new concepts will emerge only developments of her concept.
The thesis focuses on the graphical design of the system. No technical programming will be carried out unless it´s necessary for the application to work.
The literature study focuses on a few key points in digital design because the area is quite large, and this is to restrict it.
Thesis outline
This chapter contains all background information of the thesis. Which people that was involved in the project and why the project is important to them. It also contains some of the information that was put into the startup project plan Appendix 1 agreed on in the start of the thesis.
Next chapter will be an extension of the project incentives chapter. This chapter contains the context of the thesis. It is mostly filled with the final design of Malins project with a description of the pages as I saw and understood them while reading her rapport.
The third chapter is a theoretical framework, and it contains all the information gathered in the literature study. It starts with design and moves closer and closer towards the most detailed description of some of the more important aspects in graphical design.
Method is the fourth chapter in which the process used in the thesis and all that has been carried out during the thesis get explained.
The results are in the fifth chapter and contain the final design of the graphical user interface. It also contains the results found in the literature study and the usability test and how they helped build the final solution.
Discussion is the sixth chapter, and it is where the results get questioned. It also contains a self-reflection of the work done and the recommendations for future development of the system.
Conclusion is the seventh chapter, and that is where the questions posed int in the beginning of the thesis project get answered.
Since the arrival of cloud systems, more information has been stored online. However to get to the information needed systems have to gather and display the information. It is an important thing especially when it comes to maintenance where they might need to get the information out to the right person at the time the problem occurs. When developing these systems they need personnel who know how to get the technical bits to work, but they might also need personnel who can plan and design the systems in order to make them less “technical”.
Since the thesis project is to develop a graphical user interface, this chapter will be about analyzing the previous thesis project named Graphical Interface for eMaintenance Solutions and written by Bergquist (2013). This chapter will display her final concept for the graphical user interface.
Analysis of the Bergquists thesis
Bergquists final solution is a good one with a lot of nice features and applications. But some of the features need a little more work. Like the train list in image 2 and 3 where there is only room for about twelve trains without making it unreadable. And what if there are no yellow trains in the list. Then you would have only green and red trains in the list and that can be impossible to determine which is which for an individual who is color blind with red-green color blindness.
The colors does not completely match eMaintenance color scheme and the overall impression of the system according to me is that it´s dark and a little hard to read some of the information.
The settings part of the normal pages gets a whole lot of space which could be used to display more information. The charts in image 8 are hard to read and I don’t really know what they are supposed to display.
The pages of Bergquists thesis are made by using Photoshop. So they are images that need to be transferred into a working graphical interface.
The color used in Bergquists interface
The color used throughout the application is green in the background for the parts of the page where text and settings get displayed. A lighter gray was used on the rest of the page where information is displayed to be able to stand out from the dark background picture
The Pages of Bergquuists interface
The pages in Bergquist (2013) interface are displayed in two different ways depending on whether you log in as a project leader or a technician. The difference is shown below in the tree-diagram.
Figure 1: Tree diagram over Besgquist´s solution.
The pages are made by using a Windows 8 template to make graphical user interfaces for Windows 8 applications. The pages follow a similar grid to the template with the text and the modules making it resemble a typical Windows 8 application. There are some design changes that Bergquist (2013) made along the way to give the interface a more sophisticated look and to make it look more unique.
The login page Image 1 contains two text input boxes and a login button. The eMaintenene logo is displayed on the left hand side of the rest of the information, and it is a smaller variant of the logo displayed.
Image 1: Log in page Log In
Technician
Deviations
Repairs Trains
Project leader
Trains Capacities
Statistics
Next up the home page(Image 2) which is the page where se what other pages are available and enter those pages. It gives an overview of the information the page holds and how it will look on the page. The eMaintenense logo gets displayed on the top of the page.
Image 2: Home page
All the other pages have a similar look. A green border to the left that contains the page name and the different settings and information displayed in the form of text. The right side has a gray background and contains the different types of information graphics and clickable buttons the page should have.
First up is the train overview page (Image 3) where there are a few settings to the left. On the right side, there is a map of Sweden and a clickable list of trains that updates depending on the settings. The trains are sorted by the severity of their condition and displayed with the train name and location.
Image 3: Trains overview page
When clicking a train in the list the system navigates to the specific train´s page (Image 4). On the left, some of the train’s information is displayed like which route it is on and what previous repairs have been done to the train. On the right, the cars of the train are displayed in the order they are placed on the train. They are color coded just as the trains on the previous page. Under the cars, there are some specific texts about each car.
Image 4: Trains page
When clicking a car or the information of the car, the system navigates to the car´s page (Image 5). This page displays the car´s previous repairs and the condition of the car. The wheels on the illustration on the right side are color coded as the rest of the trains and cars.
Image 5: Train car page
The repair availability page Image 8 is for the technician. It contains a schedule of the repairs in the specific cities displayed in the settings column and a list of repairs to come.
Image 6: Repair Availability page
The statistics page Image 7 contains graphs over different things such as costs and repairs.
Image 7: Statistics page
Repair Capacities is a page that shows how much space there is left in the different repair stalls in the different cities (Image 8).
Image 8: Repair capacities page
Traffic Capacities displays how much of the tracks are used at a specific time (Image 9).
The map on the right displays all the different train tracks in Sweden color coded in the same way as the trains depending on how crowded they are.
Image 9: Traffic capacities page
This thesis is all about the design of a graphical user interface and how humans communicate with that interface. It contains arias such as visual perception and how to design information in order to fit the user. This chapter is devoted to theories gathered from books and articles in order to make the end result more pleasing for the user.
Design
The word design is often misused, the use of the word design tend to describe the adaptation of an already finish solution or for the determination of sizes, numbers or shapes. According to Blumrich (1970) and Heskett (2005) design is about solving a problem that has been unsolved, or finding a new way of solving a problem that were previously solved in a different way.
Design should be used to shape and construct the human environment to the better. According to Heskett (2005) the word design has so many meanings that the word is a source of confusion.
There are some real evidence that the humans capacity to design has been constant throughout history according to Heskett (2005).
All the information about design picked up during the entire education is now put to good use. By asking questions like what signifies a good design and how do you get a working design the interface can be both beautiful and effective. All this is important for the end result of the project.
Product development
The constant strive to improve and
survival of the modern company.
According to a benchmarking study, all the products launched the three previous years stand for 27.3% of the company sales according to Kahn (2012).
In the book Kahn (2012) states that making user studies is a good thing not only to get the product a better customer focus, but it can also lead to reduced time to market. It is a myth that making user studies would add time in the product development process according to Kahn (2012).
Successful companies constantly need to operate in a state of innovation according to Mital, Desai, and Subramanian (2007). They have to frequently improve or modify their existing products or introduce new products all together. According to Mital et al. (2007) the key to product development is to gather the information that indicates what people want.
This information along with all the information about product development picked up during the entire education can be helpful during this thesis. All the tips and tricks of how to keep the development going however there might be some differences when designing a service instead of a product but the need of constant improvement is the same.
The stride to make the interface better
over time and to test and implement a new solution in the interface are things that can come in handy when making the interface.
Human Computer interaction
Human computer interaction (HCI) is the study of how people interact with computers. According to Olson (2003) the design work put into the computers to make them user friendly is increasing, thanks to the majority of people using the different systems.
In order to get people to use the system, they have to be pleased in many ways otherwise they might switch to a different system. Olson (2003) states that the goal when designing a system is to produce software that is useful, usable and aesthetically pleasing.
It is important to pilot test systems in order to find flaws and to get input on what the user thinks and needs. In order to know if the design is useful or usable, it must be observed in use according to Olson (2003).
According to Guo (2014) HCI research involves understanding how humans choose to interact with computers and creating new and more effective ways to interact with computers. The term
“computer” can refer to almost any electronic device that humans interact with.
Control
“How much of people´s behavior can be explained by factors generalizable to all users?” Olson (2003)
A system can accomplish this by accommodating several ways to perform a task. Lidwell, Holden, and Butler (2010) takes up the aspect that beginners might favor the more structured ways while the most experienced users might require more efficient and timesaving ways of performing different tasks.
This information is important in order to know what to look for in a new system and how to make the interface more appeling to the user. The information and control of systems and that there is a benefit to have more than one way to perform a task can come in handy when designing the controls of the system.
Information Design
Information is the meaning of data that translates in any form of communication according to NE (2014).
“Information design is defined as the art and science of preparing information so that it can be used by human beings with efficiency and effectiveness” Jacobson (1999)
According to Sprague (2008) information systems must have three components, Data, processes and people. The data stored in the system is only useful if displayed to the right person as information according to Sprague (2008).
An information system is therefore
The need for information design is simply because storing large amounts of information on computers to retrieve it later does not solve our information needs according to Jacobson (1999). The solution is to present the right data to the right people at the right time and that is where information design comes in.
Information overload
In the book, Katz (2012) Information overload is described as an issue of usability, the amount of information should match what the user needs to complete the task. When communicating a large amount of information be selective and use the most valuable information according to Katz (2012).
Analyze how much of the information the page can take without making it too difficult to navigate and find the right information.
This aria of theory can be used to prevent using the wrong data in the interface to use only the data that the user needs as information. Also to limit the amount of information put on each page to avoid information overload.
Graphical user interface
When Graphical user interfaces emerged, it opened up a lot of new opportunities as well as a new set of issues. In the article Olson (2003) explains that the first GUIs where influenced by psychological research that gave some level of stability in the design.
Since all communications between the reader of the information and the maker of the systems almost always takes place on a two dimensional surface you need
flatland according to Tufte (1990).
According to Tufte (1990) small multiples of things is a great way to present data. The user sees a multiple of items that are the same size but might have different colors. Depending on the colors the user will then interpret the meaning of one color compared to another. This way to display items can at ones reveal a large range of alternatives.
This information can be used to make the interface more effective and a bit more realistic than an ordinary flat interface.
Semiotics
In his book Chandler (2007) describes semiotics as the study of not only signs, but anything that can be interpreted as something else.
Ware (2004) says that the visual languages are the easiest to use and learn for humans. While the written language takes may take years to master.
Symbol
According to Chandler (2007) symbols are something that have to be taught to understand the meaning. The symbol does not try to resemble something. A good example is numbers or letters.
Icon
Chandler (2007) says that the icon is something that resembles the original thing in such a way that it is clear what it supposed to resemble. It could be a train on the train track sign.
This information where used when making the icons and symbols. It is a
display in an interface and to give them a similar look so the user dos not get confused. Also to use icons rather than symbols because of the effectiveness that comes with already knowing what it stands for.
Color and contrast
“In representing and communicating information, how are we to benefit from color´s great dominion?” Tufte (1990) The human eyes are astonishing.
According to Tufte (1990) a trained colorist can distinguish among one million colors in pairwise comparison while the normal human being can access about twenty thousand colors.
The number of colors in a system is not limited by the number of colors that humans can see but by the limits of their visual memory according to Tufte (1990).
Tufte (1990) explains that the first principle when assigning color to a system is to do no harm. Simply because choosing colors for information is all about choosing a good color and place is in the right place witch might sound simple but it´s a rather complex job.
Tufte (1990) has four rules when choosing colors:
The first rule is that pure or bright colors have an unbearable effect when displayed in large arias.
The second rule is that placing light
The third rule is that the background color should be muted allowing the smaller brighter arias to stand out.
The fourth rule is that all colors used in the main theme should be placed like islands in on the background color.
Limit the color palette to the colors the human eye can intrepid. According to Lidwell et al. (2010) systems should not have to use more than five colors depending on how advanced they are.
Most researchers suggest according to Katz (2012) that the human eye can distinguish five to seven colors at a time depending on many factors. Factors like movement, brightness and stress.
Only a smaller number of colors can be rapidly registered by the brain. Estimates of how many colors can be perceive at the same time vary between five to ten colors according to Healey (1996).
Ware (2004) says to use low-saturated colors for background coloring and use high saturated colors for symbols in the foreground, this is to make the symbols easier to spot and make the background easier on the eyes.
According to Tufte (1990) color placed on top of a light gray field highlight the data and helps to create an overall harmony.
A grand strategy when choosing colors to display information is to choose a
Spiral sensitivity
Purely chromatic differences in fine detailed information are not suitable.
The text and background have to have luminance contrast as well to make it easier to read according to Ware (2004), this is illustrated in Figure 2 below.
Figure 2: showing lack of luminance contrast
Color Blindness
Normal color vision requires a mixture of three primary color stimuli to match all colors but as many as 2.4% of humans are dichromate and only uses two primary color stimuli to match all the colors according to Pridmore (2014).
Pridmore (2014) explains that the most common form of color blindness is the read-green blindness those who suffer from it only see two hues the blue and the yellow one.
Lidwell et al. (2010) says to not only rely on color to get the message trough, because many people are colorblind, and the message will be completely lost to them. In the book Ware (2004) explains that result of using only colors for visual information is that colorblind people could have a hard time retrieving the information, this is something most people know already, but it is something that you cannot forget when designing something with colors.
The most desirable way to choose colors when designing for the color blind is to choose from the colors that vary in the
yellow-blue direction according to Ware (2004). Because most people that have color blindness have a harder time with distinguishing colors in the red-green spectra.
According to Ware (2004) an unfortunate result of using color to display information is that we create a new class of people with a disability.
Color blindness already keeps people from applying to some jobs because color is used in necessary information according to Ware (2004). The more we use color to display information in new systems the more we increase the potential of color blindness as a disability.
Simultaneous contrast
Simultaneous contrast can result in errors when reading information displayed using gray scale according to Cleveland and McGill (1983). Some experiments described in Ware (2004) explain that the effect of this can result in an average of 20% substantial error while interpreting data. To avoid this, keep from using gray scale to represent more than a few different numerical values.
Contrast
Ware (2004) says that while contrast effects can cause problems in the presentation of data it can also help to view the environment as more accurate.
According to Ware (2004), it is a good thing to use a minimum of 3:1 luminance contrast ratio between the background and a foreground pattern when information represented with fine details. Some examples are texts, small
lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
The information about color and contrast gathered can be a huge help when choosing colors for the interface. The information can help to keep from using the wrong color in the wrong place and to make sure to have the right contrast in order to make the information readable.
Also to keep the number of colors down to give the interface a cleaner and more efficient look.
There are a lot of different ways to increase readability according to Bergström (2012). Some of the most important is the font, the color of text and background and the size of each letter.
Against a background picture that might shift in darkness you might need to create a lighter background for the text in order to make it readable according to Bergström (2012).
Fonts
The efficiency of a font is measured in the amount of characters that fit in a given space. However font efficiency does not guarantee legibility according to Katz (2012) it just means that more letters might fit in the same line.
Serif
The serif fonts originated from the Roman alphabet. They are considered to be more legible specially when printed according to Katz (2012).
The serifs in fonts give the words and the rows a clear line for the eyes to move along according to Bergström (2012) In smaller font sizes the serif fonts may not be suited for the screen because the light emitted from the screen might burn trough the letters and make them harder to read according to Bergström (2012).
Sans serif
The sans serif typefaces work best in larger sizes like headers, but always consider the context of the text according to Katz (2012) and the typeface itself. Sometimes a sans serif typeface may be developed to fit larger amounts of text.
According to Bergström (2012) the sans serifs give a technical and construction locking impression and therefore seems to work best in headers and text to be read at a distance.
This information can be put to good use when choosing fonts for the interface. In order to know what font is recommended for headers and which to use in the body.
In this chapter the projects process is described, where the information came from and how the user interface development went.
The process
The working process of the thesis has been the project circle. The development process described in Bohgard (2008), can be seen as a circular process with a few stages in a circular pattern.
However, the importance of the tasks can wary from every lap.
The most important parts of the project circle are illustrated in Figure 3 below according to Bohgard (2008).
Figure 3: The project circle
This thesis did not need all the different steps in the project circle. Some of the steps were removed because they did not seem relevant to the project.
The different steps used in this project are illustrated in Figure 4 below.
Figure 4: Revised project circle
Project planning
The work was conducted in different phases. One phase was the programming of the graphical user interface, and this phase was ongoing throughout the entire project.
A literature study phase was also conducted in order to collect and draw conclusions based on previous works.
This phase was ongoing throughout the entire project but with a higher focus at the beginning of the project.
A usability test of the systems was planned towards the end of the thesis project, and this was meant to evaluate and compare the previous system to the new one.
Planning
Analyse
Goals
Find Alternatives Evaluate
Develop Implement
Evaluate
Analyse
Find Solutions
Select Develop
Evaluate
Literature review
The literature study went on throughout the entire project in order to always strive towards a better solution. To get a good start on the thesis project the first two weeks were dedicated to only doing literary studies. The material where gathered from books, articles and sites recommended by the supervisors and student colleagues. Other sources were found by using the LTU library search engine Primo.
Since a great deal of the information needed came from the courses in the education such as Graphical design and Human machine interaction the information gathered by using Primo where the design of graphical user interface. Using common search words as Design, Product design and graphical user interface. The search where then limited by adding words as designing a graphical user interface.
The literature review added a large portion of information to the project.
Without that information the end result would be completely different. There are good and bad examples on everything from choosing color to finding out in what way to display information ant the review really helped move the project along in the right direction.
Idea development
In this chapter contains the whole projects idea development.
brainstorming is also a good way to find ideas according to MindTools (n.d.).
On the page MindTools (n.d.), individual brainstorming is described as having complete control over the creative process. It can be a challenge since the participant must come up with all the ideas and does not get any new input of the ideas during the section. On the other hand, the participants do not have to fear the reaction of others, and will have the freedom to express own ideas.
Individual brainstorming was used in some phases of the project in order to come up with new ideas on how the interface should look. Individual brainstorming was also used to make the simple prototypes shown in the results chapter.
Brainstorming is almost always a part of a design process in some fashion. In this project individual brainstorming made the most sense while working alone. The process used while working was to come up with some solutions and if not too difficult run a quick test of the solutions to see which one to use. Individual brainstorming really helped to keep the focus during longer sessions.
Mind mapping
Mind-mapping is a problem identifying creative method according to CreatingMinds (n.d.-b). Write the main subject or problem in the middle and then branch out with words that describe
In this project mind-mapping where used to display the information needed on each page. The first subject was the page name and the branches things to display on the page.
The hardest pages to make are the ones that display the most information. In this project that was the page with an overview of trains and the train page itself. Mind maps for these two pages are illustrated on the next page in Figure 5 and Figure 6. The rest of the mind- maps for all the different pages are displayed in Appendix 2-4.
The overview page contains trains and whether there´s a problem with them. It also has to show where the trains are and then it might be useful to have a map like in the previous thesis.
Figure 5: Mind map of the overview page
The train’s page, on the other hand, needs to display train cars and the problems with the different cars. The user should be able to choose a train and
see what route the train takes and were the train is.
Figure 6: Mind map of the train page
The other pages were displayed in the same way in order to get a better overview on what information to put on the page and then be able to find a place for it.
Mind mapping turned out to be a great way in displaying information and to
keep from forgetting that information.
Concept development
This chapter contains the projects concept development.
Experienced prototyping
With experienced prototyping, everybody can get the look and feel of the system by using simple prototypes according to Buchenau and Suri (2000).
Experience prototyping is a way of emphasizing the experimental aspects of prototyping and get a feel of all the different aspects in a system by using prototypes.
Overview Map
Problems
List of Trains Where
Trains
Where
Name
Problems Cars
Route Choose
Experienced prototyping was used as a way of quickly figuring out which layouts worked and how they would work with each other.
With experienced prototyping the different layouts could be tested to figure out which was the best one and also to test the controls of the system.
Choosing Colors
The green color of the application comes from the green color eMaintenance has chosen for their design profile. The green color was used in the background for most of the areas. When having a slightly lighter green background the foreground color can be both light and dark. The choice came down to white because it gives a lighter and happier expression throughout the application.
Since choosing colors from the red- green spectra is bad when designing for the colorblind according to the theoretical framework. The colors that displayed problems were changed from the previous interface to a yellow, red and light gray. The light gray was chosen for the train cars that were ok, because the gray color does not catch the eye as much as a bright green would.
The colors used in the different systems are displayed below in Figure 7. Green is already used as a background color for some areas it can be a bit much to add another green or a bit confusing to choose the same color according to the theoretical framework.
Figure 7: Color samples used in the different systems
The Layout
The layout of all the different pages is supposed to be similar not just to get a recognizable factor but to be able to limit the amount of pages in the system and just replace the information. The only two pages that differ are the login page and the home page.
To make the home page more appealing and less cluttered the information on the different pages where replaced with icons and symbols. Icons are preferred as supposed to symbols because icons are illustrations based on common human knowledge according to the theory.
The rest of the pages layouts where done in the same fashion. They all needed a page name at the top and some settings to the left. All the pages also had some kind of information to show so to give that the focus of the eyes and the space which was needed most of the page was devoted to that information.
Detail design
The detailed designs of the pages were taken from the prototypes and developed using Microsoft´s Visual Studio.
User study
A user study was carried out towards the end of the thesis. The user study contained a test where participants should complete a simple task on both systems mine and the one from the previous thesis. When the task was done the participants answered two questionnaires and then did the same test on the other system. To keep the influence from the previous test to a minimum half of the participants started with one of the systems and the other half started with the other. The test needed to be carried out by using paper prototyping since the GUI from the previous thesis is not programmed into a working system.
Paper prototyping
Paper prototyping can according to Snyder (2003) be a great way of testing and communicating the experience of a user interface. The test requires that the prototype for the system is printed out.
After all the pages and further information that the test might display is printed the test can start. The participant’s needs to understand that this is a printed version of the system and it might not work exactly like the real thing. The task is reviled to the participants, and they get to try out the system. According to Snyder (2003) the parts of the interface that work and the ones that might need a little more work will show themselves.
Paper prototyping was used during the user study to find out if the controls of the system worked and what users thought about the solution.
Paper prototyping was the fastest way to get a testable system and compare it to Bergquists solution.
Lewis (1995) developed the Computer system usability questionnaire (CSUQ) to get an overall valuation of a system towards the end of a usability study.
Unlike the System Usability Scale developed by John Brooke 1986, the CSUQ test only has questions asked in a positive way according to Albert and Tullis (2013). The test contains nineteen questions, and all are supposed to be answered using a seven-point scale from
“strongly disagree” to “strongly agree”.
The test was shortened in order to make it work with students on the university so the questions that related to work where discarded.
Benedek and Miner (2002) came up with a whole new way of measuring usability called Product Reaction Cards. They presented the participants with 118 cards all with different words printed on them and then asked them to choose the words best associated with the system. The words are a spread of positive and negative words that could describe a system.
Both the CUSC and the Microsoft Product Reaction Cards were used in the test in order to get both the comparable numbers of a normal questionnaire and a more visual way to express usability with words.
Reliability and validity
In order to secure a good end result in this thesis the use of the methods described in this chapter was vital. Since the literature review went on throughout the entire project there was always time to find new information to help solve the problems that came up during the process. Some of the information helped with improving the interface while some of the information helped discard solutions that did not work in order to make the system more pleasing for the user.
In the development process the use of methods like brainstorming and mind
mapping really helped speed the process along. The use of methods keeps the mind oriented towards the task and makes it easier to find solutions to problems that appear.
The user study where a huge help in the end of the project to make sure that the interface worked like it was supposed to and that it was pleasing to use. Paper prototyping was a great help in the user study to keep it simple enough for a novice user to navigate the system and find out the information for the test.
This chapter contains the result of the thesis and all the results gathered from the usability test, development process and the detailed design.
Results of the usability test
The usability test showed that the participants seemed to perform the task faster and be more effective while testing the new system. They seemed to know exactly what to do at all times.
The only problem was if they were to
choose overview of trains witch did not matter since you get to the same place by choosing ether of them.
The CSUQ shows that the average results of all the eight participants were in favor of the new system on all the questions shown in Figure 8.
Figure 8: Graph over the results from the CSUQ
The overall test score comes out when the average of all the questions is calculated. The older system got five point five out of seven which is a good score but the newly developed system got six point five out of seven.
From the product reaction cards questionnaire word-clouds where generated using the page Feinberg (2013). The clouds in Figure 9 and Figure 10 contain the words that the
participants have chosen and depending on the amount of times the word is chosen it will become balder. If you compare the two you will find that both of the systems have their different qualities the older GUI is considered to be more business-like and professional.
The new GUI is considered to be more efficient and more simplistic to the older one that tends to be a bit cluttered with information.
0,0 1,0 2,0 3,0 4,0 5,0 6,0 7,0
1 2 3 4 5 6 7 8 9 10 11 12 13
Computer System Usability Questionnaire
Old GUI New GUI
Figure 9: Word-cloud new GUI
Figure 10: Word-cloud old GUI
Results of idea and concept development
The layout of the different pages where chosen by using experience prototyping to decide how the layout should look.
The information put on the pages where gathered from the pages mind maps and from the previous system.
The different solutions
In the beginning of the thesis the solutions looked a lot like Bergquists solution because that was the starting point of this entire thesis. The pages where split in half and had information on one side and lists and tables on the other like figure 11.
Figure 11: Early solution of a page
This solution was discarded because the lack of space for lists and tables and simply because the bright green was a lite overpowering put on that much space.
The solution to this problem where to limit the space of the information to about a third of the page to give more space to the list and tables like in figure 12.
Figure 12: Early solution of a page
But the information still had too much space and should stand apart from the header so the final design was to put some space between all the different modules and limit the space of the information to fit the text like in figure 13.
A lot of lists and tables from Bergquists solution were also changes during the course of the project. Some because they held to much information like the list on the login page which held some information about all the pages that list where replaced by icons to simplify for the user and keep from having information overload.
Since the making of the interface where an ongoing process a lot of the drafts were tested and remade on the spot if they did not work as good as the previous one or as good as Bergquists solution.
Overview
The overview page needed some limitations as for which part of Sweden the trains were to be displayed and the types of trains to display. A map is useful to see where the trains are and a list of trains so the user can choose
Header
INFORMATION
LISTS AND TABLES
Header
INFORMATION
LISTS AND TABLES
A way of showing the different problems based on different colors came from the earlier thesis, and this is used to display problems in the pages that needed to display problems. The colors used are described in the previous chapter choosing color.
Figure 13: Prototype of the overview page
Trains
The train page was the most difficult page to make due to the amount of information displayed on the page. It often ended up with information overload and no place to rest the eyes.
By making the page so that the cars list takes the biggest part it is where the eyes end up after reading the page name and some of the information. This is illustrated in Figure 14 below.
Train car
The train cars page should display the train car and what wheels that might need repairs. Some information is also needed to know which train the car is active and when it might have a scheduled repair. A list of previous repairs is also displayed to find out if the same problems occur a lot. All of this is displayed in Figure 15 below.
Figure 15: Prototype of the train cars page
Repairs
It felt like the repairs page, and the repairs capacities page could benefit from having the information on the same page. Since the repairs page should contain the repair schedule, it might as well show how much space there is in the repair shops. This is illustrated in Figure 16 below.
Overview
WHERE TRAIN TYPE
MAP LIST OF TRAINS
Trains
TRAIN NR OF CARS ROUTE
MAP
CARS LIST
Train cars
TRAIN NAME MAINTENENSE
PREVIOUS REPAIRS
CAR
Repairs
WHERE SPACE AVAILABLE
SCHEDULE
Capacities
The railway capacities page is the page displaying the least amount of information. A map is displaying which tracks are or where available and where trains might stock up came from the previous thesis. This layout gives the map and the text more space which is illustrated in Figure 17: Prototype of the capacities page below.
Figure 17: Prototype of the capacities page
Results of detail design
The first thing detail designed was the login page because it was the easiest page to make.
An illustration of the page is showed below in Image 10. The background from the previous system had to be changed due to that the original image was too small to fit a lager screen. The new image was downloaded from miriadna (n.d.) and to get permission you need to contact the photograph which is not displayed on the site. The image was only used to show how the page might look during the time it took to find a better image with full rights.
Image 10: Login page
The colors of the firs pages came out a little bright and to light green but the colors change during the development process. Next up was the home page with icons to display the different pages shown in Image 11.
Capacities
WHEN WHERE
MAP, USED & UNUSED TRACKS
RAILWAY USAGE
Image 11: Home page
The train and overview pages were the hardest to develop and in the detail design process problems with different screen resolutions appeared. It made the pages even harder to develop and as noticed before they often ended up with information overload. One example is Image 12 below.
Image 12: Overview page
Color choice
As described in the method chapter the green color comes from eMaintenance graphical design and only white text and icons are used on the green background in order to get the contrast needed to see the message. The colors that are to describe the trains and cars in
Final result
The new background image was downloaded from wikipedia (n.d.) while using google to find out if it was ok to use and change the image. Larger images of all the pages can be found in Appendix 5-12.
The colors of the final design where toned down to ensure a more pleasant look. They were also made a lite transparent to make the models incorporate the background picture.
When the background picture color is toned down you get a light gray color witch is ideal for backgrounds and makes the green models in the foreground stick out more. The color or the text could have been either black or white to ensure the contrast needed. A white color were chosen on the green modules and black against the gray, simply because it gives a brighter impression of the pages if the text of the headers are white instead of black.
The login page is a bright page with lots of colors. This is the only page where the background is in the original color. The login panel where placed in the middle and has the basic things that a login panel might like username and password and a button for login. This is displayed in Image 13 below.
Image 13: Final login page
Next up is the home page Image 14 and Image 15 that contains and shows all the different pages available in the application. The big deferens from the previous system is that overview and trains have split up so that the user can navigate directly to trains and search for a specific train or look at overview to see all the trains.
Image 14: Final home page
Image 15: Final home page scrolled
The icons on the page were made by using adobe illustrator and were kept as simple as possible to make them match each other. The different motives were chosen by locking at similar icons and thinking about what they would represent. It was hard to find icons that fit all the different pages because there are no good icons to explain overview while there are a lot of icons to explain trains. So the overview symbol became a map of Sweden because that is what Bergquist used in her solution instead of a paper filled with information as in image 11 simply because it gave a nicer look and a better understanding of the page. the capacities page got a symbol of a train tack to represent train capacities.
When clicking overview you will get to this page Image 16 which displays all the trains
Image 16: Final overview page
The train page Image 17 looks similar to the overview page only the settings and the size of the items have changed. The items are made to look like the cars of the train and use the same color coding as in the overview page. The map will show the location of the train and the text will display which route the train is on.
Image 17: Final train page
When clicking a train car on the train page you end up at that specific cars page Image 18.
The page will immediately show a simplified train car and which wheels on the car that is not working properly. It will also show a list of all the previous repairs done to the car and when the car is up for maintenance or repair.
Image 18: Final train cars page
The statistics page Image 19 does not need a big settings box only one drop down menu to find out which statistics to display. The graphs should speak for themselves with the appropriate texts to understand them.
Image 19: Final statistics page
The repairs page Image 20 should revolve around the schedule because that is what the user needs to find when entering the page. When can they schedule a repair and how much space is left on a specific day. Since it is just an image of the schedule, the page will chance when the right schedule is added. Since the user should be able to chance which city to display in the schedule and how much space is left in the specific shop you have the settings menu to the left.
Image 20: Final repairs page
On each page there is a controlpanel Image 21 which appears when the right mouse button is clicked. It displays all the pages that is awailable from the home page with the icons used in the homepage. This is to quickly move to another page fore the more experianced users.
Image 21: control panel
