9 UX Mistakes You Should Never, Ever Make

I’m going to show you exactly what you SHOULDN’T be doing when it comes to UX designing or developing.

 

Ranging from becoming inaccessible to handicap users to simply having bad practices, you should avoid these mistakes.

 

I can’t tell you how many times I’ve seen these errors as a UX designer and the amount of money and customers that it cost companies.

 

To give you a better understanding of each point, I’ll provide you an example to go with all 11 mistakes listed below.

 

Let’s get started!

1. Cancel and Save look too similar

Common Mistake

When users are filling out forms, they’ll be moving quickly.

 

Often times, that means they don’t read carefully and instead rely on visual cues.

 

When you have a Cancel and Save (or Continue) button right next to each other with the same color and shape, users might press the wrong one when trying to get through the annoying (and yes, I mean annoying) form you’ve created.

 

This will make your users upset and lead to a frustrating experience.

Do This Instead

Make the buttons look clearly different from each other.

 

Be sure to be consistent with this throughout your website so users don’t get confused when in different parts of your website.

 

However, don’t just make them different colors because colorblind or low-vision users might still not be able to tell them apart.

 

In the example above, I only filled in one button with blue and white text and had the other button use a blue outline along with blue text.

 

You can even make the buttons different widths if you want to go the extra mile.

2. Very wide paragraphs

Common Mistake

It’s a common beginner’s mistake to make your page paragraphs way too wide when mocking up your designs.

 

When you do this, it’s easier for your users to lose their place when reading because they have to scroll their eyes more horizontally.

 

Not only that, but you’ll have a higher chance of losing the user’s attention.

 

There’s a reason newspapers make their columns narrow and long!

Do This Instead

If you go to the website Medium, you’ll see that the articles use very large font sizes and the paragraphs are pretty narrow.

 

Try using 680px for the width of your paragraphs like Medium does.

 

Believe me, your users will be much happier.

3. Blue and red

Common Mistake

Thank goodness we don’t see this as much anymore, but back in the days of Myspace, you might have seen blue backgrounds with red text, or vice versa.

 

You might have even seen some buttons that are like this.

 

I don’t think this one takes too much explaining, but having red on or underneath blue is a dire visual sin that makes for a terrible user experience.

Do This Instead

The example above makes good use of these two colors.

 

It visually makes them more distinct and keeps the user from going blind.

 

Red buttons or text are best reserved for errors or back-tracking (e.g. deleting) because people are used to red being associated with something going wrong.

4. Inaccessible colors

Common Mistake

This builds on top of the previous point, but I’ve found that it’s very, very common for designers to not use enough contrast in the interfaces they design.

 

According to WCAG 2.0 (Web Content Accessibility Guidelines) standards, “level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).”

 

“Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.”


For more on WCAG rules, check out this article.

Do This Instead

In the above example, the button meets level AA standards because it’s a 4.75:1 (or 4.75 to 1) color ratio between the foreground and background.

 

I don’t believe there is any major online website that completely meets level AAA, but you should at least meet level AA.


WebAIM has an awesome tool to help you see if two different colors meet the WCAG contrast ratios.

5. Too much info in modals

Common Mistake

Some UX designers think that users don’t want to leave a page, but they need to show more information, so they stuff a modal with content galore.

 

This is something you should avoid doing!

 

All you’re doing is restricting the width of the text even more when in all honesty the content should simply live on another page.

 

If there is going to be any vertical scrolling involved, it’s too long for a modal.

 

Oh, and absolutely DO NOT have a modal open up another modal.

 

That’ll especially confuse the user because it’ll be a modal-ception.

Do This Instead

If you feel that your content HAS to live in a modal, make sure that the content is short and sweet.

 

That means NO scrolling.

 

If you cannot shorten the content that much, give it its own page instead.

6. Form apocalypse (AKA very long forms)

Common Mistake

When forms get long, users get overwhelmed.

 

When users are overwhelmed, they get frustrated and leave.

 

Don’t try to capture every aspect of a user’s life with your forms, just what you need.

Do This Instead

A good way to reduce the visual overload of a form for users is to break the form up into chunks.

 

Instead of having all the questions on one page, use a progress tracker (shown above with step 1, step 2, etc.).

 

This will let the user know what the current step is about, what the coming steps will be on, and make it easier for the user to concentrate on the fewer questions put in front of them.

7. Hiding contact information

Common Mistake

If you work for a company, you can probably find the analytics of how often users chat online or call through the call center.

 

Chances are, there are a lot of users that call because they get confused in your website or app. 

 

That’s because no product is perfect.

 

That’s why you need to make sure your users can reach out to someone when they’re stuck.

 

Because what’s the alternative if they can’t get help?

 

They quit.

 

An FAQ section is nice, but there are many users that don’t like having to sift through all the Q&A to find what they need, which is why they end up calling.

Do This Instead

Make the call center’s phone number, email, or online chat feature easy to find.

 

The company I work at makes it a rule to always have the phone number and online chat feature visible on the top right corner of the screen, but you don’t have to go this far.

 

For example, you can have a help button in the top, main navigation instead.

 

The main point is to make sure the user knows that they can get help when they really need it.


And if you don’t know if they’ll be able to find it, then conduct a user test to get proof.

8. Not showing loading animations

Common Mistake

It’s very easy to forget to anticipate for long loading times while designing the UI because you don’t experience the loading times until the application is developed.

 

What ends up happening because of this mistake is that users will get stuck waiting long periods of time for something to load, and because there is no loading animation telling them otherwise, they think the computer has frozen or the application has crashed.

Do This Instead

Although you won’t know for sure when these long loading periods will happen, talk to your developers on what they should show if the application is taking too long to load.

 

According to Jacob Nielson’s research, you should show a loading icon or animation between 1-9 seconds.

 

You don’t really need one if it takes less than 1 second to load, and if it’s more than 9 seconds, you might want to show a loading error (unless it’s anticipated that a huge file is loading).

 

If it’s a very large file, consider giving an estimate of how long it should take so that the user has a framework of time in mind. (The downside of this is that the user might think something’s wrong if the time goes over, so this is considered debatable.)

9. Forcing Users to Remember Definitions

Common Mistake

Oof, this one can be painful for users.

 

Let’s say you use a word in your website that’s not commonly used by users.

 

If you explain what it means on one page and don’t explain what it means again on another page that the user sees a few days later, they’ll probably feel lost.

 

They might not remember what the word means and will have to search all-around your website for that word’s definition.

 

Can you imagine if a tax website like Turbotax did that? 

 

You’d have to constantly Google every other word, which would be INCREDIBLY annoying.

Do This Instead

There are multiple ways you can tackle this.

 

You could define the word every time the user sees it (although this could get annoying for the user).

 

You can use what’s called a dejargonator that defines the words in a speech bubble when the user hovers over the word (like the example above).

 

You can also have a help bar or modal that can explain the word, but make sure the user can easily get to this without leaving the page.

More Resources

Free Templates

Articles

Related Posts

[convertkit form=1525239]
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback

[…] 9 UX Mistakes You Should Never, Ever Make […]

1
0
Would love your thoughts, please comment.x

Pin It on Pinterest