7 User Interface UI Principles

Introduction

The seven User Interface (UI) principles are listed below:

1. Best UI is no UI: UI should solve the task as efficiently is possible, ideally without interaction.
2. The abstraction layer: The visible layer is the real world, the hidden layer is the machine, the UI connects them.
3. Self explanatory: The action of an element should be obvious or at least intuitive.
4. Minimum number of interactions: Easy access to any feature by using groups and statistics.
5. Least surprise: Fluid usage by not breaking the logical flow.
6. Visual patterns: Distinct, identifiable, easy to remember elements.
7. Common sense: Colors to focus attention, highlight actions, visual feedback, no mobile moving disturbing thing, etc.

I've put all these down after reading similar articles on the internet, most of them consisting of abstract rules like "be consistent" or "focus on user". They are just too general to be of any help.

1. Best UI is No UI

We use an application UI to solve a real world problem. This should be done as efficiently is possible, ideally without interaction. We want the machine to help us, not to trouble us, and we want to pass to it as much of the work is possible. Even if we talk about a "Paint" application that we like to spend time with, we still need to access its feature in the most efficient way. The complexity should be on the machine side, in underlying programming algorithms, the UI should be kept simple.

How about a HOT-COLD slider instead of heat source selection and temperature for each one, etc.? Or even better, a service that tunes the room temperature without any interaction....

2. The Abstraction Layer

The user shouldn't be aware of programming stuff and technical details. He doesn't have to know IP addresses, port numbers, server names and how internally the backup is made. The real world is what the user is aware of, the UI should reflect this. He just wants to send a message or an email, not to tune the internet protocol.

Instead of a page containing 50 technical options, the user may see a short list of precalculated configurations with generic names. And leave details for some advanced settings.

3. Self Explanatory

I see lately, particularly on mobiles, almost impossible to figure out buttons / interfaces. It's even more difficult as they don't have tooltips (by holding the finger on the selected element). If it's a "Delete" button, maybe it's a good idea to make it red with an X sign. Unless they are very universal common signs like the "hamburger" menu or the three dots options, they should express their action through icon plus text, if possible. The tooltip should be mandatory, at least on "hard to figure out what they do" elements. There is no need for a long description, as repeated use will fix the habit, still it has to be there.

You should not force the user to remember your particular buttons among, maybe, the hundreds of applications/websites he is using.

4. Minimum Number of Interactions

Either there is a feature within an application, an application in an operating system or a list on a website, it should be within reach with a minimum number of interactions. Ideally 1-2-3 clicks, touches, etc. The device of the usual user may have maximum 100 installed applications. Also, the number of features of an application is within this number. The human can easily remember 7-10 elements in a selection.

To easily access 100 elements, the best idea is to make direct access (shortcuts, icon on destop, icons on toolbar etc) to the most 7-10 used ones (statistically) and group the rest of them in 7-10 folders. In this case, you can access anything within maximum two clicks (two actions), one for the folder, the other one for the application. The same with an application features, you need one or two clicks to access 100 of them.

If statistically a user is accessing a specific feature a lot, then it requires direct access, not to put it on some hidden page requiring scrolling and 8 clicks.

5. Least Surprise

If it is a surprise, it won't be remembered well. Or it is not intuitive enough. Avoid popups, avoid breaking the visual or logical flow. Make it fluid. Provide feedback on actions on the same screen.

6. Visual Patterns

Any user interface, used again and again, should create some usage patterns and automation. The user should develop some habits in reaching some feature without any thinking effort. If elements are not distinctive, not in fixed position or too overloaded, these patterns are hard to born (or at all). If all elements are grey shapes inside blue squares, they can hardly be remembered, you need to focus on them every time to identify a specific one.

An icons should have 4-5 colors, maybe a dominant one, with a simple but not trivial shape. This way, the number of neurons in the brain involved to remember that feature will be perfect - not too few (which lead to difficulties in finding it) and not too many (involving too much thinking effort to match the search).

7. Common Sense

Here are obvious things that don't really fit in a special category. If the user is troubled, try to find another solution. Don't overload, provide feedback, make the UI easy to use. It should be appealing, with gradients, shadows, high resolution bitmaps. Don't follow the main stream in creating dull, depressing, hard to use User Interfaces in 2 colors. Think from the user point of view, test it, if you find an easier way so it will be for the user. There is just a lot of advice here, some UI development books may help.

Conclusion

The user interfaces will probably still be present for a long time, until AI will be smart enough to understand what we really want. That's most likely at least 30 years. So during this time, you may want to leave some good, efficient User Interfaces. I have to give credit for some principles here to their original authors, but I cannot remember them as the reading spread across many years. I just made things simple, so they will be remembered.

History

• 25^th June, 2020: Initial version