38
29 Comments

6 Common UI Mistakes You Should Avoid

Hey indie hackers, I am a professional, full-time Product Designer. When working with clients and reviewing different sites/products, I see similar design mistakes made again and again. So, I've decided to compose this post to help you identify some of these UI pitfalls in your product and help you to avoid them in the future.

1) Inconsistent Design

Improvising at every stage of the design and overusing different styles leads to a messy and incohesive product. Make sure that you reuse components as much as you can and stick to one design pattern.

alt text

TIPS:

  • Establish a font hierarchy.
  • Be consistent with the line spacing.
  • Keep border radius the same.
  • Make sure that the images are of similar style.

2) Lack of Text Hierarchy

Not using styles to differentiate between different blocks of information creates a very busy looking screen, where different elements compete for the users' attention. By varying font-size, weight and colour you can guide users' attention to the most crucial information, thus making your design more scannable.

alt text
alt text

TIP:

  • Use size, weight and/or colour to visually distinguish between different text blocks.

3) Overusing Shadows

Heavy dark shadows make your design look very busy and noisy. Less is more when it comes to shadows.

alt text

TIP:

  • If using shadows, make them subtle by making them slightly darker than your background colour.

4) Different Iconography Styles

Using different iconography styles creates inconsistency and therefore looks unprofessional.

alt text

TIP:

  • Try to stick to one icon library, to ensure the same style. Otherwise, check that your icons have the same line thickness, roundness and tone.

5) Cluttered Layout

A common mistake is to have very little space between the different elements on the screen. Crammed content looks visually busy and is hard to scan through.

alt text

TIP:

  • Let your content "breath". As a rule of thumb, first, go overboard with spacing and then make your way down until it feels about right.

6) Low Contrast

The issue with low contrast issue is particularly common with buttons and text over the image. Low contrast makes certain text very hard to read as well as makes your design look dull.

alt text

TIP:

  • Make sure that the contrast between the elements is high enough for the text to be easily legible, when in doubt use this tool to check the contrast.

Thanks for reading, hope that this post was somehow useful to you.

If you want to read more practical and actionable UI/UX advice, you can sign up for the email newsletter that I am currently putting together.

Link: https://www.producthunt.com/my/upcoming/bitesize-design

Happy shipping everyone!

  1. 4

    This is good stuff! You should definitely be blogging about good design! You'll get a ton of traffic. 👌 or perhaps write a book.

    1. 1

      Thanks Tunji! I do plan to write more posts like this

      1. 3

        Great! This post actually deserves to be an article! https://www.indiehackers.com/learn

    1. 1

      Thank you! Means a lot to me.

  2. 1

    This was genuinely useful advice. Reminds me of the Refactoring UI stuff. Thanks for sharing. Will check out that newsletter of yours. :)

    1. 1

      Thank you @ptrei , Refactoring UI is great 👍

  3. 1

    Thanks Max.

    The beautiful thing about this article is its not a ton of reading. Simple headers for each of these 6 sections which tells me more in description. This is exactly the opposite to what the news website provide (not writing enough in the article titles to make user click/open the article). I love this kind of articles, Thanks.

    I disagree a little bit about over-shadowing case. In some websites we can't distinguish/identify some buttons because lack of shadow.

    Looking forward to your blog.

    1. 2

      Thanks @prakis! I guess I was talking here more about the aesthetics rather than UX. But it is quite possible that shadow might be used as a way to bake buttons more prominent.

      1. 1

        Got it. I sent a email regarding UX work.

        Suggestion, generally its a good idea to also include your twitter account linked to Indiehackers.

  4. 1

    Hey, that's very good points.
    I have just signup to your newsletter ( I stoped to signup to newsletter since month because I receive too many informations, but yours looks great)
    Good job

    1. 1

      Thanks Tim! thats awesome to hear

  5. 1

    Great work! Definitely guilty of many of those myself

    1. 1

      haha so many I know i'm guilty of too and have been on the to-do list for months.

    2. 1

      even designers are occasionally guilty of some of those ;)

  6. 1

    This is unreal advice thanks for sharing!

    1. 1

      Thanks Harry! glad you found it helpful

  7. 1

    Awesome 😍. Love it and signed up.

    1. 1

      Thank you so much ❤️

  8. 1

    Awesome work. Great article!

    1. 1

      Thanks for these kind words, I appreciate it.

  9. 1

    This comment was deleted 4 years ago.

    1. 1

      Thanks, Alex! I appreciate it.

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 49 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 29 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 16 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments