11 Common Critical User Experience Mistakes and How to Avoid Them in Your Design

UX design is like with safety. Passengers won’t notice the lack of accidents, but they certainly will remember a bus collision, and even more so a train going off the rails or a plane crash. People will notice a lousy user interface design much more often than appreciate an outstanding one.

The conclusion for both designers and product owners is simple — first, do no harm. Avoid the most annoying mistakes. This should improve your website’s or app’s user satisfaction rates.

Here’s a list of common design mistakes prepared for you by the Netguru team. Make sure you or your UX design agency don’t make any of them.

1. Difficult to understand navigation patterns

It’s a common mistake that is quite easy to avoid, yet hard-to-find navigation or menu buttons have always been typical UX flaws. Although the term mystery meat navigation was coined 20 years ago for describing navigation links that are not visible unless you hover the cursor over it, the mistake can still be found even in recently redesigned websites, of which the worst examples were usually built with Adobe Flash.

You can imagine how annoying this may be on mobile devices, where you don’t even have a cursor to move. You can see some recent examples of mystery meat navigation here.

2. Hidden value proposition

Apart from being beautiful and impressive, websites and landing pages should do their main job — show the value proposition. While your team may be really into advanced features or the captivating product story, “what does it do for me?” is the most crucial question for the customers.

Make sure that the main headline explains the value and is visible at first glance. Your visitors have no time to search for it. If you are lucky enough, they clicked your ad or just found you in Google — don’t waste this opportunity. That’s why it’s so important for your visitors to learn what you do from the first impression.

There are many other ways to present your value proposition. You may add a video explainer or show the benefits of using your product with drawings or icons. If you’d like to play it safe, take a look at the market leaders in your sector and follow their example.

3. Crouching “log-outs” and hidden “delete account” buttons

This is very frustrating. Of course, you want your visitors to sign up for your product. That’s why you make it as easy as possible to register. However, you need to treat your customers with respect. You need to make logging out and deleting your account equally easy.

Hidden “exit” buttons are an effect of the designer’s negligence or the product owner’s greed. Whatever the motive, angry users will blame the latter. They will think you want to keep their data or pump up your stats on their expense.

Make sure you don’t make this cheap impression on anybody and remember about providing a comfortable way out of your app.

4. Top bar navigation on mobile design

Even if you are building your product for a very conservative or professional audience that uses mostly desktop devices, your web application has to work on mobile properly!

And this means replacing top bar navigation with a slide in the menu.

5. Unnecessary animations that take too long

Software users have always been anxious. They are getting even more anxious now. A lag hurts them. If an action takes too long, it means the software is crappy or the device is outdated. Each one is quite infuriating. Make sure you don’t make this kind of impression by making your UX animations too slow.

Research shows that the optimal speed of interface animations is somewhere between 200 and 500 ms, while all movements below 100 ms are just unnoticeable for the human eye. The new mobile generation needs applications to work even faster.

The animation speed should adjust to what the users are accustomed to, so it’s a good idea to track not necessarily your competition, but the most popular apps among your target audience — be it Facebook, Messenger, Instagram, Gmail, Slack or Snapchat.

6. Underestimating the power of spacing

The rule is called the grouping principle or the Gestalt law of proximity and was formed by the Berlin School of experimental psychology. It’s quite straightforward — whenever you place objects relatively close to each other, our minds will consider them a group.

This is a dominant tendency. The Gestalt law works even with objects that have different shapes, sizes or colors — if they are close to each other, the brain will consider them a group.

Some beginner designers don’t know the rule and will try to override the spacing with shapes or colors. This will create chaos in most users’ brains. Remember to use spacing wisely. You can read more about the proximity principle and other Gestalt laws in this post.

7. Pesky newsletter pop-ups

Once again, we have the product owner’s (or some other party’s) greed taking over. Of course, you’d like to maximize the conversion each visit. But you don’t want to sabotage the product at the same time.

You need to set your priorities accordingly. First of all, the product should be useful and appealing to the target group. Maximizing the promotional capacity is a secondary objective.

8. Broken form validation

A quality digital product needs an excellent database that stores clean records, as well as good protection against spam. Both goals are achieved by form validation, which is such an important question from the backend point of view that the UX is often neglected.

There are some validation errors that not only make it difficult but often impossible to use a service. I have encountered such a bug recently and it cost me 2 hours to perform an easy task in Polish e-bureaucracy. It was an infuriating experience.

Make sure your validation works appropriately. In more complex forms, the validation shouldn’t just appear when you click “Submit,” because it doesn’t help the user. Inline validation is a much better solution. However, it should work with some delay. Give your users some time before communicating the error. Use microcopy (small text explaining what input to type in) whenever necessary and communicate the errors in a clear but very polite way. Use words like “please” a lot ;)

9. Overusing transition elements

Functional animations are a great way of communicating actions to the user. Motion is understood intuitively and analyzed by different parts of the brain than static text, shapes, and color, which dominate interfaces. It also gives a real-life feeling to the digital world, as traditional buttons and switches move and click when we interact with them.

However, when using animations and moving elements, you need to be careful not to make any of these common mistakes:

A fade in animation is considered a good way of attracting attention to a headline or an image. It also shows continuity between the state before and after the action. However, you should be very careful not to overuse it. The content should be presented in a static form to be readable.

Each browser provides the user an option to scroll the viewable rectangle. Usually, you scroll from top to bottom, but at times you’ll also need this to move sideways. Often these elements are not very beautiful, which is why many designers try to replace them with custom scrollbars. Don’t do it. Your users are used to the scrollbars they have in Safari, Chrome or Firefox. It is unnecessary.

10. No clear feedback on an action

This is big. Your users need to get clear feedback whenever they add a product to their cart, rate something, add to favorites, copy a link to clipboard, or unsubscribe from a list. Not getting it will undoubtedly confuse, provoke additional customer service inquiries, and even make some of the users hate you when they find out that a meaningful action was not performed.

11. Lack of a proper information architecture

This a mistake that is the most difficult to avoid, since it’s not so easy to come up with a well-organized information hierarchy. However, taking some time and thinking about it is already a step in the right direction.

That is why you should think about it at the earliest stages of the design process. Information architecture (IA) is a complex science, and it’s much more challenging to fix an already broken IA in a working app than to build a healthy one from the start.

Your IA should put user satisfaction at the top — this is your primary business goal — provide the best value to the customers. If this works well, everything will come naturally.

Choose carefully if you’d like to use a hierarchical, sequential or a matrix IA; think about whether you’d like to group information by audience, topics, chronologically or just alphabetically.

Once you decide what system you’d like to use and what are your priorities for communication, you can adjust the navigation and search system.

That’s it. These are the 11 most crucial mistakes you should avoid. They may look obvious, but I bet that eliminating all of them will automatically put you in the top 20% of the best-designed websites or applications in your category. Take this list and walk through your plan, MVP or working product to check if you are making any of these mistakes.

If you need any additional help, contact Netguru, and we will happily help you with your UX design.

Originally published at https://www.netguru.com.