•
unction
pillar.Use Gestalt Principles of Perception
A lot of perception biases are common to everyone. To address these, you can use the Gestalt laws o perception to guide your UI design. Gestalt theories of perception were developed by German psychologists in the 1920s.
Gestalt
means configuration in German andgestaltism
provides useful principles (see Wertheimer 1923) that account for how the human mind organizes the environment, hich can be used more specifically to improve the organization of the user interface (UI) and heads-up display (HUD). In his book,Designing with the Mind in Mind
, Johnson (2010) gives examples o how to use Gestalt principles in software design. Here, I will describe only the most useful principles for video game UI and HUD design: figure/ground, multistability, closure, proximity, similarity, and symmetry.Figure/Ground Figure/Ground
The figure/ground principle is illustrated in the below figure: Our mind discriminates between a foreground (the figure), which is usually the center of our attention, and a background (ground). In this illustration, figure/ground ambiguity is used so you can either perceive a vase or two faces. Unless a figure/ground ambiguity is intentional and has a specific purpose in your game, you should try to avoid it in your iconography.
Multistability Multistability
Another example of an ambiguity you want to avoid is multistability. Look at the below figure.
What do you perceive, a duck or a rabbit? Again, some icons can be ambiguous—although the designer who created them might not realize this is the case. I remember when we tested some icons at LucasArts for a game in progress (a first-person shooter); the designer created an icon depicting a radar cone with dots representing radar-identified objects. However, when asked to describe the icon, some participants saw a pepperoni pizza slice instead. Once a pizza slice is seen, it becomes very difficult to perceive the icon differently, so the designer
had to iterate on this icon to avoid such ambiguity.
•
•
Closure Closure
Closure is the Gestalt principle stating that we tend to see whole objects, not separated pieces (the whole is greater than the sum of its parts, as the Gestalt motto goes). For example, in the below figure, we tend to see a see a white triangle in the foreground although it is not
complete (there isn’t any triangle in fact). We have a tendency to close open figures, which explains why negative space works so well in art. It can, of course, also be used in video games.
Symmetry Symmetry
The principle of symmetry explains that we organize input based on its symmetry. For example, in the below figure, we group similar brackets, “[” and “],” and braces (the curly brackets, or accolades), “{” and “},” with each other because of their symmetry. However,
we could group them by how close they are to each other, resulting in four groups (i.e., one bracket alone on each end and two groups made of one bracket and one accolade), which is
likely not what you perceive here. This principle allows us to perceive three-dimensional elements depicted in two dimensions, such as the drawing of a cube.
•
•
Similarity Similarity
The principle of similarity refers to the fact that elements that have the same characteristics, such as color or shape, will be grouped together. For example, in the below figure, you are likely to perceive one group of dots on the left. However, at the top right, you probably perceive columns of circles and squares, whereas at the bottom right, you probably perceive
rows of circles and squares. These differences occur because your mind organizes the circles and the squares together since they look similar. It’s this principle that helps us understand icons on a map. For example, the blue waves are grouped together to represent water, the brown triangles are grouped together to represent a mountain range, and so on.
Proximity Proximity
The principle of proximity states that elements that are closer to one another are perceived as being part of the same group. For example, in the below figure, the dots on the left are perceived as being part of one group but, on the right, three separate groups of dots are perceived because of the added empty space.
This principle of proximity is particularly useful when organizing menus without adding lines or arrows to segment space and suggest an orientation. However, this simple law of proximity is often not respected in game menus or HUDs, which can add some friction for players who are trying to
make sense of the interface the first time they discover it. Let’s take the example of
Far Cry 4
, a person shooter game developed by Ubisoft. In the front-end menu, the “skills” tab allows players tospend skill points, as illustrated in Figure 3.5. In this game, there are two sets of skills that you can buy to become more powerful: offensive skills (the tiger, on the left) or defensive skills (the elephant,
on the right). The first time players discover this interface they might believe that the skills can be bought one after the other on the vertical axis. After all, many skill trees in games with role-playing
elements behave that way; you unlock them bottom-up or top-down. Furthermore, the skill circles are closer to each other on the vertical axis, which may make players more likely to group them vertically. However, that’s not how the skills work here. You can buy the tiger skills from right to left and the elephant skills from left to right. If you look more closely, you might see small arrows indicating what path you need to take to unlock skills. This might be a small detail but, by using the Gestalt principle of proximity, this unusual skill tree could be understood much more intuitively by players. Let’s focus on the elephant skills—the ones on the right. If you only consider the shapes, the pattern is illustrated in Figure 3.6a. As previously mentioned, the circles are closer to one another on
the vertical axis, which means that we have a tendency to perceive them as columns, not lines, despite the subtle arrows. By applying the principle of proximity, as shown in Figure 3.6b, we can help players to quickly grasp how to unlock the skills (from left to right) simply by placing the dots closer
to one another on the horizontal axis and by changing their shape a little bit to infer an orientation. It takes up the exact same space in the interface, and we can remove the subtle arrows that are no longer necessary. This illustrates how you can help players understand an interface more intuitively just by applying Gestalt laws.
Figure 3.5
Far Cry 4 (Ubisoft), skills menu.(Courtesy of Ubisoft Entertainment, © 2014. All Rights Reserved.)
3.3.4
Figure 3.6
(a) Far Cry 4 skill tree pattern (b) Applying Gestalt principles to make the skill tree pattern more easily readable.