Evaluation of an IPhone App Interface

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)

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.

The University of Nottingham

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

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. 2. 3. 4. The overall color of the background for the interface was not matched with the text. Fonts used in the app are not coherent and invisible. Instead of using icons, texts are irrelevantly used. 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.

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 users 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
4

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

Welcome Page

Login Page

Login button go to Home Page

Home Page

Make new trips add a new trip View My trips view trips already added 3 buttons at the bottom Home Page, Account, Set up

Make new trips

1.1 Choose trans (default) - trans = transport

Means of transport popup options Trans button current page Stay button page to add place to stay Place button page to add place to travel Back button go back home page Done button complete and view the detail

Make new trips

1.1 Choose trans

Flight button add a flight

Make new trips

1.2 Choose trans of flight

Search tickets button search flight tickets to book I Have Tickets button add information of tickets already got Stay button page to add place to stay Place button page to add place to travel Back button go back popup options of transport Done button complete and view the detail

Make new trips

1.21 Search tickets

Back button go back Add new trips page

Make new trips

1.32 I have tickets

Trans button go to transport page Stay button page to add place to stay Place button page to add place to travel Back button go back page to add flight Done button complete and view the detail

Make new trips

2.1 Choose stay

Hotel button add hotel to stay

Make new trips

2.11 Choose stay of Hotel

Booking a hotel button go to hotel booking page Have booked hotel button add information of hotels already booked Stay button page to add place to stay Place button page to add place to travel Back button go back popup options of transport Done button complete and view the detail

10

Make new trips

2.13 Have booked Hotel

Trans button go to transport page Stay button page to add place to stay Place button page to add place to travel Back button go back page to add flight Done button complete and view the detail

Make new trips

3.1 Place

Trans button go to transport page Stay button page to add place to stay Place button current page Back button go back page to add flight Done button complete and view the detail

11

Detail of My Trips

Back button view all trips already added Done button go back home page

My Trips

View button view the details of this trip Back button go back home page

12

Account

Back button go back home page

Set Up

Back button go back home page

13

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.
14

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 users 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? 15

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.
16

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

17

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.

18

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. 2.
6 5 4

3
2 1

Liked Disliked Neutral

0
Welcome Page Color of Home Making New trip Planner Function Page Ovarall Functionality

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.

19

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.

20

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.

21

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.

22

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 designers 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.

23

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].

24