Game design and Gestalt laws

The Gestalt laws explain of why we perceive patterns in a certain way. Perceive patterns relies on how our brain organizes the raw data from our senses, it makes use of perceptual sets quite a lot. Our brains are inherently wired to create order in things we see, even if there isn’t any. They will always try to fill up the gaps. Remember the illusion to the right? I showed it to you in the first article on perception (link). There is nothing more to the picture than three white pizza’s all with a slice missing and three lines with the same angle. Somehow your brain fills up the gaps and you perceive a black and a white triangle laying on top three white circles. The gestalt laws offer us an explanation why that happens.  These laws are much like heuristics: mental shortcuts for problem solving. We use them to quickly make sense of what we see, they mainly apply to our visual sense.

In general the laws state that the whole is different than the sum of its parts. This means that the whole element is different than the elements it is made up from. Think about a dotted line, the whole represents a line but the parts are dots. The gestalt laws are often used in UI and graphic design to make the displayed information more readable or to play with our perception.

The Gestalt laws were first put to paper by Wertheimer (1923, 1938). Later contributions have been made by Köhler (1929) and Koffka (1935). The 6 laws in the picture are used often in UI and graphic design, however there are many more.

Law of Proximity
Regional or chronological closeness of elements are grouped by our mind, they seem to belong together. Proximity is what you would use when you design the UI of an inventory system or a HUD in general. Group items that have similar functions or fall under the same category by placing them closer to each other. Of course that also means that you should leave more space between items that fall under another category.

Law of Similarity
Our mind groups similar elements to an entity. The similarity depends on relationships constructed about form, color, size and brightness of the elements. Like proximity, similarity should also be used for the UI design of an inventory system. Use a symbol and/or color code different items from a certain category. Items with the same color or symbol will be seen as a group. You can also make items more similar when they all have something in common like since or a certain shape.

Law of Enclosure
Enclosure states that you can group items and information by enclosing everything that is supposed to go together. This law is used in UI design to group different kinds of information such as text and pictures that belong together. Applying the law can be as simple as adding a border around the items or information. Often UI designers use a card metaphor, it almost look as if pieces of information are put on cards. Facebook uses enclosure and displays individual stories on cards in your news feed. They used color and line to separate information that doesn’t belong together.

Law of Symmetry
This law states that we perceive objects as belonging together when they are symmetric regardless of their distance. Symmetry can be used to group elements together or to create the idea of wholeness. Adding symmetrical borders at the left and right side of the screen can create the suggestion that the players views the game through a border or lens.

Law of Closure
Our mind adds missing elements to complete a figure. The black triangle from picture 1 is not actually there, our brain filled up the gaps from the missing pieces. The board game Carcassonne is a good example how you can design elements that use this law. As the players build their castles and roads they can already imagine which pieces they need. Players need little cognitive resources to imagine the missing pieces because our brain already filled up the gaps. When you are designing for closure make sure that the player can fill up gaps of missing information.

Law of Continuity
Continuity states that the mind continues a pattern even after it stops. Our brains are remarkable pattern machines, we perceive patterns even if they are not there. The law of continuity prove this. In our picture example of the Gestalt laws you can see this one long squiggly line with missing parts. Actually it is not one line, there are three separate lines. The law of continuity doesn’t just work for lines with parts missing, any figure can be used in patterns to make up something else. In level design you can use this law to display a path or movement in a certain direction. It is a good way to point the player in the right direction or to give them an occasional hint. Portal 2 uses this method to guide the player using a dotted line. The player can fill up the gaps even when debris is covering parts of the line like in the picture below.

Law of Connection
We perceive elements as being together when they are connected with each other. Graphic designers use this law for infographics or flowcharts to show how elements are connected and that they belong together. The key here is to connect elements with the use of lines to show that they are related or that they belong together.

Law of Figure and Ground
Certain objects take a more prominent role while others recede more into the background. This law is used quite a lot in logo design to make the most important element standout and attract attention at first. Use the law of figure and ground to attract attention to important information or option to make the player pay attention to this first. The use of color is key here, highlight the option that is important or needs to attract attention quickly. Think about using a complementary color scheme or red since it immediately attracts attention.

Law of Common Fate
Elements with the same moving direction are seen as a unit. If certain elements all have the same direction they are seen as one. The direction can be an animation but it can also be a movement the player is making. The Mario platformer games a good example of how common fate can be applied. Enemies in the platformer almost always move towards Mario when he first encounters them while useful objects always move away at first. You can apply those ideas to your own game design as well, when a player first encounters an enemy have them walk to the left. You can do the opposite with friendly NPC’s, let them walk to the right.

References

The different ways we perceive games

By now you know that our brain is remarkable and weird. How it perceives things and how it can fool us. But you are not yet aware of the two different methods our brain uses to perceive the world: top-down processing and bottom-up processing. Bottom-up processing is automatic, we instantly know and understand what we have perceived. Top-down processing is a more deliberate process where we sometimes have to dig deep to understand what we have perceived. These two methods we use for perception are related to the dual-process theory, top-down processing is a form of system 2 thinking and bottom-up processing is a form of system 1 thinking. Bottom-up processing is always on and can help us quickly make sense of the world around us. Bottom-up processing happens when salient (outstanding) features of a stimuli draw attention. This stimuli can be a loud sound from the timer you set when you are cooking an egg or an alarm. It can also be something visual, a smell, taste or a tactile sensation.  Continue reading The different ways we perceive games

Perceiving is believing – the game design edition

Perceiving is believing, or is it really? We have five basic senses which we use to perceive the world with: smell, taste, touch, seeing and hearing. But there is a difference between sensing and perceiving. Our senses provide us with raw data from the environment around us. This raw data can be visuals from our eyes, airborne chemicals our noses pick up, tastes on our tongue, soundwaves via our ears or tactile (touch) information from our skin. Perception, on the other hand, is the way our brain organizes and interprets this raw data. We use our perception to make sense of what we sensed. Perception can be influenced by the context in which the stimuli (what we have sensed) presented, our expectations and our current mood. What you see isn’t always what you get and that is true for all senses. Perceiving isn’t always believing.

The difference between perception and sensation

Our brain works in weird ways which affects our perception too. Sometimes you don’t perceive something you’ve sensed or you perceived something that wasn’t there in the first place (Gosselin & Schyns, 2003). Our brain can also play tricks on our perception. It can interpret the stimuli in weird ways. Optical illusions are a fun example of how our perception works, below are a couple examples. How can two colors be the same while you perceive them as different? Illusion 1 is an example of how context and expectations shape your perception. Square A and B are the same shade of grey but your brain interprets them as completely different. You see a checkerboard and expect a certain pattern, A is supposed to be black and B is supposed to be white. Combine this with the contexts of the shadow: your brain expects the squares in the shadow to be darker. Sometimes your brain makes you see things that aren’t there. You probably sees a black triangle laying on top of three circles and a white triangle in illusion 2. That is your brain filling up the gabs. There is no black triangle, the triangle is a lie! There are just three white pizza’s all with a missing slice and three lines with the same angles.  Illusion 3 is a picture of two faces or a vase. It all depends on the angle you are looking from, but you can never see both at the same time.

illusion 1                                                         illusion 2                                          illusion 3

How we perceive these illusions depends on our perceptual sets. A perceptual set is the tendency to interpret a stimulus in a certain way only. It is what makes you see the faces before the vase in illusion 3 (or the vase before the faces). Our perceptual sets are heavily influenced by our emotions, expectations, beliefs, context and past experiences.

Perception is sometimes weird and that our brain words in strange ways. You might wonder why we have such a thing as perception in the first place. Why can we not just perceive the world as we sensed it? And what is the function of perception? Perception is quite useful for filtering out the necessary information only. We would go crazy by all the stimuli around us if we would perceive the world as we sense it. We use our perception for attention, to figure out what information is coming in. The incoming information can be filtered through our selective attention, that way our brain ignores anything else but the stimuli of interest. Selective attention is what we use when we become immersed in a game. We only focus our attention to the stimuli from the game and ignore the outside world. Perception is also used for localizing where the information of interest is coming from. When you walk through your town and smell something amazing you might want to wonder where it’s coming from. Or your perception already did the work and you know it was from the bakery across the street. Perception can also help you recognize a stimuli. You smell the bakery and immediately recognize that they just finished baking their bread.

We can also filter out unnecessary information with our senses directly. Our sensory cells respond less and less when a stimulus stays the same for a while. After a while we no longer register the stimulus. This is called sensory adaptation. Think about the pressure of your clothes, you notice it when you put them on and when you move. Most of the day you just won’t notice them due to sensory adaptation. The same happens to the noise your fridge makes or the ticking of your clock. The smell cells in your nose will even stop responding for a while. They need to be given a chance to recover before you can smell again (Dalton, 2000).

Not all senses are equally important to games. Smell isn’t used in games since the smell-o-console hasn’t been invented yet. You’re also not very likely to lick your screen to see what the game tastes like. The only senses we can use in games are vision, hearing and tactile (touch, vibration and pressure). As designers we only have to account for hearing and vision. We have very little control over the feel of the keyboard or controller. Do think about adding vibration occasionally when your game is played with a controller.

Thomas was alone is a favorite of mine because of the excellent use of emotional narration but the game also works well perception-wise. When you play the game for the first time you immediately understand who Thomas is. Considering Thomas is a red rectangle, that is kind of amazing. Thomas was alone shapes the player’s perception with its title, expectations and context. From the title you immediately expect to play or interact with a character named Thomas. You expect Thomas to be one of the characters or perhaps the playable character. The narration adds to this as well once the player starts the game. There is no need to show a big arrow with the word ‘playable character’ written on it, your perception worked it out already. Without its art, the game would be nowhere. The choice for abstract art was a conscious one. It’s not just to play with our perception, it helps our perception. The color scheme of the game is mostly monochrome except for the characters, they really pop-out. From the first interaction it is clear that these colorful rectangles are the objects of interest. Your gaming knowledge matters to your perception as well. It helps you understand where the characters need to go, where you can and can’t go and how to interact with the game in general.

Tips and suggestions
These tips and suggestions can be applied to all types of games. For some genres it might be easier than others but it is good practice to make use of player expectations. Do a little research into other games your target audience plays or research similar games. Find out what these games have in common with each other or what popular gaming conventions are in the genre. If you plan to make a mobile game where players have to slice things in half, look at other games where players slice things in half (hint: Fruit Ninja). How do players interact with the game? Is it a common way to interact with these types of games? Are all good questions to ask yourself. Don’t just blindly copy mechanics and features from a similar game, find out what is common knowledge among your players and what they expect.

Help the player’s selective attention by making use of the pop-out effect for objects of interest. Think about the little shake animation in candy crush. The shake grabs the player’s attention immediately, it’s even visible from the corners of your eyes. Or make use of colors that are brighter than others for objects of interest. This might be the domain of the artists but it is very important for game designers to take this into account as well. It’s the game designer’s task to guide the art team into making decisions that benefit and complement the game design. Audio can also be used in interesting ways to help the player’s perception in the game. You can use it as a mechanic to lure the players or as a way to foreshadow an upcoming monster. Perception is an interesting thing our brain does. We can aid it through our game design or play with it. The possibilities are endless.

References and stuff

  • Crash course psychology: https://www.youtube.com/watch?v=unWnZvXJH2o&t=9s
  • Gosselin, F. & Schyns, P. G. (2003). Superstition perception reveal properties of internal representations. Psychological Science, 14(5), 505-509.
  • Dalton, P. (2000). Psychophysical and behavioral characteristics of olfactory adaptation. Chemical senses, 25, 487-492