User interface design: 4 rules you need to know

Think of the last great website you discovered. Now think about why it was great. It’s unlikely that you are thinking of the amazing images it contained (though they probably helped) or the informative copy you read there (though that probably helped as well). No: it’s far more likely that you were impressed by the website because you got something done quickly, effectively and efficiently. One of the key approaches to achieving this is known as user interface design (or UI design for short).

UI design is important because it manages the interaction an internet user has with your website, and therefore your product or service. The best user interface allows the user to forget the technicalities of your website, and just get on with the task they want to achieve. Though that might sound like a basic principle of web design, the process of designing pages and designing interfaces is quite distinct, and there are major differences between UX, UI, web design, and web development. In this article, we will define what user interface design is, what makes good UI design and the four rules to help you create good UI designs.

What is user interface design?

User interface design is the design of the aesthetic experience of digital interfaces, specifically visual touch points like buttons, navigation menus, icons and typography. The focus is around the look and feel of the interface and whether users have a smooth and pleasant experience both in use and visual appearance. In short, UI design is the process in which designers and developers create user-friendly interfaces that link your customers with your product or service.

a woman pointing at a mobile screen following a road map
Illustration by OrangeCrush

The most common forms of UI design are:

  • Graphical user interfaces—these are the visual representations of buttons, menus, or control panels, essentially anything that a user will interact with. An example of this is your computer’s desktop or your mobile phone’s interface.
  • Voice-controlled interfaces—these are, as it sounds, interfaces that require voices to initiate an action. These are becoming more popular these days. Some examples are Apple’s Siri, Amazon’s Alexa or Google’s Bixby.
  • Gesture-based interfaces—these are interfaces in which a user’s gestures affect the action of a product. An example of this would be Virtual Reality games.

Each of these design modes enforces a different set of limitations upon a designer, and each must be studied carefully to allow users to have the most seamless experience possible.

How do you define good UI design?

As with any design process, the key to producing a good UI design is to carefully think through what you want to achieve. Often, it’s easier to define the kind of website or app you want to produce than it is to define a set of rules for getting there.

UI design for the first four steps of a customer journey: login, dashboard, customer, customer expanded]
By 84 Design

In fact, it’s relatively straightforward to define the characteristics of good UI design. Here are some too keep in mind:

  • A pleasurable experience for users while also empowering them to complete needed tasks quickly and easily.
  • It considers the diverse needs of different users—in other words, it is accessible
  • The interface is simple and aesthetically pleasing, but not overwrought or distracting. Users should be able to see how to achieve a particular task easily.
  • The focus is on your product or service, and acts as a bridge for the customer to access it.
  • It allows people to navigate and interact in a way they choose, but is ready to jump in and help or offer assistance if needed.

When all of these elements are combined, you’ll end up with a UI design that is both simple and powerful: one which allows users to achieve what they want to quickly, and without searching through multiple pages to find the necessary information.

Important rules of good UI design

Now, let’s go a little beyond the basic definition of good UI design, and start to look at the rules and techniques that can be used to achieve this. Though every website and app is different, there are a core set of features which are shared by almost every great UI design out there. So let’s go through them, one by one.

1. Good UI design is consistent throughout your website

Perhaps the most important element in great UI design is consistency. Ideally, every element of your site should indicate to your user exactly where they are, albeit without getting in the way of their experience of your site. This means that one of the first steps in developing a quality website is to develop brand guidelines for texts and color schemes, so your user never wonders if they are still on the same website.

A color and branding scheme like this can also be used to indicate to your users how to use your website. Colors can make it easy for users to recognize the important functions of your website. For example, the “request more information” button should look similar to the “request a demo” so users can easily find similar actions they are looking for by simply scanning the website quickly.

home page where apply and get started buttons have consistent design
The “apply” and “get started” call-to-action buttons look the same design wise with different text. But it still makes it easy for the user to know they both perform the same task. By masiko

Creating different colors, buttons and fonts for every action on your website makes it harder for time-crunched users to quickly find the link they are looking for. Similarly, creating a button with the same font, size and color for two totally different actions can cause confusion. For example, you would never want both your “cancel” and ”submit” buttons to be the same color.

2. Good UI design avoids making the user work too hard

The best websites make complex tasks easy for the user, and you can achieve this by removing as much work as possible from them. The best UI websites use a wide variety of techniques to do this, from making text easier to read to the more complex process of structuring content and pages for maximum efficacy. To get started on reducing work on the user consider the following:

Visual clarity

This is where you arrange the elements on your webpage to show how important they are. For example, buttons or links that are larger and more colorful will attract someone’s attention, and thus serve as an indicator that they are more important.

Another tip is to provide plenty of visual cues to the user. You can provide visual aids and reference points to help guide users through your interface. The idea is to make navigating your website as predictable as possible. You never want a visitor to be wondering what a button or link is for or where they are.

Balance of text and images

Another important tip is to reduce the amount of text that you have on your website. Website visitors already have a short attention span, and forcing them to read through long blocks of text isn’t going to make things any easier for them. Users should be able to scan through and easily identify the sections and information they need to find.

simple home page with bowl of past on the right
By David Ferretti

Simple process

Most functions of your website, whether it’s to sign up, make a purchase or request more information, should follow the three-click rule. It’s as it sounds, you want to ensure your user can get to the goal in no more than three mouse clicks.

3. Good UI design puts users in control

Great UI design makes it easy for users to navigate your website in the ways they want to, empowering them and instilling a feeling of control. You should ensure that your website works for your users, rather than forcing them to learn a complex user interface in order to access your services.

There are a number of ways of doing this, and here are the most commonly seen of them:

  • Include some kind of main menu or anchor with links to commonly used pages so they can easily navigate your website.
  • Make it easy for website visitors to backtrack and go back to a previously visited page. Not only does this make your website easier to use, but it also encourages users to explore your website and allows them to be in control of their journey.
  • Acknowledge or provide feedback when a certain action is completed, or the result of an action. For example, creating a password, let the user know what meets the requirements and what is missing.
failed process of redeeming code to watch movie
By tikshow
  • Provide real-time updates of system status to prevent impatience in users (i.e., when a request on the interface is completed, the users can see a status update in the form of a linear progress bar that moves through “processing,” “delivering,” “downloading,” etc.).
  • Provide visual and word labels. Make it clear what tab is for which action by using common symbols as well as clear labels.
  • Enable auto-save to avoid users losing their previous work when a button is mistakenly clicked.
  • Going a little further on the same subject, error messages should be carefully crafted to avoid inciting frustration. Error messages should include links to pages that might be helpful for the issue they are having, such as a link to reset a password.
error page with helpful links to other parts of the website
By Allure

4. Good UI design makes the user comfortable

Good UI design makes every user feel comfortable, and empowers every visitor to achieve the outcome they want. This means ensuring that all visitors to your website feel comfortable and confident when on your website. Some ways to do this are:

Avoid jargon

Don’t use language that your audience won’t understand. Think about your audience and use the terms and language they would know and use. For example some individuals who work in the clothing industry might refer to the offer “buy one get one..” as BOGO, but placing “BOGO free” on your website to promote the offer wouldn’t make sense to many visitors. And it might confuse and deter customers from your website.

Be inclusive

illustration of people with disabilities and inclusive symbols
Illustration by OrangeCrush

Keep in mind that users of your website may have a variety of differences such as low vision, hearing impairments, cognitive impairments or motor impairments. By making sure your website can cater to a diverse population will ensure you are including everyone. Keep this in mind when designing your user interface.

That could mean using simple, high-contrast designs wherever possible, and reducing visual noise to a minimum. Avoid unnecessary graphics or links to pages that are not completely relevant to what your product or service offers.

Check out our guide on inclusive design >>

As soon as you start looking at some great UI designs, you’ll see that the value of inclusivity goes way beyond offering less able users a great experience. By making sure that your page or app appeals to as many people as possible, you will end up with a design that is much simpler, more elegant, and easier to use for everyone.

Use cues that users already know

When you use visual cues from the physical world in the digital world, the user already knows the meaning. Just take a look at your computer and you’ll see folders that look like a folder and a trash bin that is for your discard files and documents. The user already understands the function of the folder and trash and will use it in the same way in the digital space.

Another example is many users know that to exit out of a screen they need to click the ‘x’ in the top right (or left if you are a PC user). The last thing you would want to do is design a pop up or screen where that function is at the bottom of the screen. That will surely drive users into mostly confusion, and even potentially frustration.

design for sticker scan app
See how the “Skip” button is where the exit “X” button would be? This communicates to the user that the leave or exit  function is where the user would expect it. By Brendox

A final word on user interface design

Ultimately, the goal of good user interface design is to make navigating a website or app easy and pleasurable for users. This encourages users to explore your product or service without feeling like it is too difficult or that they are afraid of failure.

The best UI designs do more than this, it’s also a way to showcase your brand to the world. Since your website is the face of your brand or product, you should design it with your customers in mind and make sure they have the experience you want them to have. Whether that means reading up on UI design techniques yourself or hiring a UI designer, your goal should be the same—providing a great experience for everyone.

Need a web design that follows UI design rules?
Work with our talented designers to make it happen.

Source link