Minimalist interface design and the data-pixel ratio
The why and how much of minimalist user interface design.
“Flat design.” It’s all the rage in the design community these days, what with major mobile and desktop platforms flattening everything from input fields to buttons to shadows like Saturday morning pancakes. Some critics claim it’s all a big fad—nothing but a design trend that’ll go out of fashion in a few years. Now, while this UI design ‘movement’ is kind of a rebellious response to the bubbly faux-3D interface aesthetic of decades past, it’s rooted in something deeper: minimalism, or the reduction of an interface down to its essential elements. Dieter Rams’ famous adage summarizes it best:
“Good design is as little design as possible.”
Why minimalist design?
Per a previous Google+ post, I think it’s important as designers that we optimize for the right things. Optimizing purely for aesthetic beauty or ergonomics generally isn’t appropriate in the field of interface design. But optimizing for better clarity, a simpler user mental model, or lower cognitive load—those are things that have dramatic ramifications on usability, which I’d argue comes in a close 2nd to “delivering on your promised user benefits” in terms of making or breaking your UX.
This is where the reduction of not only the UI elements forming the interface but the pixels forming the elements themselves is an important exercise. Through this reduction of visual cruft, you minimize distraction (and thus cognitive load) and let the user focus on the content or task at hand. This process of reduction is at the heart of minimalist design.
Where does the reduction end?
There’s a fine line between removing just enough and removing so much that your interface is no longer usable. Where do we draw that line?
I recently came across an oldie-but-goodie 2011 article on the data-pixel ratio for interface design, by Rian van der Merwe. It’s a rough application of the data-ink ratio defined by Edward Tufte to the field of interface design, and is basically the ratio of pixels used to represent data to all pixels in the UI. I suppose one could refine the definition to include things like contrast with surrounding pixels and so on, but you get the picture.
So anyway, this data-pixel ratio is a pretty fascinating metric to try to optimize for. A higher data-pixel ratio basically means you’re spending more pixels on the content (the stuff that people care about, like text, photos, videos, etc.) than the chrome (buttons and toolbars and gradients and stuff like that).
And I think that’s exactly where we draw the line: when the data-pixel ratio is 1, or when every significant pixel you’re drawing is in some way contributing to delivering, organizing, navigating, manipulating or otherwise servicing the content.
Can we go deeper?
When the data-pixel ratio is close to 1, your content starts becoming the interface itself. And that generally leads to more direct manipulation, which is universally understood as a Good Thing™. Per Android’s design principles:
Real objects are more fun than buttons and menus
Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort needed to perform a task while making it more emotionally satisfying.
Instead of placing delete buttons next to all your list items, you start introducing intuitive gestures, like swiping horizontally in either direction to fling the item out of the collection. And then you start making those gestures available universally, throughout the interface, which is another Good Thing™. Again, per Android’s design principles:
Give me tricks that work everywhere
People feel great when they figure things out for themselves. Make your app easier to learn by leveraging visual patterns and muscle memory from other Android apps. For example, the swipe gesture may be a good navigational shortcut.
Let’s recap. When you minimize distraction by removing unnecessary gradients and boxes and other static pixels, and when you let the data become the interface itself—in other words when you get the data-pixel ratio closer and closer to 1—you reduce cognitive load and generally end up with a more usable design. Reduction, for the win.
So the next time you consider flat design, just remember that it’s not just about the aesthetic—it’s about removing the unnecessary things; and that’s exactly what the data-pixel ratio is intended to capture.
