Common Design Mistakes to Avoid [and how to overcome them]

In my experience as a designer, I have seen quite a few mistakes made by both new and experienced designers (I too made them). I'll discuss the most common mistakes I have seen. This article will guide you through a maze of design blunders to avoid that can bring even great products down.

With the knowledge gained from these examples, you'll be better prepared to avoid these errors and create user experiences that stand out, keeping users entertained and ensuring your work doesn't end up as a cautionary tale. Let's dive in, explore where others have stumbled, and discover how to create exceptional designs!

‍

🕵 Reinventing the Wheel 

Ever noticed how the race toward being innovative sometimes trumps the essentials like efficiency and practicality?

For example,

- Facebook's switch from tabs to hamburger menus 🍔

- Web pages with horizontal scrolls ↔️

To ensure you're not just "reinventing the wheel," consider these tips:

1. Identify the critical elements that make your product truly stand out and focus on polishing them.
2. Scope out the competition before hitting the drawing board.
3. Stick to tried-and-true UI practices, taking a detour only if your idea improves things by at least 3x.

Avoid getting lost in the innovation maze, and strike a balance that works for users and your product!👌 

Courtesy: Julie Zhou

‍

🗂 Focusing heavily on how it looks, not how it works

As UI designers, we know how easy it is to get wrapped up in creating a gorgeous interface. But looks aren't everything!

😖 The dreaded "broken design" happens when input data messes with our carefully crafted layouts and aesthetics. But don't shy away from these broken scenarios. Embrace them as a necessary part of building a flexible, scalable, and user-friendly product.

🤔 Imagine your mockup shines with a six-letter first name. But what about users with *ahem* Prabhakarna Sripalawardhana Atapattu Jayasuriya Laxmansriramkrishna Shivavenkata … Iyer's credentials?

💪 Test, test, and test again. Ensure your design adapts to various use cases, not just the picture-perfect ones. Keep the balance between form and function in check for a seamless user experience. 

Courtesy: Danny Sapio

‍

🗣 Mixing up sliders, and dropdowns

Is your user struggling to hit that sweet spot between 5 and 7 on a slider? The blame's on you, designer.

👍 Sliders work wonders for qualitative values like brightness, volume, and colour pickers.

🙅‍♂️ But avoid sliders for specific numerical values – they're just plain annoying and ineffective.

Choosing the right component is key:

1. Dropdowns are great for multiple options (e.g., country or favourite Pokémon). 
2. Only a handful of options? Radio buttons or sliders can save the day.
3. Super long dropdown? Add a mini search or filter for speedier selections.

Remember, the right component leads to a hassle-free user experience! 🚀 

Courtesy: Will Grant's 101 UX principles

‍

🤝 Scrolls vs Pagination

Infinite scroll is popular in social media apps, where content loads asynchronously as users scroll. But is it right for every situation?

👎 Not suitable for content like messages, emails, to-do items, or search results. Lacking a clear beginning, middle, and end can overwhelm users.

🔢 Pagination, while seemingly old-school, offers benefits:

1. Helps users orient themselves in the content.
2. Remembers the user's position and displays the current page.
3. Defines the beginning, middle, and end of the content.
4. Allows users to reach the footer, since the page has an endpoint.
5. Simplifies narrowing down results using search, sort, or filter.

💡 Keep in mind: Pagination is well-suited for content with a clear beginning, middle, and end. 

When designing, choose your scrolling technique wisely for a smooth user experience! 

🪄 Neglecting Contrast

Not paying attention to contrast in your UI/UX design can result in elements merging, looking lifeless, and not standing out.

✨ Here are some tips to make the most of contrast:

1. Use high-contrast colours for call-to-action elements to grab attention.
2. Use different contrast levels between layouts to differentiate them and serve their purpose.
3. Remember that contrast is vital in distinguishing content and design elements. 

⚠️ Don't sacrifice accessibility just to fit text into a space or for aesthetic appeal. Consider users with vision impairments, and follow the Web Content Accessibility Guidelines (WCAG), which require a minimum 4.5:1 contrast ratio. 

👩‍🦯 Also, remember there are guidelines for motor, auditory, and cognitive disabilities to make your design usable for real people, not just for Dribbble likes.

Balancing contrast and accessibility will ensure a delightful user experience for everyone! 🌟

‍

Tool of the day

Stark

You can speed up accessible design with this helpful tool. This tool can just scan your Figma or Sketch files, and in no time, you'll receive easy-to-follow suggestions for fixing accessibility problems in your design.