Download - 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
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
Placebutton–pagetoaddplacetotravel
Searchticketsbutton–searchflightticketstobook
Backbutton–gobackpopupoptionsoftransport
Donebutton–completeandviewthedetail
9
Make new trips 1.21 Search tickets
Backbutton–gobackAddnewtripspage
Make new trips 1.32 I have tickets
Transbutton–gototransportpage
Staybutton–pagetoaddplacetostay
Placebutton–pagetoaddplacetotravel
Backbutton–gobackpagetoaddflight
Donebutton–completeandviewthedetail
10
Make new trips 2.1 Choose stay
Hotelbutton–addhoteltostay
Make new trips 2.11 Choose stay of Hotel
Havebookedhotelbutton–addinformationofhotels alreadybookedStaybutton–pagetoaddplacetostay
Placebutton–pagetoaddplacetotravel
Bookingahotelbutton–gotohotelbookingpage
Backbutton–gobackpopupoptionsoftransport
Donebutton–completeandviewthedetail
11
Make new trips 2.13 Have booked Hotel
Transbutton–gototransportpage
Staybutton–pagetoaddplacetostay
Placebutton–pagetoaddplacetotravel
Backbutton–gobackpagetoaddflight
Donebutton–completeandviewthedetail
Make new trips 3.1 Place
Transbutton–gototransportpage
Staybutton–pagetoaddplacetostay
Placebutton–currentpage
Backbutton–gobackpagetoaddflight
Donebutton–completeandviewthedetail
12
Detail of My Trips
Backbutton–viewalltripsalreadyadded
Donebutton–gobackhomepage
My Trips
Viewbutton–viewthedetailsofthistrip
Backbutton–gobackhomepage
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.
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].