Jan 2, 2017

The Importance of Great User Interface (Plus 7 Commandments of a Great UI Design)

If you work in the creative or online industries, I'm sure you've heard someone throwing these words around - UI, UX, GUI.

No, those are not hipster words. And no, those are not slang words. UI stands for User Interface, UX stands for User Experience, while GUI stands for Graphical User Interface.

Read on below to find out what's the difference between UI and UX, how to create a great user interface, and awesome UI and UX examples to inspire you.

 

What is user interface?

In Layman’s terms, User Interface (UI) is a series of screens, pages, buttons, forms, and other visual elements that you use to interact with the device.

Back in the days, you (quite) literally have to be a developer/programmer to use a computer because you have to use the command line interface that looks like this.

Command line

You couldn’t simply point and click; you’d have to type in the exact command you want the computer to perform.

 

What's the difference between user interface and user experience?

If you’ve been in the industry long enough, you’ve probably seen these two terms - User Interface (UI) and User Experience (UX) thrown around and used interchangeably.

So, what exactly is User Experience?

Let’s talk about the history for a second. User Experience (UX) was coined by a cognitive scientist named Don Norman in the 1990's while he was the Vice President of the Advanced Technology Group at Apple. Here's how he defines it:

‘User experience’ encompasses all aspects of the end-user’s interaction with the company, its services, and its products.

He invented the term because he thought the "human interface and usability were too narrow". And because he "wanted to cover all aspects of the person’s experience with the system including industrial design, graphics, the interface, the physical interaction, and the manual."

The bottom line is, UI is the TOOLS and ELEMENTS that you use to communicate or interact with the device (i.e. desktop), while UX is the internal FEELING (or experience) the user has as they interact with the device.

UI vs UZ

 

Why is a user interface important?

I often use the analogy that a website is just like a physical store. A website is, just as a store is, a touch point, and should assist an organization in achieving its objectives.

In saying that, a website should, just as a store should, allow customers and prospects to learn more about the organization and its product/service offering by encouraging dialogue through effective communications and simplifying the end goal, whether it be a quest for further information or a purchase decision.

As staff facilitates this process in a physical store, your user interface facilitates this process on your website. It can mean the difference between acquiring and retaining customers and prospects or deterring them from ever returning. Here lies the importance of user interface and why it is critical to your success online.

Usability is the foundation of a successful user interface and is the easiest process for creating a positive user experience. A positive user experience is a critical part of the overall customer experience and helps define the relationship your customers have with your brand.

 

7 commandments of a great user interface design

Here are my top tips for increasing usability and enhancing your customer's' experience with your brand. Fair warning, breaking these commandments might trigger the wrath of your users.

 

UI Commandment #1: Make your user interface as intuitive as possible

Provide simple navigation within and between screens, offering an apparent, logical process for visitors to follow and creating a story which leads from browsing to engaging.

UI Commandment 1
Source

 

UI Commandment #2: Restrain from information overload

Employ the K.I.S.S principle. You have approximately 5 seconds to capture your visitor's' attention and crowded screens can be difficult to navigate and process. Restrain from providing all of the information you want to get out there - too many alternatives or too much information is often a deterrent.

UI Commandment 2
Source

 

UI Commandment #3: Use clear and unambiguous wording for messages and labels

Avoid frustration and reduce your bounce rate by using explicit wording in messages and labels to diminish the time it takes to find relevant information

UI Commandment 3
Source

 

UI Commandment #4: Group things appropriately

Simplify information and enhance site structure by effectively grouping tabs and labels, bringing related messages top of mind at the right time

UI Commandment 4
Source

 

UI Commandment #5: Maintain consistency throughout the website

Avoid confusion by maintaining consistency with colour, the placing of tabs and how tabs operate.

UI Commandment 5
Source

 

UI Commandment #6: Use appropriate graphics and language

Ensure graphics and language are appropriate for your target audience and try to avoid symbolism, which can be misconstrued, so as to communicate your brand effectively and enhance readability

UI Commandment 6
Source

 

UI Commandment #7: Avoid distractions

Restrict excessive use of movement and flashing lights as these can be distracting.

UI Commandment 7
Source

 

Great user interface and user experience examples

Here are our top UI and UX picks to inspire you

1. Finding hotels on Hipmunk

 

2. Buying something on ASOS

 

3. Ordering food on Deliveroo

 

4. Listing a property on Airbnb

 

Leave a comment