🎟️ Last chance! Get 20% off our lettering for logos Dribbble crash course with Jon Contino. Use code JON20 🎟️

close
Shot by

10 fundamental UI design principles you need to know

Most users only notice the UI design of an app or software when something goes wrong. For this reason, we can say that good UI design is almost invisible, leaving the user free to get down to work without interruption. And as diverse as UI design projects can be, all good examples of UI design tend to follow the same basic golden rules.

In this article, we look at the most important UI design principles to follow for a fully seamless—and virtually imperceptible—user experience.

đź“Ś A big thanks to our friends at Framer for contributing this blog post!

10 essential UI design principles

Effective user interface design is about removing as many obstacles, bottlenecks, stumbling blocks, and potential causes of confusion as possible from the user experience. Above all, the aim is to create an environment that all users find fluid and intuitive to navigate; allowing them to achieve their objectives with a minimum of fuss.

Every UI design project is different of course. Especially when it comes to the finer details. And what works for a mobile app, for instance, won’t necessarily be the right solution for desktop software or a website. Yet the general principles of good UI design remain consistent across all platforms and projects.

What follows is a series of fundamental UI design principles that can—indeed should—be applied to almost every UI design project you work on. Ignore these golden rules at your peril!

  • 1. Keep the UI design simple
  • 2. Predict and preempt
  • 3. Put the user in the driving seat
  • 4. Be methodical and consistent
  • 5. Avoid unnecessary complexity
  • 6. Provide clear signposts
  • 7. Be tolerant of mistakes
  • 8. Give relevant feedback
  • 9. Prioritize functions
  • 10. Design the UI for accessibility


1. Keep the UI design simple

The UI design process is often fun. And so it should be. But it’s important to keep sight of your objectives, and a designer’s personal satisfaction should always be way down the bottom of this list.

Perhaps the most important of all the main UI design principles is simply not to forget who you are designing for, and why. Good UI design is practical; never decorative. Self-indulgent or overly formalist design only creates unnecessary noise; distracting from those elements that are truly relevant to the user.

If part of your UI design serves no practical purpose for the user, it shouldn’t be there.

Prune your design right back to the bare essentials. All superfluous growth should be cut away, leaving only those elements that are absolutely necessary. If part of your UI design serves no practical purpose for the user, but only satisfies your own creative fancy, it shouldn’t be there.

2. Predict and preempt

But how do you know what is relevant for the user? Well, one of the very first UI design steps to take is making sure that you fully understand your user and their needs. Once you’ve achieved this, you will be in a position to predict what the user will want to do next.

Now you can provide the user with exactly the tools, information, and resources that they need. And exactly when they need them. Alternatively, if this doesn’t coincide with what you want the user to do, you can preempt their behavior by changing an earlier part of the design so that it steers them in a totally different direction from the outset.

3. Put the user in the driving seat

Users should feel fully in control—whether or not they really are in control. This means making the UI fade into the background. It should always be there when the user needs it, of course. And exactly where they expect it to be, too. But nobody should ever feel like the interface is forcing them into a certain action or making decisions for them. Even if in some cases this may be precisely what’s going on.

4. Be methodical and consistent

One of the most basic UI design concepts to master is simply being consistent. Not only internally—i.e. across your own platform—but also with industry standards employed elsewhere. Good UI design projects don’t reinvent the wheel; they improve on it. We’re all for innovation, where necessary. But as they say, “if it ain’t broke, don’t fix it”.

In fact, even if it is broken, you might not want to fix it anyway. Consider this; your idea may be objectively “better”—i.e. more logical—but if it’s not what users are expecting to find, it will only confuse them. And in practice that’s not “better” at all.


Bded312537ccac02b9416be92fea3f60


This rule applies to everything from patterns to terminology. If in doubt, go with what’s most widely understood.

Having said this, when new or unusual functions are introduced, it can be equally important to differentiate them from what went before. And perhaps the best way of achieving this is actually to break one of our own sacred UI design principles; employing inconsistency as a way of making important and novel features stand out. Just keep in mind that deliberate inconsistency is very different from sloppy or erratic behavior, though.

5. Avoid unnecessary complexity in the UI design

Aim for the minimum number of steps and screens possible at all times. Use overlays such as bottom sheets and modal windows to condense data and reduce your app’s footprint.

At the same time, be sure to organize information in such a way that it is logical, autonomous, and self-contained. In fact, one of the golden rules of UI design is to always group tasks and subtasks together, not only thematically, but also in a manner that is entirely practical.

Above all, don’t hide subtasks on pages where no one would think to look for them. Nobody expects to find the shower in the kitchen, the TV in the bathroom, or the closet in the yard. Organize screens and their content according to a clear and logical taxonomy.

Aim for the minimum number of steps and screens possible at all times.

Similarly, always reduce to an absolute minimum the number of steps required to complete a task. Don’t send users through a tedious obstacle course of clicks when just one or two actions will do. One of the most practical UI design principles, the Three Click Rule, states that a user should be able to achieve any action or access any information they require by clicking no more than three times from anywhere within the app.

Above all, never ask users to re-enter info that they have already provided. If you’ve ever had the experience where a form deleted all your info and made you start all over again merely because you provided incorrect input in just one field, you’ll know that nothing is more likely to make a user throw their device against the wall and give up in total vexation.

6. Provide clear signposts

The sixth of our essential UI design principles concerns intuitive layout and the clear labeling of information. Navigating your app should not be in any way intimidating or confusing, even for first-time users. Instead, exploration of the interface should be fun, and take place almost unconsciously.

Make sure that page architecture is simple, logical, and clearly signposted. Users should never be in any doubt as to where they are within the software, nor as to what they need to do in order to get anywhere else they might want to go.

But don’t put the burden on the user of expecting them to remember how they got to their current location. Instead, provide visual clues to navigation wherever necessary. This way Little Red Riding Hood can easily find her way back out of the forest—without fear of meeting the Big Bad Wolf.

7. Be tolerant of mistakes

Mistakes happen. And users change their minds. In fact, if they are new to the app, they may not have been entirely sure of their actions in the first place.

Don’t hold this against users; make it easy to backtrack whenever necessary, by implementing a fast and forgiving undo/redo function. Not only will this help to avoid the frustration of lost data and wasted time, but it gives users the confidence to explore your app and make changes without fear of negative consequences.

8. Give relevant feedback

Keep users informed about their progress. Provide acknowledgment that their actions have been received. Let them know that things are proceeding as they should. Big, important, and/or rare actions call for big and important forms of feedback. Meanwhile, smaller and more frequent actions merit smaller forms of acknowledgment.

Keep users informed about their progress and provide acknowledgment that their actions have been received.

We’ve already stressed that one of the most important UI design fundamentals is simply reducing info to the bare minimum. But few things are more essential than status info, so don’t force users to look for it. Status info should always be easily accessible and totally accurate.

Users should know exactly what’s going on at all times, without having to deliberately seek out this information or being left wondering if the app has become unresponsive.


269938fdd8c6a28a1de1a34d5a6463bb


Errors occasionally occur, of course. And when they do, users should be informed of them in a manner that is clear and easy to understand. A message reading “error code,” followed by an opaque serious of numbers doesn’t meet this description.

Instead, explain what the problem is; inform the user what they need to do about it; and when writing your error message, don’t rule out the possibility that the error was caused by a system malfunction rather than through any fault of the user.

9. Prioritize functions

Failure to create a clear hierarchy is one of the most common obstacles stopping people from designing a truly minimal and streamlined UI.

As we’ve already stressed, every item on every screen should be absolutely essential to the user experience, with all that is superfluous stripped out at the prototyping stage. Yet even among these essential items, some will inevitably be more essential than others. And the ninth of our UI design principles states that this hierarchy should be clearly reflected in the UI design.

Perhaps you already know that your users will mostly want to do X? And maybe you want to encourage them to do Y as well? Easy; make these two functions more prominent than Z. This could be as simple as changing the size of buttons, text, or other elements.

10. Design the UI for accessibility

Don’t assume that all users are just like you and the people you know. This goes for everything from technical knowledge and abilities to world-outlook.

Apps are used by people from vastly different cultural backgrounds. While realistically you can’t be expected to account for every possible variation in social and cultural convention, don’t automatically assume that the way you do things is the only logical way of doing them. For example, in many parts of the world people read from right to left, so placing objects from left to right will not necessarily lead to all users encountering them from left to right. Design with questions in mind, not answers.


D3536914a0f65d5f09e90ea0db5de890


Even very simple things such as the colors you use will be viewed differently by different people. And this isn’t just a case of subjective or cultural differences either; a significant portion of the world’s population is color blind, after all.

In fact, although colors are a valid method of differentiating UI design elements and functions, you should never rely on colors alone to achieve this. Instead, combine color with form or some other variable to help differentiate important functions in a way that will be valid for all users.

The golden rules of UI design

Just as we tend not to notice the air we breathe until it becomes contaminated or we lack air altogether, good UI design creates a frictionless environment in which users can thrive but the design itself almost disappears from view.

The best designers know that following simple UI design principles such as those we’ve looked at above can help to create a more effective user interface, facilitating interaction to such a degree that the user barely notices the UI at all. Apply these 10 UI design fundamentals to your next project and discover for yourself just how powerful successful UI design can be. ■


About the Author: Asha has 10 years of experience in the tech world and is a tech writer by day, fiction writer by night.


Find more Process stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.


Previous
Next