ITC504: Interface Usability Assessment - Book Shop Application Design

This report presents a comprehensive interface usability assessment of a Book Shop application, detailing the requirements, design, and justification based on heuristic principles. The application's design incorporates elements such as user-friendly navigation, error prevention, and adherence to usability standards. The assessment covers various screens of the application, including the home page, login, registration, category selection, product description, cart, payment, and feedback. The report also emphasizes the integration of social media links and GUI properties to enhance user experience. Key design principles such as visibility of system status, user control and freedom, and consistency are discussed with reference to the application's features. The document concludes with a justification of the design choices based on business and user requirements, highlighting the application's adherence to UI design principles for ease of use and efficiency. Desklib provides access to this and many other solved assignments.

ITC504: Interface Usability
Assessment
Student Name:
Student ID:

Table of Contents
Requirements..............................................................................................................................2
Business requirements............................................................................................................2
User requirement....................................................................................................................2
Key assumptions....................................................................................................................2
Interface Design.........................................................................................................................3
Design justification..................................................................................................................12
References................................................................................................................................15
List of Figure
Figure 1 Home page navigate to the Login page.......................................................................3
Figure 2 Login page navigate to register page...........................................................................4
Figure 3 Register page navigate to update details page.............................................................4
Figure 4 Update details page navigate to the category page......................................................5
Figure 5 register page navigate to the category page.................................................................6
Figure 6 Category page navigate to fiction page.......................................................................6
Figure 7 Category page navigate to non-fiction page................................................................7
Figure 8 Category page navigate to the educational page..........................................................7
Figure 9 Description page..........................................................................................................8
Figure 10 cart page navigation...................................................................................................8
Figure 11 payment page navigation...........................................................................................9
Figure 12 Feedback page navigation........................................................................................10
Figure 13 Twitter page navigation...........................................................................................10
Figure 14 Facebook page navigation.......................................................................................11
Figure 15 User control and freedom principle........................................................................12
Figure 16 Error prevention Principle.......................................................................................13
Figure 17 Flexibility and efficiency principle..........................................................................14
Figure 18 Consistency and Standard Principle........................................................................14
1

Requirements
Business requirements
 The application must not be greater than 30 MB in size.
 An online form for new user details and registration.
 A bill calculator for the books bought by the customer.
 An appropriate accessibility feature like audio search and more.
 Appropriate symbols used in the application for navigation.
 While clicking on the image product it should display more information about the
product (Babich, 2018)
 The Book Shop application must contain all the heuristic principle such as Usability
principle, visibility of system or application status, the match between the real world
and system, freedom and user control, Error prevention, recognition than recall, help,
recover, error diagnosis and users recognize, Flexibility and documentation and help
User requirement
 The application should be flexible and easy to explore and use.
 The application must have good performance and speed.
 Security of the personal data entered into an application.
 Maintainability and portability of the application (Parker, 2012).
 The application should be easy and understandable for the users.
 The Application is easy, when it completely designed according to the heuristic ten
principles that are given above.
Key assumptions
 The application will run on all Android devices.
 No economic problem.
 Users always need to register or sign up before they use the services of the
application.
 The user will use the application under ideal situation (The Interaction Design
Foundation, 2017).
2

Interface Design
The local bookshop application has following screens (Putney, 2014). The given designed are
based on the ten heuristic principle such as Usability principle, visibility of system or
application status, the match between the real world and system, freedom and user control,
Error prevention, recognition than recall, help, recover, error diagnosis and users recognize,
Flexibility and documentation and help. All the design principle s is followed by this
application design “Book shop”. Now, there is some screen of the Book Shop application is
present:
Home
The first page of application opens when a user searches for the application. The components
used are a label, button, symbols, and images. To access the book shop menu, the user must
log in to the application by clicking on Sign in button. On the first page of the application, the
user is able to see some kind of boo and several options like the sign in button, Register etc.
Figure 1 Home page navigate to the Login page
Login
Existing users can login on the page for enjoying the book shop services. The components
used are label, text input button, symbols like Facebook, Twitter, home, category, feedback,
sign in, add user and images. This login page follows the usability and help and
documentation principle complete by designing the easy option and content. When the user
enters wrong information, then this application shows the error message to the user with
guidance “which type of information it required?” And this given feature is based on the
3

Help and documentation principle. Flexibility principle is also followed by designing back
and exit button on the screen.
Figure 2 Login page navigate to register page
Register
New user needs to register by entering details for buying books from book shop. The
components used are a label, button, text-input button, and symbols like Facebook, Twitter,
home, category, feedback, and images. The register page is also followed all the heuristic
principle of Nelson by designing the features that are comfortable for the users and help to
learn the application easily. If the user wants to log in this application via Facebook and
Twitter then they can. All screens contain the Facebook and Twitter option to connect this
application to the social sites.
Figure 3 Register page navigate to update details page
4

Update details
It is used by the user for updating their personal details. The components used are a label,
button, text-input button, and symbols like Facebook, Twitter, home, category, feedback, and
images. If the user wants to update his profile then click on the update button and update his
profile. After the update, the profile user goes to the category page.
Figure 4 Update details page navigate to the category page
Category
This page shows the category of books available for users. The components used are a label,
button, text-input button, and symbols like Facebook, Twitter, home, category, feedback, log
out, and images. The category page presents the books category such as fiction, non-fiction,
and education.
5

Figure 5 register page navigate to the category page
Fiction
This page is the fiction book page shows the entire fiction books. The components used are a
label, button, search bar, and symbols like Facebook, Twitter, home, category, feedback, log
out and images. When the user is clicking on fiction category form the category page, the
user is able to access fiction type book with their price and description.
Figure 6 Category page navigate to fiction page
Non-fiction
This page is the non-fiction book page shows the entire non-fiction books. The components
used are a label, button, search bar, and symbols like Facebook, Twitter, home, category,
6

feedback, log out and images. The non-fiction page shows the non-fiction category books
with price and description. This page designing is also based on the heuristic principle.
Figure 7 Category page navigate to non-fiction page
Educational
This page is the educational book page shows the entire education books. The components
used are a label, button, search bar, and symbols like Facebook, Twitter, home, category,
feedback, log out and images. The designed features are based on the Help and
documentation principle and another principle of Nelson. Flexibility principle is also
followed by designing back and exit button on the screen.
Figure 8 Category page navigate to the educational page
Description
7

It displays the information of the book selected by the user. The components used are a label,
button, a block of text, and symbols like Facebook, Twitter, home, category, feedback, log
out and images.
Figure 9 Description page
Order
This page opens when the user clicks on order now button. This page displays the product
user bought and its total amount of discount. The components used are a label, button, table,
and symbols like Facebook, Twitter, home, category, feedback, log out and images.
Figure 10 cart page navigation
Payment
8

This page displays the thank you message and further payment procedure. The components
used are a label, button, a block of text, and symbols like Facebook, Twitter, home, category,
feedback, log out, and images.
Figure 11 payment page navigation
Feedback
This page is the help page that takes the user queries, views about the application or product.
The components used are a label, button, text-input, text-area and symbols like Facebook,
Twitter, home, category, feedback, log out, and images. The feedback page is designed to
complete the “Help users recognize, recover and diagnose the errors” principle of
Heuristic model. With this screen, the user is able to ask any queries and give their review for
this application. After getting the review, the application applies all the improvement to make
it better.
9

Figure 12 Feedback page navigation
Twitter
It is the social page. The components used are a button, label, text-input, and symbols like
twitter. If the user wants to connect bookshop application to a social site, then he/she will be
connecting this by clicking on the Facebook and Twitter button and enter their login id and
password and click on login button. The working process is shown in given figure with
annotation.
Figure 13 Twitter page navigation
Facebook
It is the social page use for user sign into the application. The components used are a button,
label, and text-input. This process is similar that is described above. With this feature, the
“Match between system and the real world” is followed.
10

Figure 14 Facebook page navigation
In the interface design, many GUI properties are used for making the application more
attractive for users. Different symbols are used in the application of book shop that is;
 The home symbol for the home page,
 Bar symbol for the category,
 Pencil for feedback,
 Facebook for Facebook link,
 Twitter for twitter link,
 Add a user for the register,
 Sign in to Login and
 Sign out for logout.
11