User interface design has to do with both the outer layer of a design and the placement of elements in the design, whether it be a website or an app. In simple terms, UI design refers to everything that users can see. However, the more important meaning involves the usability of a design. Just as with a street sign, if the design doesn’t provide clarity, then confusion can occur and scare users away, often permanently.
Of course, talking about the usability gets messy when it comes to terms. Many argue about the actual definition of labels such as UI and UX (user experience), and, really, it’s kind of a moot point here. After all, the “prettiness” and other visual aspects (UI) also have much to do with the usability side of design (UX), and this is why the terms UI and UX (user experience) are often used interchangeably, or at least why UX is more of an umbrella term under which UI falls and somewhat crosses. Because, really, both have to work together to really make a design stellar.
I like how Marci Ikeler puts it in a Quora forum on the difference between UX and UI designers: “Generally, what they [the company placing an ad] mean is: the UI/UX designer is a person who is responsible for strategizing, organizing, and executing an interface that accomplishes that company’s business goals.”
As a UI designer, you should definitely know the common – and not so common – mistakes made on various designs so that you can better help your client meet goals. If you know what to keep in mind while designing, you’ll be much more likely to create a website that matches your client’s description of “easy to use but makes a huge impression and leaves viewers with the right impression of our business so they buy lots of our stuff, forever and ever.” And, if your client insists on including any of the UI design mistakes listed below, you can make a valid argument for refusing…politely of course.
Inconsistent Design
The first mistake is one that no one should make, ever, mostly because it’s one that annoys me so strongly that I might need professional help. Consistency in a design has to do with making sure all similar actions and elements look and act the same. So, if one team member’s face spins around before displaying the “about me” text, then the rest of the team member’s faces should animate too before the text display. If the first h3 subheading uses Helvetica in dark grey and a 18px font size with a bottom margin of 30 px, then the rest of the h3 subheadings should be the same.
One of the easiest ways to remain consistent in your design is with some planning ahead of time. Simply create a list of all of your actions and then divide them into groups of same/similar functions. Finally, decide on one UI element for each group as well as a consistent alignment. Don’t forget to also assign other design elements, such as the same fonts, styles, colors, and even the same wording and hover effects.
Poor Use of Colors
Choosing the wrong colors is bad news for a design. But what exactly are the “wrong colors”? This can be quite a vague, subjective topic. After all, colors portray meaning, so you have to consider your client’s brand and audience. You also have to keep visitors with color-blindness in mind. Check out this article about color blindness on usability.gov for some great tips, which are not surprisingly also good points for color usability in general, such as using high contrast colors.
The site above violates quite a few color blindness rules (and has quite a few other UI mistakes). Also, don’t forget to color-code, meaning that you use the same colors for the same functions. One more important color mistake to mention: limit the amount of colors to two or three main ones to avoid overwhelming users visually. Keep in mind that colors aren’t the only way to show distinction.
Too Many Words
Another one of my pet peeves: too much text can hide the website message from visitors. After all, if a reader is bogged down by lots of words and paragraphs, he or she will either immediately leave without trying to read, or make an attempt to read and give up after a valiant effort. Either way, the end result is frustration, a missed message, and a lost prospect.
