Visual Perception: Gestalt Principles

Visual Perception Visual Perception  Perception refers to how information is acquired from the environment via the different sense organs – eyes, ears, fingers.  Eye is the main input channel for a person with normal eye sight.  The eyes (often) show where the attention is. ...

Visual Perception Visual Perception  Perception refers to how information is acquired from the environment via the different sense organs – eyes, ears, fingers.  Eye is the main input channel for a person with normal eye sight.  The eyes (often) show where the attention is.  Visual perception refers to the brain’s ability to make sense of what the eyes sees. Visual Perception Gestalt Laws  Gestal is a German word that roughly means “shape”, “form”, or “whole”  The Gestalt Laws of Perception helps us to explain how the human eye perceives objects or visual elements. Gestalt Principle  According to Gestalt principle when we are presented with a complex visual image, our brain recognize coherent, whole forms, rather than individually perceiving all of the smaller constituent parts that make up the image.  The whole is other than the sum of parts.  Gestalt principles play an important role in making interfaces usable and easy to understand. Gestalt Principles  Figure-Ground  Similarity  Proximity  Common Fate  Closure  Focal Point  Symmetry Figure - Ground  “Elements are perceived as either figure (the element in focus) or ground (the background on which the figure rests).”  We have to determine which elements are figures (requiring immediate concern and attention) and which are ground (not so important right now, but do provide context) Figure - Ground  In short it allows us to determine what we’re supposed to look at and what we might safely ignore.  Foreground objects should be more prominent than their backgrounds. Figure - Ground Figure - Ground Similarity  “Elements that share similar characteristics are perceived as more related than elements that don’t share those characteristics.”  Similarity is a powerful mechanism for communication.  There are many ways in which objects can be considered to be similar.  We will look at different examples Similarity Are these item similar? Similarity What about these? Similarity Similarity Proximity Proximity Proximity Proximity – Without Hierarchy Proximity Proximity- Hype Type Studio Proximity- Hype Type Studio This is a very simple example which highlights great use of proximity and white space. Now look at the second paragraph — this contains all the contact information about the business. Continuation  “Elements arranged on a line or curve are perceived as more related than elements not on the line or curve.” Continuation Continuation In this example the eye is led through the first design element towards the star that aligns with the curve Continuation Common Fate  “Elements that move in the same direction are perceived as more related than elements that are stationary or that move in different directions.” Common Fate Common Fate Closure  “When seeing a complex arrangement of elements, we tend to look for a single, recognizable pattern.”  Closure is a common design technique that uses the human eye's tendency to see closed shapes. Closure seeks simplicity. This technique is often associated with Logo design. Closure Closure Closure Symmetry & Order  “People tend to perceive objects as symmetrical shapes that form around their center.”  Symmetry gives us a feeling of solidity and order, which we tend to seek.  Since our eyes will quickly find symmetry and order, these principles can be used to effectively communicate information quickly. Symmetry and Order Symmetry and Order Focal Point  “Elements with a point of interest, emphasis or difference will capture and hold the viewer’s attention.”  This principle suggests that our attention will be drawn toward contrast, toward the element that is unlike the others in some way. Focal Point Focal Point References / Reading list http://www.andyrutledge.com/gestalt-princ iples-2-similarity.php (Most from this link)