The Pendulum Swing of Flat Design
I dislike visual clutter. Most people do. Perhaps they can’t articulate it. I know most of our clients say things like, “It looks too crowded,” if presented with something that strikes them that way. They don’t use the words “visual clutter” as we would in design parlance.
However, that idea of clutter-reduction has recently over-reached its bounds in the oft-cited and overused mantra of “flat design.” I’m all for simplifying, but there are some designers who take it too far, slashing and ripping out things that they claim help to simplify the UI to its bare essentials, but they’re only thinking one-dimensionally, pun intended.
What is flat design, you ask? Well, if you’ve been living under 30 layers of silt and bedrock the last half-year, it’s this: “Flat” is a design aesthetic that argues for simplicity in the visual representation of a digital experience, by stripping away bevels, shadows, highlights, glare effects, and anything else that would otherwise add visual weight and cognitive overhead to an interface. Buttons are, almost literally, “flat” looking. Background eschew gradients. Etcetera.
Web 2.0, Web 2.0, Wherefore Art Thou Web 2.0?
Remember the days of “Web 2.0?” We’re talking about the aesthetic here, not the greater paradigm shift into social. Big is beautiful, went the mantra. Large swaths of color helped define the negative space, to separate background from interactive pieces. Buttons were larger, type size increased (sometimes to ridonkulous sizes). To a large degree (pun intended again), the mentality was only about “doing something different;” but after some time as the new glue cured and hardened, it was found there was some benefit to the Web 2.0 aesthetic when usability of Websites began to increase, and older people who once cursed the small interfaces were suddenly able to take part in the larger experience of the interactive Web.
So what’s the problem? Flat design is just an extension of that, most argue. It’s the next evolution. We are tired of the overblown eye candy.We want less visual clutter, and more of the actual content. “Content is king once again,” wrote Adrian Taylor at Smashing Design. Flat design is a reaction to skeumorphic design, an aesthetic that tries to make digital elements mimic real-world equivalents. In skeumorphic design, buttons are raised like the letters on your keyboard, backgrounds look as though a certain quality of light is hitting them. Etcetera.
The reasons may be alright, and it’s even ok to rebel against the norm, to try to change things for change’s sake; but there are myriad necessary things lost in translation in most flat designs, and flat design doesn’t always solve the problems it claims it’s solving.
Flat Design Reduces Information Overload?
Sorry, flat design doesn’t necessarily solve for information overload. Information overload is a function of poorly designed information architecture, an ineffective use of the principles of gestalt design, and increased cognitive cycles due to competing inputs. Yes, the information you’re trying to consume may certainly be obscured and hard to digest, or even see, if you overuse design elements to try to make things more “real world” when it’s not needed. But that’s just bad design. I’ll admit, I’m guilty of it too. But it has nothing to do with having a better design because you redid the interface with a flat aesthetic. In fact, flat design can create the same information overload in the hands of a bad designer (or alternatively, purposely so in the hands of a good designer).
One of the reasons I think people are attracted to flat design is that the natural appreciation of the design principle of “The Savana Preference.” Yes, flat design tends to be sparse, with easily seen visual waypoints, and therefore allows some breathing room for elements, and lets your eye jump from element to element more easily. In that sense, it does help to separate content from chrome, as Microsoft would like to say. But to say that this is a solution to visual clutter is akin to saying gardening shears are just as good for clipping nails. Yeah, they might do the job, but I wouldn’t use ’em.
Flat Design Removes Affordance …
This is probably my biggest pet peeve. “Affordance” is an indication of the natural way to use something, without our needing to post a How-to sign. For instance, a rectangular metal plate on a door suggests you push the door to open it, whether or not it has the word “Push” on it; conversely, a door handle tells you to pull the door. If you put a door handle on a “push-in” door, it confuses people; they are tripped up by the cognitive dissonance created by a “Pull me” feature on a “Push to open” doorway. Now, let’s extend that analogy. If I had a line of doors, randomly arranged, with some that are “push” and others that are “pull” and then I remove all indicators of whether a door was going to open toward you, or away from you, it would likely take a few tries before you figured out which opened in, and which opened away from you.
…And Increases Cognitive Cycles
That’s the bane of flat design. You have very little idea of what, exactly, is clickable, what is slidable; clues to the interactive UI elements are stripped away. Perhaps color would give you a clue. Perhaps your being savvy in the use of digital UI would override the cognitive dissonance for favorite apps that suddenly went Flat. But if I were you show you a flat design that you’ve never seen before, side by side with a non-flat design of the same site, I’m willing to bet that you pick up on the affordances inherent in the non-flat design, and are able to adopt and use that interface more quickly, because that non-flat design doesn’t ask you to “think more.” (Remember Steve Krug’s, “Don’t Make Me Think?”). Flat design makes you have to think things through as a user.
There are loads of designs that claim they’re Flat. In fact, they’re just well designed, but not entirely flat (but the designer is, or others are, hell bent on calling it a Flat Design). They have residual artifacts of skeumorphic design elements, like rounded corners, shadows, and bevels – but they’ve been minimized and faded into the background so you don’t notice immediately. The effects are so subtle, you forget about them, and they come packaged with all the subconscious affordance of well-designed UI clues, but you are not aware of them. That’s just good design. That’s what design is about. It doesn’t stand out, it just works. These guys are cheaters, but I don’t bear any ill will toward them. Let them ride the wave, why not. But don’t get bamboozled into thinking this is flat design. OK, it’s “mostly Flat.” (But you gotta ask, why didn’t they go full tilt, eh?)
You Can Use It, Just Sparingly
I’m not completely against flat design, like I said. But it’s one of those things that’s currently all the rage, and a lot of designers are just flocking to it like sheep. Use it, design flat interfaces, go ahead. But test to see where you’ve created cognitive overhead, and revise your design to solve those problems.