User Interface Analysis and Design for an Online Book Shop Application

This report presents an interface analysis and design for an online book shop application, specifically tailored for the iPhone X. It includes a critical exploration of usability goals, a user needs analysis incorporating a persona (Jordan Sexton), a scenario, hierarchical task analysis, and environmental analysis. The design process covers preliminary and detailed design phases, addressing user needs, usability, and cognitive issues. The implementation section details the use of Adobe XD 2019 and resources from Apple's website. The evaluation comprises cognitive walkthrough and heuristic evaluation methods to assess the application's effectiveness and user experience. The report aims to create an intuitive and efficient online book shopping experience for users like Jordan, considering their preferences and technological comfort.

Running head: INTERFACE ANALYSIS AND DESIGN
Interface Analysis and Design
Name of the Student
Name of the University
Author’s note:

1INTERFACE ANALYSIS AND DESIGN
Table of Contents
Introduction:....................................................................................................................................2
1. Critical Exploration:....................................................................................................................2
2. User Need Analysis:....................................................................................................................3
2.1 Persona:..................................................................................................................................3
2.2 Scenario:................................................................................................................................4
2.3 Hierarchical Task Analysis:...................................................................................................5
2.4 Environmental Analysis:.......................................................................................................5
3. Preliminary Design:.....................................................................................................................0
3.1 Story Board:...........................................................................................................................0
3.2 Narrative:...............................................................................................................................0
4. Detailed Design:..........................................................................................................................1
4.1 Decision related to User Need Analysis................................................................................1
4.2 Decision Related to Usability................................................................................................2
4.3 Decision related to cognitive issues.......................................................................................2
5. Implementation:...........................................................................................................................2
6. Evaluation:...................................................................................................................................8
6.1 Cognitive Walkthrough:........................................................................................................8
6.2 Heuristic Evaluation:...........................................................................................................10
Conclusion:....................................................................................................................................11
Bibliography:.................................................................................................................................12

2INTERFACE ANALYSIS AND DESIGN
Introduction:
Various online book shop applications are available in the market like Amazon.com and
many others. In this competitive market a new book shop application must include all the
conventional interface and interaction practices along with introducing new elements. The whole
assignment is based on creating an online book shop based on the iPhone X device.
1. Critical Exploration:
The usability evaluation is to be done based on the effective usability goals of the system.
The effectiveness refers to the outcome of how properly the system can perform its tasks. The
quality of the system is determined by how effective the system is (Orfanou, Tselios and
Katsanos 2015). Effectiveness of the system can be determined by measuring how well the users
of system can learn to use the system. Another factor is effort of the user to complete a task or
access desired information. All these factors are measured using both qualitative and quantitative
analysis.
The effectiveness is very important usability goal because it ensures the quality of system
design directly (Card 2018). Effectiveness can allow checking the existing errors and loopholes
in a system. Categorization of the errors can allow determining the plan for meeting effective
usability goals.
Effective usability goals can be performed by understanding the requirements of user. It
is hard to make an application effective in one attempt that is why prototyping can be a good way
to implement it (Lazar, Feng and Hochheiser 2017).

3INTERFACE ANALYSIS AND DESIGN
2. User Need Analysis:
In order to acquire a great understanding of proposed application’s user interaction and
user interface design, it is essential to evaluate the requirements of potential users. The first step
toward evaluating the user need is developing profile of potential application user.
2.1 Persona:
Name Jordan Sexton
Occupation Winch operator at Handy Dan
Demographics 32 Years Old
Male
Lives in 18 Bass Street, KOONORIGAN NSW 2480
Facts Depend on Writer
Salary: $10,000
Keen reader
Loves fiction books
Fan of old Edger Allan Poe, Arthur Conan Doyle, Stephen King and
More
Good knowledge of American and UK history
Communication Phone: [phone]
Mail: [e-mail]
Behaviors Gets very frustrated when purchasing books from poor designed websites
Switches publishers because of poor quality contents in the books
Not being able to read few pages of a new book makes insecure about the

4INTERFACE ANALYSIS AND DESIGN
book’s quality
Not-return policies or negligence of seller makes her very angry
Goes to park or any quite place to read books
Loves to gift good books to people
If a write or publisher offers good quality books then he purchases that
particular writer’s or publisher’s books back to back
Manages work and life ratio quite good
Needs and Goals Need books that can offer good storyline and character building
Good after sale service from the book shop
Discount offers on various books
Pre-booking of books
Easy payment gateway that can support electronic wallets
To be able to add books into cart before purchasing
Notifications when a book present in wish list become available
To be able to create an account that can store all the activity history
2.2 Scenario:
Jordan purchases at least one book a week. As he is a dedicated reader, each week he
reads at least two books. He often purchase more than three books together. Jordan mainly uses
his mobile application to purchase books or just read samples of books. He could not read
summary or few sample pages of books of unknown writers. He wanted an application that can
allow him to read at least ten to fifteen pages of a book before he purchases it. He also faced

5INTERFACE ANALYSIS AND DESIGN
issues with buying the books that are in demand. As he does not open an application to see if that
book is available, he had to wait a lot until that book became properly available.
2.3 Hierarchical Task Analysis:
Figure 1: Hierarchical Task Diagram of Online Book Shop
(Source: Created by Author)
2.4 Environmental Analysis:
The design has been created considering the smart phone environment. Particularly
iPhone X has been chosen as the device based on which interface will be designed. Text fonts
and color will be eye-catchy as the mobile applications are likely to have contrast colors in
comparison with simple color of website. Each application installed in individual device can
support only one user at a time. If the system is used outdoor then under sunlight the dark colors
can be visible but it will be hard to see light colors. Even if small size of the dark color is within
light colors cannot be seen properly.

Running head: INTERFACE ANALYSIS AND DESIGN
3. Preliminary Design:
3.1 Story Board:
Figure 2: Story Board of Using the Online Book Shop Application by a User
(Source: Created by Author)

Running head: INTERFACE ANALYSIS AND DESIGN
3.2 Narrative:
i. In the home page, new hot list of books is provided. After clicking on the user icon,
user is redirected to the login page. In the home page, both price and details of the
book are provided to user. Apart from this, lucrative discount is provided to buyers on
the price of the books. Various kinds of books are given so that readers can be
attracted for buying new books.
ii. In the login page, the user needs to provide the details of email ID and password for
signing into the online book store application. If the user is new to this online book
application, then he first he needs to register himself/ herself. User needs to click on
the register here link and provide all personal details. In the login page, apart from
email id and password option two other option of login that is Facebook and Gmail
are also provided to users.
iii. After providing the necessary details on login page, the user clicks on the submit
button so that he can reach the login page. If anyhow he has provided any incorrect
information, then he changes it by click on the reset button. If the user has already an
account in this website, then he can click on the login link so that he can be redirected
to login page.
iv. By the help of new ID and password, user can log into the online bookshop
application and after that they will be redirected into the home page. The user enters
in the home page of the application through his/her login details. After login, the user
will receive any kind of notification of desired book. Through the setting option user
can make changes in the password or his/her personal details.

1INTERFACE ANALYSIS AND DESIGN
v. After entering into the online book software, user can click on any image of the book
which he wants to read. The page contains the details of the specific book which he
wants to open. A list of department is provided to user from where he can make
selection of book of his/her choice.
vi. After clicking on the publisher name, the user can get details of specific publisher of
the book. The details comprise of likes, comment and followers of the book. Below
there is an option of follow is provided where user can easily follow the publisher of
the book.
4. Detailed Design:
4.1 Decision related to User Need Analysis
A part of Jordan persons highlight that he makes use of online book application for
purchasing books. This point highlights the fact that Jordan is very much comfortable with
touchscreen. The interface aims to provide some limited instruction how to make use of
application.
As stated in the environmental analysis section that this particular application has been
designed for IPhone X. Small size of the screen can make the smartphone text to be small and
difficult to be read. User interface can become difficult for various user to use that becomes too
much small to be read by users. The overall user interface elements are considered to be bit
difficult to use that comes up with much small button. It ultimately led to make use of text and
user elements which are larger in size.

2INTERFACE ANALYSIS AND DESIGN
4.2 Decision Related to Usability
The design online book application aims to meet to the overall efficiency which is not
compulsory for the users. The action needs to be complete which is relevant to the given main
task like making use of application. The user can login with his/her Facebook and Gmail details
which saves the time in most of cases.
In the above diagram, the fact can be stated that Jordan is very much comfortable with
the present technology that is online book application. The interface of this smartphone requires
some improvement that will provide some basic level of helpfulness to users. It aims to provide
some information about the main task.
4.3 Decision related to cognitive issues
All the details related to login are provided on the fourth screen of the application which
comprises of email and password details. Making use of the presentation information will be
used in whitespace so that information can be provided in salient. Making use of whitespace
between rows and columns is required for achieving the goals like dividing lines.
To make the online software application more accessible to users which comprises of
blue text provided in white background.
5. Implementation:
The proposed prototype has been generated using the Adobe XD 2019. The interface has
been designed for the Apple iPhone X. The templates used in the prototype has been collected
from Apple’s website. Free e-commerce icon set, supported in Adobe Illustrate, has been
collected from a website.

3INTERFACE ANALYSIS AND DESIGN
Figure 3: Home Page of Online Book Shop
(Source: Created by Author)

4INTERFACE ANALYSIS AND DESIGN
Figure 4: Login Page of Online Book Shop
(Source: Created by Author)