Coursework Usability

Kingston University London Faculty 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
Contents
List of gures List of tables 1 2 Introduction Project Context 2.1 2.2 2.3 3 yourdrink Inc. - create your own drink . . . . . . . . . . . . . . . . . . Business objectives and system requirements . . . . . . . . . . . . . . Business process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ii iii 1 2 2 3 4 5 5 8 9 9 11 11 13 20 21 21 21 24 25 26 27 32 40
Analysis 3.1 3.2 3.3 3.4 User classes and persona . . . . . . . . . . . . . . . . . . . . . . . . . Usability requirements . . . . . . . . . . . . . . . . . . . . . . . . . . Task models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . User object models . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Design 4.1 4.2 4.3 Style Guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . GUI design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Discussion of the design . . . . . . . . . . . . . . . . . . . . . . . . .
Usability evaluation 5.1 5.2 5.3 Aims of evaluation phase . . . . . . . . . . . . . . . . . . . . . . . . . Design of the evaluation . . . . . . . . . . . . . . . . . . . . . . . . . Discussion of the evaluation . . . . . . . . . . . . . . . . . . . . . . .
Conclusion
Appendices A Web site design B Evaluation material Literature
CIM506 Usability Engineering: Coursework
Johannes Saenger, 2012
LIST OF FIGURES
ii
List of Figures
2.1 2.2 3.1 3.2 3.3 3.4 3.5 4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9 logo of yourdrink Inc. . . . . . . . . . . . . . . . . . . . . . . . . . . . business ow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . persona 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . persona 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . persona 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . persona 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . schematic view of user objects . . . . . . . . . . . . . . . . . . . . . . layout (home page) . . . . . . . . . . . . . . . . . . . . . . . . . . . . dimensions of the constituents . . . . . . . . . . . . . . . . . . . . . . color palette . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . standard button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . new home page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ordering step 1: choose size . . . . . . . . . . . . . . . . . . . . . . . . ordering step 2 (a): create a drink or choose an existing recipe . . . . . ordering step 2 (b): create an own recipe . . . . . . . . . . . . . . . . . advice box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 4 6 6 7 7 10 11 12 13 13 14 15 16 18 19 27 28 29 30 31
A.1 layout home page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A.2 layout ordering step 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . A.3 layout ordering step 2(a) . . . . . . . . . . . . . . . . . . . . . . . . . A.4 layout ordering step 2(b) part 1 . . . . . . . . . . . . . . . . . . . . . . A.5 layout ordering step 2(b) part 2 . . . . . . . . . . . . . . . . . . . . . .
LIST OF TABLES
iii
List of Tables
2.1 3.1 3.2 3.3 3.4 3.5 3.6 3.7 4.1 4.2 4.3 4.4 4.5 5.1 Overview over system requirements . . . . . . . . . . . . . . . . . . . Persona 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Persona 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Persona 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Persona 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Overview over usability requirements (part 1) . . . . . . . . . . . . . . Overview over usability requirements (part 2) . . . . . . . . . . . . . . overview over user objects . . . . . . . . . . . . . . . . . . . . . . . . Overview over pages and views of user objects . . . . . . . . . . . . . New page actions for front page . . . . . . . . . . . . . . . . . . . . . New page actions for step 1 . . . . . . . . . . . . . . . . . . . . . . . . New page actions for step 2a . . . . . . . . . . . . . . . . . . . . . . . New page actions for step 2b . . . . . . . . . . . . . . . . . . . . . . . performance criteria and measures (PL: planned level, BP: best possible, WA: worst acceptable) . . . . . . . . . . . . . . . . . . . . . . . . . . B.1 Checklist evaluation phase 1 (part1) . . . . . . . . . . . . . . . . . . . B.2 Checklist evaluation phase 1 (part2) . . . . . . . . . . . . . . . . . . . B.3 Checklist evaluation phase 1 (part3) . . . . . . . . . . . . . . . . . . . B.4 Task scenario 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . B.5 Task scenario 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . B.6 Task scenario 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . B.7 Task scenario 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . B.8 Evaluation sheet for evaluator . . . . . . . . . . . . . . . . . . . . . . B.9 Participant prole questionnaire . . . . . . . . . . . . . . . . . . . . . B.10 Consent form (part1) . . . . . . . . . . . . . . . . . . . . . . . . . . . B.11 Consent form (part2) . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 32 33 33 34 34 35 35 36 37 38 39 3 6 6 7 7 8 9 10 14 15 16 17 19
1. INTRODUCTION
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 systemcentered 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 usability today. Kim et al. for example named rmness, delight and convenience as factors [5]. Other researchers, like Gehrke and Turban, proposed specic measures including page loading, navigation efciency 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 ctional 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
Chapter 2
Project Context
2.1 yourdrink Inc. - create your own drink
The setting for this work is a ctional 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 companys 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 website being the major sales channel, it must provide the possibility for customers to create own cocktails.
Figure 2.1: logo of yourdrink Inc.
2. PROJECT CONTEXT
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 rst.
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 workow. 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 efciency. For the customer it is signicant to get the product he really wants. Furthermore the new process steps must be neatly embedded in the old ordering process to make an efcient ow 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 General Number R1 R2 Description The new product must be introduced on the front page of the website The website has to be extended by the three process steps choose size, create own drink or choose from list of beverages and create own drink The new functionalities must be properly integrated in the existing workow A correct and fair price has to be calculated and shown for every created drink The system must ensure the user knowing what customized drink he ordered It must be assured that a created recipe ts the chosen size requirements Table 2.1: Overview over system requirements
Efciency Effectiveness
R3 R4 R5 R6
2. PROJECT CONTEXT
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 ow Further steps of the project planning and project context are not focused in this work.
3. ANALYSIS
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 dened at rst. 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 costumers differ in their characteristics. In this scenario, classication 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 dened 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
James
Hook
(UC1)
James Hook is a bartender in one of the most popular bars in Central London the Blues Kitchen Bar. Sometimes when James has a day off, he likes to mix a drink for him and his girlfriend at home. Since he is a bartender, he knows lots of cocktails. So he likes to try something extraordinary. Expects from site: Possibility to be creative, no recipe restrictions Likes: Freedom Dislikes: Rules that constrain his work
Age: 26 Job: Bartender Employer: Blues Kitchen Bar Mixing experience: high Online shopping experience: high
Table 3.1: Persona 1
Joana
April
(UC2)
Joana April is a Stewardess. Since she is traveling most of the time, she loves to stay in her apartment in London whenever she comes home. Hence she is used to shopping online. Not having a boyfriend, she often invites some of her friends to her place. Sometimes it happens that she did not make it to go shopping before. So she orders many drinks for her friends online. Expects from site: Very fast ordering process, possibility to order huge amounts Likes: Fast and effective processes as she knows from her job Dislikes: When she does not get, what she wants
Age: 29 Job: Flight attendant Employer: British Airways Mixing experience: low Online shopping experience: high
3. ANALYSIS
Sarah
Goodman
(UC3)
Joana April is a Waitress at the Garden Hotel, a traditional Hotel in the East of London. Joana works a lot. Joanas hobby is to mix drinks. Unfortunately she does not have much ingredients at home, because some of them are too expensive to buy a full bottle. Joana would like to try creating drinks online, but she is not sure if she can handle the creation process since she does not have any experience. Expects from site: Lots of help and a very easy ow; possibility to create her difcult recipes Likes: Handmade stuff Dislikes: Too much new technology
Age: 39 Job: Waitress Employer: Garden Hotel Mixing experience: high Online shopping experience: low
Carl
Brouwers
(UC4)
Carl Brouwers is a Medical Doctor. He just recognized that he is really not up to date with the new technology. So he decided to explore the internet. Since it was always Carls dream to open his own bar, he would love to play the bartender and create a drink for his wife. The problem is, Karl has neither a clue of drinks nor of modern websites. Expects from site: Very easy and logical structured ordering process, comparable to an ordering in a real bar Likes: Structure Dislikes: Disorder and confusion
Age: 45 Job: Medical Doctor Employer: autonomous Mixing experience: low Online shopping experience: low
3. ANALYSIS
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 simplicity Usab. Requ. UR1 UR2 Description the structure of the website must be succinct [9] user who have little experience in online shopping shall be able to navigate through the ordering and creation process and even nd special ingredients the website must have the same structure on each page the website must have a similar design on each page the website must follow the webdesign standard users are looking for [10] the offered information must be relevant for the ordering step the contents can be easily understood the ordering process must be designed to be understood by beginners loyal customers must make advances the three page dened in R3 must provide interactive features the choice of size or ingredients must evoke visual responses the user must have the feeling that he can create his drink all by himself in a creative environment each step of the ordering process must offer the choice to go in both direction (forward and back) [10] the user must have the possibility to nd all contents via a search function the web site must provide just-in-time help for every process step
consistency
UR3 UR4 UR5
content relevance learnability
UR6 UR7 UR8 UR9 UR10 UR11 UR12
interactivity
navigability
UR13
UR14 supportability (1) UR15
Table 3.5: Overview over usability requirements (part 1)
3. ANALYSIS
Factor supportability (2) transparency
Usab. Requ. UR16 UR17 UR18
Description the web site must provide contact information for additional support it must be ensured that the user knows how the price of a drink is calculated the system must provide information about the actual 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 rst 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 avoring (sugar herbs, spices e.g.). Hereby the amount of each ingredient must be considered. Before mixing all together one must nally be sure that his selection of ingredients ts into the chosen glass. Adapting this process to an online workow the following tasks can be identied: 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/avoring 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 Description User/Customer
Object name Normal object
Object type A user has specic attributes like a name, an address, an age, etc. that is needed to checkout A glass has a specic size; it is linked to a recipe A ingredient has a name, a price and a description; it is a subtype of a type of ingredients A type of ingredients has a name and a description; it is a subtype of group a ingredients A group of ingredients has a name and a description An order has a specic number and belongs to a user; it contains order items An order item is related to a glass and has a specic price. A recipe contains ingredients; the ingredients have the additional attribute volume/amount; A user chooses or creates it An information object has a topic and an information text
Glass Ingredient
Normal object Subtype object
Type of ingredients
Subtype object
Group of ingredi- Normal object ents Order/Basket Container object Order item Recipe Normal object Container object
Information/help
Normal object
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 specic 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 gure 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 2 3
f o n t f a m i l y : K a l i n g a ; f o n t s i z e : 20 px ; 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 ow 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 dene how many single pages are neccessary to implement the workow 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 home page
User object information and help basket information and help glass
View infos about new product and ordering process overview over basket, not detailled infos about step 1 view of different glass sizes overview over basket, not detailled infos about step 2a create new recipe or choose offered one overview over basket, not detailled infos about step 2b show content show ingredients, amount and price show name and list types of ingredients show name and list ingredients show name und price overview over basket, not detailled
ordering step 1
ordering step 2a
basket information and help recipy
ordering step 2b
basket information and help glass recipe group of ingredients type of ingredients ingredient basket
Table 4.1: Overview over pages and views of user objects a look at the gures rst to better understand the text description. Bigger gures 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 Click on the start-button
Start order- Move to next page ing process (1) Checkout (2) Move to checkout page
Click on the checkout-button on sidebar
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 Get infos (2) Effect Popup window with information to that step Radiobutton gets selected How to perform page action Click on the questionmark Click on the radiobutton next to the size Click on the choose-button Click on the contact-hyperlink
Select size (3) Conrm se- Move to next page of ordering lection (4) process Request Move to contact formular different size (5)
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 gure 4.7 shows. Page action Get infos (1) Select create own recipe (2) Select choose standard drink (3) Go back (4) Checkout (5) Effect How to perform page action
Popup window with information Click on the questionmark to that step Move to next ordering step - cre- Click on text or own recipeate own recipe button Move to next ordering step - Click on text or standard drinkchoose from list of recipies button
Move one step back Move to checkout page
Click on the back-button 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. (gure 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 rst. 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
Page action Get infos (1)
Effect
How to perform page action Click on the questionmark Click on [expand category] or on the plus-button
Popup window with information to that step Expand The box expands and shows the type of ingredients of that type; the plusingredients button changes to a minus(5) button and the hyperlink-text changes to [contract category] Contract The box contracts and hides type of the ingredients of that type; ingredients the minus-button changes to a (6) plus-button and the hyperlinktext changes to [expand category] Select an in- The radiobutton gets selected; the gredient (6) ingredient is added as colored phase to the glass object; the ingredient, the amount and the price is listed on the recipe Delete ingre- Ingredient is deleted from recipe dient from and disappears from the glass recipe (7) Create recipe Move to next step - conrmation (8) of selected recipe (old process) Go back (9) Move one step back Checkout Move to checkout page (10)
Click on [contract category] or on the minus-button
Click on the checkbox next to the amount and price
Click on the cross-button
Click on the create recipe-button Click on the back-button 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 ll 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 rst 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 evaluations objective is to better understand the users 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 efcient ordering is possible for all user groups with the help offered on the web site and if the users are satised with the GUI.
5.2
Design of the evaluation
The project is planned in three iterations. Hence the evaluation passes three stages. For the rst evalutation phase (rst 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 rst iteration is to check how far the usability requirements (section 3.2) and the specications 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 rst evaluation, every huge carelessness should be identied 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
22
2(b) for example could seem intuitive to him, however, it might not to others. Problems identied now are much cheaper to eliminate, before the prototype is implemented 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 rst 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 ve participants that have not been involved in the design or prototyping process. However, it can be users working for this company. These ve 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 nd out more about the users view on the system, the ordering behavior and problems a user faces. It is important that each problem identied in this run is xed 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 nally 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 nd different usability problems
23
Factor simplicity
Usability attributes
Measuring instrument
Value to measured
be
PL 0
BP 0
WA 0
consistency
initial under- Order scenario standing of 1-4 new product and ordering process user orientation Order scenario 1-4 clearness learnability of the ordering process control/ affect efciency helpfulness clearness of pricing and ordering Expert Review SUMI
Mistakes per ordering (avg)
Time to complete order Relevance of content Total points
content relevance learnability
180 sec/drink 5 55
30 sec/drink 5 100
210 sec/drink 4 45
interactivity navigability supportability transparency
SUMI SUMI SUMI Order Scenario 2
Total score Total Score Total score Mistakes per ordering
55/ 55 55 55 0
100/ 100 100 100 0
45/ 45 45 45 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 rst 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
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 lled 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 ve 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 identied 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 companys main sales channel, the usability of the web site is a signicant factor for the companys success. An effective, efcient 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 rst iteration. If the participants were satised and had nothing to criticise in the rst 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 rst 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
A. WEB SITE DESIGN
28
Figure A.2: layout ordering step 1
A. WEB SITE DESIGN
29
Figure A.3: layout ordering step 2(a)
A. WEB SITE DESIGN
30
Figure A.4: layout ordering step 2(b) part 1
A. WEB SITE DESIGN
31
Figure A.5: layout ordering step 2(b) part 2
B. EVALUATION MATERIAL
32
Appendix B
Evaluation material
Checklist Evaluation Phase 1 Factor simplicity UR UR1 Notes
UR2
consistency
UR3 |
UR4
UR5
content relevance
UR6 |
learnability
UR7 |
UR8
UR9
Table B.1: Checklist evaluation phase 1 (part1)
33
Factor interactivity
UR UR10
Notes
UR11
UR12
navigability
UR13
UR14
supportability
UR15
UR16
transparency
UR17
UR18
Table B.2: Checklist evaluation phase 1 (part2) Style Guide Layout Notes
Color palette
Typographie
Navigation
Table B.3: Checklist evaluation phase 1 (part3)
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 as follows: 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. only have 10left. 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 You are rst. You
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 - combine them 5. Create the drink 6. Go to checkout
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
36
Task scenario
Task number
Problems/notes
Table B.8: Evaluation sheet for evaluator
37
yourdrinks Inc. evaluation - questionaire
Have you participated in a us- [ ]Yes [ ]No ability test before? What is your age? [ ]18-24 [ ]25-34 [ ]35-44 [ ]45+
What is your employment sta- [ ]Full-time [ ]Part-time [ ]Self-employed tus? [ ]Unemployed [ ]Retired What is your main occupation or job title? Do you sometimes go out to a bar? [ ]Yes [ ]No
Do you have experience mix- [ ]Yes [ ]No ing drinks? If you have experience mixing drinks, how often have you mixed one? How long have you been using the Internet? What do you use the Internet for? Have you ever ordered prod- [ ]Yes [ ]No ucts online? Have you already have or- [ ]1 [ ]2-3 [ ]4-6 [ ]more than 6 times dered products online, who often was that?
Table B.9: Participant prole questionnaire
[ ]1 [ ]2-3 [ ]4-6 [ ]more than 6 times
[ ] over 5 years [ ]3-5 years [ ]2-3 years [ ]about a year [ ]less than a year
38
Information
Purpose: The purpose of this session is to assess the ease of use of a drink creation and order site, 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 you need not answer specic questions if you choose. Potential of risk or discomfort: This study has no side effects and will not impose any harm to you physically or mentally. Anonymity/condentiality: Your identity will be anonymous. All data will be stored using a participant number, and will only be used for the purposes of the research. All data that might identify individuals will be destroyed by December 1st, 2014, when we anticipate that the project and its publications will reach its completion. In the reporting of the project, no information 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 conrm that I have read and understood this information sheet and the invitation to participate. I understand:
the purpose, risks, and benets of taking part in this session

what my involvement will entail and any questions have been answered to my satisfaction that my participation is entirely voluntary, and that I can withdraw at any time without prejudice that all information obtained will be condential that research data gathered for the study may be published provided that I cannot be identied Contact information has been provided should I wish to seek further information from the investigator at any time for purposes of clarication. Participants Signature Date
Table B.10: Consent form (part1)
39
Statement by investigator I have explained this study and the implications of participation in it to this participant without bias and I believe that the consent is informed and that he/she understands the implications of participation. Name of investigator: Investigators 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):501522, Apr. 1997. [2] L. Casal, C. Flavin, and M. Guinalu. 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):239254, 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):450463, 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):105109, 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):151167, 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 SciencesVolume 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):288302, 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 471478, New York, NY, USA, 2002. ACM.

Coursework Usability

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Coursework Usability

Uploaded by

Copyright:

Available Formats

Kingston University London Faculty of Science, Engineering and Computing Usability Engineering

CIM506 Usability Engineering: Coursework Course Work

Supervisor: Martin Colbert

Handed in November 2012

Appendices A Web site design B Evaluation material Literature

CIM506 Usability Engineering: Coursework

Johannes Saenger, 2012

CIM506 Usability Engineering: Coursework

Johannes Saenger, 2012

CIM506 Usability Engineering: Coursework

Johannes Saenger, 2012

CIM506 Usability Engineering: Coursework

Johannes Saenger, 2012

Figure 2.1: logo of yourdrink Inc.

CIM506 Usability Engineering: Coursework

Johannes Saenger, 2012

Business objectives and system requirements

CIM506 Usability Engineering: Coursework

Johannes Saenger, 2012

CIM506 Usability Engineering: Coursework

Johannes Saenger, 2012

User classes and persona

CIM506 Usability Engineering: Coursework

Johannes Saenger, 2012

Table 3.1: Persona 1

Table 3.2: Persona 2

CIM506 Usability Engineering: Coursework

Johannes Saenger, 2012

Table 3.3: Persona 3

Table 3.4: Persona 4

CIM506 Usability Engineering: Coursework

Johannes Saenger, 2012

UR3 UR4 UR5

content relevance learnability

UR6 UR7 UR8 UR9 UR10 UR11 UR12

UR14 supportability (1) UR15

Table 3.5: Overview over usability requirements (part 1)

CIM506 Usability Engineering: Coursework

Johannes Saenger, 2012

Factor supportability (2) transparency

Usab. Requ. UR16 UR17 UR18

Table 3.6: Overview over usability requirements (part 2)

User object models

CIM506 Usability Engineering: Coursework

Johannes Saenger, 2012

Object name Normal object

Normal object Subtype object

Figure 3.5: schematic view of user objects

CIM506 Usability Engineering: Coursework

Johannes Saenger, 2012

Figure 4.1: layout (home page)

CIM506 Usability Engineering: Coursework

Johannes Saenger, 2012

Figure 4.2: dimensions of the constituents

CIM506 Usability Engineering: Coursework

Johannes Saenger, 2012

Figure 4.3: color palette

Figure 4.4: standard button

Web pages and view of user objects

CIM506 Usability Engineering: Coursework

Johannes Saenger, 2012

Web page home page

basket information and help recipy

Redesign of the home page