7 Most Common Mistakes in UI UX Design

The great UI UX design is an all-important part of the business. It can guide users smoothly through meaningful interactions, and significantly boost conversions.

 Therefore, the cost of mistakes is also high. Your bounce rate will skyrocket if the users are disappointed with their experience. Sometimes, it’s the smallest things, which can slip into the work of the best designers.  

 We have distinguished the 7 most common mistakes to help you avoid them in the future.

1. Confusing navigation

How to tell good UX design from the bad? It must be immediately, intuitively clear how everything works. For example, users don’t need to think about what buttons are clickable, or how hovering works. Navigation is more about usability than creativity.

Remember the three-click rule: every user must make no more than three clicks to get to any page of a website (there are some exceptions, though).

•   Plan your navigation beforehand.
•   Separate it visually from other elements, using color or white space.
•   Be consistent, never use different primary navigation on other pages.
•   Go for different solutions for mobile and web.
•   Think twice before sacrificing the fixed menu during scrolling for aesthetic reasons. (However, it’s also a common mistake to make the sticky header too large or stuff it with unnecessary content. It’s always a good idea to test it first).
•   Use clear labels with a short text.
•   It’s best to include users’ vocabulary, not something generic like “Who we are”, “What we do”.
•   For local navigation, differentiate links from the rest of the text, and mark those which were open before.
•   Avoid opening links in a new tab and unnecessary pagination of content.

And most importantly, respect users’ freedom of control. As a user yourself, you probably noticed how often you click on stuff just to see how it works. In any case, there should be a clear “emergency exit”.

The example below is an e-commerce website Tesco. It shows another UX mistake – using too much flyout and drop-down submenus.  Not only they can be difficult for search engines to crawl – they have been repeatedly proven to irritate users. It works similar to excessive call-to-action buttons: people simply don’t click any of them. If you absolutely need such submenus, try to smooth this effect out.

Source: https://www.tesco.com/groceries/en-GB/shop/fresh-food/all

2. Non-consistent & overloaded style

A mishmash of fonts, colors, elements is a common problem. Designers like to experiment with fonts and color schemes to stand out, but that usually ends up confusing the customer. Actually, people crave consistency. Pay attention to details like properly formatted text and uniform color schemes. Mobile ui design especially needs coherent, minimalistic solutions.

Overloading user’s cognition decreases user experience as well as sales. Aim to provide the content and features people need at the moment. Reduce clutter, and guide users smoothly through the process.

The Yale School of Art website is a famous example of an overloaded background, messy structure, and colors.

Source: https://www.art.yale.edu

3. Working with fonts

Fonts and style consistency are the two features that distinguish a good UI design.

Typography actually constitutes 95% of web design. If you get it wrong, you’re excluding between 12%-20% of potential customers. By optimizing typography, you optimize readability, usability, accessibility (inclusiveness).

Between stylish or readable font, always choose the latter. Beware of thin, light fonts, despite their popularity. (Yes, they may be elegant, clean, and trendy. But they also may not render correctly on different types of display, and remain unreadable for many users).

Avoid low contrast text and elements. They are trendy, too, but share the same problems. Testing contrast is a must (you can use some tools like Colorable,  Contrast, and Wave that help correct contrast according to Web Content Accessibility Guidelines).

Don’t forget to follow the basic rules of typography (line length 70–80 characters, font size minimum 16pt, etc.) and online copy (bullets, subheads, etc.)

The example below is a website with low-contrast, thin fonts that decrease readability (especially in search and navigation tabs).

Source: https://tremolo.com.au/

4. Looks over functionality

Your website can create a wow-effect, be visually compelling and consistent, boast a fresh concept… And still, irritate users and lower conversions. Because the devil is in details.

As in one of the most famous UX design quotes, “People ignore design that ignores people” (F. Chimero). You need to know your users, their goals, challenges, motivations, understand what they need, and always put it before the beauty of interfaces.

Go through this check-list to save yourself from cliché UI and UX design mistakes often made in pursuit of aesthetics:

1. Low website load speed
2. Long or “zig-zag” forms (also, too many mandatory fields or incorrectly configured validation)
3. Anything that looks like an ad (banners/carousels, pop-ups, animation – banner blindness is real)
4. Scroll hijacking (can irritate many users)
5. Too many custom icons, unfamiliar for users
6. Confusing buttons (Can I click it? Why is this so small? They all look different)
7. Avoiding of whitespaces
8. Tiny clickable areas (e.g., navigation arrows)
9. Bad registration/authorization and sign-in process
10. Too many and/or dull 404 pages (they are also part of the experience, make them fun)

Source: https://blog.prototypr.io/top-common-mistakes-ui-ux-designers-make-6e13bd891e84

5. Responsiveness is responsible

Yes, 2021 is almost here, and this is still on the list. Too many websites seem to ignore it! Google lowers such websites in the rating, and 94% of people don’t trust websites without mobile versions. On the contrary, responsive websites have a 67% chance of a conversion.

It is essential for your website to look great and load fast across all screen sizes. Don’t forget to optimize for slow connections, and slow computers as well. There are many responsive testing tools to check your website, whether it’s published or still in development.

Responsive design is more efficient, cost-effective, and easier to manage compared to separate mobile and desktop versions (adaptive design). However, the latter is faster and can be more tailored to your specific needs. Either way, we recommend choosing trustworthy UX design firms that will help you pick the best option and produce professional web design across all devices.

Can you distinguish anything in the search bar of this website?

Source: https://mediatemple.net/services/domains

6.Content first

Great web design begins with content – the most important part of the website.

If the content is not figured out yet, there is no point in designing. Otherwise, when you finally replace Lorem ipsum, everything will look differently, out of place and empty.

Other common mistakes:

•   Too much text without a clear hierarchy of information
•   Not answering users’ questions (such as price)
•   Complex language
•   Spelling mistakes
•   Too much emphasis on “engaging”, which can actually distract (big pictures, music, and animation)
•   Content for search engines, not people

We recommend to:

• Provide interesting, relevant, valuable information
• Post new blogs consistently
• Keep old content fresh and relevant
• Create landing pages to boost conversions
• Make sure to have a consistent brand’s voice and tone
• Include an About Us page, a Contact Us page, a Services page
• Follow the latest SEO guidelines

Source: https://blog.prototypr.io/why-testing-with-real-content-is-better-than-lorem-ipsum-c7c79586ee72

7. Being overly confident

This includes:

• Skipping the first part of any UX design process – UX design research
• Not testing with real-world, not ideal users
• Seeing UX as one person’s responsibility (the whole team and stakeholders should take part in decisions)
• Not balancing your conceptual model with users’ mental model (I like it, I understand it, then everyone will)
• Ignoring user feedback
• Not seeing UI UX as a continuous process.

The example below is a University of Advanced Technology website before and after a lot of feedback on the Internet regarding its innovative, creative, but complicated navigation. Before, they used floating animations as a menu, which was a fresh concept, reflecting the vision of the institution. However, they understood the importance of UX and later added a large and comfortable navigation bar.

Before:

Source: https://www.apexmediafirm.com/post/manage-your-blog-from-your-live-site

After:

Source: https://www.uat.edu/

Check out some examples of attractive designs.

Make the best of UI UX Design

Best UX design is not about fancy parallax or cool animations. Make sure to remember about basic things: navigation, clarity, readability, responsiveness, easy access to relevant content. Creativity and beauty will come on top of that.  

We recommend booking professional UI UX design services so that mistakes never slip onto your website. You can check our UX design portfolio here.