As Kurt Koffka famously stated, “The whole is something else than the sum of its parts, because summing up is a meaningless procedure, whereas the whole-part relationship is meaningful,” it is easy to infer that a digital product is created by coordinating components coalescing together to create an experience. When the layers are completely pulled back, all these possibilities are rooted in the idea of building blocks that are purposefully stacked upon each other in a united relationship. Design functions as one entity composed of layers and building blocks to stabilize functionality and memorability.
As these moving pieces shift and settle, their plotting and placement is a fundamental step to consider and, thus, enter visual hierarchies. Visual hierarchies function as information architecture of all design components, from graphic design elements to content and must be purposefully integrated. A hierarchical visualization of information allows users to utilize a design and interface seamlessly as the delivery of information presented is done so without cognitive friction.
These are tools and principles that can be utilized to ensure your design adheres to a clear visual hierarchy to prompt an innovative user experience. Visual design and its placement are crucial for designers and psychological principles can even be applied to its structure. Known as the Gestalt principles of psychology, the laws of human perception can be implemented to back up design directions that influence a positive user experience. Let’s explore 3 laws that can be applied to visual hierarchies.
Law of Proximity: Order and Cohesion of Your Elements
The Gestalt Law of Proximity is a principle of human perception that dictates items, or in this case design elements, that are placed closely together are related to one another. This also prompts the idea that elements that are grouped together but separated from other elements further highlight their relation. How then, can this formulaic order and strategic separation be applied within a digital design? There is a plethora of elements that are grouped together away from others on websites that draw an emphasis to this idea. Grouping elements together can be conducted with negative space, menus drop-down subcategories, headers and their subheaders, and so much more.
For example, if one were to look at the “About” header of a website, chances are, right below it there will be a paragraph or blurb right underneath. This is a law of proximity because naturally, people will know that paragraph is about to describe who a company is, or its overall mission. Now, if there was a gap of negative space that significantly separated the two, cognitive friction kicks in because the relation becomes separated and confusing for the user.
The law of proximity reflects order and structure within an interface because it allows elements that attain a similar function and purpose to be grouped simply by plotting them strategically or carefully separating them with negative space. This is vital for visual hierarchies because it enables designers to group important elements that attain similar functionalities to guide the user along their journey.
Law of Similarity: Reduce Cognitive Friction
Another Gestalt principle that can be applied to UI/UX design is The Law of Similarity. This law reflects the idea that humans tend to group similar things, elements, or features together no matter their proximity to one another. If elements attain a likeness in visual appearance, the clear assumption can be made that they should be grouped collectively. When designing user interfaces with these principles, grouping features to highlight their cohesiveness can be brought into fruition by utilizing colors, shapes, and sizing of typography or graphic design imagery. For example, if a button design is the same size and color throughout a webpage and its functionality links the user to its inner pages, the law of similarity functions here to inform the user that if they click on a similar button regardless of its placement, the user can assume it will have the same function that leads to inner pages as well.
Law of Continuation: In the Eye of the Beholder
Naturally, when navigating a digital product, our eyes are used to the natural progression of left to right, and up to down. The Law of Continuation delves into the idea that humans naturally follow a continuous and uninterrupted movement. Whether a straight line, or the curvature of another, our eye perceives information much more efficiently when there is a clear, cohesive line to follow.
This law is mirrored within most websites, such as e-commerce websites that horizontally display their products across the page, or in mobile applications with scroll functionality, which follows the progression of information from up to down. In a digital design, alignment is fundamental here because you don’t want to break the continuation feel with noticeable misalignment that would disrupt the flow. Rather, it is crucial for designers to keep that flow and continuation steady throughout to clearly display and present information to your users.
The Gestalt Laws are highly relevant today, and timelessly incorporated into our modern digital world.