SpyreStudios

Web Design and Development Magazine

  • Design
  • Resources
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

4 Examples of Bad UI and How to Avoid Them

January 21, 2019 by Alex Fox

The easiest way to observe bad user interfaces is by keeping your eyes open. Every time you order something online, every time you visit a new website, every time you fill in a form, purchase a product or publish a post, think about how you’re being asked to perform that task. Where are the buttons located? Does one step lead smoothly into the next? Did I complete the task with a minimum of additional stress? Can I explain the process to a coworker over the phone?

You’d be surprised how often good UI can be summarized without looking at the device. Bad UI, however, gets sorted into the “impossible to describe” category that leads to plenty of unpleasant tech support calls dotted with cardinal directions and words like “upper-leftmost corner.”

If you want to avoid bad UI, just try to mimic the best you’ve found so far. That’s honestly the best low-budget UI tip you will ever get: pay attention to what the big guys are doing and follow along with the reasoning. Then, execute that same reasoning on your site.

Unreadable Color Combination

You can be assured a place in the annals of web design lore if you decide to break the most important rule of combining colors: they have to work together! You might think that red and green make a great color combination for your Secret Santa website brand, but that doesn’t mean the colors make for pleasant visual design. What works in a logo does not necessarily work at the scale of a website, a huge and variable document that the user interacts with at a level far beyond the interaction most media receives.

An example of effective use of color. The purple separates this ad from its white background, but the white text remain legible and sensibly sized. Perhaps a serif is an interesting choice.

We instead need to consider working with color combinations that are legendarily non-offensive, like black and white. Unless you have a compelling reason to stray away from black, white, and grey in your user interface, make sure you know exactly why you’re doing so.

A pop of color on a Submit button never hurt anyone, of course, but that same pop of color throughout the interface would surely be more confusing than appealing. When deviating from monochrome, set this standard for yourself: can I say this will cause no problems in usability and only add value? If not, you’ll likely want to reject that design option.

Misplaced Interface Elements

We rely on websites to instruct us in their function, and if they won’t do that, at least follow the rules we already know. But when you start changing the rules without telling anyone, that’s when you get into major trouble. If users cannot find your “Next” button, for example, then it’s in the wrong damn place! Depending on the layout of your website, the user has a subconscious expectation of where to find interface elements.

Put your buttons where the user expects to find them.

Did you put all the steps in the middle quarter of the screen, then jam the “Submit” button in the far bottom left, scrolled off the screen? That clearly wasn’t an intentional choice, but you need to know enough to fix that problem when you encountered it.

More importantly, you need to know that it’s important enough to fix. In the rush of building a website, so many “nice” things can get thrown by the wayside, permanently tabled for the cause of servicing more important functionality. And granted, that’s the way the business works. But these are the kinds of mistakes that can severely damage both the visitor count and the purpose of the site. Put your buttons where the user expects to find them.

Visually Confusing Design

There are plenty of websites that have deliberately circuitous design patterns to help trap the user longer, like IKEA does with their showrooms. Websites like Pinterest, Twitter, and Netflix are designed to keep you sucked into the critical conversion path for as long as possible. Even these interfaces, however, are not designed badly. They are instead designed with the priority of showing the user more content over the priority of allowing the user to choose their own destiny. And in many cases, that’s the correct choice.

Regardless, some options must be pre-decided for the user. That is, after all, what a product is: a series of design decisions made by someone that has taken physical form. The user doesn’t need to decide everything.

Systems that attempt to give the user infinite freedom must inevitably fall prey to the disease of the over-eager website. In wanting to do everything, you have actually accomplished nothing.

The best user interface, like all great designs, is invisible.

Interfaces that try to account for every possibility with a step of its own need to be redesigned dramatically. It’s the quickest way to a visually confusing layout or a layout that breaks the expected rules of website usability.

When you think ahead, do so by determining how to capture unlikely scenarios with catch-all buckets rather than individually routed cures. For example, treat blank required text boxes the same, regardless of their content. Highlight them in red if they are not filled in once the user presses “Submit” but don’t try to get cute with data detection or automatic formatting, which often causes more annoyances than anything else.

Textually Confusing Design

Changing the visual rules is bad enough, especially since most sites don’t have a very good reason to do so. It’s even worse, however, when you start throwing in verbal explanations that are either out of date, wrong, or ambiguously phrased. For most in-place microcopy on smaller websites, that’s exactly what you’re looking at.

In an effort to help your poorly-designed form to limp along with some degree of effectiveness, you added what you believed were clear, short sentences explaining how to do the work. The thing is, even using directions typically indicates a failure on the part of a form’s design, let alone needing them.

Inevitably, the text becomes outdated and contradictory as policies and patterns change. Do not expect these little blobs of microcopy to do you any favors. Despite your best intentions, they’re most likely to confuse users. If you simply must provide instruction on your form, do it with visual and graphical cues. Show a video, if you need to be that explicit, but make damn sure it stays up to date.

In Conclusion

If we could sum our advice into a single axiom, we would say this: don’t get cute. Don’t over-design things because you want to work on something. Don’t slavishly copy someone else’s design without understanding the reasoning and decision-making behind it. Don’t try and wow the user.

The user interface should be like the brake pedal on a car: we don’t think about it, but we know it will work when it needs to. That’s the level of reliability we want, a level that’s below the user’s conscious awareness.

As they often say in the world of audio mixing, if your listener notices the mix, you’ve probably made a mistake somewhere. The best user interface, like all great designs, is invisible.

You might also like the following posts:

Building Image-Rich Websites Without the Lag

7 Things You Must Remove From Your Website Before 2019

Design Persuasive Websites With These Basic Principles

Filed Under: Design, UX Tagged With: Design, user experience, user interface

Recent Posts

  • How to Choose a Stunning Font Package for Your Brand
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022