Bad UX Design: 9 Common Mistakes Beginners Should Avoid

illustration of ux designers working  on a web page with ladders and tools like they're construction workers representing bad ux mistakes

                                                                                                                                                                      you’ve probably wound up on a website or app with a design that leaves you wondering what on Earth the creators were thinking. Whether it’s struggling to find the information you need, unclear icons or genuine confusion at how to navigate the overwhelming visuals, bad UX design can render an otherwise visually appealing effort into a difficult-to-use mess.

In a world that’s increasingly dependent on good design to help people find information in as little time as possible, UX design blunders can stick out as particularly frustrating.

The good news is that often there’s a rational reason behind these mistakes—and many are easy to avoid if you are aware of them.

Keep reading to learn more about some of these common bad design instances and how to avoid them.

9 Common UX design mistakes

1. Too many pop-ups

You’ve probably been preparing to read a news article when as the page loads, three pop-ups cover all the content. Between a warning about cookies, an ad and an email list sign-up, the user’s primary concern—the article—can get almost completely obscured.

While one pop-up isn’t too annoying, it’s easy to overdo it. In web design, many of these pop-ups are the product of third-party apps and advertisers that you may have limited control over—so focus on what you can to simplify how information is presented in the areas you do control. Ask yourself: Could this be contained to a sidebar or a “more information” icon that’s accessible when hovered over? Not all information needs to be jumping off the page and jockeying for attention, so keep pop-up messaging to a minimum.

2. Aesthetic over functionality

Demonstrating your design ability with an intricate or out-of-the-box layout may seem like a great design portfolio project. For the user, though, this design may be unintuitive, leaving them to struggle through the website trying to find what they’re looking for.

And while it’s possible for an innovative design to be user-friendly, it can just as easily confuse new users who are unfamiliar with the layout. Instead, starting the design process by thinking through functionality then building the visuals and layout will create a UX design that balances functionality and aesthetics. 

Sometimes, the clean, simple design is better than the flashy, complicated layout.

3. Impractical fonts

While fonts often are a UI specialty, UI and UX often overlap, and like intricate layouts, a fun or fancy font can be the perfect way to grab attention or show off your design skills. However, a font with too many flourishes can be tricky to read—it’s like struggling through bad handwriting. The last thing you want is a thoughtfully crafted message that readers struggle to read because of the font.

As with the design, the best fonts balance functionality with appearance. For instance, a loopy, specialized font could work great for accents while the bulk of the writing will be easier on the eyes in a more conventional style.

4. Too much at once

While it’s critical to include all the essential information, having too much information on a website can overwhelm users. Whether there are paragraphs on paragraphs of text or a long scroll to get through all the images and graphics, users’ attention span will run out before they get through all the information.

Learning how to balance what information needs to be included and what doesn’t can condense content. And learning how to convey information efficiently—creating graphics and other design elements where helpful—will give the user everything they need to know while staying away from sensory overload. 

5. Overly long dropdown menus

While organizing pages into dropdown menu folders can create a super navigable website for users, dropdown folders that are too long can disappear below the bottom of the screen. It’s incredibly frustrating to not find what you need on a website because it’s hidden at the bottom of a too-long dropdown.

Another consideration here is that different users have different screen sizes. What works for the large monitor you have in the office may end up partly hidden for people who use a portable laptop.

6. Not mobile friendly

Another common error related to different screen sizes is websites that are not mobile friendly. Trying to navigate a desktop website on your phone or a website that poorly attempts to squeeze itself onto your phone screen, often with overlapping or missing elements, can be nearly impossible. This is why when creating a layout, the best designers will consider how their design will translate to a mobile situation.

7. Inaccessible color combinations

Did you know that eight percent of men and 0.5 percent of women are color blind?1Some color combinations (like red on green) are hard for color blind people to discern. As a result, it’s important to consider how different color combinations can affect whether color blind people can use your design. Alternatively, some websites now have accessibility options that can change the colors on the site to be more suitable for the different kinds of color blindness.

8. Hiding important information

Nothing is more frustrating than looking for something and not being able to find it. When designing any project, it’s important to put the most critical information front and center and structure the rest of the information in a navigable and intuitive way.

Burying pages and links that users would frequently access amongst submenus is a design headache. Knowing what users are likely looking for and creating an interface that is intuitive to navigate is key to creating the smoothest user experience.

9. Slow-loading pages

The best designers are able to think beyond their design to consider the limitations and functions of the medium. With UX design, internet speed is a huge limiting factor for many people. While the auto-playing, high-resolution video on your website’s home page may be amazing, it may stop the page from loading for somebody who doesn’t have lightning-fast internet.

In these situations, keeping file sizes for pictures and videos small via compression tools can help chip away at the overall amount of information that must load on each page.

Is a career in design for you? 

There’s undoubtedly no shortage of bad UX designs out there, frustrating users and good designers alike. While the forms these less-than-ideal design mistakes take are varied, they all can be mitigated by keeping the needs of a user near the top of all design considerations.

Whether you’re getting started in graphic design or web design or are just looking for ways to improve your work as a creative professional, it never hurts to empathize with your audience and think through their overall experience when taking in your work. Putting users first has grown so important in this field, user experience design is now an established role many digital creatives dabble in. Want to learn more? Start with “What You Need to Know to Become a UX Designer.”

1“About Colour Blindness,” Colour Blind Awareness. [Accessed July 2022] https://www.colourblindawareness.org/colour-blindness/.

About the author

Jordan Jantz

Jordan is a freelance content writer at Collegis Education. She researches and writes articles on behalf of Rasmussen University to help empower students achieve their career dreams through higher education.

writer

Related Content

Related Content

This piece of ad content was created by Rasmussen University to support its educational programs. Rasmussen University may not prepare students for all positions featured within this content. Please visit www.rasmussen.edu/degrees for a list of programs offered. External links provided on rasmussen.edu are for reference only. Rasmussen University does not guarantee, approve, control, or specifically endorse the information or products available on websites linked to, and is not endorsed by website owners, authors and/or organizations referenced. Rasmussen University is accredited by the Higher Learning Commission, an institutional accreditation agency recognized by the U.S. Department of Education.

logo-accreditation-acen logo-accreditation-ccne chart-credential-laddering-associates-bachelors-masters 0 Credits 90 Credits 180 Credits 48 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE'S DEGREE Start Here MASTER'S DEGREE PURSUERS End Here BACHELOR'S DEGREE End Here MASTER'S DEGREE chart-credential-laddering-associates-bachelors 0 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS 90 Credits Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE'S DEGREE 180 Credits End Here BACHELOR'S DEGREE chart-credential-laddering-msn chart-credential-laddering-nursing-programs chart-credential-laddering-nursing DNP MSN RN to BSN LPN to RN Bridge Accelerated BSN Professional Nursing ADN Practical Nursing Diploma Pre-Licensure Post-Licensure icon-colored-outline-bank icon-colored-outline-certificate icon-colored-outline-circle-dollar-sign icon-colored-outline-folder-search icon-colored-outline-hand-heart icon-colored-outline-head-blocks icon-colored-outline-head-cog icon-colored-outline-head-heart icon-colored-outline-health-plus-leaves icon-colored-outline-hospital icon-colored-outline-lifelong-learning icon-colored-outline-light-bulb-analytics icon-colored-outline-location-pin icon-colored-outline-magnifying-glass icon-colored-outline-monitor-healthcare icon-colored-outline-monitor-paper-search icon-colored-outline-nurse-rays icon-colored-outline-padlock-shield icon-colored-outline-person-presenter-screen icon-colored-outline-scales ras-logo-flame ras-logo-horizontal ras-logo-stacked icon-colored-advance icon-colored-arrows-cross-curve icon-colored-briefcase-star icon-colored-build icon-colored-bulb-analytics icon-colored-certificate icon-colored-continual-development icon-colored-duo-chatbox icon-colored-folder-mortarboard icon-colored-forward-ribbon icon-colored-gears-clock icon-colored-globe-pen icon-colored-growth icon-colored-hand-bubble icon-colored-hand-stars icon-colored-hands-gear icon-colored-head-blocks icon-colored-head-cog icon-colored-health-plus-leaves icon-colored-hospital-building icon-colored-laptop-cbe-skyscraper icon-colored-laptop-checkmark icon-colored-laptop-webpage icon-colored-location-map icon-colored-location-pin icon-colored-monitor-paper-scan icon-colored-mortarboard-dollar icon-colored-national icon-colored-people-chat-bubbles icon-colored-person-cheer-star icon-colored-person-laptop-checkboxes icon-colored-person-screen-instructor icon-colored-person-whiteboard icon-colored-phone-chatbox icon-colored-police-light icon-colored-prep icon-colored-presenter icon-colored-regional icon-colored-save-time icon-colored-shirt-hat icon-colored-skyscraper icon-colored-state icon-colored-student-centered icon-colored-support icon-colored-world-experience icon-triangle-arrow-up-plant icon-triangle-calendar-pencil icon-triangle-clock-rotating-arrows icon-triangle-display-gears icon-triangle-hand-right-speech-bubble icon-triangle-laptop-coding-brackets icon-triangle-mortarboard icon-triangle-paper-ribbon icon-triangle-person-cheer-star icon-triangle-person-juggle icon-triangle-triple-people-chat-bubble icon-modality-campus icon-modality-field icon-modality-online icon-modality-residential icon-arrow icon-bank icon-camera icon-filter icon-general-chart icon-general-connect icon-general-degree icon-general-discuss icon-general-email icon-general-find icon-general-hat icon-general-heart icon-general-laptop-building icon-general-laptop icon-general-leader icon-general-map icon-general-money icon-general-paperwork icon-general-people icon-general-phone icon-general-speak-out icon-head-heart icon-info-circle icon-mail-forward icon-mglass icon-play-solid icon-quote-mark-left icon-quote-mark-right icon-scales icon-share-square-o icon-simple-chat icon-simple-desktop icon-simple-find icon-simple-hamburger icon-simple-phone icon-spinner icon-tag icon-testimonial-quotes icon-util-checkbox-white icon-util-checkbox icon-util-checked-white icon-util-checked icon-util-chevron-down icon-util-chevron-left icon-util-chevron-right icon-util-chevron-up icon-util-circle-arrow-down icon-util-circle-dot icon-util-language-switch icon-util-loading icon-util-open-window-link icon-util-pdf-link icon-util-refresh icon-util-x rebrand-arrows icon-social-facebook-colored icon-social-facebook-square-colored icon-social-facebook-square icon-social-facebook icon-social-google-plus-square icon-social-google-plus icon-social-instagram-colored icon-social-instagram icon-social-linkedin-square-colored icon-social-linkedin-square icon-social-linkedin icon-social-pinterest-p-colored icon-social-pinterest-p icon-social-twitter-colored icon-social-twitter-square icon-social-twitter icon-social-youtube-play-colored icon-social-youtube-play graduate-cap-star-coin hand-coin hand-heart nurse-stethoscope-rays card-send-smile person-yoga-pose suitcase-star