coursework-2 hci (almost final)

Evaluation of an IPhone App Interface

T h e U n i v e r s i t y o f N o t t i n g h a m

The document was written by students of The University of Nottingham as part of the coursework for Human

Computer Interaction. This part of the paper consists of two evaluations: cognitive walkthrough and cooperative

evaluation of the IPhone app designed to serve as tourist guide.

08 Fall

COURSEWORK-2

Group-10

Names of the Students NURUL AIN ABU SAMAH (4214967)

XIAO DU (4214966)

GUANMING CHEN (4208839)

GOBINDA KHAREL (4203517)

MICHAEL OPOKU (4174964)

YING ZHANG (4218338)

2

Table of Contents

1. Executive Summary .................................................................................................................................. 2

1.1 Key Findings from the Evaluation: ..................................................................................................... 3

2. Introduction ............................................................................................................................................... 4

2.1 Methods................................................................................................ Error! Bookmark not defined.

a) Cognitive Walkthrough:.................................................................................................................. 23

b) Cooperative Evaluation: ................................................................................................................. 23

2.2 The Prototype ...................................................................................................................................... 4

3. Cognitive Walkthrough ........................................................................................................................... 14

3.1 Methods............................................................................................................................................. 14

3.2 equipment ......................................................................................................................................... 16

3.3 Results ............................................................................................................................................... 16

4. Collaborative Evaluation ........................................................................................................................ 18

Bibliography ............................................................................................................................................... 24

Word Counts for the Content: 2984

3

1. Executive Summary As part of the coursework for Human Computer Interaction, the second part was to evaluate the interface

designed in the first part. In this context, the iPhone Travel app interface was evaluated using two

methods: cognitive walkthrough and cooperative evaluation. The former involved members of the group

evaluating the design by pretending to be real users with knowledge and expertise in the domain. The

latter involved other group members evaluating our product.

In the first evaluation process, users played roles of real users walking through the design interface to take

note of the problems encountered with usability of the software (UKOLN, 2005). However, the real users

and designers cooperated to find the problems in the design in the cooperative evaluation.

1.1 Key Findings from the Evaluation: From the evaluation process the following key findings were noted:

To be improved:

1. The overall color of the background for the interface was not matched with the text.

2. Fonts used in the app are not coherent and invisible.

3. Instead of using icons, texts are irrelevantly used.

4. In registration function, more information should be added like email etc.

Appealing functions:

1. The background color of the first page was appealing and meets international logo representation.

2. The functions used in reservation and store information are very relevant and are to the context.

3. The app meets all the requirements for all age groups.

4

2. Introduction During the first course work, HCI groups were assigned to design a prototype for a Travel Assistant App

for Android or iPhone. The purpose of the app was to assist users during their travel. The use of the app

can be for two purposes: buying required tickets for transportation, accommodation and search for famous

places of the visiting country as well as storing already purchased tickets from third parties.

The App is meant to assist users in booking and store travel information and work as travel planner

during their trip to destination.

The prototype is low-fidelity in nature and was first produced using Balsamic wire framing software and

then Microsoft PowerPoint was used to display the interactive mode of the interface.

After completing the prototype, an evaluation process was carried out to test whether the interface is

suitable for the purpose of design. The purpose of the evaluation was to gather users’ experience on the

usability of the interface while using the software and incorporate findings and suggestions, if any to the

final development of the software.

Two methods were used for this evaluation purpose: Cognitive Walkthrough and Cooperative Evaluation.

2.1 Description of the prototype

2.1.1 Ergonomics Design Principles and the Interface

The ergonomics principle provides basically 5 principles in designing the principles: safety, comfort, ease

of use, productivity and performance and aesthetic (Health & Safety, 2013). The interface presented

here was designed based on at least the four principles:

1. Safety: the app provides the login page which secures user’s data. .

2. Ease of Use: the interface is designed considering all kind of users from beginners to the

advanced. It is very easy and simple for use.

3. Productivity and performance: The purpose of the app is providing the assistance to the

travelers. It is simple, productive and quick in performance with simple functions.

4. Aesthetic: It is appealing. If first page of the app provides the beauty.

2.1.2 Universal Design

During the design of the travel buddy app, some considerations were made to make the application

usable by all users to a great extent without the need for adaptation or specialized design (Alan Dix et

al, 2003).

In terms of flexibility in use, the application accommodates a wide range of user preference and

abilities. The age range for the software is between 18- 45 and can be easily used without any

assistance. It provides users with the choice of selecting a type of transportation, accommodation,

place to visit or saving their trip plan.

The equitable use of the application was not a high priority on our list. Hence, it was not designed to

cater for users with disability. The application on the other hand provides users with the needed

safety, security and privacy by protecting users’ information with a login page.

Travel Buddy can easily be understood by users regardless of their language, skills or knowledge of

5

the application. This is made possible by the use of labeled buttons, shortcuts like the ‘back’ and

‘done’ buttons which makes it easy for users to navigate. The buttons also provide feedback by

vibrating when pressed.

The application provides users with the needed information regardless of the fact that some of the

buttons are not self-explanatory and also illegibility due to the use of small fonts. It can also be used

anywhere in the world.

Group 10 ICH Course Work

6

Welcome Page

Login Page

Loginbutton–gotoHomePage

7

Home Page

Makenewtrips–addanewtrip

ViewMytrips–viewtripsalreadyadded

3buttonsatthebottom–HomePage,Account,Setup

Make new trips 1.1 Choose trans (default) - trans = transport

Transbutton–currentpage

Staybutton–pagetoaddplacetostay

Placebutton–pagetoaddplacetotravel

Meansoftransport–popupoptions

Backbutton–gobackhomepage

Donebutton–completeandviewthedetail

8

Make new trips 1.1 Choose trans

Flightbutton–addaflight

Make new trips 1.2 Choose trans of flight

IHaveTicketsbutton–addinformationoftickets alreadygotStaybutton–pagetoaddplacetostay


Searchticketsbutton–searchflightticketstobook

Backbutton–gobackpopupoptionsoftransport


9

Make new trips 1.21 Search tickets

Backbutton–gobackAddnewtripspage

Make new trips 1.32 I have tickets

Transbutton–gototransportpage



Backbutton–gobackpagetoaddflight


10

Make new trips 2.1 Choose stay

Hotelbutton–addhoteltostay

Make new trips 2.11 Choose stay of Hotel

Havebookedhotelbutton–addinformationofhotels alreadybookedStaybutton–pagetoaddplacetostay


Bookingahotelbutton–gotohotelbookingpage

Backbutton–gobackpopupoptionsoftransport


11

Make new trips 2.13 Have booked Hotel






Make new trips 3.1 Place



Placebutton–currentpage



12

Detail of My Trips

Backbutton–viewalltripsalreadyadded

Donebutton–gobackhomepage

My Trips

Viewbutton–viewthedetailsofthistrip


13

Account


Set Up


14

3. Cognitive Walkthrough

Cognitive walk through is the process of evaluation the usability of the software designed for specific

tasks where single or multiple users are involved in evaluation process. (Usabilitybok.org, 2012). For the

purpose of this cognitive walkthrough, we have selected five users from the group. The tasks have been

divided into Note-taker, Facilitator and Evaluators. Among six people, two were assigned for note taking;

one person took the responsibility of facilitating evaluation process. Other three people involved in

evaluation processes were assigned the role of expert evaluators.

3.1 Methods This process was carried out by experts, which are members of the group pretended to be experts in this

scenario. The entire evaluation was based on expert judgments. It involved the experts mimicking users

walking through the interface to accomplish specific tasks (Shneiderman and Plaisant, 2005). After all the

individuals were assigned with tasks, the real evaluation process took place.

3.1.1 Participants

There were six participants in total from the HCI module.

3.1.2 Procedure

Prototype, description of the process in walkthrough and task description and required documents were

presented to the experts by the designer: in this case the designers were the group themselves. Then the

experts carry out the task by following the action lists.

3.1.3 Description of prototype

An iPhone app allows user to book and store travel information.

User can store:

The transportation details – flight, train, car, bike, bus and other

The accommodation details – hotel and other accommodations

The tourist destination

User can also view the information added and share the information to their friends on community sites.

3.1.4 Description of the task

The user stores the flight detail, hotel detail and destination detail, and then view the information is

stored.

The action list:

Step 1: login to the app

After the display of main page, user is led to login page. To login, user must key in username and

password. There is also an option to skip this part by selecting ‘Discover’

Step 2: select ‘Make New Trips’

Select ‘Make New Trips’ to create new travel plan.

Step 3: select ‘Trans’

Select ‘Trans’ to choose ‘Means of transport’.

Step 4: choose mode of transportation

Select any mode of transportation from the drop down list such as flight, train, car, bike, bus or other.

15

Step 5: search tickets

Choose ‘Search Tickets’ to book your means of transportation.

Step 6: select destination and date

Simply key in destination, departure and return date and number of tickets and click ‘Search’. Then

the app will list out search results based on user’s input

Step 7: store information

Click ‘Done’ to store the booking details. User can also conveniently add another booking by

clicking ‘Add another’ button.

Step 8: select ‘Stay’

Select ‘Stay’ to choose type of accommodation

Step 9: choose type of accommodation

Choose any type of accommodation from the drop down list such as hotel, private stay or other.

Step 10: choose any type of accommodation

Select ‘Booking a Hotel’ to book your accommodation

Step 11: select location and date

Insert destination, check-in and check-out dates and number of guests and click ‘Search’. Then it will list

out results based on your choice.

Step 12: store information

Click ‘Done’ to store booking details. User can also add another booking by selecting ‘Add another’

button.

Step 13: select ‘Place’

Select ‘Place’ to search and choose famous attractions to be added to trip details.

Step 14: insert location

Key-in location to search for interesting places to visit during the trip.

Step 15: add information of places

Select the places from the search result and click ‘Add’ to store the information.

Step 16: view trip details

View all information about the trip in one scrollable page with list of details in sequence order of

date and time.

Step 17: share trip details

Share the trip details by clicking ‘Share’ button

A number of questions were asked for each task to get the clear understanding of the usability of the

software. The questions were:

a. Is the goal clear at each stage?

b. Is the appropriate action obvious?

16

c. Is it clear that the appropriate action leads to the goal?

d. What problems are there in performing the action?

3.2 equipment There were one laptop, two desktop, one telephone. The computers were used to demonstrate the

designs and take notes. Mobile phone, on the other hand, was used to record the events for later use.

3.3 Results The following section provides the results of the evaluation from the experts. The results

provided are only those that require improvements in the future prototype. The positive

feedbacks from the experts were almost similar to the cooperative evaluation. Therefore it was

avoided the repetition of those points in this section.

Critics about Design

1. The background colour was not synchronous to all screen of the app. The background colour

could be blue with bold white text fonts. 2. Some of the texts used in tabs and buttons are not self-explanatory. For example, the word

‘Trans’ used to represent transport confuses users. 3. The fonts are too small and hardly visible.

4. The visibility of pop up menu is poor.

Critics about Functionality

1. The text used ‘Discover’ in log in page misinterprets its real function.

2. The screen that comes after Clicking on ‘Make New Trip’ is not necessary. The option

‘Means of transport’ is not required as the pop up menu with lists of transportation should

appears by clicking on ‘Trans’ button instead of former. 3. The information that appears by clicking on account ‘My Account’ does not provide

accuracy. It should have ‘Edit’ function to allow users to amend the information and the

page does not provide information on the users account but rather information on places

visited and places the user wish to visit. 4. The purpose of ‘Share’ button is not clear.

5. The function ‘Travel with’ appears suddenly in my trip page. There are no functions to

add people who you travel with.

Suggestions

1. For the sake of design consistency and maintaining a balance in the eye, the choice of colours

should be limited to 3 colours that are blue as background, dark blue buttons and bold white

fonts. All fonts should be white and made bolder or changed to black and bolder so that it is

easier to read.

2. The GPS function added to the app would give richness in functionality.

3. Add weather to the 'Place' page to inform users about the weather at the selected location.

4. Add function for user to search for places to eat nearby their location as finding restaurants or

dinner are most common problems for travellers.

17

5. Pages like the 'Flight' page can be made interesting by using pictures.

18

4. Cooperative Evaluation

4.1 Methods The Method used in this project was cooperation between users and the designer. The cooperative

evaluation used in this project was more interactive in nature.

4.1.1 Participants

All of the participants were postgraduate students who are taking the same module. There were five users

from the group that was assigned to work together with our group.

4.1.2 Procedure

The users were presented the design of the prototype. Both negative as well as positive feedbacks from

the users were noted down. Rather than presentation of the product and receiving feedbacks, the

interactive method was adopted where users and designers interactively involved in evaluation process.

Participants were welcomed to give critics about any functions or design in the application. If the users

provided feedback on particular tasks or part of interface, the questions were asked why the users think

so.

4.1.3 Equipment

There were two laptops and an iPhone for video recording. One of the laptop was used to present the

interface and another one is used to take notes of the event. A video recorder was used to record the

whole process of discussion and evaluation.

4.2 Results

Positive feedbacks from users:

Out of five users, a 100% of the users liked the followings aspect and functionality of the Interface:

1. The welcome page was liked by all the users and “it represents international and the color

matches together”.

19

2. ‘Make new trips’ Functionality: “it is a good feature where user can search for new tickets or

insert the purchased information from other sources”.

3. ‘My trips’ function “is really good and innovative and easy for user to access their information”.

Overall, all five of the participants agreed that they like our application thoroughly and compliments the

functionality of our app.

Critics from users

1. For registration page: the 4 out of 5 commented that it was difficult to read the words because the

color of the fonts is not suitable. Similarly the Button color and background was not suitable.

0

1

2

3

4

5

6

Welcome Page Color of HomePage

Making New trip Planner Function OvarallFunctionality

Liked

Disliked

Neutral

20

2. For ‘Make new trips – Trans’ page, user commented bout ‘Trans’ might not be a correct

abbreviation for transportation and they might misinterpret the word. They also commented that

the color of the buttons are too bright and had difficulties to read the texts.

3. For ‘My trips’ page, the background color is not suitable with the color of the font because it is

hard to read the texts.

21

4. The text at bottom of pictures in account page is too small for them. They questioned why ‘I have

been to:’ section must be included in the page too because it already pass. Users also commented

that maybe only younger users will prefer that function compare to elder people.

5. Overall, most critics are about the color of background and fonts and also about the words chosen

that are not suitable.

Suggestions from users:

1. Should add more details, for example: email address, in registration part where user can insert

address and also payment details.

2. Add functions where user can email or print all the travel information.

3. In home page, instead of ‘Make new trips’, it should be ‘Make new trip’ because user can only

create one new trip at one step.

4. Instead of text, use icons to represent the menu function and to make it understandable for ‘Trans’

, ‘Stay’ and ‘Place’ as those words are not the right abbreviations for ‘Transportation’ and

‘Accommodation’.

5. Use ‘Save’ or ‘Store’ instead of ‘Done’ when user is done with booking of transportation or

accommodation.

6. For ‘Make new trips’ in ‘Stay’ page, user suggested to use appropriate vocabularies not to

confuse users.

7. Add auto-complete word suggestions when user key in names for location.

8. In ‘My trips’ page, the space about flight details should be longer. Instead of text use icons to

make it more understandable.

9. Instead of ‘set up’ use ‘Settings’. The order of the button should also be reordered like ‘General’,

‘Privacy’ and then ‘About’, not the other way around.

10. Use more visible Text Color.

22

11. This app should send reminder to user to remind them about their flights one day or two days

before their travel time.

12. Add GPS function in the app.

23

5. Discussion The methods used in this research were cognitive walkthrough (CW) and cooperative evaluation (CE).

The CE was more of formative than summative evaluation.

Cognitive Walkthrough (CW):

The information on how the evaluation was carried out has already been mentioned in the method and

procedure of the purpose section of CW. The purpose of this evaluation was to find the problems users

might encounter while using the app. The strength and weakness are as follows:

Strength:

The evaluation was quick and required less effort to go through. The time taken for the process

was approximately 20 minutes for each expert.

It helped to give design solution in some extent.

Weaknesses:

The users pretended to be the experts which in reality might have less knowledge.

Although biasness was not expected, it was quiet difficult to maintain it at all the time.

The results were as good as the experts. Expectation of good result is very low overall.

Cooperative Evaluation (CE):

Similar to the CW, the information on the methods and procedures are found above in CE Section. The

goal of CE is to obtain information form real users’ point of view. The strengths and weaknesses are as

follows:

Strength:

Users were real and could provide the unbiased user experience.

The possibility of receiving more feedbacks.

The process was more interactive from where more information could be extracted.

Eliminates the problem of designer’s designing for themselves by involving users.

Weaknesses:

It was time consuming.

Feedbacks are more subjective depending upon the users.

Users choose what they want to evaluate.

Generate large volume of information which takes long time to process data.

In nutshell, both of the methods were useful for the improvements for the different reasons and

different purposes. The CW was particularly convenient for the group members to analyze the tasks on

their own.

While on the other hand, the CE evaluation technique gathered a lot of useful and unbiased user

feedback that was not known to the group beforehand despite longer time needed. Both methods

highlighted equally important gaps which will be incorporated in the design to improve functionality of

the App.

24

Bibliography Alan Dix / Janet E. Finlay / Gregory D. Abowd / Russell Beale, 2003. Human-Computer

Interaction. 3rd ed. s.l.:Prentice Hall.

Health & Safty,2013.What is Ergonomics and why is ergonomics important. Available at:

http://www.safetynewsandreviews.co.uk/article.asp?c=21

Shneiderman et al (2005) Designing the user interface: strategies for effective human-computer

interaction. 4th ed. Addison-Wesley

Usabilitybok.org, 2012. Cognitive Walkthrough. [Online]

Available at: http://www.usabilitybok.org/print/cognitive-walkthrough

[Accessed 08 12 2013].

R.Stakes, 2008. Summative vs Formatiove Evaluation. Available at:

http://www.csn.edu/PDFFiles/academics/Resource%20Development%20and%20Assessment/As

sessment/Summative_vs_%20FormativeEvaluation.pdf

UKOLN, 2005. Introduction to Cognitive Walkthrough. [Online]

Available at: http://www.ukoln.ac.uk/qa-focus/documents/briefings/briefing-87/html/

[Accessed 08 Dec 2013].



http://www.csn.edu/PDFFiles/academics/Resource%20Development%20and%20Assessment/Assessment/Summative_vs_%20FormativeEvaluation.pdf

http://www.csn.edu/PDFFiles/academics/Resource%20Development%20and%20Assessment/Assessment/Summative_vs_%20FormativeEvaluation.pdf

coursework-2 hci (almost final)

Documents

evaluation process

collaborative evaluation

cognitive walkthrough

b cooperative evaluation

design interface

iphone app interface

iphone travel app interface

group members