All Fields Required

How to Make a Great User Interface

Posted On
3/8/2016
By
Stefan Schumacher

We recently went through the process of redesigning our product’s user interface. As an entirely online service, this was obviously a very important project for our business.

We learned a lot along the way, both from research and because the feedback we got was directly from small business owners - our customers. So we weren't just looking to make something pretty - our product website's interface needed to be functional, easy to use and well organized.

Even more important, it needed to accomplish a goal - an extremely crucial one - making sure people get paid.

Whether you're hiring a design firm or doing it yourself - spending a lot or a little - there are some key tips that can help you make a great user interface. These became apparent to us as we tested, re-tested and solicited feedback on the new website for our product.

They're tips any business can use to make a great user interface that will satisfy customers. Read on for more and be sure to save our full infographic of user interface tips at the bottom of this post.

Know What Your Customers Want

This is probably the first thing you should think about when designing a user interface. Who am I doing this for? You use all the most cutting edge design, high resolution photography and graphic gymnastics you want, if it's not what your user base wants, you're not doing yourself any favors.

You know your customers better than anyone. So think about what they want, not what's trendy in your industry or what your competitors are doing.

As Amazon Founder Jeff Bezos said: "We see our customers as invited guests to a party, and we are the hosts. It's our job every day to make every important aspect of the customer experience a little bit better."

Be Consistent

You've probably been through the frustration of dealing with a website that functions differently from one day to the next.

Consistency is extremely important in a user interface, especially with those core functions of whatever the site does (i.e., composing an email, paying for a purchase, making a trade).

Think about the layout, the size of buttons and text, the top navigation and footer, and the colors you're using. If they change from one page to the next, it may create a disorienting environment for the user.

You want the user doing something very specific - namely busying your product or signing up for your surface, not figuring out what's going on with your crazy website.

1


Focus the Visuals on What's Important  

It should be clear what the most important thing to do is on a given page of your website. If your user has to scan through a million links on some endless sidebar or everything is the same size and color, it's going to slow them down.

Take a look at this dashboard homepage we've created for our new product interface. It's pretty clear that we want you to "Begin Payroll."

1 - Dashboard New UI

 


Allow User to Undo Mistakes

Everyone makes mistakes. We all occasionally enter the wrong amount or click on the wrong button - especially in a time when multi-tasking is rampant.

A good user interface should clearly breakdown everything that is going to happen when you hit that final "submit" or "buy" button. In our case, that meant showing business owners exactly how much money would be coming out of their accounts and for what purposes.

5 - Approval New UI

You should also provide fair warning when something important is about to happen and the ability to edit what they've already done.

3


Guide the User

Providing clarity and direction should be a constant in any great user interface design. If you expect the user or customer to do what you want them to do, you have to tell them!

You're probably familiar with this on sites like Facebook or LinkedIn, where they suggest friends you could connect or jobs skills you can endorse someone for having.

4


Break Things Down Into Simple Steps

The website 99designs.com calls this the "Law of Easing." It means that users are more likely to do something fairly complicated if it's laid out in a series of simple steps.

You've probably been through something like this when signing up for a new service that requires entering a lot of information. You're showing a progress bar and a checklist and you can see how you're progressing.

If the user is just given one long form with 50 different fields to fill out, they're likely to get discouraged. If you break things down into chunks of three at a time, it seems much more manageable.

5


Responsiveness

There a few different elements to this. For one, Google prefers a responsive website in that it displays in a mobile friendly format on a phone or tablet. This could theoretically help your search result rankings.

You also want the interface to load quickly and move from one function to the next smoothly.

When something is happening behind the scenes - calculating the cost of something, for instance - you should have some kind of visualization to show the user.

5a-Calculating




Have Help Available

Quickly being able to search for something within an online product can save a lot of time. It saves the user from having to call customer service and if you're a business owner, it saves you time answering simple questions.

Tools like Desk.com from Salesforce can help organize your knowledge center so that it's very easy for customers to enter their questions in a search box and get an answer instantaneously.

Tabs Are Good

According to WebDesignDepot.com, tabs have the psychological effect of making the user feel like they are moving from one topic to another. As opposed to buttons, which send the message to the user that they are taking action.

This is the very easy way to organize the big components of your site and a great way to guide the user.

6


Show Depth

Creating an environment where things like buttons and sliders feel tactile, like they're sitting there in front of you as a real object, not just a flat space on the screen, can be very enticing. Apple, for example, was particularly adept at this with various versions of the iPhone.

Adding shadow to objects, even on the screen, gives them depth and dimension, so they pop out to the user. Just like in real life.

More Whitespace

Most people don't like to feel crowded. If they go online and feel crushed by bright colors, advertisements and big blocks of texts, they're going to want to get out of there.

Give users some soft space to walk around in.

7


Watch the Contrast on Your Text

One of the things Apple recommends - and they seem to know what they're doing - is to make sure there is enough contrast between the font color of the text you're using on your site and the background.

You want your text to be as easy to read as possible, especially given how much time we all spend in front of screens.

8


Keep it to One Simple Action Per Screen

We've preached simplicity and consistency, and one of the best ways to do that is to ask your users to only complete major action on each screen.

Don't confuse them with lots of buttons.

In the case of payroll, we want our customers to enter their employees hours and wages (enter payroll) on screen; preview those entries on the next (preview payroll); and finally approve the payroll on a third screen (run payroll).

It shouldn't be choose your own adventure. You're trying to achieve a business objection.

9


Know Your End Goal

At the end of the day, you're trying to achieve a goal with a user interface. Maybe it's to buy something (Amazon); share information (Facebook); or search for something (Google).

You want a user interface that's attractive and represents your company well. But that only works when it also accomplishes a goal. If it doesn't load properly; if it's confusing or hard to read; if it makes for a bad overall customer experience, you've lost sight of your mission.

10

 
Click to open the full size infographic.

user-interface-graphic_november-2015
​















Sources:

BrainyQuote.com
Blog.TeamTreeHouse.com
99designs.com
UsabilityPost.com;
ArgonDesign.com
​WebDesignerDepot.com
Medium.com
​Developer.Apple.com
​Bokardo.com