We all learn from mistakes, and this rule applies to web designers as well. In this article, we will tell you what mistakes many of them make when creating user interface design.

10 UI Mistakes

It can be difficult to follow generally accepted rules in the creative work of a web designer. Indeed, it’s much more convenient to know "how not to do" and be guided by this. That's why we decided to put together a list of the worst mistakes in UI design.

UI Blunders: Please, Don't Do This

Wanna know what mistakes even experienced UI designers make? Then welcome to our top 10!

#1 – Grey text on colored backgrounds

Each of us has experience using web applications and visiting websites in open areas, under direct sunlight. And everything would be fine if the contrast of the font with the background allowed us to recognize words and numbers. However, most webmasters forget about these nuances for some reason. As a result, mobile users are forced to cover the screen with their hands or go into the shadows to somehow cope with the situation. Think twice before choosing a solid background for a gray font.d

 Solid background selection illustration
EXAMPLE TAKEN FROM  "REFACTORING UI" BY WATHAN A. AND SCHOGER S.

#2 – Filling the whole screen

Sometimes little doesn't mean bad. When some web pages end up with a minimal amount of content, it's not always wrong – the main thing is to distribute it evenly. Conversely, some webmasters are wary of free space and try to clutter it up by choosing larger fonts and stretching banners and images. It often turns out to be ridiculous. Don't be like these webmasters, leave some space if there is not much content.

Authentication illustration
EXAMPLE TAKEN FROM  "REFACTORING UI" BY WATHAN A. AND SCHOGER S.

#3 – User-uploaded content

It's not always a good idea to let users of your website upload graphic files to public web pages on their own. There are many reasons for this – from the low resolution of these images to inappropriate content. Therefore, before opening this option for your target audience, take care of the integration of moderation algorithms.

Common UI mistakes in interface. Apartment selection illustration
EXAMPLE TAKEN FROM "REFACTORING UI" BY WATHAN A. AND SCHOGER S.

#4 – Overloaded style

We have already said a lot about the excess of elements on web pages. We will only highlight the need to follow the rule "less is more", especially when it comes to experimental web design that is built from scratch. Remember that this can not only look unattractive but also confuse users.

Common UI mistakes in interface Common UI mistakes in interface. Apartment selection illustration. Second example
EXAMPLE TAKEN FROM  "REFACTORING UI" BY WATHAN A. AND SCHOGER S.

#5 – Bad font

Let's talk about the experimental fonts, that some webmasters use to emphasize the originality of their creations. First, they often "float" on non-standard sized user devices. Secondly, when using a non-unique font, you run the risk of making a pathetic copy-paste of someone else's design, and all because your work will be recognized by the font. That's why it's often better to choose something neutral when it comes to choosing a font.

Common UI mistakes in interface. Bad font
EXAMPLE TAKEN FROM  "REFACTORING UI" BY WATHAN A. AND SCHOGER S.

#6 – Uninviting CTAs

Another common problem is the blind desire of webmasters to minimize the number of CTA words that they place on buttons and other small format elements. As a result, calls to action look insecure, and everything that is written there turns out to be completely unattractive to users. That's why it's sometimes worth considering adding a bit of space and letting content managers get smart when writing CTAs.

Common mistake in UI interface. Uninviting CTAs
EXAMPLE TAKEN FROM  "REFACTORING UI" BY WATHAN A. AND SCHOGER S.

#7 – No social proof

Many of us, when choosing products, were led to some kind of laboratory research or customer reviews given as social proof. Do not neglect these "facts" when designing a website that sells them. This will add confidence to potential buyers that they have made the right choice.

Common mistake in UI interface. No social proof
EXAMPLE TAKEN FROM  "REFACTORING UI" BY WATHAN A. AND SCHOGER S.

#8 – Too much text

Websites with an abundance of text content are one of the unspoken trends of the late nineties when the Internet was in its infancy. In turn, today infographics have replaced this trend, as they can explain the vast majority of complex things in an accessible and understandable way without creating unnecessary trouble for users. That's why it's better to look for a designer to create informative images for your website than to force your users to read a lot.

Too much text
EXAMPLE TAKEN FROM  "REFACTORING UI" BY WATHAN A. AND SCHOGER S.

#9 – Too complex navigation

Difficult navigation is a disadvantage of mostly Asian websites. Honestly, we don’t know why their creators like to confuse their users so much. Therefore, we insist on properly structuring the functionality – so that even those who don’t know the local language can figure out what to do without the help of Google Translate.

Common mistake in UI interface. Too complex navigation
EXAMPLE TAKEN FROM  "REFACTORING UI" BY WATHAN A. AND SCHOGER S.

#10 – Poor padding and spacing

And finally, the worst problem is when web designers don't bother with proper spacing and padding between interface elements. As a result, even adaptive and responsive layouts may be unusable, as text content on small format devices is so microscopic that it’s impossible to read it without zoom.

Poor padding and spacing
EXAMPLE TAKEN FROM  "REFACTORING UI" BY WATHAN A. AND SCHOGER S.

Final Words

Of course, we have not listed all the typical mistakes that webmasters face when creating user interface design. But we hope that our list will save you from the most annoying ones. So, get inspired and – go ahead to achieve new heights in web design!