Our brains receive information consistently throughout the day, and most of that data has is distilled by someone to make it easier to consume. Regardless of the final format, everyone involved in the preparation of the information is an active participant in information design.
In our increasingly distracted world, information that is easy for people to consume will win out over complicated or confusing messages. This tendency encourages designers to dumb down messages — but that should never be the goal. Instead, it is the job of designers to take the complex and make it easier to understand.
Information design begins with the editing away anything that interferes with the message or task. Editing may seem like an obvious step, but in our heavily edited world, most people very rarely see the first draft.
For visual mediums, information design also marries size, space, grid, and typography together to help further distill and package information. Those design principles aside, there is a more powerful tool at our disposal that doesn’t even require direct control.
Humans are quite adept at finding and grouping things. Designers aren’t required to connect information because human perception will naturally guide users to find and connect elements that are similar in structure, pattern, or logic.
Gestalt psychology best explains our ability to perform these actions naturally. The exact number of laws associated with Gestalt will vary from one source to another. Still, the examples below illustrate each of the concepts that most directly impact the information design tasks you will be attempting.
Law of Proximity
Humans naturally group elements using proximity. This means that the space between elements signals to the user which items are related. The components may share other characteristics, but it is their perceived grouping together that carries meaning.
Source: newpragmatic.com
Law of Similarity
While not altogether different than proximity, similarity relies on the characteristics shared between items and not the space around them. Successful designs leveraging similarity will take great care to add enough distinguishing features to make it clear to users what is and isn’t related.
Source: newpragmatic.com
Law of Symmetry
Taken straight from the bodies we inhabit, the concept of symmetry in design is about establishing order and balance. The law doesn’t mean that all aspects of a design must be perfectly symmetrical, but where symmetry exists, those elements are related.
Source: newpragmatic.com
Law of Continuity
In interaction design, we perceive actions that occur in a sequence to be related. Similarly, when elements share similar characteristics, they are perceived to be connected when we encounter them. This grouping means that actions or items that we don’t immediately see are accepted as related when they appear, provided they appear in conjunction with an action taken or share some other connecting distinction (color, type, location).
Source: newpragmatic.com
Objects that work together are often grouped, creating a predictable pattern that makes systems more natural to use. The top-to-bottom and left-to-right flows of the information shown above are good examples of continuity in interaction design.
Resources for review
| Article/Video | Source/Author |
|---|---|
| Cognitive psychology for UX | UserTesting.com |
| Designing with Dynamic Content | Brad Frost |
| Hick’s Law and decision making | UX Planet |
Exercise
Length: Two-to-three hours to complete
For this three-part assignment, you’ll test both your ability to recognize and apply the laws of Gestalt psychology as they apply to information design.
Part one: Using the Figma template provided, study each of the designs presented. For each design, identify which laws are present — more than one law may be on display in each design.
Part two: In the same file, you’ll design two solutions that combine what you have learned about spacing and typography to a form factor that will require you to edit. Your designs will change based on the constraints provided. You are only required to include one album in each design. A collection of sample information has been provided for this exercise.
Part three: One of the most common tasks you will perform as a designer will be updating preexisting documentation or sites. In this exercise, you are tasked with creating a new section with the data provided. Carefully edit the information provided to highlight the information that would be most interesting to a visitor of this page while taking the liberty to write any additional content that you may need.
Once complete, update your Program Journal with links to the assets produced for this exercise. Post your Journal in the #Feedback-Loop channel for review.
///
Up next Color Accessibility