Brian C. Reyes

Design

October 19, 2014

Design Between the Lines

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.

Any humans who were bad at detecting edges and perceiving danger...didn't last long. (Photo: Stephen Moehle

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):

lines-01-01

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

A single figure

…to the image of two figures:

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 Office UI -- Tweaked

Microsoft Outlook UI

The lines are more noticeable than they should be. Contrast this with this altered version with the lines slightly toned down:

Microsoft Office UI -- Tweaked

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

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.

 

The Crystal Goblet

Cheers!
Photo: Stuart Webster

 

June 1, 2013

Communicating a Brand with Design

In a Creative Mornings Berlin video presentation, Erik Spiekermann, one of the great type designers of our time, discusses branding on screens. His approach in maximizing space on a small screen is insightful. From the video:

Screen Capture from Spiekermann’s presentation (5:50 in the video)

Screen Capture from Spiekermann’s presentation (5:50 in the video)

“Because it’s Futura it’s Volkswagen…obviously this is not the only screen and the more type you have, the more brand you have. This is all the space you have on this small screen, you’re not going to put the logo everywhere. Volkswagen is blue, if it were Audi it would have to be red. Not every car company has such an obvious color, but Volkswagen is blue and Futura.”

In another example, Spiekermann shows the old Redbull Radio app which used Helvetica and grey and white, “the generic Apple app” he explains. Spiekermann compares this to the newly design app which is “totally branded by the typeface” and the use of the color orange. – Read More –

April 3, 2013

Doves Typeface Revival

EDIT: They did it! After 3 years of painstaking research and development! Visit the Typespec page and check out the Doves Typeface Revival.

The story of the Doves typeface is somewhat sad and gives the type a sense mystery and intrigue. The type’s creator, T.J. Cobden-Sanderson, had a feud with his business partner who was to inherit the type. Rather than allow his type to be defaced by his former partner, Cobden-Sanderson dumped all the type, along with all the punches and matrices (used to create new letters), into the Thames river. As he was advanced in age at the time, he could only carry pocketfuls of the type at a time, but he persisted every day until he had exhausted the entire supply. As Wikipedia sadly states, “The Doves Typeface is now lost forever.” But there is good news. – Read More –

December 30, 2012

Salt and Pepper

Sometimes I find inspiration in the simple things.  The emotional design here trumps the potential  usability issues.

salypimienta

 Salt and Pepper Shakers by Yar Rassadin

December 3, 2012

rdio.com

rdio.com is one of my all-time favorite commercial websites.  The artwork, layering, smooth animations, and aesthetic appeal really do it for me.  And their service is pretty great too.