UX is not just UI (User Interface) design. There are many steps in between like research, analysis, and wireframing. However, whether visual design is done by UX designers or by other specialized designers, it is important for you to have an understanding of visual design principles and understand how your design choices can ultimately affect users and their experiences.
In order to better define the relationship between visual design and user experience we will explore the following visual design principles:
- Gestalt principles of perception
- Eye tracking patterns
Gestalt Laws of Grouping
Gestalt is literally an organized whole that is perceived as more than the sum of its parts. It is the result of a psychological investigation of what humans see and how we subsequently derive meaning from the visual stimulus around us.
It is important to understand Gestalt principles, particularly the principle of grouping. Gestalt psychologists believe that humans are predisposed to make sense of groupings in logical ways. Such perceived groupings include proximity, similarity, closure, continuity, and common fate.
Humans naturally create meaning in relationships that are implied through the composition of signs. As UX designers, are jobs rely less on shape, color, and typography. Instead, we are concerned with the relationships between objects on the page and how those relationships affect their perceived meaning.
For example, look at the squares below. Both groupings contain the same exact squares in size, color, and number. But why do the two groups look so different? The squares on the left look extremely disorganized while the ones on the right are orderly and even form a square out of the squares. As humans, we work to make sense of and understanding grouped objects. It is important to utilize grouping principles when laying out pages in order to help users connect and organize related content. Not to mention the polarizing feelings conveyed from each group. Remember that groupings can convey as much emotion as color or size!
When designing visual page layout it is also important to understand how users skim through pages in order to design a layout that places the most important content in the most eye-catching places!
Enter, the “F-pattern”. The F-pattern represents the natural movement of the eye, typically in Western societies, when scanning content rich webpages. The movement typically begins in the top left corner of the page and skims down the left hand side, making occasional forays into the center.
The human eye, once again typically in Western societies, may also follow the Gutenberg diagram pattern. This pattern tends to take a Z-pattern movement across the page. In this eye tracking pattern, the eye begins in the top-left and finishes in the bottom right, paying less attention to the other corners of the page. This eye movement is best demonstrated when content is evenly distributed and homogeneous across a page or the page contains a large amount of white space.
A UX design goal is typically to get a user from point A to point B by completing a pre-determined set of tasks. In order to signal the user and lead her to the happy path, it is best to understand eye-tracking patterns and how to utilize page layout in order to direct the user’s gaze and attention.
Semiotics is the study of signs and symbols. It is extremely important for UX designers to understand this visual design language because users will derive meaning and understanding from the placement of symbols on an interface.
It is through the use and placement of symbols, signs, and icons that a designer can provide instruction and way-finding without the use of text. Essentially, these graphics can be used as signifiers. A signifier is essentially a signal to the user that communicates where an appropriate behavior or action should take place.
Not to belabor the point, but as UX designers we are responsible for how our users interact with and feel about an interface before we’re concerned with the visual aesthetics like color or type. You do not need to be a visual designer to succeed at this, but you must understand key visual theory like the aforementioned. Such knowledge will go a long way when moving from the research phase to the wireframing phase, and beyond!