Brian C. Reyes

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

 

March 27, 2014

Splunking the Keg

At Splunk we like to "SPLUNK ALL THE THINGS!" and this includes our keg (Splunkers are quite fond of their beer). We recently installed Kegbot, a flowmeter + specialized circuitboard that reads how much beer you are pouring out of your keg and outputs the data for analysis into Splunk. That's right, we can now track our drinking habits with pretty charts and graphs (maybe set an alert when the keg is running low!) and conduct statistical analyses. Our San Francisco office has already been doing this for a while...we just installed ours today #keepingup.


Meet Kegbot

Meet the Kegbot

Ketbot chills on the back of the Kegorator #seewhatididthere

Ketbot chills on the back of the Kegorator #seewhatididthere

The flowmeter connects via Ethernet to Kegbot

The flowmeter connects via Ethernet to Kegbot

The flowmeter is connected between the keg and the tap.

The flowmeter is connected between the keg and the tap.

The official Kegbot beer koozie.

The official Kegbot beer koozie.

"These ARE the beers you are looking for."

"These ARE the beers you are looking for."

November 17, 2013

What is Splunk?

At Splunk we believe in the power and value of exploring and understanding  data. We happen to make amazing software that lets you do exactly that.

Splunk has helped slice data for Domino’s, tracked airplane traffic at JFK airport, and is even used to analyze people’s heartbeats. Splunk is used around the world by data geeks to  explore and find the many secrets hidden within the data.

Ok…but what is Splunk?

It’s software.  You download it and install it on a laptop, a server, or a thousand servers. You can access it through a browser.

People use it to search massive amounts of data in seconds.

How does Splunk help?

There’s an enormous amount of live data from your computer systems and smart devices that people have to sift and wade through every day. Doing that is time consuming, stressful, and a huge pain in the ass.

Splunk lets the data geeks search, report, and alert on any kind of data. On the fly you can organize information into nice tidy data sets, and from there you can calculate statistics and email people pretty charts.

Bullshit.

Well you’re not going to be emailing your boss a pie chart of “causes of lost revenue” in 15 minutes.  But that’s seriously possible in a couple of hours.  Out of the box, Splunk will parse data and extract out a lot of meaning, and if it doesn’t get everything, you can even teach it how to extract the juicy numbers and information from  your data. The data geeks love this.

You can download Splunk for free and try it for yourself (warning: data geek level 15 or higher is recommended).

Editor’s note: this post is adapted from David Carasso’s Dive Into Splunk. David, thanks for being awesome.

November 10, 2013

Kind of a Big Deal

Big Data is kind of a big deal. It is everywhere, and it is growing fast. Extrapolating from a study by IDC:

From this massive amount of data, roughly a third is valuable when analyzed (the remainder is composed largely of cat videos and food pictures); however IDC estimates only about 0.5% is analyzed today. Despite this, we see companies already benefiting from taking Big Data seriously. In fact, data from Oracle suggests that top performing companies are 3 times more likely to be using Big Data analytics.

Big Data is serious business, and I am excited to be a part of it.

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 –

February 10, 2013

Rooftopping

Some exciting photography work by Tom Ryaboi, definitely worth a scroll (UX complaint: I’d like to see the mouse wheel adapted to scroll through pictures horizontally).  You can check out the “Rooftopping” series at tomryaboi.com, but be sure to see some of his other work too.

rooftopping

February 4, 2013

Bullish Art

Some incredible artwork by Marcus James.  James was raised in an artistic household and has been honing his craft for decades, and it shows.  These drawings were made by continuous lines, and I think they are pretty incredible.

bull

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

Older Posts