User Interface Design and Usability Evaluation

This document provides a study on user interface design and usability evaluation for an iOS based application for purchasing a bike. It includes preliminary design, detailed design, and implementation.

Running head: USER INTERFACE DESIGN
User Interface Design and Usability Evaluation
Name of the Student
Name of the University
Author’s note:

1USER INTERFACE DESIGN
sTable of Contents
1. Introduction:................................................................................................................................2
2. Critical Exploration:....................................................................................................................2
3. User Need Analysis:....................................................................................................................2
3.1 Persona:..................................................................................................................................3
3.2 Scenario:................................................................................................................................5
3.3 Hierarchical Task Analysis:...................................................................................................5
3.4 Environmental Analysis:.......................................................................................................6
4. Preliminary Design:.....................................................................................................................7
4.1 Story Board:.........................................................................................................................11
5. Detailed Design:........................................................................................................................12
5.1 Decision related to User Need Analysis..............................................................................12
4.2 Decision Related to Usability..............................................................................................13
4.3 Decision related to cognitive issues.....................................................................................13
6. Implementation:.........................................................................................................................14
7. Evaluation:.................................................................................................................................18
7.1 Cognitive Walkthrough:......................................................................................................18
8. Conclusion:................................................................................................................................21
Bibliography:.................................................................................................................................23

2USER INTERFACE DESIGN
1. Introduction:
The study is done based on the preliminary ideas based on which the first designs will be
created. Moreover, the study mainly concentrates on the detailed diagram design and usability
evaluation of the prototypes. The developed mobile interface shows the task of purchase a bike
from an iOS based application. The device selected for the UI design is iPhone X.
2. Critical Exploration:
The efficiency can be considered as the usability requirement that ensures smooth
interaction between user and system. The efficient interfaces ate designed such a way that
minimal workload will be upon users and all the complex functions will be processing at the
background. The efficient designs try to hide most of the functions from the student. If needed,
the efficient interface designs can be minimalistic. It follows few user interface design principles
which can make the mobile app easy to use for the user.
In order to make the design of the application more efficient, the designers try to follow
the conventional representation of elements and texts. The pattern of tasks are also similar to
majority of the applications. This makes sure that user do not have to adapt to new process while
using this application, the application is already adjusted to match with user knowledge.
The efficiency of user experience is seen as the ability of the user to perform an activity
accurately and how quickly the user can complete objectives. A efficient user interface always
promotes faster goal achieving.
3. User Need Analysis:
The user requirements are the most important part of any e-commerce system design
process. The proposed system will be used by the customers most of the time. That is why the

3USER INTERFACE DESIGN
customers are the most important users among all. The user requirements will collected through
various methods lie interview, questionnaire, prototyping or more. The user persona provides
details of the user who is being considered as a participant of the requirement gathering
technique.
3.1 Persona:
Name Christian Spooner
Occupation Polisher
Demographics 29 Years Old
Male
Lives in 66, George Street, MORVEN, Queensland, 4468
Facts Trusts in products than the manufacturers
Salary: $14,000
Loves to travel
Travels a lot to mountains
Loves biking in mountains
Has a range of mountain bikes
Trusts in the manufacturers like Author, Avanti, Haro Bikes and more
Has good knowledge of mountains in all over Australia
Communication Phone: [phone]
Mail: [e-mail]
Behaviors Relies on the reviews of the experts before purchasing a bike
Does not like when a website or application does not provide different

4USER INTERFACE DESIGN
angles of the product
Switches to other manufacturers when one or two products are of poor
quality
Not being able to try a bike from new manufacturer before buying
Poor customer after sake service and not able to get proper reply from
customer support center make him extremely angry
Goes to new mountains every year to try his bikes
Loves to promote mountain biking
Suggesting trustworthy manufacturers to new mountain bikers
Managing between family and hobby perfectly is a true good behavioral
side
Needs and Goals Need bikes that can be trusted in new mountains
Reliable after sale service from the seller
Various discount offers and promotion cards as he is a well-known
mountain biker
Pre-booking of bicycles from reputed manufacturers
Easy to pay techniques such as digital wallet
To select the bikes in the wish list
Receive notifications in mail and phone when a selected bike is available
again
An account which can be used to track each activity

5USER INTERFACE DESIGN
3.2 Scenario:
Christian Spooner buys at least one bike in a year. He is also associated with few blogs
on Mountain Biking. The blog owners gets suggestion from him to suggest mountain bikes. In
every weekend, Christian Spooner goes to one nearby mountain or hill with friends to practice.
He also tries bikes of friends and other known people. He is worried about the fact that most of
the reputed manufacturers are preferring online stores rather than physical stores. That is why he
cannot check the bikes physically before buying. Many of the promotional blogs and videos are
paid so accurate idea of the new bikes cannot be gained before checking them physically.
Though he is a well-known person, he has faced issues with buying new launched bikes as the
online retailers sell limited bikes to increase demand.
3.3 Hierarchical Task Analysis:
Figure 1: Hierarchical Task Diagram of Online Book Shop

6USER INTERFACE DESIGN
(Source: Created by Author)
3.4 Environmental Analysis:
The design of the proposed application is done for the mobile platform. The design
resembles the mobile application genre rather than responsive website for mobile devices. The
design which has been proposed in the report is done for specifically iPhone X. This device is the
latest launch from the global technology device manufacturer Apple. The texts are in wither
white or black color. The button color are contrasting and rich so that user can easily locate
those. The application will have login and registration option. Various users can login to
application one at a time to check their account. The application saves all the data against the
user who has been logged in.

7USER INTERFACE DESIGN
4. Preliminary Design:
Figure 2: Product Page
(Source: Created by Author)

8USER INTERFACE DESIGN
Figure 3: Cart Page
(Source: Created by Author)

9USER INTERFACE DESIGN
Figure 4: Delivery Details Gathering Page
(Source: Created by Author)

10USER INTERFACE DESIGN
Figure 5: Payment Gathering Page

11USER INTERFACE DESIGN
(Source: Created by Author)
4.1 Story Board:
Majority of the pages in the application will have back buttons. However, the two of the
pages in the selected task of purchasing a bike will have back buttons. The back buttons are not
represented as the conventional back arrows, it has been proposed as a rectangular shape with
rounded edges. This allows the user to go back to previous page at any time. However, going
back does not mean that actions taken will be rolled back.
The interface will include error prevention messages. The messages will be present in the
interface in the same way and look so that user can understand that something wring has
happened. The system will have some external operations like sending notifications to email,
collecting payment from third party payment gateway and more.
i. The initial page is the product page. This page is used for showcasing the details
of a particular product. The contents and media of this page will be different but
the design of this page will be same for each product. The product page has a ‘add
to cart’ button and one button for buy option. The buy option allows the user to
purchase the product directly even another products are added to the cart. The
‘add to cart’ adds product to the cart and updates the cart. This page shows an
image of the bike just under the header. The name and price of the product is also
present in the page.
ii. After the user clicks on the ‘add to cart’ button or buy button, the system redirect
the user to cart page. In contrast to what has been said in the last section, the
system redirect the user to the cart page after clicking on buy button. This is
because, the cart page has to be accessed for buying a product. In case, the

12USER INTERFACE DESIGN
customer click on buy now, the cart page accepts only the selected product no
matter if any product is added to the cart or not. This cart can be considered as an
alternate cart which holds information of current product. The cart allows user to
remove product from cart. The cart page checks the product price and shows the
total cost per each product based on quantity and sum of entire order.
iii. After the user clicks on checkout, the delivery page appears. This page has the
input fields for accepting deliver address details from the user. The user have to
add, house number, street, city, state and zip code for providing delivery address
for the order. The user can also check whether the seller can parcel the bike to the
selected location by checking the zip code. The user will also add a Landmark in
the address field so that deliver person can be proper idea about the delivery
address. The user can go back to the previous page by clicking on the ‘back’
button.
iv. After the user clicks on the ‘Pay’ button the user is redirected to the payment
page. The payment page will have input filed for entering the card number,
account holder name and expiry date. If all the data are valid then user can add
CVV number. The payment page will show the pay amount with the product.
After all the information are entered, the user will click on confirm button and
payment will be done.
5. Detailed Design:
5.1 Decision related to User Need Analysis
Christian’s persona shows that he uses a smart phone which has touchscreen capability.
As the mobile device is touch screen, there will be huge opportunity in placing the elements on

13USER INTERFACE DESIGN
the screen as per design needs. The user interface will flow various conventional approaches so
that it will allow the user to feel odd while using the system. In order to maintain the usability,
the system will follow the processes that are used in most of the major online retail application.
The screen will have only the required information so that user do not need to worry about
everything that is going on in the system. Each screen designed will have a distinct purpose.
4.2 Decision Related to Usability
Each element in the system interface will have a label so that user can easily identify
which element is used for which purpose. In order to enhance the user interaction, the three click
to desired information approach has been considered.
4.3 Decision related to cognitive issues
The real issues is the operation of cart. The user will not be able to understand how the
cart works for ‘Add to Cart’ button and ‘Buy’ button.

14USER INTERFACE DESIGN
6. Implementation:
Figure 6: Product Page
(Source: Created by Author)

15USER INTERFACE DESIGN
Figure 7: Cart Page
(Source: Created by Author)

16USER INTERFACE DESIGN
Figure 8: Delivery Details Gathering Page
(Source: Created by Author)

17USER INTERFACE DESIGN
Figure 9: Payment Gathering Page
(Source: Created by Author)

18USER INTERFACE DESIGN
7. Evaluation:
7.1 Cognitive Walkthrough:
In order to complete the cognitive walkthrough evaluation, four questions have been
used. The table 1 is consisting of the answer of these four questions.
The task is purchasing a Mountain Bike.
Person: A keen mountain biker who suggest and purchases many mountain bikes
Green means yes, red means no and yellow means not sure.
Action User
Action
System
Response
Is the
required
information
available in
every
page?
Will the user
have access
to required
actions?
Can the
user see
the
progress
of the
action?
Can the user
understand
the result of
the action?
1 The user
access the
product
page
The system
shows the
product details
in the product
page along
with product
image
2 The user
will select
The system
shows the

19USER INTERFACE DESIGN
the select
the
amount of
product to
purchase
number such
as 1, 2 or other
available
options in the
drop down
menu
3 The user
clicks on
the add to
cart
button
The system
redirect the
user to the cart
page and
update the cart
The user
cannot
understand
what the
system
shows a
product is
already
available
in the cart
The user
should be
able to
understand
how the cart
is updating
the data
4 The user
clicks on
the buy
button
The system
redirect the
user to the cart
page and
update the cart
5 The user
removes
The system
shows the cart
If the cart
page was
The user
must

20USER INTERFACE DESIGN
the
product
from the
cart
is empty and
suggest the
user to
purchase
product
access by
clicking
buy button
then the
cart page
will
disappear
and
redirect
the user to
home page
understand
that buy
button
works
differently
than
conventional
add to cart
button
6 The user
clicks on
‘Back’
button
The system
redirect the
user to the
product page
from where
the last add to
cart or buy
button was
clicked
The system
empties the
cart page if
the buy
button was
clicked
7 The user
clicks on
the
The system
redirect the
user to

21USER INTERFACE DESIGN
checkout
button
delivery page
8 User
enters the
delivery
address
into the
field
The system
verify the
entered details
such as
format.
9 The user
check if
product
can be
delivered
to address
The system
shows whether
delivery is
possible or not
10 User
clicks on
the Pay
button
The system
redirect the
user to
payment page
8. Conclusion:
From the above study, it can be concluded that proposed design for the application is very
high quality and meets every need. The users will be able to interact with the system very easily.
As the designs are done based on a single task, not all the aspects of the application could be

22USER INTERFACE DESIGN
represented through the application. The cognitive walkthrough presented into the report has
covered every aspect possible within the proposed task.

23USER INTERFACE DESIGN
Bibliography:
Agarwal, R., 2018. User Interface Design of Head-Up Display Using Scenarios: An Early Stage
Innovation Project at Bombardier.
Georgsson, M., Staggers, N., Årsand, E. and Kushniruk, A., 2018. Using a User-centered
Cognitive Walkthrough to Evaluate a mHealth Diabetes Self-management System Including a
Case Study and External Validity Test.
Ghalibaf, A.K., Jangi, M., Habibi, M.R.M., Zangouei, S. and Khajouei, R., 2018. Usability
evaluation of obstetrics and gynecology information system using cognitive walkthrough
method. Electronic physician, 10(4), p.6682.
Kamaruzaman, M.F., Rani, N.M., Nor, H.M. and Azahari, M.H.H., 2016. Developing user
interface design application for children with autism. Procedia-Social and Behavioral
Sciences, 217, pp.887-894.
Khajouei, R., Zahiri Esfahani, M. and Jahani, Y., 2017. Comparison of heuristic and cognitive
walkthrough usability evaluation methods for evaluating health information systems. Journal of
the American Medical Informatics Association, 24(e1), pp.e55-e60.
Liebenberg, L., Steventon, J., Brahman, N., Benadie, K., Minye, J. and Langwane, H.K., 2017.
Smartphone icon user interface design for non-literate trackers and its implications for an
inclusive citizen science. Biological Conservation, 208, pp.155-162.
Louridas, P., Tsoukalas, G. and Mitropoulos, D., 2016. Requirements and User Interface Design.

24USER INTERFACE DESIGN
Martinez, J., Sottet, J.S., Frey, A.G., Ziadi, T., Bissyandé, T., Vanderdonckt, J., Klein, J. and Le
Traon, Y., 2017. Variability management and assessment for user interface design. In Human
Centered Software Product Lines (pp. 81-106). Springer, Cham.
Molin, E., 2016. Evaluation of medication-related clinical decision support using user interface
design principles. Masters MS Thesis), Stockholm University, Stockholm.
Oulasvirta, A., 2017. User interface design with combinatorial optimization. Computer, 50(1),
pp.40-47.
Paz, F. and Pow-Sang, J.A., 2016. A systematic mapping review of usability evaluation methods
for software development process. International Journal of Software Engineering and Its
Applications, 10(1), pp.165-178.
Silva, T.R., Hak, J.L., Winckler, M. and Nicolas, O., 2017. A Comparative Study of Milestones
for Featuring GUI Prototyping Tools. Journal of Software Engineering and Applications, 10(06),
p.564.
Thies, I.M., 2015. User interface design for low-literate and novice users: Past, present and
future. Foundations and Trends® in Human–Computer Interaction, 8(1), pp.1-72.
Vance, A., Lowry, P.B. and Eggett, D.L., 2015. Increasing accountability through the user
interface design artifacts: A new approach to addressing the problem of access-policy
violations. Mis Quarterly, 39(2), pp.345-366.
Wong, N., 2016. Making user-focused prototype: using design sprint to test, design and
prototype mobile app rapidly.