The 5 Gestalt Principles to Making Mobile App UI Intuitive

Posted by on Aug 16, 2012 in UI/UX | 0 comments

The Gestalt Principles of Perception attempts to explain the way in which humans perceive items as a single structured unit rather than a sum of each individual part. These principles can be used in making mobile application user-interfaces more intuitive. Let’s explore these principles.

  1. The Law of Proximity

    Objects that appear close together in space will be perceived as one group. Consider the textbook example below:


    The rectangles appear as if there are three groups of three; within each group, the rectangles are very close to each other. How can we apply this to mobile applications? Well, in organizing items that contribute to the same task. Take a look at the example provided by Soegaard (n.d.):


    By using the Law of Proximity, the radio buttons are arranged more closely to P2P Search than to Web Search. This makes it easily understood they are sub-functions only under P2P Search. With the many functions and sub-functions in mobile applications, the Law of Proximity can be used to make navigation intuitive.
  2. The Law of Similarity

    Objects that look alike will be perceived as one group. Consider the textbook example below:

     Although the shapes are of equal dimensions and proximity, our understanding of their similarities and differences cause us to perceive them as 4 groups of three, alternating between circles and squares. To apply this to mobile applications, we can for instance, take advantage of this Law to organize information so that it is more accessible. Here’s an example from Opera (Soegaard, n.d.):

    Opera groups functions by using different background colours. By colouring say, ‘Fonts and colors’, ‘Page style’, and ‘Multimedia with a light-gray colour, it is immediately perceived as one group of options. This can be used to organize any amount of information in mobile apps.
  3. The Law of Figure-Ground

    The Law of Figure-Ground is a little more complicated. Before describing it, consider this famous illusion:


    The Law of Figure-Ground posits that some objects will capture more attention and therefore ‘stand out’ from the background. Graphic Designers often play with the Law of Figure-Ground to make logos more rich (e.g. FedEx, Tostitos). In mobile though, we can use this law to help lead the user through the user-interface, inadvertently making it easier to figure out.
  4. The Law of Symmetry

    The Law of Symmetry states that we perceive objects as symmetrical around their centres. This means that if we see unconnected items that are symmetrical, we would likely perceive them as one object. In mobile, this law can be useful in organizing elements on a small screen. Here’s a textbook example of the law of symmetry (Soegaard, n.d.)

  5. The Law of Closure

    Lastly, the Law of Closure says that humans will perceive incomplete objects as complete (i.e. as one closed object) – given the correct circumstance. Consider this example below (Soegaard, n.d.):


    Although there are 24 ‘unrelated’ shapes, we not only perceive these shapes as groups of threes, but we also perceive a single, complete, cube. This law is similar to the Law of Symmetry, except the Law of Closure does not require symmetry. Again, in mobile, this law will be useful in the organization of UI elements, while maintaining aesthetics.

References

Soegaard, M. (n.d.). Gestalt principles of form perception. Retrieved from http://www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html

Short URL: http://bit.ly/PcK866

Related Posts

Subscribe to our mailing list

* indicates required
Email Format