5 Rules of User Interface Design You Should Never Break

User interface design is much more than pure aesthetics. The foundation of good UI design is user-friendliness, which is achieved through visuals. So what are the principles of user interface design that you should always follow? Here are 5 golden rules.

User interface design is one of the most sought-after graphic design disciplines. Why? Well, we live in a digital world where most things operate through some digital medium.

Have you ever wondered why you’re able to use almost any app on your phone without googling how? Even the boomers these days are getting much better at using technology thanks to an ever-evolving quality of user interface design. User interface design is what connects the user with a digital product.

Whether you’re vetting a professional, or want to learn the ropes of designing user interfaces, here’s a quick guide on some of the most critical principles you should follow.

What is user interface design?

If you’re already familiar with the definition of UI design, feel free to skip this part. For those who are unsure, here’s a quick answer to the question, “what is user interface design.”

UI design is the way a digital interface looks and feels.

Of course, although aesthetic appeal is vital, how users interact with interfaces ultimately determines the success of UI design. The psychological aspect and a focus on functionality over aesthetics is the main difference between UI/UX design and all other forms of graphic design.

But what’s the difference between user experience and user interface design, anyway?

The difference between UI and UX design

Although it goes hand-in-hand with user experience, there is a difference. As its name suggests, UX design focuses on the entire experience of using a product or service. It looks at a broader picture, including why someone might be using a product, in what context, etc. Therefore UX design also applies to physical products and systems (e.g., the layout of a supermarket).

User interface design is much closer to regular graphic design because it focuses on visual cues for interacting with a digital product. So although a common role nowadays is called a UI/UX designer and covers both areas, UI design is much easier to learn for those without a background in design.

In fact, there are also many platforms for user interface designing which are beginner-friendly. Some such platforms are:

• Figma

Until recently, Figma was a free tool with amazing functionality and a stellar user-friendly dashboard. What Canva is for DIY graphic design in general, and Figma has been for UI/UX design. Although there’s still a free plan, it’s much more restricted, so you’ll probably need to purchase a subscription anyway.

Still, Figma is one of the best tools for UI/UX design beginners since the drag-and-drop system and many tutorials and templates available online require little to no design expertise to use this tool.

• Penpot

A fairly new platform (launched in 2021) developed from the previous program called UXBOX. It’s open-source and created for easy collaboration between different teams.

It’s pretty similar to Figma but free, so it’s a fantastic starting point for any self-taught UI designer.

• Sketch

One of Figma’s biggest competitors is this UI design tool available for macOS only. If you happen to be a Mac user, definitely check it out.

It has a 30-day free trial, and after that comes at an affordable price of $99 per month. Like Figma, tons of free templates and plugins are available, which are a godsend for beginners.

• Siter

Siter is another handy tool that requires no coding skills. It also has great collaborative features, so it’s great for small agencies. You can also import code directly into the program and preview your websites or launch them.

Still, before you take the DIY route, you should know what are the principles of user interface design that one should never break and why they are vital for a good UI.

5 Golden rules of user interface design to follow

Even though user interfaces are concerned with the visual aspect, a beautiful interface that is difficult to use is a UI design failure.

So, let’s look at how to make user interfaces effective, with some good UI design examples to learn from.

1. Put users in control

If customer is king, then user is the emperor. No design rule or principle takes precedence over what a user wants. Although you usually need to observe the basic design principles to create an effective interface, you can still deviate from the rules in the interest of user-friendliness.

For example, if you know anything about branding, you know that using consistent colors, typography, and images is vital for building brand recognition. However, suppose your brand colors are extremely bold and vibrant. In user interface design, this may strain users’ eyes and make the product uncomfortable. Therefore, you’ll need to find a different way to incorporate your brand colors; for example, you could use a neutral color, such as white, with added accents to your brand colors.

So, what are some other key ways to put users in control?

Provide visual cues

Remember how even your grandma knows how to use Facebook now? That’s because there are clear-cut visual cues.

Most people will know that the house icon means homepage, but you should never take such things as a given. If in doubt, ensure the visual cues are paired with textual cues to avoid ambiguity. Don’t forget that people are unlikely to read chunks of text, so make sure there are graphics that provide guidance as well.

Icons are one of the most effective types of graphic elements to use for this. Use them on a homepage menu to make navigation faster. Simple icons, such as arrows, crosses, and checkmarks, greatly enhance user experience as they can inform users about steps to take and provide feedback.

Make actions reversible

Ever tried frantically looking for the back button only to end up closing the interface once you couldn’t find it?

One of the key principles of good UI design is reversible actions. Whether it’s a mistake or simply a change of mind, comfortable user interfaces allow flexibility.

Provide feedback

Besides not understanding what to do in the first place, nothing frustrates users more than being unsure of what is happening when they take an action.

A great UI design example to learn from are shopping carts. Being able to review their cart before proceeding to checkout is extremely helpful in online shopping. If you charge fees not accounted for in the initial price, this is also a moment to highlight that.

Suppose you were to take users straight to the payment page and add the charge automatically to their bill. This would surely irritate most users, and they’d either think it was a mistake, scam, or an audacious move on your part. In any case, they’d likely abandon the cart without completing the purchase.

Another critical component is progress feedback. If an action takes time to complete, it’s always a good idea to include a loading bar or another common visual representation of an ongoing process. Otherwise, users might think there’s a glitch and exit the interface.

Accommodate for different skill levels

Remember grandma? No matter how techy she might be nowadays, she’s still a long way from digitally native millennials and gen Z.

Catering to different skill levels means two things: providing enough guidance for people that are less savvy and making steps skippable for those in the know.

Another subset of this UI design rule is creating accessible designs. This means catering to people with different disabilities or impairments. Some examples are dark mode and screen resizing.

2. Create familiar & consistent interfaces

Originality and creativity are important concerns in good graphic design. But in UI design, uniqueness is often problematic. Sticking to design conventions and commonly used symbols reduces the learning curve and so improves the user experience.

Here are a few rules to follow.

Use recognizable icons and colors

In UI design, functionality always trumps aesthetics. So, before you concern yourself with how something looks and whether you can make it more appealing, consider whether it’s easy to use.

One way to make it this way is to utilize conventional design elements. For example, we’re all used to certain icons representing common features. A house icon usually represents the homepage; phone is where you find contact information; a speech bubble is a universal symbol for the chat option.

Similarly, we’re used to red buttons representing “no” and green ones representing “yes.” Equally, a darker or bolder colored button stands for affirmative action (as a way of prompting users to click).

{{ICONS_PORTFOLIO="/dev/components"}}

Make steps predictable

What happens if I click here? That should never be a question users ask themselves.

If a user interface designer has utilized common symbols and adhered to the design conventions, the UI will probably be intuitive anyway. However, if in doubt, you can always add additional cues (whether visual or textual) to ensure users know the results of an action.

3. Reduce cognitive load

Reducing cognitive load is a fancy way of saying, “explain it like I’m five.”

The downside of the majority of us being digitally savvy is that few people have the patience or willingness to learn anything new. So, a strict rule of thumb for any user interface designer is to make UIs as simple as possible. Here are a few tips on how to do it.

Minimize the number of actions

You never want users to be in the dark about what’s happening. But overloading the process with steps is equally harmful.

You should always try to have as few steps as possible so that both you and the end user can achieve their goals. Suppose you’ve created a lead magnet and a form for users to download. An average user will probably be happy to share their name and email address, but if you require detailed contact information (phone number, address, etc.) they’ll likely decide the resource is not worth the hassle.

Equally, while extensive data might be useful, when collecting lead magnets all you really need is an email and a name. So don’t harm the process with unnecessary steps.

Recognition over recall

The difference between recognition and recall is that recognition involves more cues and eases the cognitive process. For example, if I asked you, “Is the Statue of Liberty in New York?” you just have to process whether the information is correct. On the other hand, if I asked you, “Where is the Statue of Liberty located?” you’d have to use recall (your memory) to find the correct answer.

In UI design, this means you should provide as many visual cues as possible to allow users to use recognition rather than recall. For example, rather than having a search bar where people can type anything (and end up with no results), consider adding a drop-down menu that provides options they can select.

4. Make information clear & organized

It technically falls under reducing information overload, but it’s such a significant rule that we need to give it a section of its own. You’ve probably heard that people’s online attention span is around 8 seconds; in addition, we only read about 20% of information on a web page.

So, if you want vital information to come through, you must make it succinct and organized. Here’s how.

Chunking information

“Chunking” is a term introduced by psychologist George Miller to describe how human memory processes chunks of information simultaneously. For example, think of how we write phone numbers in sequences of 3 or 4 numbers at a time.

In UI design, chunking is especially important for more complex interfaces, such as landing pages. In the example below, you can see how chunking ensures that vital information is conveyed quickly, even with skim reading.

Avoid jargon

There are opportunities to show off your expertise - but UI is rarely one of them. You should usually have the average user in mind when designing user interfaces. For example, even if someone is

Moreover, you should always consider the users’ goals. If they wanted to book a hotel, a message telling them that no hotels match their criteria is much more useful than a cryptic note that the search feature has failed.

Respect hierarchy

You may be tempted to make every call to action as big and bold as possible. But there should always be a hierarchy of information and design elements to ensure a stable user interface design.

For example, a form should always have a heading (or CTA) as the most visible. This is because the heading provides users with information about the action they can take. Below you can include some text that will elaborate on the heading in more detail. Buttons should have a distinct design, whether a frame, different color, or a slightly different font.

Clever use of white space can also help you highlight the most important features of your site.

5. Engineer for errors

Even if you take all the steps to ensure good UI design, people are naturally prone to make some mistakes. Whether it’s a password typed in incorrectly or an unwanted item in the shopping cart, effective UI design must be forgiving. We’ve already talked about reversible actions, but it also means not shutting down when an error occurs or notifying the user what the error is.

On the other hand, systems can collapse too, and good UI design should also account for this. One of the most common applications of this UI design principle are 404 error pages. Instead of presenting a blank screen, this page tells the user what the problem is and =prompts them to return to the home screen.

A 404 page doesn’t need to be very elaborate in terms of design (after all, people only spend a couple of seconds on it). Still, putting a little effort into it can minimize the users’ frustration and instead inspire positive feelings thanks to a funny or beautiful design.

Final remarks

We’ve said it several times, but it’s worth repeating just once more for the people in the back. The main concern of user interface design is usability. Graphics are a tremendous help in that respect. However, don’t preoccupy yourself with flashy or particularly creative design ideas. Stick to the conventions to deliver on familiarity and ease of use.

We hope this simple checklist proves to be useful for any budding user interface designer. If you’re looking to hire a UI designer, use these rules as your guidelines when assessing drafts