Shipping usability

(1)

Annelie Samuelsson 100528

Examination thesis in Informatics C level, 15 credits

Shipping usability

How to evaluate a graphical user interface with little or no access to end users

Bachelor thesis in Informatics

(2)

Abstract

Interaction design is about designing interactive things so that they become usable. An interaction designer’s goal is therefore to design things not only right but also to design the right things, this is called usability. In this thesis the aim is to examine how to best evaluate a user interface that is in the final design phase and that has not involved the end user in its development at all up to this stage. This thesis examined the graphical user interface of GACship III, a system used to accurately record, approve and request payment for all services/charges incurred during port/off-port calls. Three inspection methods and three test methods were investigated. This was done to determine which ones that is appropriate to use during an evaluation with little or no access to end users since this is one of the problem that GAC is facing and since this study only had access to two end users. The system, GACship III, is in the final development phase and so far the development has been made without involving the end users. A checklist for usability evaluations was developed through studying four renowned design principles in the form of Maeda’s, Raskin’s, Nielsen’s and Norman’s view of usability.

The results showed that a heuristic evaluation identifies more usability problems than a digital questionnaire. Probably because the heuristic evaluation gave room for more reflections and comments and therefore turned out to be a more in depth evaluation technique. The digital questionnaire proved to be a weaker method under these conditions, but all in all, the two methods complemented each other. The results also indicated a number of usability problems in GACship III, which implied that the system is not fully efficient. The graphical user interface contained for example a severe mode error together with an unreliable drop down menu. The system consisted of parts where the usability was considered satisfactory. However, those findings will not be discussed in this thesis. In order to improve the systems usability GAC is encouraged to rectify the discrepancies. The result of the study is in addition a usability checklist that can be used during further and future graphical user interface development at GAC.

Keywords: Usability, evaluation, interface, checklist, shipping.

(3)

Preface

This thesis is a bachelor thesis in Informatics at the Linnaeus University. It has been carried out for GAC, Global Hub Service (GHS) and Global Disbursements Centre (GDC) during ten weeks in the spring of 2010.

I want to thank my supervisor at Linnaeus University, Morgan Rydbrink, for helping me to “sätta i star” (smålander expression for “get going”) and also for the continuous feedback.

I would also like to thank my supervisor at GAC, Gustav Eriksson.

Dubai, 28 May, 2010 Annelie Samuelsson

(4)

1. Introduction and background

Interaction design grew as an addition to the field of Human Computer Interaction (HCI) and emerged as a discipline in the 1980’s when computer technology started to be used in everyday objects, from washing machines to cars, giving them a level of interactivity not seen before. Today, almost everything we use, or do, involves some kind of interaction. Interaction design shapes the kind of experience we have when this takes place and the level of interaction design involved determines the value and quality the user experiences when using it. As technology evolves, user- friendliness has become more and more important (Cooper, 2007) and therefore companies of today should try to involve interaction design in the development of new products. When interaction design is implemented into, for example the development of a computer system, it is important to test the system on users, preferably end users. It is only after testing has been put into practice, that you know if the developed product is of high usability. When it comes to evaluating the product it is important to choose appropriate and suitable methods in order to identify as many usability problems as possible. In this study the access to end users is limited and therefore the choice of evaluation methods has been studied together with suitable design principles to accompany the methods. This is also the aim with this study, made on behalf of Gulf Agency Company (GAC).

GAC

Gulf Agency Company is a company that provides services in shipping, logistics, marine and solutions with headquarters in Dubai, United Arab Emirates. Worldwide, the GAC Group employs over 8,000 people in more than 300 offices, located across 40 countries. Within shipping, GAC Group represents around 3,500 customers and handles approximately 50,000 vessels annually. Global Hub Service (GHS) and Global Disbursements Centre (GDC) acts within the shipping part of GAC and have a central role in dealing with port calls for customers with global needs. GHS / GDC handles approximately one third of the GAC group’s total shipping volumes.

GHS / GDC have initiated the enhancement of GACship II into a new system, GACship III. The purpose with the new system, GACship III, is to make it easier for port agents around the world to more quickly deliver data to GACship. The system aims to be launched in July/Aug 2010. The ambition with the new system is that it should be of high usability, new data should be quick to add and therefore the system should not be an obstacle to the port agent's daily work. The users, port agents, are located around the world and their circumstances vary. As of today GACship III consists of a search part and a part for SOF, Statement of facts.

GAC and their web based system, GACship aims to improve their usability and therefore GAC has decided to develop a newer, faster and more user friendly version. The developers at GAC have little access to end users and the development of the new version has so far been made without end users.

Reason is that most end users are working on external companies and GAC are not willing to give access to a prototype before it is completely developed and ready to launch. GAC wants to evaluate

(7)

their system and this together with the fact that the end users are spread around the globe is the background problem to this study.

GACship

GACship is a secure and encryption protected web-application and can therefore be accessed throughout the world using an internet connection and an Internet Explorer browser. GACship has been operational for 8 years and was thoroughly updated in 2005. The target group for GACship is principals (customer end users), hub coordinators (intermediary end user) and port agents (supplier end user). The development is done in-house by a team of project managers, system architects, developers and testers. The team also performs second line support. The development and hosting is maintained in-house. A team of 6 full time staff make up the GACship II team and a team of 3,5 full time staff are working with the development of GACship III. Both teams are responsible for development, maintenance and second line support. This is how GAC describes GACship:

• Template feature for quick and effective data input.

• Job search tool integrated with advanced features.

• Extensive search provided in pick-up lists.

• Alerts and “to do list”, mail list for all job and current jobs.

• Download preferred agents details and disbursement accounts service lists.

GACship is used by GHS/GDC and port agents around the world to accurately record, approve and request payment for all services/charges incurred during port/off-port calls. The system records and manages estimated proforma disbursements, final disbursements as well as all other documents that are created and needed during a port call, such as e-mail communication, scanned cargo documents and SOF (Statement of facts) documents together with scanned vouchers.

1.1 Aim of the study

The problem of the study was that in the development of the new interface for GACship III no specific usability studies had been made, which meant that no information regarding the system user friendliness was available. There had been studies done on GACship II previously by external parties, a consultant was brought in 2007 that conducted a survey and group sessions with agents and other user groups. However, the outcome of the 2007 study was not taken into consideration when developing GACship III, reason for this is unclear. GAC receives information through different channels, such as support issues, surveys to users and oral feedback which has lead to the conclusion that GACship II had two major areas of concern: speed and user friendliness. This information has come from the end users. In complement to this problem formulation, a research question was presented. The aim with the case study is to answer the research question and to give GAC a tool for

(8)

FIGURE 1 Flow chart of the work process.

The figure shows the flow chart of the work process for this examination project.

further and future development together with making a thorough usability evaluation of the existing application. The research questions follows:

What methods are appropriate to use when evaluating a user interface with little or no access to end users? How can these methods support usability for future user interface development?

To answer the aforementioned research question and provide GAC with a tool to evaluate their user interface the following development plans were made, see figure 1.

The study is structured in the following way. The first phase , initiation and preparation , involved discussing the problem and deciding on the aim and goal of the study. The second phase consisted of literature studies. Based on this the methods that were to be used were decided; heuristic evaluation and questionnaire. Since the method of heuristic evaluation was chosen, usability guide lines to base the evaluation approach on were needed. This led to the development of a usability checklist based on the principles of Maeda’s, Raskin’s, Nielsen’s and Norman’s view of usability. The next phase meant implementing the usability checklist on the heuristic evaluation together with the digital questionnaire.

Once this was finalized the questionnaire could be sent out to two end users and the heuristic evaluation could be carried out by three evaluators. Upon receiving answers from end users and heuristic evaluators the data was compiled and analyzed generating the results of the case study. Based on this the goal of this study were to:

• Improve the usability of GACship III through usability evaluations.

• Perform literature studies that will decide on a suitable evaluation approach.

• The purpose of the research question is to find the best way to evaluate GACship III.

• Perform an analysis of the literature studies that will lead to the development of a usability checklist. The purpose with the checklist is firstly to be used during the heuristic evaluation

Initiation and

Preparation Literature

studies Methods used

Usability checklist Heuristic

evaluation Questionnaire Compilation

of data

Results

(9)

conducted in this study and secondly as support for GAC to test GACship III when finalized. The goal with the checklist is also to be a method that supports further interface development without end users.

• Perform a heuristic evaluation with focus on the developed design principles. The purpose with the heuristic evaluation is to find usability problems without involving the end user. The purpose with focusing on locus of attention is to study if GACship III supports locus of attention since it is essential, from a usability point of view, to show information where the user has his or her attention.

• Perform a digital questionnaire on end users with focus on the developed design principles.

The purpose with the questionnaire is to reach two end users, located in France (Getma) and Chile (Ultramar). The purpose with focusing on locus of attention is to study if GACship III supports locus of attention since it is essential, from a usability point of view, to show information where the user has his or her attention.

1.1.1 Delimitations of study

• The evaluations will only be based on the checklist developed from the literature studies.

• This project will only use two methods, heuristic evaluation and user testing in form of digital questionnaires.

• This project will not include adjustments or corrections of GACship III during the evaluation process.

• This project will not include proposals for graphical design since this is covered by GAC’s own GACstyle manual.

(10)

2. Theoretical framework

The theory has been divided into five sections. This section explains why usability is essential. The second section, usability principles and theories, brings up various principles and theories of user friendliness and is used in the work of creating a checklist on which the evaluations will be based. The third section, levels of design, summarizes the design principles and explains their level of design according to Cooper’s (2007) interaction vocabulary pyramid. The forth section, evaluation methods, was created in order to understand and find the best suitable way to conduct the evaluation study of GACship III. The fifth section summarizes and discusses how to choose and combine evaluation methods.

2.1 The why, how, when and where of usability

Usability is according to Nielsen (2003) vital since it is a requirement for survival and it all boils down to one word; leaving. If a website is too complex to use, people leave. If a website does not answer users most frequent questions, they leave. If users get lost on a website, they leave. If a homepage fails to clearly show what users can do and what the company offers on a web site, they leave.

Norman (1999) agrees with this by saying that usability is much more important on websites than with physical products. He continues by stating that; on a web, if the site is unusable, you just leave. Nielsen (2003) also states that for intranets, usability is a matter of employee productivity. The time users spend being lost or having difficulties on the intranet is actually money lost for the

company, since they are wasting time at work without getting the work done. Preece et al (2006) adds that there are also good reasons to invest in evaluation from a marketing and business perspective.

Designers get feedback early on in the design process, which leads to major problems being fixed before the product goes live, it also helps designers to focus on the real problems instead of debating what they themselves likes or dislikes about a product. In this study the intranet could be compared to GACship III since the application needs to be updated with valid information from suppliers. If suppliers can update GACship III more effective and faster; time, frustration and in the long run money is saved.

Usability can be improved through different methods, but one of the most basic and useful method is user testing (Nielsen, 2003). User testing has three components:

• Make sure that users that you are going to test your, for example, website on are representative.

• Make sure that the tasks users are to perform are representative for the websites design.

• Do not interfere when users perform their tasks. Observe only and take notes of where they have difficulties and where they are successful.

Usability testing should be conducted throughout the design process (Nielsen, 2003). According to Nielsen (2003) the only way to a high-quality user experience is to start user testing early in the design process and to keep testing every step of the way. The main steps are as follows:

(11)

1. Before commencing work with the new design, test the old design to identify the good parts that you should keep or emphasize, and the bad parts that give users trouble.

2. Unless you're working on an intranet, test your competitors' designs to get cheap data on a range of alternative interfaces that have similar features to your own.

3. Conduct a field study to see how users behave in their natural habitat.

4. Make paper prototypes of one or more new design ideas and test them. The less time you invest in these design ideas the better, because you'll need to change them all based on the test results.

5. Refine the design ideas that test best through multiple iterations, gradually moving from low- fidelity prototyping to high-fidelity representations that run on the computer. Test each iteration.

6. Inspect the design relative to established usability guidelines, whether from your own earlier studies or published research.

7. Once you decide on, and implement the final design, test it again. Subtle usability problems always creep in during implementation. (Nielsen, 2003)

Nielsen (2003) also warns to not postpone user testing until the design is fully implemented. If you do, it will most probably be almost impossible to fix the vast majority of the usability problems revealed since many of the problems are likely to be structural, and fixing them would involve major re-architecting. Norman (2006) agrees with this by saying that user testing should be done before the project is initiated (to determine what product to build), under the project (to ensure the project is on track), and after (to find remaining usability problems).

User tests can be carried out, for example, in a conference room or an office, as long as there are no distractions around. The most important thing is that the usability study involves real users (Nielsen, 2003).

(12)

2.2 Usability theories and principles

This section presents the four different usability theories used. It starts off with Maeda’s more general thoughts on usability and ends with Raskin’s, Nielsen’s and Norman’s more specific theories. The theories will lead to the development of a usability checklist, which in turn will be the foundation of the evaluation methods chosen.

2.2.1 Usability according to Maeda

John Maeda has written several books on his philosophy of “humanizing technology”. In his literary work, The Laws of Simplicity (2006) , he writes about his thoughts regarding the importance of simplicity when it comes to design and technology.

Law 1: Reduce

According to Maeda (2006) the simplest way to achieve simplicity is through thoughtful reduction.

He argues that to simplify a system you have to remove functionality. This should be done whenever it is possible without significant penalty to create true simplification, according to Maeda (2006). As an example, he mentions today’s DVD which often has too many buttons if your only aim is to play a movie. A solution could be to remove the buttons for Rewind, Forward, Eject, and so on until only one button remains: Play. But what happens if you then want to pause the movie or replay your favourite scene? Maeda’s answer to this is to find balance between simplicity and complexity. When everything that can be removed is gone, a second battery of methods can be employed. Maeda (2006) call these methods SHE: Shrink, Hide, and Embody.

Shrink – The smaller the object is, the more forgiving we are as users. Making things smaller doesn't make them necessarily better, but when they are made so, we tend to have a more forgiving attitude toward their existence. When a small, unassuming object exceeds our expectations, we are not only surprised but pleased. Our usual reaction is something like; "That little thing did all that?" (Maeda, 2006)

Hide – Hiding makes the complexity go away, this can be compared to the Swiss army knife. Most likely you will only open one knife or tool at a time — the rest remain concealed inside. This could be compared to a user interface on a computer screen. The interface is not constrained by physical space which means you can hide objects in the software.

Embody - Once a product has been shrunk and features taken away, Maeda (2006) argues that a real or perceived sense of value should be embedded in the product. A good example according to Maeda (2006) is the design on one of Bang & Olufsen’s music system remote control. The remote is slim, small and made of the finest materials but is considerably and intentionally heavier. The aim is to delicately communicate a higher quality.

(13)

Law 2: Organize

The second law concerns basic cataloguing, by organizing a system of many it appears fewer. Maeda (2006) compares the law of organizing with the daily challenges of our lives, managing complexity in our homes. To achieve simplicity in our daily lives he states that there are three consistent strategies:

1) buy a bigger house, 2) put away everything you don’t really need into storage, or 3) organize your existing belongings in a systematic fashion. These different solutions have mixed results, a large house lowers the clutter per square meter, but ultimately, larger space allows more clutter. To storage everything you don’t need increases the amount of empty space, but this space can immediately be filled with more things that eventually need to go into storage. The final option of implementing systems to organize things, for example closet organizers, works as long as the organizing principles can be obeyed. This can also be applied on, for example, a webpage. To organize and de-complicate a webpage there are two questions to ask: “What to hide?” and “Where to put it?” To further tame complexity a third question is needed: “What goes with what?” The number of groups must of course be significantly less than the number of items to be organized for this rule to be successful.

Maeda’s (2006) solution to this is SLIP: Sort, Label, Integrate, and Prioritize.

Sort – Find natural groupings. Sort involves writing down each item to be organized and then assigning them to natural groupings.

Label – Each group is then given a label since they need a relevant name.

Integrate – Next step is to integrate groups that appear significantly similar to each other since the goal is to reduce groups to as few as possible.

Prioritize – Finally, prioritize the most critical items to ensure they receive the highest attention.

Law 3: Time

According to Maeda (2006) the average person spends at least one hour a day waiting in line. The average person also spends uncountable seconds, minutes and even weeks waiting for something that might not have a line at all. The waiting can be subtle. We wait for the water kettle to boil, the electric toothbrush to finish or for the summer to finally arrive. Some waiting is less subtle; it can be stressful or irritating. Such as waiting for a webpage to load, a computer to start up, traffic to clear or winter to be over. Maeda (2006) therefore argues that by reducing the time spent waiting we can spend that time on something else, like watching our favourite soccer team or spending time with our loved ones. His conclusion is that saving in time feels like simplicity and this can be done through SHE, the method introduced in the first Law of Reduce.

Shrinking time – When it comes to a webpage, shrinking time could mean that you for example watch your file sizes, which leads to saved time. Another example is the online bookstore Amazon.com.

Based on the preferences of other people, Amazon.com recommends a handful of books that you might like depending on your earlier searches, which helps you save time looking them up or finding them yourself.

(14)

Hiding and Embodying time – As an example Maeda (2006) mentions the Casinos in Las Vegas where no windows or clocks exists. They are trying to hide the passage of time away in order to try and keep the customers there longer, which is deceiving. A better way to work with time is to embody it somehow. A good example of this that Maeda (2006) mentions are progress bars. When performing a task in software application or downloading a file, there will almost always be a progress bar. The progress bar shows how much has been done and how much longer the application has to keep working. But it also moves — you can see the computer working and the progress made is being visualized for you.

Law 4: Learn

Maeda (2006) argues that knowledge makes everything simpler. This law is about taking into consideration what the users already know. He illustrates an example by discussing the misleading simplicity of operating a screw. Most of us, probably as kids but maybe even as adults have managed to turn the screwdriver in the wrong direction when trying to operate a screw even though it is has an apparently simple design. Knowledge truly makes everything simpler. The problem that Maeda states with taking time to learn a task is that it often feel as you waste time, which is a violation of the Third Law of Time. Maeda (2006) stress however that it often takes longer time to just go ahead with a task without reading the instructions. He calls his methods for easy learning: BRAIN.

Basics are the beginning. Assume the position of the first-time learner.

Repeat yourself often.

Avoid creating desperation. Do not try to “wow”. A gentle, inspired start is the best way to start the process of learning, according to Maeda.

Inspire with examples, the ultimate catalyst for learning.

Never forget to repeat yourself.

Law 5: Differences

Nobody wants to eat only dessert. Through this statement Maeda (2006) argues that simplicity and complexity need each other. What he means is that even a child that loves ice cream will eventually tire his sweet tooth. The same goes for design; we appreciate simplicity only because we can compare it to complexity. The technology of today continues to grow in complexity and therefore Maeda argues that by simplifying your product you partly benefit from it economically and partly it also helps your product to stand out. A good example of this is the iPod which in comparison to other competitors in the MP3 player market has managed to keep its design simple. In the first law, we learned about thoughtful reduction. In that process, we consider what is most important. Then we highlight those things. Similarly, organizing is about deciding what groups are important and what they should contain. If everything is important, nothing is. The law of differences acknowledges that in order to achieve simplicity, we must have complexity.

(15)

Law 6: Context

In this law Maeda (2006) emphasizes the importance of what might become lost during a design process. He defines it by stating; what lies in the periphery of simplicity is definitely not peripheral.

Maeda (2006) talks about being comfortably lost, a place somewhere between the extremes and gives a non-web example about hiking in a subtly marked trail:

I personally experience this sensation of being “comfortably lost” on a recent vacation hike in Maine. I noted that the trails were marked with rectangles of bright blue paint. Each of the trails was highly navigable due to its good condition, but once in a while I would pause and wonder, “Where do I go next?”

Almost like magic one of these blue markers that previously sat in the background of my perceptual field literally “popped” into the foreground. (Maeda, 2006, p 61)

The law of context therefore says that a designer should let visitors, whether to a Web site or state park; feel “comfortably lost.”

Law 7: Emotion

This law, according to Maeda (2006), is not for everyone. Maeda states that sometimes more emotions are better than less. He continues by saying that “when emotions are considered above everything else, do not be afraid to add more ornament or layers of meaning”. What he means is that sometimes and by some people simplicity can be considered ugly. Take Dubai, a part of the Arab world, for example where this study has been made. This is a world where iPod’s and iPhone’s are covered in Swarovski crystals, where expensive cars have been coloured like they belong in a children’s colouring book and almost nothing is minimalistic, most Arab’s are all about the “bling”.

Another example that Maeda (2006) mentions is IKEA, a furniture retailer that benefits the economical shopper through its concept of simple and affordable products. However, to some people, Ikeas products through its simplicity are not only cheap, but look cheap. Maeda’s point is that “form follows function” and that “feeling follows form”, meaning; sometimes design need to move towards complexity (and away from simplicity). Again Maeda (2006) takes the iPod as an example. If people are drawn to the simplicity of a device, the iPod, why do they rush to accessorize it with protective and decorative cases? Another way to explain the law of emotion is by comparing the simplest web page possible, with a heading, black text and a white background. Even though a blank white page might be simpler, reduction is also about being as complex as needed. Most designers probably would want to add something to the page. And that something would most probably be colour as shown in figure 2. As mentioned in the law of context, colour can help the way on a hiking trail. The law of differences would say that we need multiple colours to provide proper contrast between different elements and the same law would probably argue that black text on a white background would not be complex enough. Folding in the law of organize, it would probably also be suitable to use colours to separate different categories. This is also a law that Maeda (2006) himself realises contradicts with the first law of reduce.

(16)

FIGURE 2 Simplicity with added emotion The figure shows the same page as show in figure 3, but with added colour to provide contrast and emotion.

Law 8: Trust

Maeda (2006) discusses if the risk of placing trust in devices around us is worth the simplicity gained?

As an example he visualizes an electronic device with only one unlabeled button on its surface.

Pressing the button would complete your immediate task. Your chosen task could be anything; a letter to your husband or a resignation letter to your existing job. This is according to Maeda (2006), simplicity, and not far from reality. Today’s computers remember our passwords, names and credit card numbers and having watched you write a letter to your husband before, the computer can send a fair estimate of an email to him. Whether the content is accurate or not is a different story, but according to Maeda (2006) it is the price of not having to think. Maeda (2006) also discusses the role of today’s forgiving media. Computer tools of today often give us the option of undo which allows us to easily remove a typed sentence or any other visual mark. Regarding the magic of undo Maeda (2006) states that people have different views. Some believe that undo makes people less creative since they don’t think through ideas and instead create by chance and others believe that the feature makes people more creative since it allows them to take more risks. Maeda’s (2006) view is that a product that can correct mistakes as they happen make an important service and gains our trust. That is the power of undo.

Law 9: Failure

Maeda (2006) also states that some things can never be made simple. With this he means that even if the goal for simplicity is believed to be too costly or out of reach, there is not harm of trying because there is always ROF (Return on Failure.) Maeda means that attempting to simplify a complex

procedure is reasonable. It may end in failure or it could lead to a more usable product. If failing, take the time to find out why. Either something has been made simpler, or knowledge has been gained that can be of assistance in the future.

Law 10: The One

The tenth law is an encapsulation of all nine laws and Maeda (2006) mentions that in his approach to simplicity the flaw is that there are too many laws. In the tenth law, The One, Maeda fixes that by compromising simplicity into one single sentence.

(17)

“Simplicity is about subtracting the obvious and adding the meaningful” (Maeda, 2006, p 89) Maeda gives us three keys to following this law: Away, open, and power.

Away: Maeda (2006) states that more appears like less by simply moving it far, far away. He once again takes Google as an example, whereby the user experience (query) is made simpler by keeping the result local but moving the actual work (Google’s servers processing the query) to a far away location. A lightweight text input box in the web browser is all the user needs to access Google’s vast network of computers and databases.

Open: Openness simplifies complexity according to Maeda (2006). Open-source technologies achieve strength from exposure and the collective attention that it enables. Maeda takes Linux, an operation system that competes with Microsoft Windows, as an example. While Linux is free and open-source, Window is for-pay and closed source. If Linux gets broken, you might not be able to fix it yourself but there are thousands of Linux experts on the internet that at any time can respond to common problems, compared to Windows were you need to contact a real Microsoft employee. Maeda (2006) argues that the Linux expert would most probably jump into action quicker and thus the power of many outweighs the power of few.

Power: Use less, gain more. This key discusses the importance of conserving. In the same way that our planet faces the challenge of limiting our consumption of limited resources, so does our designs.

Maeda (2006) argues that these very limits can produce an entry of creative spirit driven by the sense of urgency the limits introduced. Maeda mentions the battery of a laptop. When we are running out of battery but still have a few tasks to complete, we tend to be more efficient.

2.2.2 Usability according to Raskin

Jef Raskin’s literary work, The human interface (2007) , gives several examples of how to improve interaction system design. This study focuses on Raskin’s thoughts on locus of attention, formation of habits and modes. Locus of attention explains the difference between unconscious, conscious, and locus of attention and how it supports the formation of habits from a broad perspective. Modes are a description of a problem that prevents usability from a more specific perspective.

Locus of attention

Raskin (2007) defines locus of attention as a feature or an object in the physical world or an idea about which you are intently and actively thinking. A more simple explanation would be to recall the last letter of your first name. It is an easy task, but it highlights the difference between unconscious, conscious, and locus of attention. When you began the second sentence of this paragraph, your locus of attention was on the words of that sentence, as it is now. Humans have, according to Raskin (2007), only one locus of attention, and are able to think of only one thought at a time. When you read the second sentence, it made you bring the last letter of your first name from your unconscious, to your conscious, thus causing your locus of attention to change. Notice how you had to stop

(18)

reading until you thought of the letter, then you shifted your attention back to the text (Raskin, 2007). Amongst all sensory input, the locus of attention is the input to which one allocates mental resources. Input that falls outside the locus of attention may go absolutely unnoticed. An example of locus of attention is a specific section of a computer screen (Raskin, 2007).

Our locus of attention is therefore important in the design of computer interfaces. An interface which requires constant shifting of our locus of attention is frustrating. Changing our locus of attention slows down tasks. While learning a new interface, some additional time is required to become familiar. But over time, a well designed interface will not distract a user more than necessary from the task the user wishes to complete due to the formation of habits.

Formation of habits

According to Raskin (2007) the aim for a designer is to create an interface that does not allow habits to cause problems for the user. Instead designers should design interfaces that:

1. Deliberately take advantage of the human trait of forming habits.

2. Allows users to form habits that ease their workflow.

Raskin (2007) therefore proposes that habit creation is a mechanism that can be used to shift the focus of users from the interface to the specific target task.

Modes

In user interface design, a mode is defined as a distinct setting within a computer program or any physical machine interface, in which the same user input will produce perceived different results than it would in other settings (Raskin, 2007). Modes are according to Raskin (2007) a significant source of errors, confusions, unnecessary restrictions, and complexity in interfaces. To fully understand modes, Raskin (2007) defines a gesture. A gesture is a sequence of human actions completed automatically once set in motion. For example, if an experienced typist writes the word modes, it will become a single gesture. But if a beginning typist on the other hand writes the word modes, the typing of each letter would be a separate gesture (Raskin, 2007).

If an interface has modes, then the same gesture that you have habituated performs completely different actions depending on which mode the system is in. For instance, take the Caps Lock key;

have you ever accidentally pressed it unknowingly, only to find that everything you type LOOKS LIKE THIS? When that happens, all that habituation you've built up about how to type on a keyboard gets subverted. It is like your computer has suddenly turned into a completely different interface with a different set of behaviours. That derails your train of thought, because you are suddenly confused about why your habits aren't producing what you expect them to.

As a summary, Raskin (2007) considers a human-machine interface modal with respect to a given gesture when;

1. The current state of the interface is not the users locus of attention.

(19)

FIGURE 3 Good learnability.

The figure shows an example of good learnability.

2. The interface will execute one among several different responses to the gesture, depending on the system's current state.

As a result of this Raskin (2007) argues that a modeless interface intends to avoid mode errors by making it impossible for the user to commit to them.

2.2.3 Usability according to Nielsen

According to Jakob Nielsen (2003) usability is a quality attribute that assesses how easy a user interface is to use. His definition of usability includes five attributes which are:

Learnability

How easy is it for users to accomplish basic tasks the first time they encounter the design? (Nielsen, 2003)

Example: Google search is a good example as shown in figure 3. The web page only consists of a text box and two search buttons, which makes it easy for the user to accomplish a basic search.

Efficiency

Once users have learned the design, how quickly can they perform tasks? (Nielsen, 2003)

Example: Online securities brokers and other sites that target heavy users must be designed with the efficiency of such knowledgeable users in mind.

Memorability

When users return to the design after a period of not using it, how easily can they re-establish proficiency? (Nielsen, 2003)

Example: A good E-commerce site with a design that easily lets the users make purchases the next time they visit the site are an example of memorability.

Errors

How many errors do users make, how severe are these errors, and how easily can they recover from the errors? (Nielsen, 2003)

Example: Confusing button layouts and error messages should be re-evaluated making it difficult for users to make a mistake, and if an error does occur, the site design should allow the user to recover from the error without assistance, as much as possible.

Satisfaction

How pleasant is the design to use? (Nielsen, 2003)

(20)

Example: Satisfaction is a measure of the degree of enjoyment users experience when visiting a site.

This usability characteristic is especially important for entertainment-related sites such as Internet games and dating sites. Since users who visit these types of sites want to spend time there and enjoy them, satisfaction in terms of entertainment value is a higher priority than the speed at which a user can accomplish a task.

2.2.3.1 Nielsen’s ten heuristics

Nielsen (1994) has developed ten general principles (heuristics) to consider when creating a graphical user interface, GUI. The principles are an extension of his definition of the five just mentioned usability attributes and are more in the nature of rules of thumb than specific usability guidelines according to Nielsen himself (1994). The heuristics are meant to be used for usability testing and the principles are as follows:

Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time (Nielsen, 1994).

Explanation: The user need to know “Where am I?” and “Where can I go next?”

Example: Change the cursor to indicate possible actions such as hand over a hyperlink or show activity by showing an hourglass. Use highlights to show selected objects, use the status bar for messages and progress indicators.

Match between system and the real world

The system should speak the users language, with words, phrases and concepts familiar to the user, rather than system oriented terms. Follow real-world conventions, making information appear in a natural and logical order (Nielsen, 1994).

Explanation: Speak the users language but be aware that the users probably will come from diverse backgrounds.

Example: Metaphors are one way to speak the users language such as documents, folders and trashcan. Idioms are another such as, labelled buttons and fields, navigation bars, list boxes and icons.

User control and freedom

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo (Nielsen, 1994).

Explanation: Users should not be trapped by the interface; instead they should be able to explore it.

Example: A “home” button on every page is a simple way to let users feel in control of a webpage.

“Undo” buttons is also a good solution to support exploration as well as editing. If the user is asked to provide any kind of data, such as attachments or graphical objects, the interface should provide a

(21)

way to go back and change what was initially entered by allowing the user to rename, add or remove the object or attachment.

Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing.

Follow platform conventions (Nielsen, 1994).

Explanation: “Platform conventions” on the web means realizing that your web page is not an island.

The user should not be surprised by the way commands or interface object works, similar things, in terms of colour and location, should look and act in similar ways.

Example: If a consistent standard is developed, training requirements are reduced as skills can be generalized from previous experience. Developers do not have to reinvent the wheel as reusable routines and rules can be build, which also makes change easier as code will be consistent.

Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action (Nielsen, 1994).

Explanation: Do not give the user a chance to make an error.

Example: Disable options so that they cannot be selected, as shown later on in figure 5 or make sure that dangerous functions are well separated from frequently used commands. Another example is Locus of attention and Modes as described by Raskin’s in section 3.2.2.

Recognition rather than recall

Minimise the users memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate (Nielsen, 1994).

Explanation: Often users cannot remember what each object, action, option means.

Example: Therefore, icons, tooltips, and easily accessible documentation should be added so that users don't have to remember what each object, action, option do.

Flexibility and efficiency of use

Accelerators – unseen by the novice user – may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions (Nielsen, 1994).

Explanation: Support easily learned shortcuts. Frequent users need and want them.

Example: Allow keyboard shortcuts, retrievable history, bookmarks and personalization.

Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility (Nielsen, 1994).

(22)

Explanation: Simplicity. Leave things out unless they don’t have a good reason to be included. If a feature is never used, there is no reason for it to complicate the interface.

Example: Google offers a great positive example of the less-is-more philosophy, as shown and discussed earlier on in figure 3.

Help users recognise, diagnose, and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution (Nielsen, 1994).

Explanation: Give a good error message. The error message should speak the users language, give constructive help and be polite.

Example: A good example of this can be found in most e-commerce interfaces. If a user forgets to enter data in a required field, the system presents an error message and pinpoints which fields are missing data.

Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the users task, list concrete steps to be carried out, and not be too large (Nielsen, 1994).

Explanation: This heuristic deals with the end-users access to help and documentation.

Example: In a web page it is important to not just include help pages, but to integrate the

documentation into the site. Otherwise users will probably read the help pages only because they get stuck, good help should take this into account.

2.2.4 Usability according to Norman

Norman’s design principles describe the psychology behind what he deems “good” and “bad”

design. He exalts the importance of design in our everyday lives, and the consequences of errors caused by bad designs. His design principles (referred to in Preece et al. 2006, p 29) to take under consideration when developing a graphical user interface (GUI) is:

Visibility

Visibility helps the user construct a mental model which assists the user to predict the effect of their actions. The more visible functions are, the more likely it is that the user will be able to know what to do next. In contrast, when functions are “out of sight,” it makes them more difficult to find and know how to use. For example, important elements such as the navigation of an interface should be

significant. The correct parts must be visible and they must convey a correct message. A visible problem that might occur in GUI is when clues are lacking or exist in excess. The principle of visibility should not be violated to make something “look good”. A result of good visibility is that there is little to remember, which improves, for example, a website’s usability (Norman, 1989). A web example of good visibility is Google search which makes it clear where to enter text since the web

(23)

FIGURE 4 Poor visibility.

The picture shows an example of poor visibility. The water tap works when hands are moved in front of the sensor.

page only contains of a search field. A figure showing Google search was presented earlier on in figure 3. A non web example of good visibility is the design of a car. In a car things are visible. There are good mappings, natural relationships, between the controls and the things controlled. Single controls often have single functions and there is good feedback which makes the system understandable. In general, the relationships among the users intentions, the required actions, and the results are sensible, not random, and meaningful (Norman, 1989). A non web example that displays poor visibility is sensor technology, for example a water tap, displayed in figure 4. The tap makes us unsure of where we should put our hands which leads to guessing.

Feedback

Feedback is about sending back information regarding what action has been done and what has been accomplished. This allows the person to continue with the activity. Good feedback needs to be immediate and synchronized with user action (Norman, 1989). A variety of feedback is possible for interaction, design-audio, tactile, verbal, and combinations of these. A good way to illustrate the importance of feedback is to imagine what everyday life would be without it. Imagine playing a guitar or writing on your computer if none of the actions produce any effect for several seconds. The delay would be unbearable before the sound from the guitar was heard or the words would appear on the screen. It would also be almost impossible for the user to continue with the next strum or keystroke (Preece et al, 2006). Good examples of different kinds of immediate feedback are the speed control in a car, a lamp switch, or a calculator.

Constraints

Norman (1999) makes a distinction between physical, logical and cultural constraints. Physical constraints make some actions impossible and are closely related to affordance, a term explained later on. An example of physical constraint is that it is not possible to move the cursor outside a computer screen (Norman, 1999). According to Norman (1999) logical constraints use reasoning to determine the alternatives. It involves how the user knows to scroll down to be able to see the rest of a webpage and how the users know when they have finished a task. By making the basic design model visible, users can logically figure out what actions are required. Cultural constraints are principles shared by a cultural group. As an example Norman (1999) again mentions the scrollbar on the right hand of a display. The fact that one should move the cursor over the scrollbar, and “drag” it downward in order

(24)

FIGURE 5 Restriction of user options

The figure shows how menu options can be deactivated by shading which prevents the user from making incorrect decisions.

FIGURE 6 Constraints of user options

The figure shows how constraints can help to focus the user attention.

to see the rest of the webpage is a cultural, learned convention. Nothing in the way the scroll bar is designed tells us to act this way. Norman summarizes by stating that a design where constraint is implemented determines ways of restricting the kind of user interaction that can occur at a given moment. This can be achieved in various ways. A common design practice is to deactivate certain menu options by shading them, a physical constraint, see figure 5. This prevents the user from making incorrect decisions and as a result reduces the users chance of making a mistake. Constraints can also help when trying to focus the users attention to a needed task, logical constraint, see figure 6. In figure 6, the user has to complete the details at the page or step he or she is, before being able to continue to the next page or step.

(25)

Consistency

Consistency refers to designing interfaces to have similar operations and use similar elements for achieving similar tasks, because similarity increases learnability. A consistent interface is one that follows rules, such as using the same operation to select all objects. For example, a consistent operation is using the same input action to open a new link, such as double clicking. Inconsistent interfaces, on the other hand, allow exceptions to a rule. For example, allowing certain links to open buy a single click. The result and problem with this kind of inconsistency is that it makes it difficult for users to remember and therefore they are more likely to make mistakes. With a consistent interface, on the other hand, the benefits are that they are easier to use and learn. Norman (1998) provides numerous examples of consistency, such as aesthetic consistency; not to use formal language in one place and slang in another, use of colour, use of cues (such as font size and style; bold, italic and colour), placement of items such as orientation information, navigation devices, user input, feedback, or operating instructions. Grouping objects of similar functions can also make a page feel more consistent. If style and appearance is repeated to enhance recognition it also communicates membership and sets an emotional tone. Norman (1998) also talks about functional consistency where meaning and action are consistent to improve learnability and understanding such as consistent use of symbols to represent similar concepts. An everyday example of this is traffic lights since they always turns yellow before red.

Affordance

Norman makes distinction between affordance and perceived affordance. With affordance Norman means the design and quality of an object that suggests how that particular object can and should be used. For example, a computer keyboard affords pressing, a doorknob affords pulling and balls are for throwing and bouncing. On a more simple level, to afford means “to give a clue” and when

affordance are taken advantage of, no instructions are needed. The users will know what to do by just looking at it. Based on the earlier definition and fundamental properties, affordance, in relation to interface design, relates more to (physical) input devices: mouse, keyboard, computer screen and so on. When discussing the qualities of a graphical user interface, the preferred term, according to Norman is perceived affordance. With perceived affordance Norman means whether the user perceives that some action is possible (or in the case of perceived non-affordances, not possible). He distinguishes between the actual (natural, physical) properties of an object and the appearance of affordance by adding the qualifier ‘perceived’. For example, in the context of a website, the perceived affordance of underlined text is that it indicates a hyperlink; and when followed (clicked), the user will be linked to information that relates to the hyperlinked word or phrase. The aim with perceived affordance, when it comes to interface objects, is therefore to design them in a way so that users recognize that clicking on that location is a meaningful, useful action to perform (Norman, 1989, 2004).

(26)

2.3 Levels of design

Each of the aforementioned design principles acts on different levels of interaction. In this section this is shown by introducing Cooper’s (2007) interaction vocabulary pyramid. This will in turn be used to validate that all important aspects of the user interface in question are tested. In Cooper’s (2007) book, About Face: the Essentials of Interaction Design , the model provides a picture of how interaction actions regarding a user interface can be broken down into smaller parts, ranging from the simplest action to more complex actions. Thus a GUI can increase its usability if integrated with restricted interaction vocabulary that builds complex idioms from a small set of primitives. These primitives can in turn build larger set of simple compounds which in turn can be assembled into domain specific idioms, all of which are based on the same small set of easily learned actions.

Primitives

Primitives are the atomic elements of which everything in our language is composed. It is a low-level object or operation from which higher-level, more complex objects and operations can be

constructed. In graphic applications, primitives are basic elements, such as lines, curves, and polygons, which you can combine to create more complex graphical images (compounds). The primitives in a GUI consist of pointing, clicking, and dragging (Cooper, 2007)

Compounds

Compounds are less complex than idioms but more complex than primitives. Compounds are created by combining one or more of the primitives. Examples of compounds are, visual objects such as text display, actions such as double-clicking or c1icking-and-dragging, and manipulate objects like pushbuttons, check boxes, hyperlinks, and direct manipulation handles (Cooper, 2007).

Idioms

Idioms are figures of speech like “don’t shoot the messenger” and “hot”. Idioms are not to be confused by metaphors, which are figurative expressions where a term has been replaced with a concept similar to the original, such as the trashcan in a user interface. An idiomatic design is therefore based on the way we learn and use idioms. A user interface that is idiomatic focuses on the learning of simple, non metaphorical visual and behavioural idioms to accomplish goals and tasks instead of technical knowledge or intuition of function according to Cooper (2007). Idiomatic expressions do not provoke associative connection like metaphors; no one is going to shoot anyone and idiomatically speaking, something can be both hot and cool and be equally desirable according to Cooper (2007). An idiom is understood only because we have learnt it and because it is unique (Cooper, 2007). As an example Cooper (2007) mentions the computer mouse. The device is not at all metaphoric since nothing about the physical appearance of the mouse indicates its purpose or use, nor is it similar to anything else in our experience. However, learning to use the device is easy and instant, even small children can operate them. This is an example of idiomatic learning according to Cooper (2007). The top layer, in figure 7, contains idioms. Idioms combine and structure compounds

(27)

FIGURE 7 Interaction vocabulary

The figure shows how a GUI can be easier to use if integrated with restricted interaction vocabulary.

Point, click, drag, key press Cursor, text Input

Delete, create, draw

Double-click, button click, selection Edit fields, checkboxes, highlighting

Output

Scrolling, sorting dialogs

FIGURE 8 Interaction vocabulary

The figure shows where in the Interaction vocabulary, the design principle used fits.

using domain knowledge of the problem considered: information linked to the users work patterns and goals, and not specifically to the computerized solution.

Examples of idioms in a GUI, includes things like labelled buttons and fields, navigation bars, list boxes, icons, and even groups of fields and controls, or entire panes and dialogs (Cooper, 2007).

According to Cooper (2007) there are an infinity of idioms waiting to be invented, but only a limited set of metaphors waiting to be discovered.

To visualize where in the pyramid the different design principles belong, figure 8 illustrates the different design levels.

As an example, Maeda focuses on primitives in his design theory and his main centre of attention is simplicity. He talks about it in a general fashion and illustrates it with every day examples. The everyday examples that Maeda discusses can easily be converted into web examples. Maeda does not become technical but his guidelines do include, to some extent, examples of compounds and idioms, such as the law of organize – slip, (idioms) and trust - the power of undo, (compounds). Norman’s design principles use mostly compounds and idioms. He talks about compounds in the form of consistency, saying that the same functions should have the same result. Idioms are discussed in his constraint guideline when he talks about logical and cultural constraints and in his affordance

Idioms

Raskin, Nielsen, Norman

Compounds Nielsen, Norman

Primitives Maeda Compounds Generic input and output

actions and symbols Idioms

Application specific commands and feedback

Primitives Indivisible actions

and feedback mechanisms

(28)

guideline when stating that no user instructions are needed if affordance is taken advantage off.

Nielsen’s take on usability is more in the nature of rules of thumb than specific usability guidelines.

His heuristics fit in the categories of compounds and idioms. He provides examples of compounds in the form of “undo-” and “home buttons” (user control and freedom), and keyboard short cuts (flexibility and efficiency of use). Idioms exist in Nielsen’s heuristics in the type of icons (recognition rather than recall) and labelled buttons and navigation bars (match between system and the real world). Nielsen (2008) also argues that it is important to expand the loyal users interaction vocabulary to further increase their loyalty. Because they move so fast, experienced users don't waste time learning new features. Finally, the theories used by Raskin, are only idioms. His locus of attention illustrates for example the importance of grouping important design features since input that falls outside of the locus of attention otherwise may go absolutely unnoticed while his thoughts on modes are distinct idioms since they deal with specific commands in the form of output and input. The levels of design are shown in the checklist, see attachment 4.

2.4 Evaluation methods

This section describes the different evaluation methods examined. The study includes three inspection methods, without end users, and three test methods, with end users. The methods chosen are based on Holzinger’s (2005) study;

“Usability engineering methods for software developers”.

2.4.1 Inspection methods – with no access to end users

The inspection methods referred to by Holzinger (2005) are a set of methods for identifying usability problems and improving the usability of an interface design by checking it against established standards and without involving the end user. These methods include heuristic evaluation, cognitive walkthrough, and action analysis.

Heuristic evaluation

Heuristic evaluation (Nielsen, 2005) is a usability engineering method for finding usability problems in a user interface design so that they can be attended to as part of an iterative design process. When users are not easily accessible, or involving them will be too costly, heuristic evaluation is a good option according to Preece et al. (2006). This approach involves having a small set of evaluators examine the interface guided by recognized usability principles, the "heuristics”. The evaluators, preferably HCI (Human Computer Interaction) experts, inspect the interface alone to ensure

independent and unbiased evaluations (Holzinger, 2005). During the evaluation session, the evaluator goes through the interface several times, inspects various interaction elements, and compares them to the chosen heuristics. This evaluation method is both thorough and effective according to Hartson, Andre and Williges (2001).

According to Preece et al. (2006) heuristic evaluation includes three stages:

(29)

1. In the briefing session experts are told what to do. A prepared script is useful to present as a guide to give all experts the same briefing.

2. In the evaluation period the experts spend 1-2 hours independently examining the product, using the heuristics for guidance. The experts need to go through the system at least two times. The first time to get a feel and a flow of the product and the second time to focus on specific elements and identifying potential usability problems. Experts are encouraged to be as specific as possible and to record all problems clearly.

3. In the debriefing session the experts sit together to discuss their findings, prioritize the problems found and suggest solutions.

Advantages with this method include efficient identification of major and minor problems, an efficient way to evaluate throughout the whole design process, and the application of well known and established usability principles. Disadvantages include no access to end users and inability to identify or allow for unknown user needs. Preece et al. (2006) also discusses the dilemma with heuristic evaluation and comes to the conclusion that heuristic evaluation should not be used as a replacement of user testing since it sometimes misses severe problems. Bailey (referred to in Preece et al. 2006, p 702) further states that 43% of usability problems identified by experts, in three different published studies, were not problems at all, they were false alarms. A way to overcome this problem is to have several evaluators, which helps to reduce the impact of one person’s poor performance or experience together with other techniques such as user testing (Preece et al, 2006). This method is a qualitative method since it deals with descriptions and studies the data on a deeper level.

Cognitive walkthrough

A cognitive walkthrough is a task-oriented technique in which the system’s functionalities are explored by the analysts (Holzinger, 2005). This approach involves one evaluator or a group of evaluators inspecting a user interface by simulating step-by-step user behaviour for a given task. The evaluation focuses on cognitive issues for ease of learning and understanding (Preece et al, 2006).

The user interface is often presented in the form of a paper mock-up or a working prototype, but it can also be a fully developed interface. In comparison to heuristic evaluation, this technique focuses more on identifying specific user problems at a high level of detail (Preece et al, 2006). The cognitive walkthrough includes five steps according to Preece et al. (2006):

1. The characteristics of typical users are identified and documented and sample tasks are developed.

2. A designer and one or more expert evaluator analyze together.

3. The evaluators walk through different action sequences placed in different scenarios and try to find out if the users know what to do, see how they do it, and understand from feedback whether the action was correct or not.

4. Data from the walkthrough are recorded, such as, hypothesis about what caused problems and why, side issues and design changes. All information is then summarized.

Shipping usability