Edward Tufte teaches that 1+1=3. This isn’t new math, this is a good rule that describes human visual processing. Understanding this rule can help us be better visual designers. We’ll get back to Tufte, but first let’s look at the science behind it. Out of necessity, the visual cortex of the human brain evolved to be good at edge detection. When you’re running through the forest it helps to be able to pick out the edges of an animal so you can then determine if you want to eat it, or if it wants to eat you.
People who were bad at detecting edges and danger…didn’t last long.
(Photo: Stephen Moehle)
We use edge detection to help identify what is important (e.g., figures in our environment) and what can be ignored (e.g., the background or ground on which the figures rest). For example, the words you are reading right now are the figures, and the page you are reading from is the background. This connection is referred to as figure–ground relationship, and it’s an important part of Gestalt principles (those rules some smart German psychologist identified many years ago).
Wanna test how powerful this edge detection is inside your brain? Just try staring at the image below (you can click it to enlarge for an even more powerful effect):
Edge detection test
Does your head hurt yet? Your visual cortex is freaking out. It’s seeing so many edges it doesn’t know what to do. Now let’s go return to Tufte’s 1+1=3. Contrast the image of a single figure…
A single figure
…to the image of two figures:
Two figures
The two figures appear to form a third figure (a white one) in the middle. You might see it sort of appear and disappear as your brain attempts to understand the pictures. Your brain, working hard to detect edges and identify figures, essentially sees 3 figures…1+1=3.
In user interface (UI) design we often want to emphasize the content, not the UI itself. If the UI shouts too loudly it can compete or even drown out the content. The UI of Microsoft’s Office product might be improved if we toned down some of strong lines. I like Microsoft’s minimal design, but the lines on the UI are a bit too loud in places; I can feel my brain working and finding edges and extra figures as my eyes roam over the input fields for To, Cc, Bcc, and Subject, etc:
Microsoft Outlook UI
The lines are more noticeable than they should be. Contrast this with this altered version with the lines slightly toned down:
My visually altered version of the Microsoft Outlook New Message UI
My eyes find the input fields more easily; there is less visual churn; the button icons and labels stand out more since they don’t compete with the noise of the UI around it.
When I first saw Apple’s iOS 7 it seemed to lack thorough understanding of the nuances of the minimal design style they had adopted. As with the Microsoft Office UI, there are elements of minimalism and beauty. But I again saw some unneeded, noisy lines that made the UI less pleasant and harder to use than it needed to be. More “figures” appeared in the UI than should have. I was happy to see that with the later version iOS 8, the design is maturing and removing unnecessary elements (and figures) of UI. Contrast the design of the iOS Control Center between version 7 and version 8:
iOS 7 vs 8 (control center)
Look at how noisy the lines are in iOS7 around the buttons and in the lines that divide the AirDrop, AirPlay, brightness, and the other control buttons. An activated button in iOS 7 was indicated by a white line. But in iOS 8 things have changed. The harsh edges are softened or removed, and buttons are more clearly shown to be on/off with a nice white background toggle. It’s the designer’s job to craft the vessel to hold the content; the user just wants to consume it. The design should let the UI fall away visually so all eyes are on the content. Apple is doing a better job of this.
Beatrice Warde, a famous communicator of typography, once compared good type to a crystal goblet. Warde called for typography that was invisible rather than calling attention to itself. Instead, she urged, typography should be the vessel that clearly presents the content, as a clear glass presents wine to the person who drinks it. Beatrice Warde’s crystal goblet metaphor can be a great way to think about UI. UI that “disappears” can let the content shine. By leveraging principles and rules—such as Tufte’s 1+1=3 rule—that support this crystal goblet approach, designers can build experiences that serve up content more cleanly and result in happier users.
Cheers!
Photo: Stuart Webster
