UX Workaround 101


This is a very common problem between customers and the seller, usually because of the interface for the interaction is way too hard to see it’s the actual purpose.

Cause

Contrast

Because the background and foreground are way too bright when compared together, the user may find it difficult for them to read the content of the interface without looking at it very closely.

Size

You've fixed the colors, or, there's no issue with it but the user still finds it difficult to read the content without looking at it closely. This might be caused by the size of your content if the content is way too small to be read easily, it may cause a few issues when the user is using your product.

Solutions

If it is because of the contrast, you may want to make the background/foreground darker, to make it much easy to be read.

How dark should it be?

As long as it's contrast ratio is above 4.5, you can stop there.

If it is because of the size, consider resizing your content to be a bit larger, to see if it’s much easier to be read.


This is another common problem, which still can be found in a lot of popular products.

Cause

You made a lot of useful features, but you want to make them easy to be navigated. However, the result is the opposite, which made the user take a longer time to navigate.

Solution

Reduce unnecessarily navigation, or combine them into one (if both is in the same category)


We’ve mentioned that sizing is important in case 1. However, you should use it carefully, misusing this powerful tool may cause a lot of issues with your product instead!

Cause

Your product was similar to case 1, so you decided to fix it with the solution listed but you do not know when to stop.

Solution

If that information is minor and does not require users to read it, consider resizing it and making it a bit brighter.


So, you decided to solve that messy product problem with the solution in case 2. However, now users are complaining about it’s being too hard to navigate.

Example

image

Cause

The navigation title does not represent its main purpose

Solution

Simply rename the navigation title to its main purpose, for example, if it is showing a dashboard, rename the title to Dashboard.

Example

image

Cause

The information the product supplied does not make the current action easier.

Solution

Rather than relying on your customer all the times, tell them what's wrong and how to fix.

A solution to the example above:

image

Now, this tells users that you forgot to put their username, rather than telling the user that it is not correct.


You followed every cases’ solution for your product, but it ended up having lesser sales. So, what happened?

Example

image

User expected response: What did I do?

Cause

You are unable to get users' attention to your product.

Solution

When they are finding a product that you are selling which has a discount. Show them it with a different text color which tends to get users' attention.

A solution to the example:

image


If you’ve read my previous tutorial on being a professional UI designer, you might be a bit familiar with this problem.

Example

image

The red color may get users’ attention, but it is mostly used to tell negative results.
And the blue color is mostly positive.

User expected response: Pressed Delete because of the color

Cause

  • Misleading colors
    As mentioned in the example above, the red color is mostly used to tell users’ a negative result

  • 2 same buttons, one is negative but both use the same theme color as the background color.

Solution

  • Consider using a color that is used to tell users’ a positive result, such as green, blue, purple, etc.
  • Make the negative button have no background color.

I am Nakogls, you can call me Nanako. I am a UI designer and a programmer. I have been designing UI for more than 3 years.

I find UI designing fun for me, as well as improving people’s design. I am here to solve UX issues, not to claim money :slight_smile:

If you have any issues with your current product, let us know by replying to this post!

24 Likes

Boomarking this, extremely useful!!!

3 Likes