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.”
Konrad from Splintereal.co.uk recommends that 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.
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 legitimately say this will cause no problems in usability and only add value for the user? 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. 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 have 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. 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, and 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.
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. And 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. And as the text inevitably becomes outdated and contradictory as policies and patterns change, you can expect these little blobs of microcopy to do you no 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.
