ITC504 Project: Application Interface Usability and Design Concepts

Verified

Added on  2024/05/20

|49
|1477
|360
Project
AI Summary
This project presents two alternative design concepts for an application interface, focusing on usability and functionality. Alternative 1 and Alternative 2 are detailed with descriptions of each screen, outlining the purpose, interface components (labels, buttons, media containers, input text boxes, image containers, maps), and functionality of each screen, including home screen, search, menu, registration, login, product categories, product listings, product details, event booking, shopping cart, and user dashboard. The reasoning behind each alternative is provided, with Alternative 2 being recommended for its enhanced graphical design, user-friendliness, and additional functionalities. References to Balsamiq mockups are included, showcasing the design process. This document is available on Desklib, a platform offering study tools and solved assignments for students.
tabler-icon-diamond-filled.svg

Contribute Materials

Your contribution can guide someone’s learning journey. Share your documents today.
Document Page
ITC504
Assignment-1
Name: Asalath
Mohammed Khan
ID: 11619729
tabler-icon-diamond-filled.svg

Secure Best Marks with AI Grader

Need help grading? Try our AI Grader for instant feedback on your assignments.
Document Page
Alternative -1 / Screen-1
Document Page
Alternative -1 / Screen-1
Description
Purpose: This is the main home screen or the
index screen of the application
Interface components: Labels, buttons and
media containers are used
Description: This is the main and first page
through which user will interact.
Document Page
Alternative -1 / Screen-2
tabler-icon-diamond-filled.svg

Secure Best Marks with AI Grader

Need help grading? Try our AI Grader for instant feedback on your assignments.
Document Page
Alternative -1 / Screen-2
Description
Purpose: For searching products in the
application this is used.
Interface components: Labels, input text
box and buttons are used.
Description: By this search the user can
search any product on the application.
Document Page
Alternative -1 / Screen-3
Document Page
Alternative -1 / Screen-3
Description
Purpose: This is the menu
Interface components: Labels and
buttons are used
Description: By this menu user can
communicate between different pages of
the application.
tabler-icon-diamond-filled.svg

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser
Document Page
Alternative -1 / Screen-4
Document Page
Alternative -1 / Screen-4
Description
Purpose: This is for registration
purpose.
Interface components: Labels, buttons
and input text box are used.
Description: Using this register page
one can register himself/herself to the
application.
Document Page
Alternative -1 / Screen-5
tabler-icon-diamond-filled.svg

Secure Best Marks with AI Grader

Need help grading? Try our AI Grader for instant feedback on your assignments.
Document Page
Alternative -1 / Screen-5
Description
Purpose: To log in or sign in the
application.
Interface components: Labels, input text
box and buttons are used.
Description: This login page helps user
to get access to his/her profile on the
application by providing the user
credentials.
Document Page
Alternative -1 / Screen-6
Document Page
Alternative -1 / Screen-6
Description
Purpose: This page fulfils the purpose of
product category.
Interface components: Labels, image
containers and buttons are used.
Description: This page categorises the
products in application in three
categories – food, gifts and wine.
tabler-icon-diamond-filled.svg

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser
Document Page
Alternative -1 / Screen-7
Document Page
Alternative -1 / Screen-7
Description
Purpose: List of items for a particular
category are displayed.
Interface components: Labels, image
containers and buttons are used.
Description: User can view a long list of
similar products and can even add the
product directly to cart.
Document Page
Alternative -1 / Screen-8
tabler-icon-diamond-filled.svg

Secure Best Marks with AI Grader

Need help grading? Try our AI Grader for instant feedback on your assignments.
Document Page
Alternative -1 / Screen-8
Description
Purpose: This page shows detailed
information about individual product.
Interface components: Labels, input text
box, image containers and buttons are
used.
Description: This page helps user to put
one or more quantity of same product and
can view particular image galley of same
product.
Document Page
Alternative -1 / Screen-9
Document Page
Alternative -1 / Screen-9
Description
Purpose: This page completes the
requirement of particular section for
events handled by the company.
Interface components: Labels, input text
box, image containers and buttons are
used.
Description: Here user can book the
restaurant or catering service for
particular dates.
tabler-icon-diamond-filled.svg

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser
Document Page
Alternative -1 / Screen-
10
Document Page
Alternative -1 / Screen-10
Description
Purpose: The total cart items are shown
here with their prices and quantity.
Interface components: Labels, maps and
buttons are used.
Description: User gets a digital invoice
here with including detailed information
about the products ordered and user
can also apply loyalty offers to get
discount.
Document Page
Alternative -1 / Screen-11
tabler-icon-diamond-filled.svg

Secure Best Marks with AI Grader

Need help grading? Try our AI Grader for instant feedback on your assignments.
Document Page
Alternative -1 / Screen-11
Description
Purpose: User dashboard lets user to
edit their profile.
Interface components: Labels, input text
box, image container, maps and buttons
are used.
Description: This is the user dashboard
which lets user to manage their loyalty
offer or credits, list of purchased items
and even addresses.
Document Page
Alternative -2 / Screen-1
Document Page
Alternative - 2 / Screen-1
Description
Purpose: This is the main home screen
or the index screen of the application
Interface components: Labels, buttons
and media containers are used
Description: This is the main and first
page through which user will interact.
tabler-icon-diamond-filled.svg

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser
Document Page
Alternative - 2 / Screen-2
Document Page
Alternative -2 / Screen-2
Description
Purpose: For searching products in the
application this is used.
Interface components: Labels, input text
box and buttons are used.
Description: By this search the user can
search any product on the application.
Document Page
Alternative -2 / Screen-3
tabler-icon-diamond-filled.svg

Secure Best Marks with AI Grader

Need help grading? Try our AI Grader for instant feedback on your assignments.
Document Page
Alternative -2 / Screen-3
Description
Purpose: This is the menu of the
application.
Interface components: Labels and
buttons are used
Description: By this menu user can
communicate between different pages of
the application.
Document Page
Alternative -2 / Screen-4
Document Page
Alternative -2 / Screen-4
Description
Purpose: This is for registration
purpose.
Interface components: Labels, buttons
and input text box are used.
Description: Using this register page
one can register himself/herself to the
application.
tabler-icon-diamond-filled.svg

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser
Document Page
Alternative -2 / Screen-5
Document Page
Alternative -2 / Screen-5
Description
Purpose: To log in or sign in the
application.
Interface components: Labels, input text
box and buttons are used.
Description: This login page helps user
to get access to his/her profile on the
application by providing the user
credentials.
Document Page
Alternative -2 / Screen-6
tabler-icon-diamond-filled.svg

Secure Best Marks with AI Grader

Need help grading? Try our AI Grader for instant feedback on your assignments.
Document Page
Alternative -2 / Screen-6
Description
Purpose: This page fulfils the purpose of
product category.
Interface components: Labels, image
containers and buttons are used.
Description: This page categorises the
products in application in three
categories – food, gifts and wine.
Document Page
Alternative -2 / Screen-7
Document Page
Alternative -2 / Screen-7
Description
Purpose: List of items for a particular
category are displayed.
Interface components: Labels, image
containers and buttons are used.
Description: User can view a long list of
similar products and can even add the
product directly to cart.
tabler-icon-diamond-filled.svg

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser
Document Page
Alternative -2 / Screen-8
Document Page
Alternative -2 / Screen-8
Description
Purpose: This page shows detailed
information about individual product.
Interface components: Labels, input text
box, image containers and buttons are
used.
Description: This page helps user to put
one or more quantity of same product
and can view particular image galley of
same product.
Document Page
Alternative -2 / Screen-9
tabler-icon-diamond-filled.svg

Secure Best Marks with AI Grader

Need help grading? Try our AI Grader for instant feedback on your assignments.
Document Page
Alternative -2 / Screen-9
Description
Purpose: The total cart items are shown
here with their prices and quantity.
Interface components: Labels, maps and
buttons are used.
Description: User gets a digital invoice
here with including detailed information
about the products ordered and user
can also apply loyalty offers to get
discount.
Document Page
Alternative -2 / Screen-
10
Document Page
Alternative -2 / Screen-10
Description
Purpose: This is view facility and for
booking the restaurant.
Interface components: Use of image,
labels, menu and search.
Description: This page view the list of
restaurants and can also be used for
booking them.
tabler-icon-diamond-filled.svg

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser
Document Page
Alternative -2 / Screen-
11
Document Page
Alternative -2 / Screen-11
Description
Purpose: User dashboard lets user to
edit their profile.
Interface components: Labels, input text
box, image container, maps and buttons
are used.
Description: This is the user dashboard
which lets user to manage their loyalty
offer or credits, list of purchased items
and even addresses.
Document Page
Reasons for Alternative-1
Reason:
The application fulfils the all the
requirements
Like – login page, register page,
product category page, cart etc.
The clean nature of application makes
application more responsive.
It is simple basic application which is
user friendly.
tabler-icon-diamond-filled.svg

Secure Best Marks with AI Grader

Need help grading? Try our AI Grader for instant feedback on your assignments.
Document Page
Reasons for Alternative-2
Reason:
This is application contains great graphical
design than alternative 1
The application fulfils the all the requirements
Like – login page, register page, product
category page, cart etc.
The interface of the application is user friendly
and creates a great impression about the
company.
Document Page
Recommendation
Recommended design is alternative 2. Reasons:
Alternative design 2 contains more graphical
approach to make the application better
looking. The application creates a great
impression is front of user and its easier for
user to understand the content.
It got extra functionalities like filtering
products, better product gallery and many
more.
Document Page
References
Tranfici, A. (2013). Build a Project Mockup Using
Balsamiq. Sitepoint. Retrieved from
https://www.sitepoint.com/build-a-project-
mockup-using-balsamiq/
Viking Code School Prep. (2018). Using Balsamiq
for Mockups. Retrieved from http://
www.vikingcodeschool.com/web-design-basics/us
ing-balsamiq-for-mockups
Slideshare. (2014). Introduction to Balsamiq
Mockups. Retrieved from
https://www.slideshare.net/e2logy/introduction-
to-balsamiq-mockups-e2logy
chevron_up_icon
1 out of 49
circle_padding
hide_on_mobile
zoom_out_icon
logo.png

Your All-in-One AI-Powered Toolkit for Academic Success.

Available 24*7 on WhatsApp / Email

[object Object]