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.

Human 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.

Ancient instinct

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.

Brain RAM

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.

Pattern
recognition

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.

Motility

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.

Summary

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.