Interface Design Analysis: Comparison of Two Website Designs

This report provides a detailed analysis of two distinct interface designs created for a local farm shop's website. The report delves into the strengths and weaknesses of each design, examining elements such as the homepage, store page, restaurant page, and various interactive features like login/sign-up and contact pages. The analysis includes a comparison of the design principles, layout, and navigational structures, as well as an assessment of usability goals and user experience. The report highlights the advantages and disadvantages of each design, and ultimately recommends the superior design based on its overall functionality, user-friendliness, and adherence to design principles, with a focus on providing a positive user experience for a diverse target audience. The report concludes by emphasizing the importance of iterative design and the value of comparing multiple interface designs before finalizing a website's structure and features.

Running head: INTERFACE DESIGN ANALYSIS
Interface Design Analysis
Name of the student:
Name of the University:
Author note:

1
INTERFACE DESIGN ANALYSIS
Table of Contents
Introduction................................................................................................................................3
Interactive Design 1...................................................................................................................3
Home Page.............................................................................................................................3
Store Page...............................................................................................................................4
Restaurant Page......................................................................................................................5
Find Us...................................................................................................................................6
Login/Sign Up Page...............................................................................................................7
Interactive Design 2...................................................................................................................8
Home Page.............................................................................................................................8
Store Page...............................................................................................................................9
Restaurant Page....................................................................................................................10
Contact Us Page...................................................................................................................11
Fig 2.4 Contact Us Page.......................................................................................................11
Find Us Page........................................................................................................................12
Advantages of Design 1...........................................................................................................12
Advantages of Design 2...........................................................................................................12
Disadvantages of Design 1.......................................................................................................13
Disadvantages of Design 2.......................................................................................................13
Design Principles of Design 1..................................................................................................14
Design Principles of Design 2..................................................................................................14
Usability Goals and Experience of Design 1 and Design 2.....................................................15

2
INTERFACE DESIGN ANALYSIS
Selecting a design.....................................................................................................................15
Target Users and Usability.......................................................................................................15
Conclusion................................................................................................................................16

3
INTERFACE DESIGN ANALYSIS
Introduction
It is always important for any business organization to have their well-established web
presence. Interactive design is a simpler term used to present only small part of the whole
User Experience concept (Silver, 2013). A good interactive design is the user friendly layer
that helps the users to communicate with a software or web interface (Huang & Benyoucef,
2013). The report will describe the pros and cons of the two designs made for the local farm
shop and would finally assist in selecting one of the two design sets as the final web-
interface. The report critically analyzes each webpage design with keen attention to the
design standards.
Interactive Design 1
Home Page
Fig 1.1 Home Page

4
INTERFACE DESIGN ANALYSIS
Fig 1.1 above shows the home page design. It consists of an ‘About’ section, a
navigational menu and the offer zone. The ‘About’ section further a slide show window that
is meant to display images or special offers in regular time intervals. It also contains a few
paragraphs about the business being represented and the name of it. The navigational menu is
needed to navigate between the different pages within the website. Finally, the Offer Zone are
is to highlight each day’s or week’s offers. Users can click on each offer and land in the
respective goods’ page to view and add them to cart.
Store Page
Fig 1.2 Store Page

5
INTERFACE DESIGN ANALYSIS
Fig 1.2 represents the Store Page of the website. It beholds tons of functionalities and
feature that will be discussed in a later section. As its header, it has the navigational menu,
the name of the business, a heading for the page and a catchy phrase. Then, it puts up a sub
menu that shows the types of products sold by the shop. In the frame below, the products are
lined up. Users can view the price of each, choose the quantity of buy and finally add the
items to cart. To the right, the ‘cart status’ option list down the items that the user has added
to his or her cart. It also shows the quantity and total amount of each. A search bar is
provided with a net calculated amount shown by cart icon. Users can also login here before
checking out for bill payment.
Restaurant Page
Fig 1.3 Restaurant Page
Call: 123-456-789
To book us for a
party

6
INTERFACE DESIGN ANALYSIS
This page shows the restaurant facility of the local farm shop. This page has a sub
menu to browse between the options of the restaurant. It shows the booking option, the Menu
option to view the foods menu, customer reviews and a picture gallery. A small slideshow of
the gallery is also presented in this page. The page has options for users to enter name, phone
number, number of tables and the date of booking. The option to call the restaurant to book
for a birthday party is also available.
Find Us
Fig 1.4 Find Us page
This page has a basic map and the list of locations for the stores and restaurant of the
shop. On selecting a store from the list, the map points to its location (Krum, 2013).

7
INTERFACE DESIGN ANALYSIS
Login/Sign Up Page
Fig 1.5 Login/Sign Up page
Fig 1.5 shows the Login and sign up page of the website. It has separate sections for
login and fresh sign up. For signing up, users are needed to give their basic personal details
and create a password (Neil, 2014). To the left, the best offer’s advertisement for the day is
displayed.

8
INTERFACE DESIGN ANALYSIS
Interactive Design 2
Home Page
Fig 2.1 Home Page
Fig 2.1 represents the home page for the second set of design of the local farm shop
website. It has a header section with a navigation bar, login option and cart value icon, shop
name and social media handles. In the body, there is an about section with an image slider
and texts. Below is the offer zone with clickable links. On the right, there is a new sign up
page and a login button to take the user to a secure login page (Stallings et al., 2012).

9
INTERFACE DESIGN ANALYSIS
Store Page
Fig 2.2 Store Page
This page is the online store portal of the second interactive design. It has all the same
elements and options as the first, just with a different layout. Users can directly remove items

10
INTERFACE DESIGN ANALYSIS
from the cart just by clicking the X icon. The only difference is the header, that has a new
look and feel. It also contains the contact number.
Restaurant Page
Fig 2.3 Restaurant Page
In this page, the same table booking functionalities for the restaurant are presented.
The only additions are the time option. It also has the added Party booking option, in the sub-
menu itself.

11
INTERFACE DESIGN ANALYSIS
Contact Us Page
Fig 2.4 Contact Us Page
This page separately presents the social media domains for the stores and the
restaurant. In addition to that, the page also has the contacts option with a link to the find
location page.

12
INTERFACE DESIGN ANALYSIS
Find Us Page
Fig 2.5 Find Us page
This page displays all the locations of the store and restaurant just as the first design.
Advantages of Design 1
 The login and new sign up options are present in the same page.
 The advertisement on the sign up/login page creates a marketing awareness.
 The sub-menu in the Restaurant page is easy to be spotted by the amateur users as it is
located at the top, below the main navigational menu.
Advantages of Design 2

13
INTERFACE DESIGN ANALYSIS
 The home page fits in the sign up page for new users and redirect existing users to
separate login page. This simplifies things for a new visitor to the website as they can
readily sign up.
 The ‘Book for Parties’ option is now available; therefore users will not have to call
the restaurant to book for parties.
 Customers can book tables by adding the time slots as well.
 The presence of a Contact Us page helps in customer support.
 The cart value is displayed all throughout the website, unless the customer checks out
by paying.
 Use of a variety of attractive icons (Lin et al., 2013).
Disadvantages of Design 1
 Viewing overall, the design lacks a few crucial elements like the Contact Us page,
without which customer service becomes impossible.
 The lack of a social media linking section.
 The navigation menu is different in the home page, compared to other pages. This
creates a design gap (Colborne, 2017).
 The Restaurants page does not have a ‘Book for Party’ option. Customers will have to
call the respective authorities on the given number. This slows down the process and
takes off points from the use of the internet.
 Moreover, time slots cannot be set for booking tables.
 The cart value can only be seen in the store’s page and nowhere else.
Disadvantages of Design 2
 For users who like to have the login right away after signing up, this design will be a
disappointment. They will have to separately visit the secured login page.

14
INTERFACE DESIGN ANALYSIS
 There is no more the huge offer advert. This might affect the marketing strategy by a
pinch.
 The contact us page does not have contact details of every store separately.
Design Principles of Design 1
 Communication: The webpages uses maps, images and regular headings to convey
clear messaged.
 Navigation: The design offers both internal and external navigation through menus
and sub-menus.
 Layout: Very little uses have been made of the grid layouts. Lots of overlapped
frames have been used to hold important sections.
Design Principles of Design 2
 Communication: The webpages clearly communicates to the user the contents that
they possess. This is done through the use of regular headings, information, images,
maps and interactive icons (Lin et al., 2013).
 Purpose: Each webpage has their own function and there is clarity in the options that
they provide.
 Navigation: It is easy to navigate with the help the main navigational menu at the top
of the website. These are buttoned in style, thus offering better user experience. The
sub menus are sorted in the right of the screen of their respective pages, thus giving a
modern look to the website.
 Layout: The website uses fantastic grid layouts. This helps to make use of every
space available and still produce an attractive eye-catching interface.
Usability Goals and Experience of Design 1 and Design 2

15
INTERFACE DESIGN ANALYSIS
The usability goals for design 1 are restricted to the basic functionalities of the
website. Users are expected to login, browse through the offers, book a restaurant table or
buy some products and check out by paying. Nevertheless, this design aims for marketing
through clever usage of the offers and adverts.
However, design-2 aims at providing all sorts of support to the customer. From visual
aids in the maps to customer support trough contacts page, the design makes use of every
aspect of web development. It also aims at making it easier for the customer, by providing
every option at their click’s distance.
Selecting a design
The second design must be given the earliest preference when considering one of the
two for development. This design has all the qualities that can take the website and the
company to great heights. As discussed in the sections above, this design clearly has
tremendous advantages over the other design. It not only offers the best layout design, but
also does it intend to help the website visitors with visual aids and interactive options to get
their job done without any difficulty. Having fulfilled all the needed features for the shop’s
website, this design also provides a constant set of design principles all over the website. All
these points give this set of design an edge over the other one.
Target Users and Usability
The design is meant to be for users belonging to all age and community. Everybody is
expected to visit the website and order online or book a table or two in the restaurant. Special
care has been taken for the novice user, with icons and elaborate headings to clearly indicate
the options available (Lee & Kozar, 2012). Users are expected to visit or use the website from
any computer device with a 683:384 resolution screen, to get the best display.
Conclusion

16
INTERFACE DESIGN ANALYSIS
It can be concluded that to design multiple interface designs before finalizing one, is
necessary. This helps to weigh one against the other and assists in breeding up new idea that
may come up. The best design always answers every problem that a visitor to the website
may face. This actually guides the overall business module to success.

17
INTERFACE DESIGN ANALYSIS
References
Colborne, G. (2017). Simple and usable web, mobile, and interaction design. New Riders.
Cyr, D. (2013). Website design, trust and culture: An eight country investigation. Electronic
Commerce Research and Applications, 12(6), 373-385.
Gangeshwer, D. K. (2013). E-commerce or Internet Marketing: A business Review from
Indian context. International Journal of u-and e-Service, Science and
Technology, 6(6), 187-194.
Huang, Z., & Benyoucef, M. (2013). From e-commerce to social commerce: A close look at
design features. Electronic Commerce Research and Applications, 12(4), 246-259.
Johnson, J. (2013). Designing with the mind in mind: simple guide to understanding user
interface design guidelines. Elsevier.
Krum, R. (2013). Cool infographics: Effective communication with data visualization and
design. John Wiley & Sons.
Lee, Y., & Kozar, K. A. (2012). Understanding of website usability: Specifying and
measuring constructs and their relationships. Decision support systems, 52(2), 450-
463.
Lin, Y. C., Yeh, C. H., & Wei, C. C. (2013). How will the use of graphics affect visual
aesthetics? A user-centered approach for web page design. International Journal of
Human-Computer Studies, 71(3), 217-227.
Moczarny, I. M., De Villiers, M. R., & Van Biljon, J. A. (2012, October). How can usability
contribute to user experience?: a study in the domain of e-commerce. In Proceedings
of the South African Institute for Computer Scientists and Information Technologists
Conference (pp. 216-225). ACM.

18
INTERFACE DESIGN ANALYSIS
Neil, T. (2014). Mobile design pattern gallery: UI patterns for smartphone apps. " O'Reilly
Media, Inc.".
Silver, M. (2013). Exploring interface design. Cengage Learning.
Stallings, W., Brown, L., Bauer, M. D., & Bhattacharjee, A. K. (2012). Computer security:
principles and practice (pp. 978-0). Pearson Education.