Upload
johannes-saenger
View
28
Download
1
Tags:
Embed Size (px)
Citation preview
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
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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.2 Checklist evaluation phase 1 (part2) . . . . . . . . . . . . . . . . . . . 33
B.3 Checklist evaluation phase 1 (part3) . . . . . . . . . . . . . . . . . . . 33
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
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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.
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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.
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
2. PROJECT CONTEXT 3
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
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
2. PROJECT CONTEXT 4
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.
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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).
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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
Table 3.2: Persona 2
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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
Table 3.3: Persona 3
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
Table 3.4: Persona 4
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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)
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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.
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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)
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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.
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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.
Page action Effect How to perform page action
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
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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.
Page action Effect How to perform page action
Get infos (1) Popup window with informationto that step
Click on the questionmark
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.
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
4. DESIGN 18
Figure 4.8: ordering step 2 (b): create an own recipe
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
4. DESIGN 19
Page action Effect How to perform page action
Get infos (1) Popup window with informationto that step
Click on the questionmark
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
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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.
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
5. USABILITY EVALUATION 22
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
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
5. USABILITY EVALUATION 23
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
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
5. USABILITY EVALUATION 24
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.
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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.
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
26
Appendices
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
A. WEB SITE DESIGN 27
Appendix A
Web site design
Figure A.1: layout home page
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
A. WEB SITE DESIGN 28
Figure A.2: layout ordering step 1
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
A. WEB SITE DESIGN 29
Figure A.3: layout ordering step 2(a)
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
A. WEB SITE DESIGN 30
Figure A.4: layout ordering step 2(b) part 1
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
A. WEB SITE DESIGN 31
Figure A.5: layout ordering step 2(b) part 2
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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)
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
B. EVALUATION MATERIAL 33
Factor UR Notes
interactivity UR10
UR11
UR12
navigability UR13
UR14
supportability UR15
UR16
transparency UR17
UR18
Table B.2: Checklist evaluation phase 1 (part2)
Style Guide Notes
Layout
Color palette
Typographie
Navigation
Table B.3: Checklist evaluation phase 1 (part3)
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
B. EVALUATION MATERIAL 34
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.
1. Go to www.mydrinks.co.uk
2. Start ordering
3. Choose a size affordable
4. Create an own recipe for a maximum of 10£
5. Go to checkout
Table B.5: Task scenario 2
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
B. EVALUATION MATERIAL 35
Party bucket
Today is your birthday. You need a big party bucket for tonight.
1. Go to www.mydrinks.co.uk
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
Table B.6: Task scenario 3
Creativity
Be creative, create your fancy drink!
1. Go to www.mydrinks.co.uk
2. Start ordering
3. Choose a size suitable
4. Create a fancy recipe
5. Create the drink
6. Go to checkout
Table B.7: Task scenario 4
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
B. EVALUATION MATERIAL 36
Task scenario Task number Problems/notes
Table B.8: Evaluation sheet for evaluator
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
B. EVALUATION MATERIAL 37
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
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
B. EVALUATION MATERIAL 38
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)
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
B. EVALUATION MATERIAL 39
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)
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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.
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012
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.
CIM506 Usability Engineering: Coursework Johannes Saenger, 2012