I reviewed 100+ user interfaces this year.

Avoid the most common 18 mistakes to make your UI/UX design better 👇
1️⃣ Poor contrast

It happens when your text is hard to read on background because you've chosen the wrong color.

Look at the attached example. 🧐

You might not even notice the "My Quotes" label at the top.

Related tweets

Example of poor text contrast
2️⃣ Many primary buttons

It's considered good practice to have one primary action per page.

You CAN have many buttons, but one of them should be primary.

In the example below two buttons stand out equally and it's hard to decide what button the user should click to. Two primary buttons at the same time
3️⃣ Small clickable area

This one is crucial on mobile devices. And important for desktop as well.

Add an invisible area for elements that is hard to hit.

Related tweets:

4️⃣ Poor paddings

Very popular mistake. Happens often when using cards.

Just give the content a little bit more room to breathe. Wrong paddings
5️⃣ Icon inconsistency

This one happens when you use icons from different collections.

You may end up with icons that are:

- Colored
- Black & White
- Thick
- Thin
- Flat
- 3D

Which will result in inconsistency and look clumsy.

Related tweet:
6️⃣ Text hard to read/scan

Nobody likes to read long texts. Especially if they are poorly formatted.

Few tips:

- Remove what should be removed, keep it short
- Use headlines
- Break text into paragraphs
- Use lists
- Supplement your text with RELEVANT images How to fix text that is hard to read
7️⃣ Wrong alignment

This one is easy to avoid. Just keep an eye on how do you align items.

Columns/Grids might help here. Wrong alignment
8️⃣ Not enough whitespace

This one happens almost in every UI. But this one is tricky.

On the one hand, you should have enough "air".
On the other hand, related elements should go together.

The key here is to keep balance and have some taste. There is are no strict rules.
9️⃣ Poor validation

This is a complex topic.

Good news is that you can avoid most validation problems by reading this tread



The thing is that there ARE some rules, and if you stick to them, you can eliminate most problems with validation.
1️⃣0️⃣ Proximity violation

The law states: "Objects that are near, or proximate to each other, tend to be grouped together".

Take a look at the attached image and how to fix that.

Related: An example of fixing proximity
1️⃣1️⃣ Long text lines

Remember that text lines that have more than 50-70 characters are hard to read.

It happens because when you return to the beginning of the text, you might start reading the same line instead of the next one.

Related: Long text lines
1️⃣2️⃣ Redundant text

This one happens when you follow some patterns like there HAS to be a headline, a description, a button. And all of them have the same message.

Or if you put obvious hints or too wordy messages. An example of redundant text
1️⃣3️⃣ Poor quality of screenshots

Quite often I see logos that are not in SVG but in PNG/JPEG.

It's alright but remember that they should be suitable for the retina.

If you put 50x50 jpeg as your logo, it'll look pixilated & low quality. High vs Low quality of images
1️⃣4️⃣ Small font-size

The minimum font-size should be 16px in my opinion.

Don't be afraid to enlarge text.

Some sites have one sentence that takes the whole screen.

And that's totally okay. Example of large font size on landing page
1️⃣5️⃣ Taking full width when it's not necessary

You don't need to stretch your form elements or text to the full size of your screen.

There is no such a rule.

Let it take just enough space. An example of taking full width when it's not necessary
1️⃣6️⃣ No hovering state

When users hover on some element it should react if users can do something with it.

The most common example is buttons.

Related tweet:
1️⃣7️⃣ Poor shadows

If you're not sure if your shadows are good or not, just take them from a popular site or from a collection of shadows in some of the CSS frameworks.

It happens quite often that they don't look good.

Related tweet:
1️⃣8️⃣ Layout shifts

This is more a usability issue. This one happens when the user does not expect any changes in your layout, but they happen.

Random popups, ads, and all that stuff.

It might be a subtle shift, but still a bit annoying.

Related tweet:
I didn't expect THAT traction here. 😳

Guys, I also have a newsletter. I don't sell any ads here, usually send more or less the same stuff as on Twitter.

You're welcome. 👇

user-interface.io

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Victor

Victor Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @vponamariov

21 Jul
20 UI/UX Mistakes that KILLS your usability 😵

In no particular order 👇
1️⃣ Aesthetics Over Functionality

Everything in this world needs balance.

If you try to make something look very good but not usable - 👎

If you try to make something usable that doesn't look good - you'll have a product for developers 😅
2️⃣ Content Placement

There are some established patterns of content placement.

Hero sections, navigation, search, logout link, etc.

If you don't follow them at all, users will struggle to find what they're looking for.
Read 21 tweets
20 Jul
TOP 10 UI/UX Designers to Follow on Youtube.

My own curated list 👇
1️⃣ Pablo Stanley

This is an absolutely amazing guy!!!

He is everywhere, his work is awesome and he is 100% the MOST outstanding person in design!

Youtube: youtube.com/c/SketchTogeth…
Twitter: @pablostanley Crazy Pablo Stanley
2️⃣ Charli Marie

One of the first designers I watched on YouTube. She can talk about design non-stop 😅

By the way, she is the creative director at @ConvertKit!

Youtube: youtube.com/user/charlimar…
Twitter: @charliprangley Beautiful Charli Marie
Read 12 tweets
17 Jul
7 ways to earn money as UI/UX designer 💰

🧵Thread
1⃣ Consulting

An example of consulting is doing UI/UX reviews as I do.

You can help solo founders who are starting their own products.

You can as well provide consulting for big companies as a part-time job too.
2⃣ Teach UI Design

🔸You can sell your courses on @udemy or @skillshare or any other similar platform.

🔸You can sell your courses or books on @gumroad.

Take a look at @steveschoger and @adamwathan. Their book brought them more than a million dollars, afaik.
Read 11 tweets
15 Jul
Collection of 55 Figma plugins curated by my cat 🐈

Sorted by the number of installs.

🧵
Content Generators

1. Content Reel (291k)
2. Lorem ipsum (290k)
3. Charts (174k)
4. Datavizer (35.1k)
5. Random Name Generator (17.4k)
6. Faker (6.9k)
Images/Pictures

1. Unsplash (555k)
2. Mapsicle (144k)
3. Isometric (115k)
4. Logo Creator (64.8k)
5. BrandFetch (63.5k)
6. Stories (49.6k)
7. Vector Maps (17.8k)
8. Movie Posters (5.6k)
Read 13 tweets
22 Jun
UI Lesson 🔖

The search input might not be that easy as you think.

Here are some tips and tricks on how to properly make it.

🧵👇
1. Place the search input in a reasonable place.

The most common place is somewhere in the header. Users should be able to easily find it. Image
2. Do not hide it under an icon.

❌ It makes it harder for users to find where the search input is

❌ It requires an additional click for revealing the input Image
Read 7 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(