The power of user interface design is that it can make the difference between a very successful application and one that has no impact, or even worse, leaves a memorable bad impression on users. use!
When it comes to creating high-quality apps, all the little details are of vital importance.
That’s why I wanted to share some of the most common UI design mistakes and how you can fix or avoid them altogether. If you’re just starting your design career, being aware of these mistakes will be invaluable.
Every app is different, and there’s no one-size-fits-all recipe for creating the perfect look (if you know one, email me!), but this list is sure to help you come up with one. better designs.
It will also serve as a “checklist” of things you want to avoid when designing the interface. So, without further ado, here are ten UI design mistakes to avoid at all costs.
1. Unnecessary inconsistencies in your UI components
To ensure smooth and concise application, avoid using too many different styles. This will send mixed signals to your users! It’s important to repeat patterns and elements whenever you can. A consistent design will go a long way in building trust with your visitors and creating an enjoyable experience. In addition, it will help your users get up to speed with your application much faster.
To avoid inconsistencies, pay attention to the following:
- Use a consistent color scheme for elements like buttons, text, links, headers, footers, hover states, and more.
Consistent font styles for titles, paragraphs, links, and more
Use rounded or square corners for your application shapes:
Icons, maps, buttons, etc.
Constant line thickness:
for symbols, separators and any other lines you use. Every element that deviates in any way must have a reason to do so.
2. Use default drop shadow
Less is more when shading. I always advise against using them too much, otherwise you will end up with a very messy and noisy design. But if you must use them, follow these tips:
Don’t use the default drop shadow, it’s meant to be adjusted. Make it very subtle. Do not use black for the drop shadow as it is a very bright color, use a darker version of the background color instead. it will look more natural.
3. There is little difference between the main button and the secondary button
When working with apps, you’ll have a variety of actions that users can perform. It is important to give visual importance to key actions. All navigation is done through buttons, so you should make it easy for users to identify key buttons by bolding and highlighting them. Sub-actions are less visible, but still show up if the user searches for them.
Here’s how to distinguish between primary and secondary nodes:
Use different image weights for primary and secondary buttons. The button with the strongest visual weight will get more attention.
So use bright colors, bold text, and size to give visual weight to the main buttons. Do the opposite for sub-actions.
4. No text hierarchy
Text is the main unit of information content, which is why it should always be readable and organized. Properly formatted text makes it easier for users to absorb information.
Our job as designers is to organize this in the most understandable and comprehensive way. Here are a few things to keep in mind:
There are many contrasts between each title style:
Use size, weight, and color to differentiate each style.
To make the information hierarchy visible, always start with the title, the most important element of the page. Subtitles and other text should be significantly smaller, etc.
Use proper spacing and kerning.
To separate
5. Bad image
Sometimes icons seem like the “easiest” part of the design. Some designers even see them as an “additional” decorative element, when in fact they are also a fundamental element of a modern look. Especially on mobile, where icons are equivalent to buttons (just look at Snapchat), you’ll see an interface that’s mostly made up of icons.
That’s why it’s so important to choose the right “icon” that clearly communicates the meaning of the element and maintains a consistent style for the icons in your app. When it comes to icons, follow these tips:
Use vector/SVG for your icons. It’s the easiest way to ensure that your icons look sharp on any device or resolution.
Use a consistent style:
First, all your icons should be outlined or filled in. Also, make sure the line thickness and corner radius are consistent.
Make sure your logo message is clear. Want to design your own icons from scratch? Follow this step-by-step guide for the icon design process.
6. Elements are not sorted
I admit it, I’m a freak. But that’s only because once you discover the power of arranging things, you’ll realize that’s the key to making any composition beautiful and balanced. There are two basic ways to help you organize your interface:
a 12-column grid and a base grid. Both are invisible in the final design, but they are essential for a balanced look.
Many designers think that using grids can limit your creativity, and in a way, that’s true. However, if you’re just starting out as a UI designer, I think it’s important to learn the rules before breaking them.
Here are my top tips for alignment in UI design:
7. Low Contrast
Contrast is all about an image component. When you have low contrast between elements in your interface, all the elements will merge and you will have a dull and hard to read interface because everything looks the same. Low contrast means low usability. When it comes to contrast in UI design, follow these tips:
- Use contrast to direct the user’s attention through your interface. Eg:
Use high contrast colors for the call to action.
Use contrast to clearly separate different parts of your application. Eg:
Use different background colors to show a clear difference between header, body, and footer.
Use contrast to separate elements from the background. Eg:
Photos with text on top can be hard to read, so make sure your text is readable by having high contrast between the photo and the text.
If in doubt, use this website to check if you have enough contrast between the 2 colors.
8. Confusing forms
Forms are an important part of the user journey; they are used for login, registration, payment, etc. Therefore, it is important to provide clear instructions before and after submitting the form.
Here are some tips for designing forms:
Avoid using color alone to indicate errors. Always give actionable feedback to facilitate correct typing. If the form is too long, consider dividing the form into logical sections and displaying a progress bar to show what stage the user is at.
9. Bad touch target on mobile and tablet
Small touch targets are annoying because they can prevent the user from taking the desired action. We have all experienced the frustration of pressing the wrong button on our smartphone and having to wait while loading the wrong screen!
So when designing clickable elements, keep in mind that users are armed with different sized fingers:
Create finger-friendly targets, keeping in mind that the average width of an adult index finger is 1.6-2 cm.
Make your touch target at least 45-57 pixels wide. This will give the user enough space to hit the target without worrying about accuracy.
10. Use irrelevant or poor quality images
Your theme image helps tell a story, so choose an impressive image that will complement the story and look of your app.
Keep these tips in mind when choosing images:
Avoid irrelevant photos. Show photos related to your service or product. Use only high quality images.
Choose creative and realistic photos. Avoid fake or staged stock images.
10. Common UI design mistakes
Takeaway food
The ultimate goal of user interface designers is to create interfaces that are intuitive and aesthetically pleasing. It will create trust, leading to more conversions. Keep all these mistakes in mind as a checklist of what to avoid when designing, and very quickly you may find that you’ve mastered these design principles and don’t need this list anymore. . I really hope you found this tutorial helpful and that it helps you create more polished designs. Good design!
