10 Mistakes to Avoid in UI Design

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 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.”

Common UI Design Mistakes

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.

1. 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.

2. 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.

3. 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.

So, say what you need to say in as few words as possible, or coach your client on this important rule. Use more visuals and less text: a picture is always worth a thousand words when it comes to digital design. And of course, use headings and subheadings and bullets and boxes along with your graphics.

4. Forgetting About Other Devices

Yeah, this should never happen in today’s world. Unfortunately, it’s not a perfect world and some newbies (hopefully not seasoned designers!) still have a tendency to forget about the fact that a great many users access the web only from their smartphones. Or maybe it’s that they don’t want to fork over the money to create a mobile-optimized design. Or, like the Rudgwick website in the first section, some are DIY sites created years ago using Flash. For professionals, though, this problem of not optimizing for multiple devices should definitely no longer occur.

5. Carousels/ Paginated Lists

Remember when I said I need professional help when it comes to my level of annoyance with Mistake #1? Well, carousels and paginated lists top that. I go bonkers when I have to click through every single item in a list. You know the type of article: the ones where you really want to know who are the top hottest supermodels of this year but you have to wade through millions of next buttons and a gazillion hours of slow load time.

In fact, I’d say that carousels and paginated lists are probably one of the least usable website elements of all time. It’s merely a cheap way for website owners to gain clickbait while irritating readers to the point of never return. Bottom line: fight your clients to the bitter end to avoid putting these on their websites. Do it for me and your love of all things usable. If they do insist, though, at least give the option for a One Page view like Business Insider cleverly does.

6. Poor Performance

You know what I mean here by poor performance: slow load time and glitchiness. If any part of your website, any element clicked on, any animation, loads too slowly and is too glitchy…well, it’s bad news for the website owner. Slow-loading websites lose a great many visitors, because, let’s face it, “ain’t nobody got time for that!”

And no one wants to watch animation that just doesn’t move smoothly. Bad animation reminds us that we are interacting digitally, rather than personally, and our trust factor of the website goes way down. Remember, humans want that real-life-like interaction when online, so make it smooth and keep it real.

7. Too Many Clicks

The more clicks that a user has to go through before making it to the final “purchase” or “sign up” button, the more sales that are going to be lost. The clicking mistake has to do with both the length of forms (more on this below) and what it takes to find the form. For instance, if users have to sign in to use a website, then put it front and center where they immediately can enter their information and hit the enter button – all with one click if they use auto-fill.

8. Irritating and Complicated Navigation

Navigation on a website or in an app should not be confusing. I’ve been on some websites before that really made me want to punch the screen in frustration. When users can’t navigate back and forth between pages easily or when they have to search endlessly for the right information or when a design is simply difficult to learn…users will go somewhere else instead of messing with all of that annoyance.

A UI design should make it easy to go back to homepage, easy to find certain pages, easy to just go back one or a few pages, easy to find forms, etc, etc. The entire design should simply flow. You want them to be able to easily, naturally breeze through a website and understand the message and point of the site as quickly as possible.

This is where a little organization goes a long way. The above website is a good example: if the main menu displays too many options, the site will feel too complicated to navigate. Using elements such as mega menus with a clear hierarchy would improve sites like the one above immensely.

9. Bad Forms

Poorly designed sign-up or order forms are definitely bad forms. All forms should be easy to fill out and bug-free. Make sure to add numbers or a timeline of sorts to forms with several steps so that users know where they are in the process. And when users hit the “Enter” key on the keyboard, for design’s sake make the Submit button click.

Do go over and over the form to weed out any bugs. For instance, fields shouldn’t disappear if an error message appears for an item incomplete. I have been known to quit a form if I had to fill out fields again after an error message, and I know I’m not the only one. And definitely check for and remove any unnecessary fields that simply waste a user’s time.

10. No Feedback

Let’s say (gasp!) that your design does load a bit more slowly than some. Should you make the user just sit there and watch a circle spin round and round? Certainly not – unless you want to lose a good majority of them. Instead, entertain them! Give them something to read or an interesting animation to watch.

Let’s not forget about the feedback necessary when simply clicking on items too. Anytime a user clicks on something, is waiting for something to load, scrolls down, goes to a bad page, anything…give them feedback to let them know that you know they did something.

Other Mistakes to Avoid

Horizontal Scrolling

Users on an average-size monitor with average resolution should not have to scroll left and right to read the contents of your pages. Designing with fixed widths that will fit onto smaller monitors or designing with fluid layouts will avoid horizontal scrolling.

Invalid Code

In order to have the best control over your websites appearance and functions in all situations, valid XHTML and CSS should be used. The W3C offers free validating for both XHTML and CSS.

Designing for One Browser

Each internet browser interprets code slightly differently than the next browser. When developing a website, test it in several different browsers because your visitors will be using different browsers.

Hidden Contact Information

Some visitors will want to contact you with questions or comments. A contact form, or at least your email address should be easy for your visitors to locate.

Poor Use of Page Titles

Page titles will typically be displayed on search engine results pages. Because they describe the contents of the page they have a major impact on click-through rates. A non-descriptive page title will lose traffic to a competitor with better use of page titles.

Dead Links

Nothing will frustrate a visitor like dead links, especially those that are internal (linking to other pages on your website rather than linking to someone else’s website).

Excessive Advertisements

While outside advertisements can create revenue for your website, they can also cost you money in lost visitors. Websites with too many ads generally look unprofessional.

Linking to Bad Websites

The sites that you link to will influence the visitor’s opinion of your business. Links should provide valuable information or services for your visitors. Don’t link to a poor website just because they agree to link to you in exchange.

Using “Click Here” for Links

The anchor text of a script should be descriptive of where that link is going. Not only will this give your visitors a better idea of where the link will take them, but anchor text is also a factor in search engine rankings.

Navigation that Uses Only Images

The navigation of your website is crucial for visitors to find what they want. Not all internet users will be able to see images. Some will surf with images turned off to speed up the load time, and some disabled users will rely on the anchor text of links to navigate your site. These users will be unable to move through your site with navigation that completely relies on images (although alt tags can help).

Not Using Headings

XHTML provides specific tags for headings. Many websites accomplish the same visual effect by using a larger font size and bold text; however, headings have significance to search engines.

Email Address at Another Domain

If your email address is posted on your website, using a free email service like a Yahoo address does not look professional. Your hosting service will provide you with email addresses at your domain name.

Poor Use of White Space

White space is important to make your content easy for visitors to read. White space can be used improperly by having too much blank space, or by cramming too much content into a small area. Many websites that use excessive advertisements also lack sufficient white space.

Using the Wrong Software to Create the Website

Websites should be created by either hand-coding or with a program specifically made for creating websites, like Dreamweaver. Using a word processing program or any other type of software will create unnecessary, invalid code.

Not Displaying Subscription Options Prominently

If your website offers an email newsletter or an RSS feed sign up information should be easily seen by visitors. Placing sign up instructions at the bottom of pages or only on certain pages will decrease the number of new subscribers.

Pages that are Hard to Find

Navigation of the website should be logical so that visitors can find the pages they want. Adding a sitemap or a search function is a good idea.

A Good UI Design is…

…like a refreshing drink of water on a hot summer day. More than that, a good UI design means that users are more apt to trust it, which leads to more conversions. So, create a good ole’ checklist of your most common UI design mistakes and keep it front and center as you begin your designs. Pretty soon, you may find that you don’t need that list in front of you anymore and, hopefully, you’ll find yourself with more and higher-paying work because your top-notch designs are getting noticed.

For More on UI Design, Check Out These Articles: