Back

6 Examples of UI/UX Design Mistakes and How to Avoid Them

6min
1

Hi, this is Diana Bartkowiak, UX/UI designer working at Synebo. Today, the demand for professionals is growing, and Jooble gets more and more offers for designers every day. However, the bigger market, the bigger competition. To stand out, you need to be a real expert, and today we’ll help you be the one.

This article will shed light on some apparent mistakes that professionals usually make when implementing user interface and user experience design. Specifically, you will have an opportunity to entangle various design tips that would be very useful in creating a modern and friendly UI/UX. So get ready for the images stream!

Solution №1: Group similar

Let’s start from a common situation when the form to fill in is enormously prominent, making developers and users want to die

2

The triсk is very simple. First, you have to split the form into two logically related blocks. For example, personal information in one block, information about an account in another block, and so on ad infinitum, depending on how long the form is to be done.

3

The mini-lifehack! The form will be easier to comprehend if you align the labels, not to the center of the structure but at the same time apply the principle of “group similar” to them. Well, of course, it would be great not to forget about examples in placeholders. But, again, this is a manifestation of concern about users.

Group similar (more!)

It works almost according to the same principle, but the relationship may seem less obvious. However, generally speaking, this is just a super-cool design feature. Doesn’t сlient like a business card? Voila! He likes it with the one-pixel line. Does the text on the banner look boring? Once again, the line makes it look different. When you have to split some information from each other, of course, the line will help you in this overpowering mission.

4

Solution №2: Create a horizontal list

Selection is a painful topic. You need to offer a user to select necessary information. Nonetheless, it would be great to do this less painfully, isn’t it? One excellent solution for this issue is currently used even in Lightning, which is a horizontal select. Usually, it works in case there are no more than five options. Anyway, it’s worth it.

5

When life forces you to use a drop-down, there is still a possibility to simplify the user’s life. Regarding other input fields, you may use the same method when designing. What about a field for a “city”? For instance, you may offer a user to choose the capital of the selected country. At the same time, this placeholder will be the most advantageous in this case.

6

Solution №3: Focus on the leading element

I had a very gifted trainee at my previous job, who made a banner of “incredible beauty” when I was absent. After this incident, a very capacious expression, “crazy carnival,” appeared in our everyday life. You can only imagine how awful this banner was.

In fact, everything is effortless. There is just one crucial element, and the rest is only complementary. Only one catchy and colored piece should be illustrated. The rest is … less flashy.

7

Color accents quickly help to understand information or realize what kind of action is required at the moment, which, accordingly, reduces cognitive stress. This would be very useful, especially in our complex, oversaturated information era.​

8

Here is another example of color hierarchy that shows how without reducing the font and making something LARGE or BOLD, highlight elements or make them secondary instead.

9

Solution №4: The correct alignment

Or how to make a table look fantastic and not die in agony

10

First of all, to get rid of torment, it is necessary to remember that secondary elements can be represented in a lighter style and won’t be an eyesore anymore.

And, of course, you don’t have to do alignment throughout the table. Some columns are more readable with alignment to the side.

From this example, the names of employees are aligned to the left side. Sometimes reading and comprehending with the proper alignment is more convenient. For example, skimming through the column with sums makes it much easier to distinguish the smallest or the most considerable amount in the second example.

“Dates” can also be made easier for perception if you make them look decent. And if they are responsible for different sorts of information, you should also consider and reflect this – as in the example, one of the dates is a deadline, and the other is the date of adding a record.

When they look the same, you have to think about each line, comparing and picking out the information. This slows down the process of reading the table and shortens the life of users. But, of course, you can use this knowledge if you hate people.

Well, the cherry on top is the carnival itself … you should refuse using it with no regrets, leaving the interaction only on the required line.

11

Solution №5: Diversify your UI buttons

Let’s imagine that we have an interface. In this interface, users can register, make an order, send a request, or whatever.

12

And after all, there is only one button, “send,” for all these purposes. It’s not nice… Yes, indeed, it’s not pleasant. But you can always do it well. First, you have to tell the user what will happen next.

What will he achieve by clicking on this button? What can he expect from filling out the form? He may create his account in a database. That’s what we put in our UI. You do not have to think up anything unless you are a copywriter, and you generate the coolest micro-texts that increase the button’s conversion by 300%.

I do not know what about you, but I am not that kind of copywriter. So, therefore, I use the simple method I’ve just described.

Solution №6: Focus on what matters

In the built-in text editor on Mac, the toolbar usually does not fit into the screen in width. And the brilliant solution is … not to consider this a problem.

13

Very often, during the development process, we spend a lot of time thinking about some details, which can be insignificant. Therefore, facing these problems and the necessity to provide some unique solution for them, it is worthwhile first to see what will happen if nothing to done about it.

Nonetheless, it helps to get rid of unnecessary stress. In addition, almost all the time, it works. Well… at least for Apple. As regards the Empty States, you may check it here.

Final Thoughts

That’s it! Now you can consider yourself as a guru of UI/UX design. If you have any questions, leave the comment below or email us at contact@synebo.io.

All links on sources check in our presentation on Slideshare.

Table of content
6 Examples of UI/UX Design Mistakes and How to Avoid Them Solution №1: Group similar Solution №2: Create a horizontal list Solution №3: Focus on the leading element Solution №4: The correct alignment Solution №5: Diversify your UI buttons Solution №6: Focus on what matters Final Thoughts
articles You might be interested in
How to run a Salesforce Health Check
18 Apr 2024
How-to Guides and Tutorials
How to Run a Salesforce Health Check
Yana Pushkar
Yana Pushkar
16 min
A comparative analysis of managed vs unmanaged package Salesforce
15 Apr 2024
Salesforce development
A Comparative Analysis of Managed vs. Unmanaged Package Salesforce
Synebo
Synebo
13 min
How much does it cost to hire a salesforce consultant
08 Apr 2024
Salesforce development
How Much Does it Cost To Hire a Salesforce Consultant?
Andrii Kliuchka
Andrii Kliuchka
12 min
What Is the Difference Between Marketo Engage and Salesforce Marketing Cloud?
01 Apr 2024
Salesforce development
What Is the Difference Between Marketo Engage and Salesforce Marketing Cloud?
Synebo
Synebo
8 min
Salesforce B2B commerce cloud
29 Mar 2024
Salesforce development
Salesforce B2B Commerce Cloud: Benefits, Features and Implementation
Synebo
Synebo
8 min
Salesforce Sales Cloud vs Salesforce Service Cloud_ What’s The Difference
25 Mar 2024
Salesforce development
Salesforce Sales Cloud vs Salesforce Service Cloud: What’s The Difference?
Synebo
Synebo
10 min
Best ways to use chatgpt in Salesforce
20 Mar 2024
Salesforce development
Best Ways to Use ChatGPT in Salesforce
Synebo
Synebo
8 min
Why saas compnies need salesforce
19 Mar 2024
Salesforce development
Why SaaS Companies Need Salesforce
Andrii Kliuchka
Andrii Kliuchka
11 min
Salesforce Marketing Cloud account engagement vs marketing cloud
14 Mar 2024
Salesforce development
Marketing Cloud Account Engagement (Pardot) vs Marketing Cloud: What’s the Difference?
Synebo
Synebo
9min
Salesforce-Marketing-Cloud_-2-scaled
26 Feb 2024
Salesforce development
Salesforce Service Cloud Implementation – Complete Guide
Olexander Orlуk
Olexander Orlуk
14 min
Complete-Guide-scaled
14 Feb 2024
How-to Guides and Tutorials
Complete Guide to Salesforce Testing
Yana Pushkar
Yana Pushkar
16 min
35
17 Jan 2024
What is Salesforce Experience Cloud, and What You Get From It?
Yana Pushkar
Yana Pushkar
10 min
1
05 Jan 2024
How-to Guides and Tutorials
How to Send Emails via Outlook API from your Salesforce Org
Anastasia Sapihora
Anastasia Sapihora
7 min
1
27 Dec 2023
How to Improve Your Business With Salesforce Custom Development?
Yana Pushkar
Yana Pushkar
7min
Salesforce Marketing Cloud
26 Dec 2023
Salesforce development
Salesforce Marketing Cloud: Complete 2024 Guide
Yana Pushkar
Yana Pushkar
11 min
1
22 Dec 2023
21 Best Nonprofit Software Tools to Enhance Your Work
Kristina
Kristina
16 min
1
17 Dec 2023
The Anatomy of Dynamic Programming [with Codes and Memes]
Olexander Oleksiyenko
Olexander Oleksiyenko
11min
Working with salesforce files: the basics
13 Dec 2023
How-to Guides and Tutorials
How to Work With Salesforce Files: The Basics
Olexander Orlуk
Olexander Orlуk
14 min
1
11 Dec 2023
Commerce Cloud B2B vs. B2C. What Is the Difference?
Yana Pushkar
Yana Pushkar
5 min
1
09 Dec 2023
What is Salesforce Flow, and Why Do You Need It?
Sergii Romashov
Sergii Romashov
5 min
15 Types of Salesforce Clouds
04 Dec 2023
15 Types of Salesforce Clouds
Yana Pushkar
Yana Pushkar
11 min
No image available
21 Nov 2023
How-to Guides and Tutorials
How to Get Listed on Salesforce AppExchange
Yana Pushkar
Yana Pushkar
12 min
No image available
14 Nov 2023
Salesforce development
20 Questions to Ask Your Potential Salesforce Implementation Partner
Andrii Kliuchka
Andrii Kliuchka
12min
Cover and internal images for blog post the role of communication in outsourcing teams
07 Nov 2023
Salesforce development
Mastering Communication: Strategies for Collaborating with Salesforce Development Outsourcing Team
Pavel Vehera
Pavel Vehera
13 min
Tips for choosing the right salesforce consulting partner
31 Oct 2023
Salesforce development
How to Choose the Right Salesforce Consulting Partner?
Pavel Vehera
Pavel Vehera
11 min
1 (1)
24 Oct 2023
Salesforce development
How to Build an App for Salesforce AppExchange
Yana Pushkar
Yana Pushkar
14 min
36
02 Aug 2023
Salesforce Implementation: Main Challenges and Best Practices
Yana Pushkar
Yana Pushkar
14 min
image (1)
30 Jul 2023
All Whats and Whys of Ecommerce Automation With the Power of Salesforce
Alina
Alina
4 min
1
20 Jul 2023
CI/CD: Transforming Salesforce Development with DevOps
Alina
Alina
16min
33
31 May 2023
How and Why to Use Salesforce for Nonprofits?
Alina
Alina
6min
1
27 Apr 2023
Main Benefits of Classic to Lightning Migration
Alina
Alina
4min
1
27 Apr 2023
Salesforce Sales Cloud from A to Z
Alina
Alina
6min
1
30 Mar 2023
Salesforce Licenses: How to Understand and Choose?
Alina
Alina
6min
1
04 Mar 2023
What is Salesforce Product Development Outsourcer (PDO)?
Yana Pushkar
Yana Pushkar
5min
1
25 Jan 2023
CMS Hub: The Guide to Managing Your Website
Kristina
Kristina
10min
1
06 Dec 2022
5 Examples of the Best CRM for Nonprofit Organizations
Alina
Alina
5min
1
04 Nov 2022
What Is Hybrid Work, And How to Make It Work?
Alina
Alina
5min
1
24 Oct 2022
Social Media CRM, or How to Get Closer to Your Customers
Alina
Alina
4min
1
27 Sep 2022
Hows, Whys, and Whats of AI in CRM
Alina
Alina
4min
1
30 Aug 2022
What is Beneficial in CRM for Nonprofits?
Kristina
Kristina
7min
1
05 Aug 2022
Salesforce Security in Plain Words
Alina
Alina
7min
1
20 Jul 2022
How to Manage Remote Teams Without Controlling
Synebo
Synebo
9min
1
11 May 2022
How to Reduce Customer Churn Using Salesforce?
Kristina
Kristina
14 min
1
08 Apr 2022
We Help Ukrainians Take the Salesforce Developer Course
Kristina
Kristina
4min
1
24 Jan 2022
Hybrid App Development: Top 3 Frameworks for 2022
Synebo
Synebo
5min
2
17 Dec 2021
Ecommerce Business Automation: the Ultimate Guide for 2022
Kristina
Kristina
19min
1
02 Dec 2021
How to Choose a CRM System for Your B2B Company?
Adelina
Adelina
18min
1
10 Aug 2021
How to Find the Best Company for Developing Your Org in Salesforce
Synebo
Synebo
3min
1
29 Mar 2019
4 Reasons Why You Shouldn’t Be Afraid of Outsourcing Software Development
Synebo
Synebo
4min
1
28 Jul 2018
3 Steps for Salesforce App Development Lifecycle
Synebo
Synebo
4min
phone