So, what exactly is user interface, anyway?

When I visit your page (just like if I visit your house for dinner), I should feel welcomed. Good user interface makes me feel at home. Everything makes sense, and the cat isn’t hopping on the dinner table. Bad user interface is cat hair in your soup–it leaves a bad taste in your mouth and you’re ready to exit stage left quickly.

Put simply, user interface (UI) is how the site interacts with the user. It’s less about a site’s beauty and more about its usefulness in delivering the product to the user. If you’re a blogger, the product is your point-of-view; if you’re an online candle store, the product is a candle. The purpose of UI is to get the user to the product as efficiently and quickly as possible.

Consider the 4 E’s of Good UI design. UI should always be the following:

-Easy to use

-Easy to understand

-Error-free

-Effective for the end-goal (or product)

Conversely, bad UI design is sluggish, complicated, and generic. And, surprisingly, there’s little gray area. Either you have a thoughtful UI design, or you have a generic blob that doesn’t meet the requirements of your users.

What Does Good UI do?

An effective UI design is intuitive, both in how it interacts with the user and how the user interacts with the site. Good UI design has threads of familiarity. Even if I’m visiting your page or app for the first time, I should understand how it works–and quickly.

A good user interface holds my hand and takes me where I should go. Customers like hand-holding. And, that’s not an insult to your customers. Of course, what works for one site most definitely will not work for another, and that’s why testing is so important. More on that a little later.

What Does Bad UI do?

Bad UI drops you off in the middle of the desert and expects you to make it on your own to the rain forest. It does not lead you where you need to go. Too often, this is because websites try to cater to an impossibly huge demographic, so the core audience is marginalized in favor of appealing to the broader audience.

Here are 10 Examples of UI gone wrong (and how to avoid it on your site):

1. UI is not responsive.

He’s dead, Jim. In this day and age, having a website that users must pinch to zoom on mobile web devices is embarrassing. Although zooming in isn’t difficult, it indicates that you are out of touch with your users. If you notice that your website gets a fair amount of traffic from mobile devices, you should consider updating your UI to answer the call.

Consider fat fingers and failing eyesight in your design. Not all of us are blessed with nimble finger tips.

2. UI is not intuitive.

When you create your website or app, you should already have in mind your target customer. The usability of your design is determined by how easily your target customer can navigate around it. It doesn’t matter if adults aged 18-49 can use an app thats targeted to ages 6-10. When your UI doesn’t make sense to the user, it will be abandoned.

Strive to implement platform conventions whenever possible. Most users expect the location of the search box to be in the upper right hand corner a website. Or visited links to change color. Users will feel at home with design elements that they expect. By all means, be creative, but don’t sacrifice user experience.

3. Design is inconsistent.

The tone of your website should be fairly consistent on every page. A reader shouldn’t feel as if they are on a totally different website from one page to the next. Maintain uniform navigation and a decisive tone throughout.

4. There is no target.

Who is your target user? If that is not immediately evident on the first page, you’ve lost. Many generic websites are offered to the masses, but very few succeed.

Remember an important principle, known as Pareto’s Principle aka 80/20 rule.

In this case: 80% of your sales come from 20% of your customers.

This principle is true for whatever type of website or app you have, whether you’re monetizing it or it’s just for fun. It’s infinitely more important to find out who those 20% are, and tailor your website just for them.

5. Social interaction is lacking.

Users need to feel validated in choosing to spend time on your site. One of the most powerful ways to fill that need is through touting your popularity. Implement social tools on your website, such as comment forms. Showcase your number of subscribers on your newsletter sign-up. Post recommendations or reviews from satisfied users, with images and links to their websites.

6. There is no direction.

This point goes back to hand-holding. Figure out what your bottom line is. What do you want users to get from your site or app? Is it entertainment, a good, or a service? Whatever the end-goal, you must lead them to it. When I visit your site, I shouldn’t be met with a lot of information that will possibly distract me from the goal.

This is precisely why a blog plastered with ads doesn’t work nearly as well as a blog with one or two carefully placed endorsements. When you narrow the focus, you control the path.

7. The forms are too needy.

The only thing worse than a long, drawn-out form is one with unclear error messages. As emphasized in the 4 E’s of Good UI, you want the user interface to be error-free, but form fields will challenge everything you know about usability.

It’s important to allow your users to be humans, and humans make errors. Your form fields should accommodate the user by offering to correct misspelled words or inline error validation. Another good UI design is pre-filled forms, populated from information filled out on other pages within your site.

Also, consider requiring less information from users upfront. It’s already a hassle to register for one more site, so make your registration be as painless as possible, which leads me to the next step.

8. Lack of social login.

Social login is so important on the web, right now. The seemingly disparate parts are coming together. If you’ve configured your website as its own isolated community, you’ve done a disservice to yourself and your users. Everything is connected.

Instead of asking users to sign up cold, integrate the social login, where you allow them to connect to your site through social media, such as:

Facebook

Twitter

Google+

LinkedIn

The benefits are that it’s less work for the user, and it allows you to have more information about that user had they registered to your website cold, like photos.

Of course, be sure to allow users the option to sign up the traditional way. Some users do not use social media, or may prefer to have a separate interaction with your site

9. It is slow.

Slow is evil. We’re talking seconds, but it can make a huge difference in whether the user sticks around to wait for the page to finish loading. A slow website can hurt you.

To counteract this, implement best practices for website speed. These best practices include:

minimizing your HTTP requests by unifying elements and using CSS Sprites

combining style sheets

enabling compression to reduce bandwidth.

Use .jpg and .png and compress those images as much as possible without losing quality. For .png specifically, this is a nice tool I use to reduce the file size: tinypng.com

10. There are readability issues.

Good user interface also tackles content. It’s nice to have engaging content, but if it’s presented in the wrong way, users will not read it, and it may come back to haunt you.

The most important thing you need to know about usability is that most people don’t read, they scan; and if the scan seems interesting, they’ll skim; and if the content is bursting with personality (ahem), then they’ll read. But, the first point is creating scannable text. Do this by using subheadings, bullets and highlighted text.

Next comes the appropriate use of font and size. Text size should always be bigger than what you think, generally hovering around 16 pixels, but compensate for your font.

Last, but not least, is content. Make your content relatable for your target audience and easy to read. Remember, user interface is how the site interacts with the user.

So, now that you’ve had a rundown of the main points of good and bad UI, here are 5 questions you should ask yourself about your current design:

1. Who is your target audience?

2. Why are users coming to your site? What is the user hoping to solve by visiting?

3. Can Grandma use it? Is it painfully simple? If not, start over.

4. Are you effectively leading users to your target?

5. What is the clear solution?

After you answer these questions, it’s time to start testing out your site. Testing is a necessary component to efficient UI. Fortunately, testing can be done easily and inexpensively with automated testing. The key rules to follow when testing, as outlined by Jakob Nielsen, are: Get representative users; ask them to perform representative tasks; shut up and let them do the talking.

Good UI is actually not complicated, at all. It’s about simplifying the focus. What are your favorite examples of good UI?