10 Bad UX Design Examples and How to Fix Them

Here are ten common examples of poor UX, along with practical ways to improve them.

1. Confusing Website Navigation

The problem: Users cannot find the page or feature they need.

A website may use unclear menu labels, too many menu items, or a confusing page structure. Users may have to click through several pages just to find basic information.

Example: A customer visits a software website to find pricing but sees menu labels such as “Discover,” “Solutions Hub,” and “Explore More” without a clear pricing link.

How to fix it:

• Use clear menu labels such as Products, Pricing, Resources, and Contact.

• Group related pages together.

• Keep the main navigation focused on important user needs.

• Make search easy to find when a website has lots of content.

Why it matters: Clear navigation helps users find information faster and reduces frustration.

2. Too Many Pop Ups

The problem: Too many pop-ups interrupt users before they can explore the page.

A visitor may open a website and immediately see a newsletter offer, a chat window, a cookie notice, and a discount pop up. These messages compete for attention and can make the page hard to use.

Example: A user opens an online store to compare products, but a full screen offer blocks the product list before the user has seen anything.

How to fix it:

• Show pop-ups only when they serve a clear purpose.

• Avoid displaying several interruptions at the same time.

• Make it easy to close each pop up.

• Test the timing on both mobile and desktop.

Why it matters: Users should be able to explore a product without constant interruptions.

3. Forms That Ask for Too Much Information

The problem: Users abandon forms that feel long, confusing, or unnecessary.

Some websites ask for a phone number, company name, job title, company size, and other details before users can access a simple resource or create an account.

Example: A visitor wants to try a project management tool but must complete a long form before seeing the product.

How to fix it:

• Ask only for information needed at that stage.

• Use clear labels and short instructions.

• Group related questions together.

• Explain why sensitive or less common information is needed.

• Keep entered information when a user makes a mistake.

The GOV.UK Design System's guidance on form errors explains how clear error messages can tell users what went wrong and how to fix it.

Why it matters: Simple forms make it easier for users to complete important tasks.

4. Buttons with Unclear Labels

The problem: Users cannot tell what will happen when they click a button.

Labels such as “Submit,” “Continue,” or “Proceed” may be too vague when the next step is not clear from the context.

Example: A pricing page has a button labeled “Get Started,” but users do not know whether it opens a free trial, starts a paid plan, or books a sales call.

How to fix it:

• Use action based labels such as “Start Free Trial” or “Book a Demo.”

• Make the next step clear before users click.

• Use consistent labels for the same action.

• Make important buttons visually easy to identify.

Why it matters: Clear actions help users make decisions with confidence.

5. Poor Mobile App Navigation

The problem: Users struggle to find features or tap controls on a small screen.

An app may have tiny icons, crowded menus, hidden actions, or buttons placed too close together.

Example: A banking app places the “Transfer Money” action inside several menus, while less-used features are shown on the home screen.

How to fix it:

• Place common tasks where users can find them easily.

• Use clear labels instead of icons alone when meaning is unclear.

• Give touch controls enough size and spacing.

• Test the app on different screen sizes.

The W3C guidance on target size explains how control size and spacing can make interfaces easier to use, especially for people who have difficulty with precise movements.

Why it matters: Mobile users need to complete tasks without struggling to find or tap the right control.

6. Error Messages That Do Not Help

The problem: Users make a mistake but receive no useful explanation.

Messages such as “Something went wrong” or “Invalid input” do not explain what happened or how to fix it.

Example: A user enters a password during sign up and sees “Error 102” without knowing the password requirements.

How to fix it:

• Explain the problem in simple language.

• Tell users how to fix it.

• Show the message near the relevant field.

• Keep information they already entered.

• Avoid showing errors before users have had a fair chance to complete the field.

For example, replace “Invalid password” with “Use at least 12 characters, including one number.”

Why it matters: Helpful error messages allow users to recover without giving up.

7. Overloaded Screens With Too Much Information

The problem: Too many elements compete for the user's attention.

A page may contain long paragraphs, several banners, many colors, multiple CTAs, and unrelated information. Users may struggle to identify the most important content.

Example: A SaaS dashboard displays every report, alert, setting, and activity feed on one screen, making the main task hard to find.

How to fix it:

• Put the most important information first.

• Group related content.

• Use headings, spacing, and simple layouts.

• Move secondary actions into menus or expandable sections.

• Remove elements that do not support the user's goal.

Why it matters: A clear layout helps users focus on what they need to do.

8. Forced Sign Ups Before Users See the Value

The problem: A product asks users to register before they understand what it offers.

Some websites require an account before users can view basic product details, try a feature, or understand how the service works.

Example: A design tool asks visitors to create an account before showing any examples or explaining its main features.

How to fix it:

• Explain the product before asking for registration.

• Show screenshots, demos, or sample results.

• Allow users to explore public information where possible.

• Explain why an account is needed.

• Make the sign up process as simple as the product allows.

Why it matters: Users are more likely to consider signing up when they understand the value first.

9. Inconsistent Design Across Pages

The problem: The same controls look or behave differently across a product.

For example, the primary button may be blue on one page, green on another, and hidden in a menu on a third. Users must keep learning how the interface works.

How to fix it:

• Create a consistent design system.

• Reuse buttons, forms, colors, and navigation patterns.

• Keep common actions in predictable places.

• Use the same terms for the same features.

A shared design system helps teams create more consistent digital experiences as a product grows.

Why it matters: Consistency makes products easier to learn and use.

10. Poor Accessibility

The problem: Some users cannot read, navigate, or interact with the product comfortably.

Low contrast, missing labels, keyboard barriers, unclear focus states, and small controls can create problems for people with disabilities and many other users.

Example: A website uses pale grey text on a white background and requires users to hover over icons to understand their purpose.

How to fix it:

• Use readable text and sufficient colour contrast.

• Add labels to form fields and meaningful names to controls.

• Support keyboard navigation.

• Make focus states visible.

• Provide text alternatives for meaningful images.

• Test with accessibility tools and real users.

Use the Web Content Accessibility Guidelines (WCAG) as a reference for improving digital accessibility.

Why it matters: Accessible design helps more people use a product and supports a better experience for everyone.