Jump to content
  • entries
    14
  • comments
    10
  • views
    1836

Game design and Gestalt laws

FriendlyHobbit

1050 views

http://www.tinker-entertainment.com/sitavriend/psychology-and-games/game-design-and-gestalt-laws/


59a980d0ee302_flat1000x1000075f_u2.thumb.jpg.8187d866dc8680b8585b79b088d9026d.jpgThe 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 flat1000x1000075f.u2.jpgpizza’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.

xillustrations.jpg.pagespeed_ic.9pxvUuQlA7.jpg.6a21d773e8709817799ba81c472ede5a.jpg

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.

Untitled.pngLaw of EnclosureUntitled.thumb.png.1c3fbe2291aec366d02a04dd5f47b79c.png
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 ClosureCarcRiverLayout.jpg
Our mind adds missing elements to complete a figure. The black triangle from picture 1 is not actually there, CarcRiverLayout.jpg.a6585c6ee0646a1074a6d3fa5d649c18.jpgour 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.

Portal-2.jpg.d5714c1c5bc601f82f918996c26aac92.jpg

Law of Figure and Ground
Certain objects take a more prominent role while others recede more into the background. mosaic-ii.thumb.jpg.8a7511ae94e3973387c3331b1ad6e951.jpgThis 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 mosaic-ii.jpgand 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.



1 Comment


Recommended Comments

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement
  • Advertisement
  • Blog Entries

  • Similar Content

    • By Jhcom
      Hey, could people please help me out with my thesis. It is a 1 minute game you can play on http://julianhana.com/comp/index.html. With this I measure movement patterns and composition techniques! 
    • By FluffexStudios
      Hi everyone,
      Stitched has been released for almost a year now and our game has gone through numerous great updates and revisions thank to feedback from everyone! To conclude a wonderful summer, our game is currently on sale for 30% off on Steam from September 17th to October 1st. Check us out here: Store.steampowered.com
      Also, we would want to showcase some of our artworks for our game. Below are some of the concept arts that we did in the past.
      Firstly, the main subject we wanted to focus on before any art is the primary color of the game. We decided to choose purple as it's a color that stands out and somewhat fitting in a horror game.
      Below is the original title screen and the finalized version of the title screen of Stitched. We original wanted to give Catherine long hair but decided against it because we feel the long hairstyle was done too many times. We wanted to give Catherine a unique look hence we decided upon the new shorter hairstyle. We also touch up on her expression to make the player see that Catherine is terrified. Thirdly, we wanted to emphasize the title of the game by making it glow with light purple color.


      The below three images represent design stage for the doll character in Stitched. The first image is the original sketch. The second image is an updated version to give the character a more serious tone. The final sketch is to give the character her color which include her hair, face, and dress colors. We went through a large amount of revisions for this character to get the right color, facial expression to match her personality.



      And lastly, check out some amazing fan art for our game through this youtube video!

      For anyone who is interested in our art. Check out our deviant art page here.
      For those who have further interest in our game, check out our website here and our Steam developer page here for future projects!
      Cheers!
      Fluffex Studios
    • By william.equal
      Hey, I just finished a new episode of "Game Audio Lookout"! This time it's about musical sound effects in the Super Mario series. Here's the link to the video on YouTube:
      --
      Musical Sound Effects in the Super Mario Series | Game Audio Lookout
      https://www.youtube.com/watch?v=6hHbTVloizU
      We’ll have a deeper look at musical sound effects in the Super Mario series in this episode of "Game Audio Lookout".
      I guess everybody has heard the sounds of the Super Mario series before. But I believe most of us don’t exactly know how these were constructed and what efforts were taken in later instalments of the series to produce sound effects that even harmonise with the game’s music.
      --
      Feel free to let me know what you think
      Alex
    • By OConquestGame
      Hello there!
      I’m the creator and producer of an upcoming visual novel / video game. 
      My team and I are looking for artists (character and background), writers (experienced in writing relatable characters and witty dialogue), and programmers (familiar with unity and creating mini games). 
      Our team is a group of close friends looking to break the mold of the traditional visual novel and create something new and positive. This game will be highly promoted and be a great portfolio piece. Rates are negotiable!
      If you are interested please contact/message us today! OConQuestGame@gmail.com
    • By Gas Lantern Games
      Hello!

      I have spent the last year and a half developing a game in my spare time in Unity! I am releasing it soon on Steam. Ant Empire is a strategic remake of some older games. It is influenced by games such as Ant Empire and Civilization.

      I am currently doing a kickstarter to help fund an AI before launch.

      I have attached some images (tried some gifs but they were too large) to show the current stage of Ant Empire, which is nearly completed.







×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!