ITC504 Assignment-1: Interface Usability Design Concept

This assignment explores the design concept for a local farm shop website, focusing on user interface usability. Two alternative designs are presented, each with its own strengths and weaknesses. The first alternative emphasizes simplicity and ease of navigation, while the second alternative incorporates social media integration and a more visually appealing design. The assignment analyzes the user requirements, applies usability heuristics, and provides recommendations for the best design choice. The document includes detailed descriptions of each screen in both alternatives, highlighting the purpose, components used, and user actions. It also discusses the heuristics principles applied and the rationale behind choosing Alternative 2 as the preferred design.

ITC504 Assignment-1
INTERFACE USABILITY
DESIGN CONCEPT
Student Name: Abdul Aqeel
Student No: 11612827

Alternative 1/screen 1

Alternative 1/screen 1
• Purpose: It is the landing page that opens first when
user search for the website.
• Components use: In screen 1 the components used
are label, menu bar, button, block of text and
copyright symbol.
• What user can do: At the point when client tap on
login catch the login button will open and when
client tap on register button registration page will be
open.

Alternative 1/screen 2

Alternative 1/screen 2
• Purpose: it is the first page that opens first when user
gets registered or logged in to the website. It displays
the details about the company.
• Components use: in screen 2 the components used
are label, menu bar, button, block of text, image and
copyright symbol.
• What user can do- At the point when client tap on
about us in menu bar this page get displayed, showing
the description of the company.

Alternative 1/screen 3

Alternative 1/screen 3
• Purpose: it is the registration page that registers new
user to the website.
• Components use: in screen 3 the components used are
label, text input, button and copyright symbol.
• What user can do- for getting registered to the website
user enters the details asked on the page by clicking on
register button user is redirected to shop page.

Alternative 1/screen 4

Alternative 1/screen 4
• Purpose: It is the login page that registers new user
to the website.
• Components use: In screen 4 the components used
are label, text input, button and copyright symbol.
• What user can do- User can login to the website by
entering the details asked on the page that is email
id and password and by clicking on login button user
is redirected to shop page.

Alternative 1/screen 5

Alternative 1/screen 5
• Purpose- This page is the shop page. All the
products are displayed in this page.
• Components Use - The components used in
screen 5 are Label, image, menu bar, and symbols
like copyright.
• What user can do- User can choose among the
products and can view it details like name and
price of the product.

Alternative 1/screen 6

Alternative 1/screen 6
• Purpose- This page is the cart page.
• Components Use - The components used in
screen 6 are Label, menu bar, text input, table
and symbols like copyright, credit card, master
card.
• What user can do-
1. User can add product to the cart and select
product from cart to place order.
2. User enters their shipping details for the delivery
processing.
3. User enters payment details for making payment
and completing the order placing process.

Alternative 1/screen 7

Alternative 1/screen 7
• Purpose- This page is the contact us page.
• Components Use - The components used in
screen 7 are Label, menu bar, and symbols like
copyright.
• What user can do- All the contact details of
company are on this page. The user can contact
the company with help of this page.

Alternative 1/screen 8

Alternative 1/screen 8
• Purpose- This page is the feedback page.
• Components Use - The components used in
screen 8 are Label, menu bar, text input, text
area, button and symbols like copyright.
• What user can do-
1. User can give feedback about the product.
2. User can ask their queries.
3. User can give recommendations about the
application and product.

Alternative 2/screen 1

Alternative 2/screen 1
• Purpose: It is the home page that opens first
when user search for the website.
• Components use: In screen 1 the components
used are label, menu bar, button, image, block
of text and symbol like copyright, star and
social symbols like Facebook, twitter and you
tube.
• What user can do-
1. Client clicks on login button & registration
button to login and registration
2. User can see the Facebook and twitter page
3. User can also see some special offers

Alternative 2/screen 2

Alternative 2/screen 2
• Purpose: It is the first page that opens first
when user gets registered or logged in to the
website.
• Components use: In screen 2 the components
used are label, menu bar, button, block of text,
image and copyright symbol and social symbol
like Facebook, twitter and you tube.
• What user can do-
1. Menu bar is designed.
2. User can see the Facebook and twitter page of
local farm shop.

Alternative 2/screen 3

Alternative 2/screen 3
• Purpose: it is the registration page that registers
new user to the website.
• Components use: in screen 3 the components used
are label, text input, button and copyright symbol
and social symbol like Facebook, twitter and you
tube.
• What user can do-
1. For getting registered to the website user enters
the details asked on the page User can go back to
the home page by back button.
2. User can go to login page by clicking on login
button.

Alternative 2/screen 4

Alternative 2/screen 4
• Purpose: It is the login page that registers new user to
the website.
• Components use: In screen 4 the components used
are label, text input, button and copyright symbol and
social symbol like Facebook, twitter and you tube.
• What user can do-
1. User can login to the website by entering the details
asked on the page that is email id and password.
2. User can go back to the home page by clicking on
back button.
3. User can go to login page by clicking on login button.
4. User can see the Facebook and twitter page.

Alternative 2/screen 5

Alternative 2/screen 6

Alternative 2/screen 5
• Purpose- This page is the shop page. All the products are
displayed in this page under particular category it belongs.
• Components Use - The components used in screen 5 are
Label, image, menu bar, and symbols like copyright symbol
and social symbol like Facebook, twitter and you tube.
• What user can do-
1. User can choose among the products and can view it details
like name and price of the product.
2. User can go back to the home page by clicking on back
button.
3. User can see the Facebook and twitter page of local farm
shop and can stream farm shop videos on you tube.

Alternative 2/screen 6
• Purpose- This page is the cart page.
• Components Use - The components used in screen 6 are
Label, menu bar, text input, table and symbols like
copyright, credit card, master card and social symbol like
Facebook, twitter and you tube.
• What user can do-
1. User can add product to the cart and select product
2. User enters their shipping details for the delivery
processing.
3. User enters payment details for making payment.
4. User can go back to the home
5. User can see the Facebook and twitter page.

Alternative 2/screen 7

Alternative 2/screen 7
• Purpose- This page is the contact us page.
• Components Use - The components used in screen 7 are
Label, menu bar, image, street map, map marker and
symbols like copyright and social symbol like Facebook,
twitter and you tube.
• What user can do-
1. The user can contact the company with help of this
page.
2. User can go back to the home page by clicking on back
button.
3. User can see the Facebook and twitter page of local farm
shop and can stream farm shop videos on you tube.

Alternative 2/screen 8

Alternative 2/screen 8
• Purpose- This page is the feedback page.
• Components Use - The components used in screen 8 are
Label, menu bar, text input, text area, button and symbols
like copyright and social symbol like Facebook, twitter and
you tube.
• What user can do-
1. User can give feedback about the product.
2. User can ask their queries.
3. User can give recommendations about the application and
product.
4. User can go back to the home page with back button.
5. User can see the Facebook and twitter page

Alternative 1 requirement
• It is designed so as to fulfil the user requirements.
• One of the prerequisites of local farm shop is to sell
the products online.
• Another requirement is to make the navigation of
application easily.

Heuristics principles in Alternative 1
1. When client click on some portion of time is taken
by application to stack the page relies upon the
web association speed.
2. Client can explore among the application in
alternative1 effortlessly for instance, when user
clicks on shop button on home page it goes to shop
page.
3. In the event that client confront any trouble to
utilize the application client can contact and
compose their inquiries by tapping on contact us
button.

Alternative 2 requirement
• The second alternative has basic outline and is
made more attractive.
• It can be utilized to satisfy diverse
prerequisites of the clients.
• It comprises of web-based social networking
mix which can enable the clients to take after
local farm shop social links.
• Another client prerequisite was that the
outline of the application should be basic.
• This option has straightforward plan and
clients can undoubtedly utilize.

Heuristics principles in Alternative 2
• In this outline, various usability standards were
utilized. For this I have utilized vast textual styles
for the content.
• Another rule is consistency of outline and for this
each page have header and footer having same
content.
• Also, I have utilized route bar and navigation
button. Another usability guideline is lucidity.
• Every one of the screens in the main plan are clear
with the goal that clients can without much of a
stretch access every one of the pages.

Recommendations
Alternative 2 is chosen over Alternative 1 in view of the
accompanying reasons-
• Graphical user interface is much better compared to
alternative 1.
• In login page two more buttons are added that is register for
new user registration and back button for moving back to the
home page.
• In register page two more buttons are added that is login for
existing user sign in and back button for moving back to the
home page.
• Alignment of button labels and other components are proper.
• The validation rule is applied that is without registering or log
in user cannot navigate to the shop and contact pages.

to be continue…
• Some necessary and important details are needed while
registering compare to alternative 1 like postal code.
• Categorization of product is done in alternative 2 on shop
page.
• Site map for local farm shop location is included on
contact us page.
• All the pages are consistent in alternative 2.
• Social links for local farm shop are included in footer on
each page of local farm shop application.

References
1. Nielsen, J. (2013). 10 Usability Heuristics for User Interface
Design | Design Principles FTW. Designprinciplesftw.
Retrieved 6 March 2018, from
https://www.designprinciplesftw.com/collections/10-
usability-heuristics-for-user-interface-design.
2. Keshtcher, Y. (2017). Top 21 Prototyping Tools For UI And
UX Designers 2018. Prototypr. Retrieved 6 March 2018,
from https://blog.prototypr.io/top-20-prototyping-tools-
for-ui-and-ux-designers-2017-46d59be0b3a9.
3. BORD, R. (2017). Why Is Wireframing Your Mobile App So
Important?. Upwork. Retrieved 6 March 2018, from
https://www.upwork.com/hiring/for-clients/importance-
of-wireframing-mobile-apps/.