0% found this document useful (0 votes)
170 views15 pages

Example of Bad UI Design

In this assignment have to criticaly analyze the Bad UI Design and recommend the best User interface design strategies the is user friendly for user

Uploaded by

safikhan3034
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
170 views15 pages

Example of Bad UI Design

In this assignment have to criticaly analyze the Bad UI Design and recommend the best User interface design strategies the is user friendly for user

Uploaded by

safikhan3034
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Assignment # 01

Submitted To
Dr. Umer Shoaib
Submitted By

Wahab Younas (18321519-007)

Ahmad Safiullah Khan (18321519-009)

Hadi Arshad (18321519-038)

Section A
Human Computer Interaction
Due Date
Saturday, March 12, 2022

Fall – 2021

Department of Computer Science


Faculty of Computing and Information Technology
University of Gujrat, Hafiz Hayat Campus
Example of Bad UI Design

Industrial Painter Website.


This given image is an example of Bad UI Design. The biggest feature of navigation for a
website is self-evident. When a user logs onto your website, he/she should understand what
they can do next and what actions to take to reach their destination. The navigation must
be eye-catching and should often be at the top of the page. Do not try to design navigation
like this site. It only makes the user more confused. In addition, the navigation content and
the interactions also need to be clear, as in the given example the navigation system is very
poor in this website. The functionality of the various links in this website is weird some
link works and some totally dead. The content (Pictures) in form of link information in the
sidebars totally don’t work.
Easily usable?
It is not easy to use because the website is burdened with the overfilled options which makes the
user uncomfortable.
Understandable?
It is not easy to understand because the website is visually overloaded. All options appear visually
congested which makes user confused to select the required option.
Discoverable?
The layout is not flexible and consistent which makes difficult to discover the required target. The
user may have to spend a lot of time trying to figure out what he/she requires due to congested
options.
Responsiveness:
Your web page needs to run on mobile smoothly as it does on the website. On this site, when
loading on the mobile phone, it still shows an entire page with such a poor interface of plaintexts.
It does not have a mobile version to view, so it’s unable to use on the phone.
Design Layout:
Design Layout of this website is totally bad. It doesn’t have Grid Layout. And the side bar
navigation there is too much unwanted and extra links. Which makes the website too much ugly
and congested. Search bar used in this website is totally in wrong location and designed oddly.
Too much extra content in a Home Page which can confuse the users. Challenging to find desire
information due to extra unwanted content. There is no navigation bar section at the top and lack
of menus. There is no proper footer with essential links and sources at the bottom. The sitemap
links in the website is totally without any proper fonts and stylings.
Color Scheme and Contrast:
The Color scheme which is used in this website is totally irrelevant. The colors used in any website
should be eye-catchy. The Contrast in this website is looking outdated. The background used in
this website is too much dark which looks not attractive. And the images used in the website are
so weird and low in quality.
Content:
This is the backbone of your website. If there will any kind of flaws in Content of website then the
website will look weird and old fashioned and bulky. The typography in this website is not concise.
And some of the Text and Headings are look like links but all those links don’t work. There is no
concept of beautiful icons and fonts in the whole website which makes it so ordinary look.
Branding:
Branding is important to all businesses, both large and small. The design and placement of your
brand's logo contributes to a viewer's overall opinion. The logo of this website looks ugly, logo’s
color too bright, too loud and too confusing. It simply don't make sense and don't fit with the
quality of the brand.
Consistency:
Website doesn’t use the same colors throughout the website. There is no consistent vertical and
horizontal spacing between elements in the layout. Website headings consistent throughout the
site. Text links are not same color throughout the website
Form elements like (text inputs, select lists, submit buttons etc.) are not the same throughout the
website. These elements don’t have a proper alignment and styling.
Help:
No help criteria are defined in this website.

Ten Design Heuristics


Visibility of system status
The visibility of system status refers to how well the state of the system is conveyed to its users.
Ideally, systems should always keep users informed about what is going on, through appropriate
feedback within reasonable time. The website does show the status that your Application or Mail
has been processed. But when the approval page is opened there is no navigation button to go
back to home page or move forward. And the form submission process is also improper because
when you leave all input empty and then click the submit button.

Familiar metaphor & language:


In user interface design, an interface metaphor is a set of user interface visuals, actions and
procedures that exploit specific knowledge that users already have of other domains. The purpose
of the interface metaphor is to give the user instantaneous knowledge about how to interact with
the user interface. They are designed to be similar to physical entities but also have their own
properties. The selected interface doesn’t use icons that speak the users' language, with words,
phrases, and concepts familiar to the user. The information displayed in the interface is very
confusing for users to understand. The metaphor is not familiar with the customer “What are these
pictures for?”. When the customer sees the home page, he gets confused “Honestly, where do I
start on this website? What should I read or look at first?”. The language is not familiar with the
simple customer.
Control and Freedom:
This provide an “emergency exit” if the user has chosen a system functions by mistake He can
leave the unwanted state without having to go through an extended dialogue. Users often make
mistakes or change their minds. Allow them to exit a flow or undo their last action and go back to
the system’s previous state. For example Support Undo and Redo. Show a clear way to exit the
current interaction, like a Cancel button. In the given example website there is no concept of exit
options or any kind of redo things and there is no concept of sales and purchase where a user have
a different option and freedom to buy or contact to the companies is the website. And one more
flaw in the website is that it makes so confuse and difficult for the user to explore the relevant
option the data is no in proper layout and sometime user click any button for example,
payment,material, service and project and so on the the new section opens without any useful
information.

Consistency
The interface is not consistent. There is so much extra information to confuse the user. The
software layout consistency is another problem. The Content on the website is inconsistent in
various sections, Button layout and design is also not consistent throughout the website. Whenever
possible, help users enter data by designing form fields that will eliminate the need to guess how
the entry should be formatted; apply these guidelines to all instances of collecting data on your
site. The input form is also not consistent input field used different fontstyles which against the
law of consistency.
Error Prevention
This website does not provide error prevention i.e.no good error messages are displayed to prevent
a problem from occurring in the first place. The system does not eliminate the error-prone
conditions or check for them and present users with no confirmation option before they commit to
the action. For example if the user enters the invalid option in the input field there is no availability
of form validation to prevent from errors.

Recognition over recall


The system does not provide recognition over recall in the given website. The user has to remember
information from one part of the dialogue to another. He has to remember the location of various
options and spend a lot of time finding them if he accidentally forgets them. As given below
pictures you can clearly see that there is a menu of states but using short term word which may
confuse the user and in the second picture there is a list or extra improper term in form of links
which may confuse and create difficulty for user.

Flexibility & Efficiency


The system cannot cater to both inexperienced and experienced users. It does not allow users to
tailor frequent actions. The inexperienced user may get confused with similar yet different
functionally icons in the menu/toolbars. As earlier discussed in the discussion is that the website
is totally non-responsive and the layout of the navigation bar and menus are totally out of context
and old fashioned so there will be less flexibility and confusion for the user to achieve his goal.
But there are some recommendation in form of photos in but still all these recommendation are
non-functional static. There is very few shortcuts you will see in this website. The user has to come
down to see the go to top button it should be floated in the web page to make it flexible. There is
very few options available in website.
Aesthetic & Minimal Design
Aesthetic & minimal includes Keep the content and visual design of UI focus on the essentials.
Don't let unnecessary elements distract users from the information they really need. Prioritize the
content and features to support primary goals. Having a feature-rich interface can make
navigation difficult to learn and overly complex. In the given example website the design of the
website is not aesthetic and minimal. There is a lot of unnecessary data on the home path and
some other menu sections. There is too much extra content, the content, links, lists and other
some layouts are not well organized.

Recognize, Diagnose and Recover from errors


Use traditional error message visuals, like bold, red text. Offer users a solution, like a shortcut that
can solve the error immediately. The software interface does not display error messages in plain
language. The problem is not stated clearly and no constructive suggestion for a solution is
provided. The given example website doesn’t give feedback or inform the user that where the
problem or error can occur or has occurred. The website doesn’t give options for users.
Help.
Interface help comes in two forms: proactive and reactive. Proactive help is intended to get users
familiar with an interface while reactive help is meant for troubleshooting and gaining system
proficiency. The given website does not provide the necessary help and documentation to facilitate
the users. There are no guidelines for the users to handle the uncertain situation. No help provided
for the new users/audience “How to approach the painting company, its professional painters,
trainers and proper guidelines about the address”. The website doesn’t support any kind of social
media platform where if any user have anykind of query so he can contact on social media pages
for further guidelines.
Solution to Bad Interface Design
Industrial Painter Website.
This is improved user-friendly home page for Industrial Painter website. As you can see in this
website is that there is clearly visible user friendly navigation bar at the top of the website. This
navigation bar have all the useful components like home, services, contact, blog etc. There is also
a slider in the homepage for better experience. There is also a well designed contact section and
also there is a proper footer with all kind of information related to the corportation. All the layout
is well organized and simple and easy to use. It is fully responsive on every device. And the
typography is well organized and the whole website is throughout consistent. The color scheme
and contrast is attractive and clearly visible.
Participants Observation & Need Findings
Existing Interfaces Problems:
The given interface design is against the principle of visibility and responsivess. The biggest
feature of navigation for a website is self-evident. When a user logs onto your website,
he/she should understand what they can do next and what actions to take to reach their
destination. The navigation must be eye-catching and should often be at the top of the page.
Do not try to design navigation like this site. It only makes the user more confused. In
addition, the navigation content and the interactions also need to be clear, as in the given
example the navigation system is very poor in this website. The functionality of the various
links in this website is weird some link works and some totally dead. The content (Pictures)
in form of link information in the sidebars totally don’t work. The design is totally non-
responsive. It doesn’t properly response in mobile devices. There is lack of content
consistency.

Solution to bad design:


Need finding:
Users strongly prefer:
 Ease of use and navigation.
 Familiar metaphor and language.
 Flexible and consistent layout.
 Services and environments that are aesthetically pleasing.
 Simple and minimalist design.
 Information and visual data that is easy to understand and discoverable.
 Control and freedom.
 Error recognition and prevention.
 Help in case of any query.

Participant observation:
We have used this method to observe people in order to discover their needs, goals and values. We
have observed this website interface ourselves and showed it to university fellows. The experience
of our university fellows helps us to get better idea about the problems in design.
Following questions help us to observe users:
1. What do people do now?
Users find it difficult to navigate because the interactions and navigation content are not
clear. They get confused and annoyed because of overloaded information. They get
frustrated when there is no help and documentation available in case of any query. Due
to these issues users avoid to use such interfaces. People want the proper online platform
to buy anything related to the daily life products like paints, sheets, furnitures and many
more.

2. What values and goals do people have?


Users require information and visual data that is easy to understand and discoverable.
They strongly prefer minimalist layout which is consistent and efficient. And in case of
any emergency they prefer to leave the unwanted state easily. Help and documentation
should be provided to avoid inconvenience.

3. How are these particular activities embedded in a larger context?


Nowadays, users prefer to use e-commerce to purchase their required product instead of
going to the market themselves. With the improved e-commerce services, the user can get
customized and top-quality products with fast delivery.

4. What are similarities and differences across people?

Similarities: Users prefer to navigate their required target easily. They need help and
documentation to avoid misleading’s and inconvenience. They prefer error prevention,
recognition and recovery.
Differences: Some prefer large text size as compared to others. Every user requires
different color and texture for their interfaces.

5. What are other types of context (like time of day)?


User wants 24/7 availability of the services and less response time. Most users prefer to
use services in working hours.

6. What values and goals do people have?


The people want to avail services or have products that are easily available to buy. Their
major goal is to have best products but with seating at their homes and watching and
selecting products online to purchase. They want quality products and check quality by
observing the feedbacks of other customers about a product or service. They want to have
simple functionality and design of the interfaces. They prefer to have updated cart
whenever they accidently close the website.
Prototyping
High-fidelity Prototyping:
Home Page:
Evaluation Techniques
Evaluate design with experts by using Heuristic Evaluation
Questions:
1. What customer is trying to achieve by using this website? (Goal)
On this website the customer wants to takes place a booking or you can say a contract
with the company. As the websites name describes that this company services includes
industrial painting and commercial painting, sandblasting, water blasting, deep cleaning
and lead abatement projects. So customer main goal is to contact with a company through
website and place a booking of any kind of services they offers. Customer wants to place
booking for house maintenance or commercial place maintenance.
2. Will customer be able to place the contract with company? (Visibility)
The customer can select “Contact Us” to contact with the company for booking. He can
choose the desired services like industrial painting or commercial painting, repainting,
recoating, and restoring: metal deck ceilings, vinyl ceilings, wood deck ceilings which are
available at the moment in the site.
3. Once you find the control, will you recognize that it produces the effect you want?
(Mapping)
Yes surely, we will recognize that it produces the effect we want like:
When the user click the view more services then it will show all the services available on
the website. For example.
4. Will customers understand the feedback of buying the products?(Feedback).
When the user contact with contractor of the company for the services he wants and place
the booking of a desire service, then the system immediately respond that your order has
been placed and ask want to continue again. When we Click Services button, we get
information of available services which leads us to book a service among them. Similarly,
by just seeing the contact us page we will get understood how to communicate with
corporation.

Task Analysis

Textual Hierarchical Task Analysis (HTA) description:


0. In order to see the desire services
1. Navigate the website
2. Search the services you want to see.
2.1: Click the desired services title
2.2: Read your respecting information
3. fill requirement for selected service
4. Place the booking of desired service.

Plans:
1. Plan 0: Do 1-2-3 in order. Do 4 when you want to continue searching again.
2. Plan 3: Do any of 3.1, 3.2 in any order depending upon which option you want to choose
for your required information.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy