Basic UI / UX patterns
In the world there are many articles on how to make the interface. All of them are filled with useful tips for various situations: here you need a red button, there should be such an animation, and so on. All situations cannot be described; there are simply an infinite number of them. However, if you understand the basic principles of interface design, these tips are no longer needed. The main thing is to understand why these tips work and how the end user works. And the user is a person with all its features.
In this article I will try to describe how the human brain works and how to use it in interface design.
In our modern world filled with technology, man still remains very similar to a cave man. Evolution does not keep pace with the technological process, and we people are forced to live in the modern world with a set of habits and reflexes that we have left from ancient times. All this sometimes interferes, but, with a proper understanding of ourselves, this can be turned in favor.
So, let’s consider the task: to make the most convenient interface for a person. What does it mean the most convenient? This means that a person using this interface solves his tasks as efficiently as possible. The more a person manages to do it is a unit of time and the better his work. You can consider this process as the exchange of human energy for useful work.
The key point here is energy costs. And here it’s just worth considering the specifics of a person and his brain. Our brain consumes a lot of energy, and, like all other parts of the body, saves it. Let’s consider briefly the work of the brain.
We already know a lot about the brain, but not all. However, current knowledge is quite enough to improve the approach to interface design. So, the human brain consists of many neurons and the connections between them. Our thoughts, memory, reflexes – all these are electrochemical processes between neurons. To see something, first we receive a signal from the retina of the eye, then this signal is transmitted to a certain area of the brain, depending on the signal, certain neurons are excited, which excite the following and the next, and ultimately the zones of neurons that correspond to what they see become active in the brain image. As can be seen from this long sentence, the process is very complex and energy intensive.
All our thoughts, appeals to memory are all energy expenditures. It means, we need the user using the interface to think as little as possible. Here it would be possible to finish. This is a basic metric for the effectiveness of interfaces. But, nevertheless, this advice is rather difficult to interpret. Therefore, we delve further. How to make people think less when using the interface? What features of the brain to use?
Strength of habit
There is such an expression: a person is a bunch of habits. There is a great deal of truth to this. As mentioned earlier, the brain is a collection of neurons. Neural network, simply put. And this neural network is constantly being adjusted and trained. At first, a new task requires a large amount of energy, because the necessary connections have not yet formed and our brain is not trained. But each time it adjusts more and more, and less and less energy is spent. Ultimately, the most optimal relationships for this task appear. This is a habit or skill.
This can be used when designing interfaces. The user is probably not the first time to see a computer and, perhaps, already saw something similar to your program or its parts. But, it so often happens that developers begin to reinvent the wheel – re-invent ready-made interface patterns. Everyone wants to invest a piece of themselves and show their creative potential, but the main thing is not to overdo it.
Therefore, here is a very important principle: use common previously invented solutions. It works very simply, the user sees the interface, recognizes in it something similar that he used before, and can already guess what to do next.
For example, saving files. It sounds strange, but sometimes developers come up with their own ways to save files. Although for a long time there are generally accepted patterns of behavior in such a task. If someone has already solved your problem, and this solution is also used in other interfaces, you should take a closer look at this solution and to do something similar.
In addition to acquired habits, a person has congenital ones. More often they are called instincts. These are such instant reactions of the nervous system to some external pathogens. During evolution, they appeared and entrenched because they help to survive. I saw a bush moving suddenly – maybe there is a tiger sitting there who wants to kill you – there is a fear, you need to urgently carry off your legs. I saw an unnaturally bright frog – it’s best not to touch it.
Of course, the tiger does not sit in your program and when the dialogue suddenly appears, the user will not jump and run. However, this affects emotional stability. In short, all kinds of external stimuli in the form of loudly talking colleagues, not enough tasty coffee, and so on, reduce emotional stability. Because of this, we begin to think worse. We exit the flow state, we have to concentrate more and more on the task. To all this is added and how the interface looks and behaves.
If the interface doesn’t look very attractive, some annoying elements constantly appear and in general if “something goes wrong”, we instinctively perceive it, and this affects our productivity. What can we do with this? These irritants must be avoided.
First, use the theory of color harmony. The right colors give a sense of calm. There are many articles on how to choose the right palette for the eyes. All of them are built on the theory of the color wheel. According to certain patterns, harmonizing colors are calculated that are pleasant to the person and do not cause irritation.
Secondly, use smooth and realistic animations. We do not really like when something suddenly appears or disappears. And always notice unnatural movements. When we open the door, it accelerates first, then slows down. Use realistic motion functions, with non-linear functions.
Our brain is not omnipotent and we cannot think about everything at the same time. The number of things that we can keep in mind at the same time varies somewhere between 5 and 7. This is called the working amount of brain memory. Very similar to computer RAM in principle. In order to think about something, you need to extract it from long-term memory to working, then operate on it, and return it to long-term memory. Of course, this process is really much more complicated, but for simplicity we will take it this way. The most important thing here is that the working volume is limited. And it is very small. We cannot think of ten entities at the same time. And the less we need to keep in mind, the less energy is spent on the thought process.
In this, it is still necessary to take into account the fact that energy and time are spent on switching contexts. If you first need to think about one thing, then another, then again about the first, then about something else, a lot of energy will be spent on a permanent reboot of the working memory
What to do with it? Basically, of course, it depends on the specifics of the program. It is necessary to monitor the focus of the user. The task should be linear. For example, if some item is rarely used, you can make it the default, with the possibility of additional settings. Everything needs to be done so that you do not have to constantly switch attention.
But there is more general advice on how to keep a person’s attention on the same thing: these are geometric patterns. For example, take a table or list. Why are they easy to read? Because we first load the “model” of data into memory. We know that in this column such values, and in this another. And the subsequent perception of the data is quite easy, since we know where what will happen next.
In general, this can be called as the geometric correctness of the interface. Common things are grouped into single blocks, the main blocks are located on the top and left, are ordered to the right and down as they become important or as the task progresses. It is important to consider symmetry so that the brain can more easily detect blocks. It is also important to take into account previous experience: similar parts of the program’s functionality should have similar geometric patterns in the terms of interface so that the user already has an idea with what he must work.
Working with a graphical interface involves pattern recognition. And one can also help a person in this. Consider a simplified algorithm of how we understand what we see. This process is somewhat similar to how computer neural networks recognize, for example, letters.
First, from the eyes we get a signal about which cones in the retina are excited by a particular color spectrum. Roughly speaking what pixels what color. From this set of information, color is first allocated. Black is different from white. This is done by one group of neurons. By the difference in color, we can define simple images: line, point, and so on. Another group of neurons associated with the first is already engaged in this. Then this information is transferred to the next layer, where these images are generalized and so on, at each level, neurons are more and more connected with those neurons that already store our experience about previously seen images. We saw the letter A on a white background, first highlighted its color on the background, then recognized simple images – the lines that it consists of, then compared it with all my previous experiences, and the letter A was the maximum match. In front of us is the letter A.
This process is complex and divided into several stages. This can be used. You can use this pattern recognition sequence to simplify the perception of the interface. So again: first the color is highlighted, then the form, then the content of the form.
This sequence shows that the easiest way to influence the recognition of the image through color. This is what living creatures on earth use to claim who they are. It’s immediately clear that the red snake is damn dangerous. This is much easier to understand than if it were written on it “dangerous snake”.
Use color to accent the interface. Use it to convey simple information: red – cancel, green and blue – positively, white – emptiness and calm, and so on. But remember, the main thing is not to overdo it. Use a palette of just a few colors.
After the color comes for the selection of simple images, only then their content. First, we understand that this is a circle, and then we understand that it is a zero or letter O. Therefore, icons are better than text. In addition, they take up less space.
The interface has feedback with the person through input devices: keyboard, mouse or touch screen. This feature is also important to consider. Everything is simple here and is based on the laws of physics. The fewer the movements, the better. The less eye movement, the faster the perception of information. The less you have to move the mouse, switch from mouse to keyboard, the better.
However, here you still need to take into account the features of the user. For example, programmers are sitting with their hands on the keyboard, so switching to the mouse is an extra load for them. The average user holds one hand on the keyboard, the other on the mouse. The designer holds the pen with his second hand. Etc. It is important to consider this specificity.
In motoring, the tips described above also help. Geometric patterns reduce the number of clicks and movements, reduce the movement of the eye. The repetition of these patterns form habits, and the user is literally on the machine automatically moves the cursor to the right place.
In this article I tried to describe those basic features of users that should be considered when designing an interface. This list can be improved and supplemented with details. After all, the more we understand ourselves, the better we interact with each other.