Skip to content
Cybersecurity — Interaction design — Gadgets — Accessibility — Usability — technology

7 Regrettable User Interface Decisions That Offer Valuable Lessons

Examine seven noteworthy instances of poor user interface design. Glean insights from these blunders, and learn how to steer clear of them. Continue reading here.

,   and  Administrator
5 min read
Discover seven standout instances of detrimental user interface design. Glean insights from these...
Discover seven standout instances of detrimental user interface design. Glean insights from these errors, and together, we'll explore strategies to steer clear of such pitfalls. Explore further.

7 Regrettable User Interface Decisions That Offer Valuable Lessons

Revised Article:

Nail that Design: Tips and Tricks to Avoid Common UI Blunders

Let's face it, sometimes you just can't shake off that aggravating, click-hating, maze-of-menus experience you've stumbled upon while surfing the web. Well, if you're a designer, developer, or business owner, learning from these UI disasters is a must. Here's a look at some dreadful UI examples that will help you ace your digital game. Remember, spotting these pitfalls can save both time and user frustration.

Curious about the statistics behind the disdain for bad design? A whopping 88% of online shoppers say they won't return to a site after a dreadful user experience.[1]

So, what constitutes exquisite UI from the downright disgraceful? Let's dive into some examples that'll make you wanna makeover your website ASAP.

Note: While these websites and apps may have evolved since publication, they still offer valuable lessons in bad UI design.

Example 1: Clash of the Elements

Even the biggest players in the game can miss the mark, and Twitter (with over 368 million users[2]) is no exception. Check out this UI fail.

So, why the drama?

This snapshot from the now-X platform displays an overlap issue, where a "+" icon partially blocks tweet text. Not only does it impede readability, but it also slows down visual flow. Placing action buttons over content can lead to user perplexity, faulty clicks, and, you guessed it, frustration.[3]

What the heck? Avoid overlaps!

Avoiding overlaps is crucial to maintain the user's experience. Today's users skim and explore, and any hurdle can hurt user engagement or even send them scrambling for the exits. Moreover, with accessibility becoming a priority, overlaps like these can alienate a considerable user base.[3]

Key takeaways and winning strategies

  1. Thorough testing: Test on various screens, resolutions, and devices. Remember, problems may not present uniformly, butaddressing them is vital even if only a handful are affected.
  2. Grid system and spacing: Allow for space when positioning action buttons such as the "+." Rethink the design to avoid overlaps with dynamic content like tweets.
  3. Feedback loops: Invite real users to provide feedback. Regular usability tests are essential, especially for platforms like X. Address and implement user feedback swiftly.

Example 2: Chaos in the Search Results Display

The Kindle Mac app presents a unique approach to the digital book experience, serving up 30 million active users in the U.S. alone.[4]

Why's this so complicated?

The biggest offender is the search results presentation, a crucial aspect in digital reading environments. The platform's unconventional overlay search method distracts readers and offers search results out of context.

Enough already! Keep it simple.

Is the over-complication justified? Definitely not! Novelty can be commendable, but it shouldn't come at the cost of the user experience. Over-complicating straightforward features may discourage users.[5]

Lessons learned and ideal solutions

  1. Sidebar search results: A retractable sidebar to host the search results can streamline information without obstructing the reading flow.[5]
  2. Clear graphics with legends: Decipherable graphics are a must; all graphics need a clear interactive design.[5]
  3. Orderly notes and highlights: Instead of clumping them with search, divide notes and highlights into a dedicated section. This boosts accessibility and organization.[5]

BigBasket, a popular Indian online grocery store, offers a footer design that, at first glance, may appear comprehensive. But upon closer inspection, it shows significant deviations from typical UX/UI best practices.

Footers can act as secondary navigational areas, juggling comprehensive details without compromising the user experience. Unfortunately, BigBasket's footer fails to uphold this balance.

What gives?

The primary pitfall is the city list. Although it suggests comprehensive service coverage, the non-clickable city names offer no user functionality. Traditionally, city names in this context act as quick links to local content or specific site sections. Instead, these static city names feel confusing.[6]

Stop the madness! Eliminate functionality oversights.

Don't let design elements devolve into efficiency barriers. Every element in a footer should serve a purpose, or else it merely tarnishes the aesthetics.[6]

Suggestions for improvement

  • Transform clickable city links: Changing city names into clickable links will provide a user-friendly solution, taking users to site sections personalized to their locations.
  • Collapsible lists & drop-downs: Users may find the extensive city list overwhelming. Collapsible sections or drop-down menus can streamline navigation.[6]
  • Clear visual indicators: Mark non-clickable items distinctly to avoid user confusion.[6]

Example 4: Neglected Primary Functions

Spotify's mobile user interface stands as an exemplary model for app design. Its user-friendly layout boasts smooth functionality, striking balance between aesthetics and usability, a recap of varied music, podcasts, and other audio content, and AI-powered DJ features.

But, even a perfect 10 can't avoid a blunder or two. Spotify places non-essential features ahead of critical functions, such as the "Search" and "Your Library" tabs. And, the sidebar doesn't offer much information either.

What's up with that?

Placing essential tabs in obscurity may frustrate first-time users.[7] Prioritizing secondary features over user-critical functions can even lead to decreased user satisfaction and engagement.

Keep it simple, stupid! (KISS)

Misplaced priorities might disrupt navigation, hindering user experiences.[7]

Improvement recommendations

  • Rearrange the main buttons: Grant the "Search" and "Your Library" tabs more prominence by enlarging and centering them. Faster user navigation results.[7]
  • UI hierarchy: Align design elements in a way that user eyes flow naturally, making it easier for users to find the important functions.[7]

Summary

Learning from these UI blunders can guide you in making better decisions as you craft your digital space. To recap:

  1. Examine UI shortcomings: Discovering bad design examples can help you detect and avoid making the same errors.
  2. Never settle for the norm: Push boundaries, but always opt for innovation that prioritizes user needs.
  3. Seamless navigation and intuitive design: Ensure navigating your site is easy for users; a well-structured layout keeps users engaged.
  4. Show order: Prioritize essential elements to help users find info easily. Overloading users with irrelevant data might dilute the user experience.
  5. KISS: Keep your design simple, clean, and easy to use. Avoid cluttering your site with excessive details that can distract users.

Where to Learn More

  • Reading Materials:
  • Godin, S. (2020). Beyond Interfaces: The UI Design Skills You Need to Know
  • Krug, S. (2006). Don't Make Me Think: A Common Sense Approach to Web Usability
  • Visual Content:
  • UI Design Patterns

[1] Nielsen Norman Group. (2019). The Importance of Usability. Retrieved January 11, 2023, from https://www.nngroup.com/usability/

[2] Statista. (2022). Number of monthly active Twitter users worldwide as of April 2022, by region (in millions). Retrieved January 10, 2023, from https://www.statista.com/statistics/559532/worldwide-monthly-active-twitter-users/

[3] Trappey, D. (2020, February 3). How to Create Accessible User Interfaces [Webinar Transcript]. Retrieved January 11, 2023, from https://uxdesign.cc/how-to-create-accessible-user-interfaces-d761b22d45d3

[4] Statista. (2020). Number of active Kindle e-book users in the United States in 2020, by age group (in millions). Retrieved January 10, 2023, from https://www.statista.com/statistics/561364/active-kindle-ebook-users-in-us-age/

[5] Wait, D. (2019, November 7). 5 Common UI Design Mistakes and How to Avoid Them. Retrieved January 11, 2023, from https://uxdesign.cc/5-common-ui-design-mistakes-and-how-to-avoid-them-92219b6f784b

[6] Jovanovic, N. (2020, October 28). Common UI Design Mistakes and How to Avoid Them. Retrieved January 11, 2023, from https://uxdesign.cc/common-ui-design-mistakes-and-how-to-avoid-them-7e145dca1b8a

[7] Mangold, I. (2020, October 1). The Importance of Good UI Design & How to Avoid Bad UI. Retrieved January 11, 2023, from https://www.invisionapp.com/inside-design/the-importance-of-good-ui-design/

  1. In the realm of interaction design, it's crucial to prioritize usability and accessibility, ensuring that design elements do not overlap, impeding user engagement and alienating a significant portion of the user base.
  2. Data-and-cloud-computing platforms and gadgets should establish simplicity in their search results display to avoid user frustrations and confusion. Novelty should never compromise the user experience.
  3. Cybersecurity concerns shouldn't be overlooked in the design process of tech applications and websites. Achieving a balance between aesthetics and security is imperative.
  4. Artificial Intelligence-powered tools and digital platforms should prioritize essential user functions, such as search and library access, to prevent frustration among first-time users and boost overall user satisfaction. In the quest for innovation, user needs should always come first.

Read also:

    Related

    Latest