Coursework Usability

Kingston University LondonFaculty of Science, Engineering and Computing

Usability Engineering

CIM506 Usability Engineering: Coursework

Course Work

Supervisor: Martin Colbert

Handed in November 2012

Handed in by:

Johannes Saenger

Address

Zip code

KNumber: 1248865

CONTENTS i

Contents

List of figures ii

List of tables iii

1 Introduction 1

2 Project Context 22.1 yourdrink Inc. - create your own drink . . . . . . . . . . . . . . . . . . 2

2.2 Business objectives and system requirements . . . . . . . . . . . . . . 3

2.3 Business process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

3 Analysis 53.1 User classes and persona . . . . . . . . . . . . . . . . . . . . . . . . . 5

3.2 Usability requirements . . . . . . . . . . . . . . . . . . . . . . . . . . 8

3.3 Task models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3.4 User object models . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

4 Design 114.1 Style Guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

4.2 GUI design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4.3 Discussion of the design . . . . . . . . . . . . . . . . . . . . . . . . . 20

5 Usability evaluation 215.1 Aims of evaluation phase . . . . . . . . . . . . . . . . . . . . . . . . . 21

5.2 Design of the evaluation . . . . . . . . . . . . . . . . . . . . . . . . . 21

5.3 Discussion of the evaluation . . . . . . . . . . . . . . . . . . . . . . . 24

6 Conclusion 25

Appendices 26

A Web site design 27

B Evaluation material 32

Literature 40

CIM506 Usability Engineering: Coursework Johannes Saenger, 2012

LIST OF FIGURES ii

List of Figures

2.1 logo of yourdrink Inc. . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2.2 business flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

3.1 persona 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

3.2 persona 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

3.3 persona 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3.4 persona 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3.5 schematic view of user objects . . . . . . . . . . . . . . . . . . . . . . 10

4.1 layout (home page) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

4.2 dimensions of the constituents . . . . . . . . . . . . . . . . . . . . . . 12

4.3 color palette . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4.4 standard button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4.5 new home page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

4.6 ordering step 1: choose size . . . . . . . . . . . . . . . . . . . . . . . . 15

4.7 ordering step 2 (a): create a drink or choose an existing recipe . . . . . 16

4.8 ordering step 2 (b): create an own recipe . . . . . . . . . . . . . . . . . 18

4.9 advice box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

A.1 layout home page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

A.2 layout ordering step 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

A.3 layout ordering step 2(a) . . . . . . . . . . . . . . . . . . . . . . . . . 29

A.4 layout ordering step 2(b) part 1 . . . . . . . . . . . . . . . . . . . . . . 30

A.5 layout ordering step 2(b) part 2 . . . . . . . . . . . . . . . . . . . . . . 31


LIST OF TABLES iii

List of Tables

2.1 Overview over system requirements . . . . . . . . . . . . . . . . . . . 3

3.1 Persona 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

3.2 Persona 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

3.3 Persona 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3.4 Persona 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3.5 Overview over usability requirements (part 1) . . . . . . . . . . . . . . 8

3.6 Overview over usability requirements (part 2) . . . . . . . . . . . . . . 9

3.7 overview over user objects . . . . . . . . . . . . . . . . . . . . . . . . 10

4.1 Overview over pages and views of user objects . . . . . . . . . . . . . 14

4.2 New page actions for front page . . . . . . . . . . . . . . . . . . . . . 15

4.3 New page actions for step 1 . . . . . . . . . . . . . . . . . . . . . . . . 16

4.4 New page actions for step 2a . . . . . . . . . . . . . . . . . . . . . . . 17

4.5 New page actions for step 2b . . . . . . . . . . . . . . . . . . . . . . . 19

5.1 performance criteria and measures (PL: planned level, BP: best possible,

WA: worst acceptable) . . . . . . . . . . . . . . . . . . . . . . . . . . 23

B.1 Checklist evaluation phase 1 (part1) . . . . . . . . . . . . . . . . . . . 32



B.4 Task scenario 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

B.5 Task scenario 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

B.6 Task scenario 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

B.7 Task scenario 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

B.8 Evaluation sheet for evaluator . . . . . . . . . . . . . . . . . . . . . . 36

B.9 Participant profile questionnaire . . . . . . . . . . . . . . . . . . . . . 37

B.10 Consent form (part1) . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

B.11 Consent form (part2) . . . . . . . . . . . . . . . . . . . . . . . . . . . 39


1. INTRODUCTION 1

Chapter 1

Introduction

With the emerge of the Web over the last decades and the increasing complexity of web

sites, human-computer interaction (HCI) and usability engineering have become higly

important areas of computer science research and development. [13, 11, 1] Today the Web

is a weighty medium that provides a platform for worldwide communication, information

exchange and electronic commerce. For web pages, usability is one of the crucial qualities

for success. Studies show that a usable web site increases user satisfaction, revisit rates

and fosters online purchase. [2, 6]

Since usability and the user interface having become the focus of attention, the

approach of user-centered design (UCD) has emerged as an alternative to the system-

centered design (SCD). In a SCD, the user interface is placed on top of a ready designed

system. A UCD in contrast, is based on an active participation of the user to understand

his tasks and needs. Iterative design and evaluation phases increase the usability step by

step. [8, 7, 15]

Whereas UCD is widely considered as the key to usability, the factors determining the

usability of a web site are still discussed [6]. Since the literature around usability metrics

has been rapidly growing for the last years, there are several approaches to measure us-

ability today. Kim et al. for example named firmness, delight and convenience as factors

[5]. Other researchers, like Gehrke and Turban, proposed specific measures including

page loading, navigation efficiency and task completion time [3]. In additional works

further factors are pointed out [12, 9]. The reason, why different researchers propose

different sets of usability factors are the individual context and the scope [6]. The factors

taken into account in this work, will be listed in the section ’Usability requirements’ ( 3.2).

In the following chapters, a case study is carried out, in which the web site of a fic-

tional company is extended by new functionalities and pages. To this end, a user-centric

approach is used. After a short introduction to the project context, a detailed analysis of

the project- and usability requirements is conducted. On base of the products created in

this step, the design of the additional web pages will be exposed subsequently. Finally an

evaluation plan describes further steps before this work ends with a short discussion.


2. PROJECT CONTEXT 2

Chapter 2

Project Context

2.1 yourdrink Inc. - create your own drink

The setting for this work is a fictional company called ’yourdrink Inc.’. This company

has specialized on selling and delivering drinks and cocktails for customers in Greater

London. The products can be ordered on the company’s website or via telephone. Once

an order has been received, it is passed on to the subsidiary being closest to the delivery

address. The beverages are then mixed and delivered to the customer.

Since the revenue has declined in the last years, the management decided to attract

new customers with a new product. Currently the customers can only choose from a

list of beverages offered. One employee however proposed the idea to offer customized

cocktails in different sizes and in that way let the customers design the new product.

A customer should be able to visit the website and create his own cocktail. This drink

should be mixed and delivered by the company subsequently.

After the marketing division having evaluated the demand for customized cocktails,

the company decided to add customized drinks to their product portfolio. With the web-

site being the major sales channel, it must provide the possibility for customers to create

own cocktails.

Figure 2.1: logo of yourdrink Inc.



In the following sections the software project ’extension of the website by new functions

and pages’ will be contemplated. The scope of this work is the analysis, design and

evaluation phase of the GUI. Nevertheless, particular aspects of the project development

have to be considered first.

2.2 Business objectives and system requirements

The general business objective is to attract new customers by offering the new product -

customized drink. For the website the sub-objectives are to provide an interface where

customers can buy the new product and integrate that in the existing workflow. Therefore

the website has to be extended by the following functionalities/pages:

1. Start shopping (adapted)

2. Choose size of the drink

3. Decide if one wants to create a drink or choose an existing recipe

4. Choose ingredients for the drink - create a recipe

The most important performance criteria (KPI) regarding the new functionalities are

effectiveness and efficiency. For the customer it is significant to get the product he really

wants. Furthermore the new process steps must be neatly embedded in the old ordering

process to make an efficient flow possible.

Table 2.1 shows which requirements the sytem has to meet in order to reach a good

performance and achieve the business objective.

Category Number Description

General R1 The new product must be introduced on the front page ofthe website

R2 The website has to be extended by the three process steps’choose size’, ’create own drink or choose from list ofbeverages’ and ’create own drink’

Efficiency R3 The new functionalities must be properly integrated in theexisting workflow

Effectiveness R4 A correct and fair price has to be calculated and shown forevery created drink

R5 The system must ensure the user knowing what customizeddrink he ordered

R6 It must be assured that a created recipe fits the chosen sizerequirements

Table 2.1: Overview over system requirements



2.3 Business process

Since there is already a business process existing, the new functionalities have to be

integrated. Figure 2.2 shows how the current online ordering process must be adapted.

Figure 2.2: business flow

Further steps of the project planning and project context are not focused in this work.


3. ANALYSIS 5

Chapter 3

Analysis

The analysis is carried out to answer four questions: Who are the users of the system?

What usability requirements does the system have to meet? What tasks does a user have

to achieve? What are the objects the user is working on and with in the system?

To answer these questions the user classes and persona a defined at first. Secondly the

usability requirements are derived from the system requirements, the user classes and

the usability factors found in the literature. Then a task analysis is conducted to identify

the tasks and produce a task model. Finally the user objects are modeled. These four

products provide the basis for the ensuing design phase.

3.1 User classes and persona

The new ordering interface is exclusively used by customers. Nevertheless these cos-

tumers differ in their characteristics. In this scenario, classification criteria could be the

experience in online shopping (high/low) and the experience in mixing drinks (high/low).

If we suppose that a threshold value for experience can be defined and apply these two

criteria on the customers, we get four groups of users. These four groups are mutually

exclusive and collectively exhaustive.

In a user-centric approach the customers are not only users, they are people. To gain

a realistic picture of the customer groups, four personas have been created (tables 3.1,

3.2, 3.3 and 3.4).


3. ANALYSIS 6

James Hook (UC1)

Age: 26Job: BartenderEmployer: Blues Kitchen BarMixing experience: highOnline shopping experience: high

James Hook is a bartender in one of themost popular bars in Central London -the Blues Kitchen Bar. Sometimes whenJames has a day off, he likes to mix adrink for him and his girlfriend at home.Since he is a bartender, he knows lots ofcocktails. So he likes to try somethingextraordinary.

Expects from site: Possibility to becreative, no recipe restrictionsLikes: FreedomDislikes: Rules that constrain his work

Table 3.1: Persona 1

Joana April (UC2)

Age: 29Job: Flight attendantEmployer: British AirwaysMixing experience: lowOnline shopping experience: high

Joana April is a Stewardess. Since she istraveling most of the time, she loves tostay in her apartment in London whenevershe comes home. Hence she is used toshopping online.Not having a boyfriend, she ofteninvites some of her friends to her place.Sometimes it happens that she did notmake it to go shopping before. So sheorders many drinks for her friends online.

Expects from site: Very fast order-ing process, possibility to order hugeamountsLikes: Fast and effective processes as sheknows from her jobDislikes: When she does not get, whatshe wants



3. ANALYSIS 7

Sarah Goodman (UC3)

Age: 39Job: WaitressEmployer: Garden HotelMixing experience: highOnline shopping experience: low

Joana April is a Waitress at the GardenHotel, a traditional Hotel in the East ofLondon. Joana works a lot.Joana’s hobby is to mix drinks. Unfortu-nately she does not have much ingredientsat home, because some of them are tooexpensive to buy a full bottle. Joanawould like to try creating drinks online,but she is not sure if she can handle thecreation process since she does not haveany experience.

Expects from site: Lots of help anda very easy flow; possibility to create herdifficult recipesLikes: Handmade stuffDislikes: Too much new technology


Carl Brouwers (UC4)

Age: 45Job: Medical DoctorEmployer: autonomousMixing experience: lowOnline shopping experience: low

Carl Brouwers is a Medical Doctor. Hejust recognized that he is really not upto date with the new technology. So hedecided to explore the internet. Since itwas always Carl’s dream to open his ownbar, he would love to play the bartenderand create a drink for his wife. Theproblem is, Karl has neither a clue ofdrinks nor of modern websites.

Expects from site: Very easy andlogical structured ordering process,comparable to an ordering in a real barLikes: StructureDislikes: Disorder and confusion



3. ANALYSIS 8

3.2 Usability requirements

The usability requirements are an implied part of the system requirements. However,

they were not analyzed in detail. Further usability requirements can be derived from the

user classes (UC). To gain a well-structured overview, a set of usability factors found

in the literature is used. Lee and Kozar tried to overlap usability factors proposed in

twenty-seven different publications regarding web usability. The result is a list of distinct

usability factors that most of the analyzed papers have in common. These factors can lead

to high user satisfaction, attitude and loyalty [6]. On basis of this list, the factors that are

important for this work were chosen. An overview is given on table 3.5 and 3.6.

Factor Usab. Requ. Description

simplicity UR1 the structure of the website must be succinct [9]

UR2 user who have little experience in online shoppingshall be able to navigate through the ordering andcreation process and even find special ingredients

consistency UR3 the website must have the same structure on eachpage

UR4 the website must have a similar design on eachpage

UR5 the website must follow the webdesign standardusers are looking for [10]

content relevance UR6 the offered information must be relevant for theordering step

learnability UR7 the contents can be easily understood

UR8 the ordering process must be designed to be under-stood by beginners

UR9 loyal customers must make advancesinteractivity UR10 the three page defined in R3 must provide interac-

tive features

UR11 the choice of size or ingredients must evoke visualresponses

UR12 the user must have the feeling that he can createhis drink all by himself in a creative environment

navigability UR13 each step of the ordering process must offer thechoice to go in both direction (forward and back)[10]

UR14 the user must have the possibility to find all con-tents via a search function

supportability (1) UR15 the web site must provide just-in-time help forevery process step

Table 3.5: Overview over usability requirements (part 1)


3. ANALYSIS 9

Factor Usab. Requ. Description

supportability (2) UR16 the web site must provide contact information foradditional support

transparency UR17 it must be ensured that the user knows how theprice of a drink is calculated

UR18 the system must provide information about theactual ordering step

Table 3.6: Overview over usability requirements (part 2)

3.3 Task models

The tasks in creating a drink online are not very different to mixing a drink in the real

world. If one wants to mix a cocktail, he first needs to decide which glass to take (size).

Secondly it has to be decided whether to choose an existing recipe (list of drinks) or to be

creative and develop a new drink. If one wants his own recipe, there are several things to

do in the next step. First, the ingredients have to be selected. There are different groups of

ingredients that can be taken into account - spirits, liqueurs, mixers and flavoring (sugar

herbs, spices e.g.). Hereby the amount of each ingredient must be considered. Before

mixing all together one must finally be sure that his selection of ingredients fits into the

chosen glass.

Adapting this process to an online workflow the following tasks can be identified:

• Start process

• Choose size (step 1): Read the text on the website to know what sizes are offered,

read size recommendation in regard of the persons wanting a drink, choose size

• Decide to choose drink from list or create own recipe (step 2a)

• Choose ingredients (step 2b): Read the offered information, get an overview over

the offered ingredients, choose one or several spirits/liqueurs/mixers/flavoring and

select the amount, check recipe, add drink to basket

• Payment and delivery (step 3): Pay for order and provide delivery address

All processes after step 2b, like the payment and delivery, are not in the scope of this

work, since this processes have already been implemented in the old web site. It has only

to be made sure that the new process steps are intergrated in the old ordering steps.

3.4 User object models

A user ordering and creating drinks at the website believes to interact with several business

objects in the system [8]. An overview over the business object in this work is given in

table 3.7.


3. ANALYSIS 10

UR Object name Object typeDescription

User/Customer Normal object A user has specific attributes like a name,an address, an age, etc. that is needed tocheckout

Glass Normal object A glass has a specific size; it is linked to arecipe

Ingredient Subtype object A ingredient has a name, a price and a de-scription; it is a subtype of a type of ingredi-ents

Type of ingredients Subtype object A type of ingredients has a name and a de-scription; it is a subtype of group a ingredi-ents

Group of ingredi-ents

Normal object A group of ingredients has a name and adescription

Order/Basket Container object An order has a specific number and belongsto a user; it contains order items

Order item Normal object An order item is related to a glass and has aspecific price.

Recipe Container object A recipe contains ingredients; the ingre-dients have the additional attribute vol-ume/amount; A user chooses or creates it

Information/help Normal object An information object has a topic and aninformation text

Table 3.7: overview over user objects

When a user goes shopping, he creates a basket. Whenever he chooses the size of

the glass, he creates an order item that is related to a glass. In the next step he creates

or chooses a recipe to put into the glass. The recipe consists of specific ingredients

(e.g. Bacardi White Rum) which are subtypes of a type of ingredients (e.g. rum) and

subsubtypes of a group of ingredients (e.g. spirit). Figure 3.5 shows a schematic view.

Figure 3.5: schematic view of user objects


4. DESIGN 11

Chapter 4

Design

The chapter design is devided into two parts. First, a style guide is introduced that

provides guidelines a designer has to follow. In the second part the design of the GUI is

described.

4.1 Style Guide

This section provides a general style guide for the extension of the website in order to

achieve consistency in the design principles, the usability and the corporate design of the

company website.

4.1.1 Layout

The layout of the website has a minimal width of 830 pixes. In this way usual browsers

can be used without horizontal scrolling until a pixel width of 1024.

Figure 4.1: layout (home page)


4. DESIGN 12

The design follows ’the web design standard that users look for’ as proposed by

Nielsen [10]. A new webpage must stick to the dimensions of the constituens as shown in

figure 4.2.

Figure 4.2: dimensions of the constituents

4.1.2 Color palette

Figure 4.3 shows the colors that can be used for the design of the GUI and graphics.

4.1.3 Typographie

For headlines the font ’Kalinga’ must be used. The size of the headlines must decrease to

low level headlines starting by a font size of 20 px.

1 f o n t−f a m i l y : K a l i n g a ;2 f o n t−s i z e : 20 px ;3 f o n t−s t y l e : normal ;

Listing 4.1: headline - font properties

The font for the normal text is ’Arial’ with a font size of 14 px. Hyperlinks must be

the same size and underlined.


4. DESIGN 13

Figure 4.3: color palette

4.1.4 Navigation

Figure 4.4 shows the standard buttons. The button is formed like an arrow to indicate

clickability [10]. The text chosen for the buttons should be convenient and expressive.

During the ordering process a ’go back’-button must be added.

Figure 4.4: standard button

4.2 GUI design

The GUI design is developed on basis of the products of previous steps - the user object

model, the task model and the style guide. The user object model, as acquired in the

analysis, provides the content of the user interface. The user will see and work with

views of these objects. The organisation of the pages and the flow is derived from the

task model. The style guide is taken as a basis for the ’look and feel’ [8].

4.2.1 Web pages and view of user objects

The web page is the communication channel through which the user interacts with the

system. At this point, it is important to define how many single pages are neccessary to

implement the workflow and which user objects must be shown on each page. Since there

are four general tasks in the task model, a navigation through four web pages was chosen.

Table 4.1 gives an overview over the web pages and the views on the user objects.

The design of the four page is shown in the following sections. It is advisable to have


4. DESIGN 14

Web page User object View

home page information and help infos about new product and ordering pro-cess

basket overview over basket, not detailledordering step 1 information and help infos about step 1

glass view of different glass sizes

basket overview over basket, not detailledordering step 2a information and help infos about step 2a

recipy create new recipe or choose offered one

basket overview over basket, not detailledordering step 2b information and help infos about step 2b

glass show content

recipe show ingredients, amount and price

group of ingredients show name and list types of ingredients

type of ingredients show name and list ingredients

ingredient show name und price

basket overview over basket, not detailled

Table 4.1: Overview over pages and views of user objects

a look at the figures first to better understand the text description. Bigger figures of all

web pages can be found in the appendix ( A).

4.2.2 Redesign of the home page

Figure 4.5: new home page


4. DESIGN 15

The main aim of the redesign of the home page is to introduce the new product to

the customers and make them start shopping on the website. Therefore, by means of

simplicity, transparency and salience an overview over the three process steps is given.

This shows the easy of the new process and introduces the new product. Moreover, images

of the different sizes and ingredients are used to emphasize. The sidebar shows the basket

as suggested by Nielsen [10]. (Figure A.1)

Table 4.2 gives an overview over the page actions a user can perform on the objects.

The scope of the page actions are the new functionalities. Actions that could already be

carried out with the old web page, like undertake a search, are not taken into account.

Page action Effect How to perform page action

Start order-ing process(1)

Move to next page Click on the ’start’-button

Checkout (2) Move to checkout page Click on the ’checkout’-button onsidebar

Table 4.2: New page actions for front page

4.2.3 Ordering step 1: Choose size

Figure 4.6: ordering step 1: choose size


4. DESIGN 16

After a customer having started the ordering process, he needs to choose the size of

the drink. At this point, the user works with the user object glass.

Figure 4.6 shows the layout of this ordering step. At the top of the main area, an overview

over the ordering steps can be found. This shows the user where he is situated in the

process (1). Besides the amount in oz, a name (e.g. Jumbo size) and a standard value for

persons (e.g. 12 persons) is announced, in order to support the decision and give the user

a feeling about the actual size. An overview over the action is given on table 4.3.


Get infos (2) Popup window with informationto that step

Click on the questionmark

Select size(3)

Radiobutton gets selected Click on the radiobutton next tothe size

Confirm se-lection (4)

Move to next page of orderingprocess

Click on the ’choose’-button

Requestdifferent size(5)

Move to contact formular Click on the ’contact’-hyperlink

Table 4.3: New page actions for step 1

4.2.4 Ordering step 2 (a): Create a drink or choose an existing recipe

Figure 4.7: ordering step 2 (a): create a drink or choose an existing recipe


4. DESIGN 17

Here, it is important that the user knows that there are two alternatives. Therefore

they were put next to each other as figure 4.7 shows.




Select createown recipe(2)

Move to next ordering step - cre-ate own recipe

Click on text or ’own recipe’-button

Selectchoose stan-dard drink(3)

Move to next ordering step -choose from list of recipies

Click on text or ’standard drink’-button

Go back (4) Move one step back Click on the ’back’-buttonCheckout (5) Move to checkout page Click on the ’checkout’-button

Table 4.4: New page actions for step 2a

4.2.5 Ordering step 2 (b): Create an own recipe

The ordering step ’create an own recipe’ is the core of the new ordering process. At

this point, a user works with the user objects glass, recipe, group of ingredients, type of

ingredients and ingredients. He needs to choose different ingredients to compose his new

recipe. It is important that the user knows what he put on the recipe and how ’full’ his

glass already is. Furthermore the price of the created drink is relevant. (figure 4.8)

This problem is solved by visualizing the glass and recipe objects. The glass changes

its phases whenever the user chooses new ingredients (UR10, UR11). In this way the user

always knows, how much space for additional ingredients is left. Furthermore, a choosen

ingredient and its price is directly listed on the recipe and summed up (UR17).

The three objects group of ingredients, type of ingredients and ingredients are represented

below. The different groups are organized through seperated boxes. The single ingredients

are not direclty listed. A user has to expand the catergorie a ingredient belongs to first.

In this way, users having little experience mixing drinks are not overstrained with to

much information (UR2). Experts however, can navigate to the lower leafs in each

branch. Furthermore, the price for single ingredients is directly shown in sense of price

transparency (UR18). The details of the actions a user can take are listed on table 4.5.


4. DESIGN 18

Figure 4.8: ordering step 2 (b): create an own recipe


4. DESIGN 19




Expandtype ofingredients(5)

The box expands and shows theingredients of that type; the ’plus’-button changes to a ’minus’-button and the hyperlink-textchanges to ’[contract category]’

Click on ’[expand category]’ oron the ’plus’-button

Contracttype ofingredients(6)

The box contracts and hidesthe ingredients of that type;the ’minus’-button changes to a’plus’-button and the hyperlink-text changes to ’[expand cate-gory]’

Click on ’[contract category]’ oron the ’minus’-button

Select an in-gredient (6)

The radiobutton gets selected; theingredient is added as coloredphase to the glass object; the in-gredient, the amount and the priceis listed on the recipe

Click on the checkbox next to theamount and price

Delete ingre-dient fromrecipe (7)

Ingredient is deleted from recipeand disappears from the glass

Click on the cross-button

Create recipe(8)

Move to next step - confirmationof selected recipe (old process)

Click on the ’create recipe’-button

Go back (9) Move one step back Click on the ’back’-buttonCheckout(10)

Move to checkout page Click on the ’checkout’-button

Table 4.5: New page actions for step 2b

When a user is done with his recipe, he needs to push the button ’create recipe’ to go

on. If the created recipe does not meet the requirements, a pop-up window will open to

point out the mistake(s). Figure 4.9 shows an exemplary advice box that pops up when

the chosen ingredients are to less to fill the whole glass.

Figure 4.9: advice box


4. DESIGN 20

4.3 Discussion of the design

The design developed in the chapter was concepted straight forward and seems to meet

the requirements at a first glance. However, the evaluation phase will show how far the

usability of the ordering process is ensured. Particularly the process step 2(b) could be

too challenging for users having little or no experience with online shopping and web

technologies.


5. USABILITY EVALUATION 21

Chapter 5

Usability evaluation

5.1 Aims of evaluation phase

As mentioned in the introduction, a usable web site increases user satisfaction, revisit

rates and fosters online purchase [2, 6]. This usability evaluation’s objective is to better

understand the user’s perception of the web site and processes in order to optimize the

web pages in a way that customers of each user group (section 3.1) are able to create and

buy the products they want and gain maximum user satisfaction. The general questions to

be answered are if the users initialy understand the new ordering an creation process, if

an error free and efficient ordering is possible for all user groups with the help offered on

the web site and if the users are satisfied with the GUI.

5.2 Design of the evaluation

The project is planned in three iterations. Hence the evaluation passes three stages. For

the first evalutation phase (first iteration) the paper prototype is used. Later evaluation

phases need a software prototype to be implemented and intergrated in the existing web

site.

5.2.1 Evaluation 1

The purpose of the first iteration is to check how far the usability requirements (section

3.2) and the specifications stated in the style guide (section 4.1) are met. Therefore

an heuristic evaluation is planed. This evaluation should be carried out by three GUI

designers that are not directly involved in the design process of this project, in order to

guarantee a neutral view on the project. The three evaluators are given the list of usability

requirements, the style guide and a checklist (appendix B.1). They then have to go

through the paper prototype independently, analyse it and make notes.

After the first evaluation, every huge carelessness should be identified and mended. Since

the designer intensively worked on the GUI, he might have become ’blind’ to recognize

problems, a neutral GUI designer can detect immediately. The interaction in process step



2(b) for example could seem intuitive to him, however, it might not to others.

Problems identified now are much cheaper to eliminate, before the prototype is imple-

mented and integrated in the second iteration.

5.2.2 Evaluation 2

With the start of the second evaluation, a software protoype has to be ready. To analyse

and improve the usability, two types of evaluations are planned:

• heuristic evaluation

• observation of users

The heuristic evaluation is carried out in the same way as it was conducted in the first

iteration. Therefore, it is important that the same GUI designers use the same checklist as

in evaluation 1. In this way, they can review, whether their notations are considered and

implemented as well as analyse the changed features.

The obervation of users is planned for five participants that have not been involved

in the design or prototyping process. However, it can be users working for this com-

pany. These five persons are given two order scenarios (appendix B.4, B.5). The

test environment is the participants’ desktop computer on their workplace to create a

relaxed atmosphere and simulate a usual order scenario. The evaluator sits next to the test

person and makes notes during the ordering process (appendix B.8). The participants are

encouraged to think loud. The whole session is audiotaped.

This test is designed to find out more about the user’s view on the system, the ordering

behavior and problems a user faces. It is important that each problem identified in this

run is fixed before the third and most expensive evaluation can start.

5.2.3 Evaluation 3

In the third evaluation the user perception is analysed in detail. One goal is to determine

if the usability requirements are finally met. To make the achievement of the usability

requirements measurable, several measures and performance criteria have to be chosen.

An overview is given on table 5.1.

In order to measure and analyses those aspects of usability three types of evaluation

are planned:

• Expert review

• User testing

• SUMI questionaire

An expert review by an external HCI expert is a very effective way to evaluate a user

interface [13]. The expert is the complement to the common user, who is tested in the

second type of evaluations. With his experience, he may find different usability problems



Factor Usabilityattributes

Measuring in-strument

Value to bemeasured

PL BP WA

simplicity initial under-standing ofnew productand orderingprocess

Order scenario1-4

Mistakes per or-dering (avg)

0 0 0

consistency user orientation Order scenario1-4

Time to com-plete order

180sec/-drink

30sec/-drink

210sec/-drink

content rele-vance

clearness Expert Review Relevance ofcontent

5 5 4

learnability learnability ofthe orderingprocess

SUMI Total points 55 100 45

interactivity control/ affect SUMI Total score 55/55

100/100

45/45

navigability efficiency SUMI Total Score 55 100 45supportability helpfulness SUMI Total score 55 100 45transparency clearness of

pricing andordering

Order Scenario2

Mistakes per or-dering

0 0 0

Table 5.1: performance criteria and measures (PL: planned level, BP: best possible, WA:worst acceptable)

then a usual user does. The expert has to go through the ordering process and analyse the

ordering steps. He, moreover, should perform the task scenarios. He will be booked for 3

hours. That timeframe is enough in consideration of the lean process.

The second part of the evaluation is the user testing and the SUMI questionaire. The

participants will first go through the task scenarios and answer the questionaire afterwards.

These tests are planned for a minimum of eight participants with at least two of each

user group (section 3.1). The composition of the participant group is an important factor,

since the evaluation should represent each user segment. To identify which group a user

belongs to, a short screening questionaire has to be completed at the beginning (appendix

B.9). When a participant takes part at the evaluation, the following steps a carried out

during a session:

1. The participant is aksed to sign a constent form (appendix B.10, B.11)

2. Instruction of participant

3. Task scenarios 1-4, observed and timed (appendix B.4, B.5, B.6, B.7)

4. SUMI questionaire

5. Conclusion (discussion)

In the instruction, the participant is shortly told what the web site is about. They are

furthermore explained about the purpose of this evaluation. The task scenarios should be



self-explanatory in sense of simplicity. The session is carried out in a testing laboratory.

One observer is sitting next to the participant at the workstation. The participant is

encouraged to think loud. The session is video and audiotaped.

Following this, the SUMI questionaire has to be filled out. The SUMI is ’the de facto

industry standard evaluation questionnaire for assessing quality of use of software by end

users’ [4]. It will provide a global usability score and five subscale scores. Finally the

concluding questions are answered and the experience is shortly discussed.

The goal of the software project is to do very well in this third evaluation. Problems

identified should only evoke small changes. After this, the web site must be ready to go

online.

5.3 Discussion of the evaluation

The extend of an evaluation and the number of iterations carried out is an important topic

in the project and budget management. Depending on the project, the costs might range

from 5% of the project costs up to 20% [13]. In consideration of the small project size,

an evaluation in three iterations seems to be overstated. However, the web site being the

company’s main sales channel, the usability of the web site is a significant factor for the

company’s success. An effective, efficient and transparent ordering process could be the

reason for a customer completing the purchase order or coming back to the web site.

Nevertheless the evaluation could be adapted on basis of the results of the first iteration. If

the participants were satisfied and had nothing to criticise in the first iteration, the heuristic

evaluation in the second iteration might not be neccessary. In general, the advantage of

an iterative process model is that during a project, the steps in different iterations can be

changed and adapted on basis of the experiences gained in the previous sprints.


6. CONCLUSION 25

Chapter 6

Conclusion

Usability is a central target in GUI design. The previous chapters may have given an

impression of what usability engineering in a software project can look like. Although

the purpose of the project was just a small extension of an existing web site, the process

to achieve a high level of usability can become very complex. Particularly in a Web

environment where the characteristics of users can vary strongly, it is neccessary to

accomplish an extensive analysis in order to identify the needs of each user group.

The used approach in this work, GUIDE - Graphical User Interface and Design, is

only one of several possible frameworks that have proven itselves in practise and are

discussed in literature. The case study furthermore shows that even the applied usability

requirements can change from project to project depending on the scope.

In this work, the GUIDE approach was used, because it enables a very practical procedure.

However, particularly in small projects it may seem a little overstated. Nevertheless, this

short case study provides a good opportunity to take first steps into usability engineering

and shows the importance of a good GUI design.


26

Appendices


A. WEB SITE DESIGN 27

Appendix A

Web site design

Figure A.1: layout home page



Figure A.2: layout ordering step 1



Figure A.3: layout ordering step 2(a)



Figure A.4: layout ordering step 2(b) part 1



Figure A.5: layout ordering step 2(b) part 2


B. EVALUATION MATERIAL 32

Appendix B

Evaluation material

Checklist Evaluation Phase 1

Factor UR Notes

simplicity UR1

UR2

consistency UR3 |

UR4

UR5

content relevance UR6 |

learnability UR7 |

UR8

UR9

Table B.1: Checklist evaluation phase 1 (part1)



Factor UR Notes

interactivity UR10

UR11

UR12

navigability UR13

UR14

supportability UR15

UR16

transparency UR17

UR18


Style Guide Notes

Layout

Color palette

Typographie

Navigation




Order a ’Mighty Blue’

You are at home and one of your friends asks you to order a ’Mighty Blue’drink for him. He sits next to you while you are on the computer and tells you to do asfollows:

1. Go to www.mydrinks.co.uk

2. Start ordering

3. Choose a size that is enough for the two of us

4. ’Mighty Blue’ is not a standard drink, so create an own recipe

5. Choose Havanna Club White Rum 4oz

6. Add curacao blue 2oz

7. Add orange juice 8oz

8. Sorry I was wrong, delete orange juice, it is cranberry juice 8oz

9. Add pineapple juice

10. Create that drink

11. Go to checkout

Table B.4: Task scenario 1

Create a drink for a maximum of 10£

A friend of yours and you want to order drinks online. You are first. Youonly have 10£left.


2. Start ordering

3. Choose a size affordable

4. Create an own recipe for a maximum of 10£

5. Go to checkout




Party bucket

Today is your birthday. You need a big party bucket for tonight.


2. Start ordering

3. Choose a size suitable

4. Your favorite recipe is vodka, tequila, coke, lime juice, mint and sugar - combinethem

5. Create the drink

6. Go to checkout


Creativity

Be creative, create your fancy drink!


2. Start ordering

3. Choose a size suitable

4. Create a fancy recipe

5. Create the drink

6. Go to checkout




Task scenario Task number Problems/notes

Table B.8: Evaluation sheet for evaluator



yourdrinks Inc. evaluation - questionaire

Have you participated in a us-ability test before?

[2]Yes [2]No

What is your age? [2]18-24 [2]25-34 [2]35-44 [2]45+

What is your employment sta-tus?

[2]Full-time [2]Part-time [2]Self-employed[2]Unemployed [2]Retired

What is your main occupationor job title?

Do you sometimes go out to abar?

[2]Yes [2]No

Do you have experience mix-ing drinks?

[2]Yes [2]No

If you have experience mixingdrinks, how often have youmixed one?

[2]1 [2]2-3 [2]4-6 [2]more than 6 times

How long have you been usingthe Internet?

[2] over 5 years [2]3-5 years [2]2-3 years[2]about a year [2]less than a year

What do you use the Internetfor?

Have you ever ordered prod-ucts online?

[2]Yes [2]No

Have you already have or-dered products online, who of-ten was that?

[2]1 [2]2-3 [2]4-6 [2]more than 6 times

Table B.9: Participant profile questionnaire



Information

Purpose: The purpose of this session is to assess the ease of use of a drink creation and ordersite, and improve the design of the user interface.

Tasks and duration: will be asked to:

• tell us a little about yourself as a user

• perform 4 tasks on this web site

• give us some feedback about your experience (questionaire)

The session will last approximately one and a half hours.

Right to withdraw: You may withdraw from the session at any time without prejudice or youneed not answer specific questions if you choose.Potential of risk or discomfort: This study has no side effects and will not impose any harmto you physically or mentally.Anonymity/confidentiality: Your identity will be anonymous. All data will be stored usinga participant number, and will only be used for the purposes of the research. All data thatmight identify individuals will be destroyed by December 1st, 2014, when we anticipate thatthe project and its publications will reach its completion. In the reporting of the project, noinformation will be released which will enable a reader to identify who our participants were.

If you agree to participate in this study, please read and sign this consent form.

Informed Consent

Statement by participant: I confirm that I have read and understood this information sheetand the invitation to participate. I understand:

• the purpose, risks, and benefits of taking part in this session

• what my involvement will entail and any questions have been answered to my satisfac-tion

• that my participation is entirely voluntary, and that I can withdraw at any time withoutprejudice

• that all information obtained will be confidential

• that research data gathered for the study may be published provided that I cannot beidentified

Contact information has been provided should I wish to seek further information from theinvestigator at any time for purposes of clarification.

Participant’s Signature Date

Table B.10: Consent form (part1)



Statement by investigatorI have explained this study and the implications of participation in it to this participant withoutbias and I believe that the consent is informed and that he/she understands the implications ofparticipation.

Name of investigator:

Investigator’s Signature Date

Table B.11: Consent form (part2)


BIBLIOGRAPHY 40

Bibliography

[1] J. M. Carroll. Human-computer interaction: psychology as a science of design. Int.

J. Hum.-Comput. Stud., 46(4):501–522, Apr. 1997.

[2] L. Casaló, C. Flavián, and M. Guinalíu. The role of perceived usability, reputation,

satisfaction and consumer familiarity on the website loyalty formation process.

Computers in Human Behavior, 24(2):325 – 345, 2008. <ce:title>Part Special Issue:

Cognition and Exploratory Learning in Digital Age</ce:title>.

[3] D. Gehrke. Determinants of successful website design: Relative importance and

recommendations for effectiveness. In Proceedings of the Thirty-second Annual

Hawaii International Conference on System Sciences-Volume 5 - Volume 5, HICSS

’99, pages 5042–, Washington, DC, USA, 1999. IEEE Computer Society.

[4] HFRG. Sumi - software usability measurement inventory, Nov. 2012.

[5] J. Kim, J. Lee, K. Han, and M. Lee. Businesses as buildings: Metrics for the

architectural quality of internet businesses. Info. Sys. Research, 13(3):239–254,

Sept. 2002.

[6] Y. Lee and K. A. Kozar. Understanding of website usability: Specifying and

measuring constructs and their relationships. Decis. Support Syst., 52(2):450–463,

Jan. 2012.

[7] J.-Y. Mao, K. Vredenburg, P. W. Smith, and T. Carey. The state of user-centered

design practice. Commun. ACM, 48(3):105–109, Mar. 2005.

[8] A. Moore and D. Redmond-Pyle. Graphical User Interface Design and Evaluation:

A Practical Process. Prentice Hall PTR, Upper Saddle River, NJ, USA, 1st edition,

1995.

[9] J. Nielsen. Designing Web Usability: The Practice of Simplicity. New Riders

Publishing, Thousand Oaks, CA, USA, 1999.

[10] J. Nielsen and K. Pernice. Eyetracking Web Usability. New Riders Publishing,

Thousand Oaks, CA, USA, 1st edition, 2009.

[11] J. W. Palmer. Web site usability, design, and performance metrics. Info. Sys.

Research, 13(2):151–167, June 2002.


BIBLIOGRAPHY 41

[12] P. Schubert and D. Selz. Web assessment - measuring the effectiveness of electronic

commerce sites going beyond traditional marketing paradigms. In Proceedings of

the Thirty-second Annual Hawaii International Conference on System Sciences-

Volume 5 - Volume 5, HICSS ’99, pages 5040–, Washington, DC, USA, 1999. IEEE

Computer Society.

[13] B. Shneiderman and C. Plaisant. Designing the User Interface: Strategies for

Effective Human-Computer Interaction (4th Edition). Pearson Addison Wesley,

2004.

[14] S. N. Singh, N. Dalal, and N. Spears. Understanding web home page perception.

Eur. J. Inf. Syst., 14(3):288–302, Sept. 2005.

[15] K. Vredenburg, J.-Y. Mao, P. W. Smith, and T. Carey. A survey of user-centered

design practice. In Proceedings of the SIGCHI Conference on Human Factors in

Computing Systems, CHI ’02, pages 471–478, New York, NY, USA, 2002. ACM.


Coursework Usability

Documents

Transcript of Coursework Usability