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)

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

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

7INTERFACE ANALYSIS AND DESIGN
Figure 7: Publisher Showing Page of Online Book Shop
(Source: Created by Author)

8INTERFACE ANALYSIS AND DESIGN
In the home page of the online book application a list of new available books is provided.
Lucrative discount is offered to buyers so that the sale of book can be increased. Just below the
interface a list of option is provided like home, search, notification and lastly setting. In the login
page, two vital things that is email id and password has been provided. User needs to click on the
submit button and if any changes are required are required then he needs to click on reset button.
The signup can be done either by details of Google and Facebook and apart from this user can
provide details in manual way. After selecting a book, the user can get details of review, pages
and language and lastly ISBN number. The buyers can also check the review of other readers
before buying. The review will help user in making decision whether he should the buy the book
or not. In the publisher option, the user will get the review and rating of the present readers.
Apart from this, he will also get comments and present follower of the book. Just below it, a list
of similar popular books is provided to readers.
6. Evaluation:
6.1 Cognitive Walkthrough:
The questions that has been asked for cognitive walkthrough are as following. The
questions are based on The Interaction Design Foundation (2019).
i. Can the user achieve proper outcome for each try?
ii. Can the user find that appropriate action is available in the screen?
iii. Can the user link the correct process with the result they looked forward to
achieve?
iv. Will the user be able to identify that progress of the action taken being made
towards their intended outcome?

9INTERFACE ANALYSIS AND DESIGN
Action User Action System Response Q1 Q2 Q3 Q4
1 User open
application
Application
shows the home
page which holds
the information
of user choice
and random
books
Y Y Y Y
2 User click on
login icon
The application
redirects the user
to login page
Y Y Y Y
3 User clicks on
registration link
The application
redirects the user
to registration
page
Y Y Y N
4 The user submits
the registration
form
The application
redirects the user
to login page
after registration
is complete
Y Y Y Y
5 The user enter
login ID and
password
The application
redirect the user
to home page
Y Y Y Y

10INTERFACE ANALYSIS AND DESIGN
again and starts a
session
6 The user clicks
on a book with
intention to buy
The application
redirect the user
to a page that
holds all the
information of
that book
Y Y Y Y
7 The user clicks
on the publisher
name
The applications
shows all the
details of
publisher and
books that it has
published
Y Y Y Y
6.2 Heuristic Evaluation:
The heuristic evaluations are created based on the example provided in Prototypr (2019).
Visibility of System Status: The user can see what is going within the application. For
each click, the user will get a valid and understandable response.
Match between system and the real world: The system does not match with the real-
world experiences. However, the applications presents the outcomes and contents in a very
interesting way.

11INTERFACE ANALYSIS AND DESIGN
Conclusion:
From the above study it can be concluded that the proposed design follows all the
conventional methods of interface design. The wireframe diagram has represented all the
interactions among the user and the application. The UI also complements the wireframe
diagram. The prototype does not show any payment related interface. However, the provided
interfaces are complete.

12INTERFACE ANALYSIS AND DESIGN
Bibliography:
Brangier, E., Urrutia, J.G., Senderowicz, V. and Cessat, L., 2018. Beyond" Usability and User
Experience", Towards an Integrative Heuristic Inspection: from Accessibility to Persuasiveness
in the UX Evaluation A Case Study on an Insurance Prospecting Tablet Application. arXiv
preprint arXiv:1806.11291.
Card, S.K., 2018. The psychology of human-computer interaction. CRC Press.
Gazzali, A.M. and Yee, C.S., 2018. ID NO. USM 010 TOPIC: The application of e-book as
laboratory practical guide for pharmacy students. UNIVERSITY CARNIVAL on e-LEARNING
(IUCEL) 2018, p.540.
Hibbeln, M.T., Jenkins, J.L., Schneider, C., Valacich, J. and Weinmann, M., 2017. How is your
user feeling? Inferring emotion through human-computer interaction devices. Mis
Quarterly, 41(1), pp.1-21.
Hussain, A., Mkpojiogu, E.O. and Kamal, F.M., 2016. A systematic review on usability
evaluation methods for m-commerce apps. Journal of Telecommunication, Electronic and
Computer Engineering (JTEC), 8(10), pp.29-34.
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.
Lazar, J., Feng, J.H. and Hochheiser, H., 2017. Research methods in human-computer
interaction. Morgan Kaufmann.

13INTERFACE ANALYSIS AND DESIGN
Lin, M.H.J., Jones, W.J. and Vijayalakshmi, A., 2017. A Teaching Innovation on Retail
Environmental Design for Consumers with Disabilities. Journal for Advancement of Marketing
Education, 25.
Nascimento, I., Silva, W., Lopes, A., Rivero, L., Gadelha, B., Oliveira, E. and Conte, T., 2016.
An empirical study to evaluate the feasibility of a UX and usability inspection technique for
mobile applications. In 28th International Conference on Software Engineering & Knowledge
Engineering, California, USA.
Orfanou, K., Tselios, N. and Katsanos, C., 2015. Perceived usability evaluation of learning
management systems: Empirical evaluation of the System Usability Scale. The International
Review of Research in Open and Distributed Learning, 16(2).
Prototypr. 2019. 10 Usability Heuristics with Examples – Prototypr. [online] Available at:
https://blog.prototypr.io/10-usability-heuristics-with-examples-4a81ada920c [Accessed 20 Feb.
2019].
Shruthi, C. and Asha, M., 2018. Dos Attack and Suspicious Activity Detection for a Book
Application.
The Interaction Design Foundation. 2019. How to Conduct a Cognitive Walkthrough. [online]
Available at: https://www.interaction-design.org/literature/article/how-to-conduct-a-cognitive-
walkthrough [Accessed 20 Feb. 2019].
Tsai, C.Y., Yang, C.Y., Lin, I.C. and Hwang, M.S., 2018. A Survey of E-book Digital Right
Management. IJ Network Security, 20(5), pp.998-1004.

14INTERFACE ANALYSIS AND DESIGN
Woo, J.H., 2018. Oxford Learner’s Bookshelf: An e-book reader application for extensive
reading. Reading in a Foreign Language, 30(2), p.240.
Wu, T.T., Huang, Y.M., Su, C.Y., Chang, L. and Lu, Y.C., 2018. Application and Analysis of a
Mobile E-Book System Based on Project-Based Learning in Community Health Nursing
Practice Courses. Journal of Educational Technology & Society, 21(4), pp.143-156.
Yan, Z., Xiaoping, F. and Fanqi, W., 2016, June. Design and Implementation of Book
Management and Sales System. In 7th International Conference on Education, Management,
Information and Computer Science (ICEMC 2017). Atlantis Press.