6 User Interface Design Fundamentals

I was recently tasked with redesigning an outdated and rather cumbersome shopping portal. Over time, what had once been a trendy and even uniquely clever interface, had grown tired and clunky. The goal was to bring it up-to-date and simplify the experience so it would be more intuitive for the user from start to finish, especially considering the savviness of today’s typical online shopper.

As I worked my way through the design process, I made sure to refer to some UI fundamentals I’ve come to trust over the years.

Here they are for you:

1. Know Your User & What They Want

A lot of what we are doing is getting design out of the way.” – Jonathan Ive

Users are on your site to do one thing: accomplish something. Make sure you’ve clearly outlined what that ‘something’ is and the shortest route/action for getting the user to it. But you’ll also need to pay attention to the user group as well since the route a 12-year-old takes will be considerably different from the route chosen by a thirty or seventy-year-old user. That means it might be necessary to simplify the design or forego trendy UI in order to create an interface your user will understand. By focusing on your user first, you’ll create an interface that lets them achieve their goals.

2. Pay Attention to Other Sites

The main goal is not to complicate the already difficult life of the consumer.” – Raymond Loewy

Users spend an inordinate amount of time on interfaces outside of your website (Facebook, news or banking sites, their phone, etc.). Some of those sites have spent a ton of money refining and perfecting user experiences. Others have just done a great job at building bad habits and low expectations. Either way, it’s what users all over the globe have come to anticipate. You don’t need to reinvent the wheel to build an intuitive interface. You just need to employ familiar UI patterns people are accustomed to encountering.

3. Stay Consistent

People react positively when things are clear and understandable.” – Dieter Rams

Users love consistency. They want to feel once they’ve learned how to do something, they’ll be able to do it again and again. That means language, layout and design needs to be consistent throughout. Consistency breeds efficiency.

4. Use Visual Hierarchy

The only intuitive interface is the nipple. After that it’s all learned.” – Bruce Ediger

I’m a big believer in hierarchical design. It allows users to focus on what is most important and helps them navigate the interface. Plus, the more time spent designing a clear and intuitive hierarchy means you’ll naturally reduce the complexity of the interface and have a cleaner final product. Think of it as road signs pointing the way to a destination; concise, clear, colored when appropriate and accurate.

5. Allow for Mistakes

A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.” – Douglas Adams

You might think your interface is foolproof, but people will make mistakes. Therefore, your design should always allow for and tolerate user error. Make sure to include ways for users to undo actions, and permit varied inputs—after all, no one likes starting over because they entered text in the wrong format. (And in a large percentage of those occasions the user will abandon as opposed to starting over.) Make sure the messaging you serve up in the case of a user error is constructive and (politely) teaches the user how to correct and avoid the error again.

6. Keep it Simple

A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.”Antoine de Saint-Exupery

The best interface designs are completely invisible to the user. Make sure you have that notion in the forefront of your mind when you are designing or redesigning an interface. Nothing should be added that isn’t absolutely necessary for getting the user to the end goal. And, anything that slows the user down should be removed. UI isn’t the place to show-off cool tricks or fancy design.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s