Psychology pt2. Gestalt principles and mobile design

Gestalt is a german word for ‘shape’ or ‘figure’. Gestalt principles can be regarded as a “descriptive framework”, theories of visual perception that the human brain is wired to see structure, logic and patterns (Stafford & Webb, 2004).

In order for a user experience to be successful on mobile, its important that gestalt principles are applied to the design (Ware, 2010). Gestalt principles create a pleasant experience for the end user. Gestalt principles are important in user experience design because the help inform which design elements are most effective in a given situation, Secondly, these principles have the ability to influence how we visually perceive something which can get use to pay attention to specific areas, carried out certain tasks or influence our behaviour. (Johnson, 2014)

Figure Ground Relationships

Figure ground theory helps us to distinguish content from structure (Rutledge, 2008). In other words, figure ground is the idea, that you design something in such a way the it is very clear for the user to where to look and be able to determine what is content and with is background.

Welcome Screen.jpg

Similarity

Similarity is when simple elements of user interface are perceived as a single group or ‘chunk’ and are understood as being more related than dissimilar elements [ref Universal principles of design]. Similarity can work in different ways with different effects. For instance, using colour to represent similarity has the strongest effect and using shape is considered the weakest form of signifying similarity.

In Mobile design, similarity can be can be illustrated be most commonly seen in list-style items. By display similar information in the same, uniformed display, the user easily understand that information to be similar.

gs_similarity.jpg
Similarity is evident in the shape, layout and proximity in the lists for the menu items

Proximity

Proximity can be described as “elements that are closer together are perceived to be more related that elements that are farther apart” [ref universal design]. Proximity is an effective means for increasing usability in a product by ordering items in a logical structure can be easily understood by the user. A good example of this in user interface design is labelling on forms. Labels should be clearly associate with its input field by using proximity to should the grouping.

bottom-bar.jpg
By group the nav bar menu items closely together it give the sense that they do similar actions

Common Fate

Elements that move together in a similar direction are perceived to be connect or of similar type of information. A good example of this is when files are selected and dragged in OSX software, the selected items become semi-transparent and move together as a group.

 

Closure

Close can be described as “A tendency to perceive a set of individual elements as a single, recognisable pattern, rather than multiple, individual elements.” (Lidwell, Holden, & Butler, 2010)

 

IBM Logo – Paul Rand made heavy use of closure in his logos.

 

References

  1. Cao, J. (2015). Gestalt Principles for Designers – Applying Visual Psychology to Modern Day Design – Treehouse Blog. Retrieved 20 April 2017, from http://blog.teamtreehouse.com/gestalt-principles-designers-applying-visual-psychology-modern-day-design
  2. Johnson, J. (2014). Designing with the Mind in Mind, Second Edition: Simple Guide to Understanding User Interface Design Guidelines (2 edition). Amsterdam ; Boston: Morgan Kaufmann.
  3. Lidwell, W., Holden, K., & Butler, J. (2010). Universal Principles of Design (Second Edition, Revised and Updated edition). Beverly, Mass: Rockport Publishers.
  4. Rutledge, A. (2008). Andy Rutledge – Gestalt Principles of Perception – 1: Figure Ground Relationships. Retrieved 20 April 2017, from http://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.php
  5. Stafford, T., & Webb, M. (2004). Mind Hacks: Tips & Tools for Using Your Brain (1 edition). Beijing: O’Reilly Media.
  6. Ware, C. (2010). Visual Thinking: for Design. Morgan Kaufmann.

Bibliography

  1. Johnson, J. (2014). Designing with the Mind in Mind, Second Edition: Simple Guide to Understanding User Interface Design Guidelines (2 edition). Amsterdam ; Boston: Morgan Kaufmann.
  2. Norman, D. (2013). The Design of Everyday Things: Revised and Expanded Edition (Rev Exp edition). New York, New York: Basic Books.
  3. Weinschenk, S. (2011). 100 Things Every Designer Needs to Know About People (1 edition). Berkeley, CA: New Riders.
Advertisements