Can Flat Design Handle Reality?

NES Controller in red

If you look back at the early video game consoles, they were pretty basic. NES, or Nintendo Entertainment System, was a successful game system that relied on a controller with only eight hardware buttons, or five when considering the directional-pad as a single pivoting button. Nintendo knew what typical thumbs could do comfortably with speed and precision. While a rectangular brick isn’t the most ergonomic piece of industrial design, it is an example of a decent controller that is both usable and is aesthetically pleasing. The nice thing about it was there wasn’t a lengthy manual about what the buttons did, and most people could experiment for a few seconds and understand how to interact with games without much training.

At times, the current influx of flat design reminds me of 8-bit computing and low resolution gaming, because they both work within a limited rule-set and style. Since NES and flat design share similar characteristics, I pondered what the controller might have looked if Nintendo had designed the controller using the same button configuration and with current flat design principles.

Flat design can be either a blindly-followed trend, or a suitable technique that can be implemented well or poorly, just like most other design practices. I don’t hold any dogmatic prejudice or evangelism for flat design in either direction, but I thought it would be helpful to illustrate how you choosing and executing principles make a world of difference.

So let’s go through some examples:

Flat + Buttonless


So our first stop is an interface without distinct bordered buttons. It sticks to labels and strips away the chrome embellishments. The strength of this controller is that it is verbalizable. It’s easy to communicate what command translates into the jump action of a character with a concrete label.

There’s long been talk about getting rid of buttons and having No UI altogether, as well as intelligent arguments against turning people’s world inside out:

Their literal invisibility can cause confusion, even fear, and they often increase unpredictability and failure.

Without spatial differentiation, its a bit vague where the active area is going to react, and gives no feedback if you’re within range. Apple’s new iOS 7 for iPhone and iPad gave up on visual boundaries by ditching well-contained buttons and using floating text links instead.

I also recall Flash websites back in the day that required you to hover your mouse exactly on the text of the link, but you had to be exactly positioned on the character, and couldn’t go to a link if the mouse was between two letters, or smack dab in the center of an “O” because the center is inactive counter space.

Flat + Minimal


You could also make the point a player isn’t looking at the controller hardly at all. So they don’t really need to know the name of the button, just as you don’t need to know that mound you rest your feet on is called an ottoman. You make use of it because it fits the bill.

However, this controller isn’t really as obvious how to start. The only informative thing here is the shape of the D-pad, with four points similar to a compass. But maybe it’s an oversized plus sign… Then there’s a relationship of shape and proximity between the other pairs of buttons, but little insight. What was once labeled Select and Start are now twin capsules, next to two circular buttons. As a piece of art, it’s minimalism is appealing. But it’s lack of clarity might slow people down or frustrate them. That doesn’t mean it has no place though. It would work well for people who are familiar with NES, or game consoles in general, since video game controllers have reused and built from this controller pattern. Furthermore, there are plenty of people who can touch type on a QWERTY keyboard (a much more intricate device), and could probably type blindfolded without letters printed on the keys.

Flat + Discoverable


Conceding on previous points, you might consider this controller, which is closer to the original design, but still “flatter” in terms of quantity and visuals. Someone with impaired vision is going to be at a disadvantage for its lower contrast, but maybe NES games requires sharp visual acuity anyway, so it might not matter demographically.

Do we call it a day here? Is flat design good for a controller or even possible? After all, a controller is a physical device and requires three dimensions. Even a thin sheet of paper occupies space in three dimensions. If this were a real controller, I would hope for the buttons to be recognizably different in touch, which can be achieved with different tactile surface, raised 3D position and shape, or other feedback.

Calling foul on a Flat reality

This analysis might not be fair, because there is no such thing as removing Photoshop Layer Styles for a physical thing. Philosophically, virtues of flat design could be possible by avoiding dimensional simulation and doing reversed skeuomorphism (embracing true 3-dimension). This way, you could still have your flat controller be carefully and beautifully crafted with stitched Corinthian leather, squishy bulbous buttons, and be placed in a home where a long shadow is cast by the gradient blur of light from a brightly-lit screen. Editors note: Excuse the mash-up of Layer Style puns.

A Flat home taller than the ground?

Thinking bigger: A flat design home might be end up something like a Mondrian painting (see the Eames House). And it might try to remove power outlets from the walls, for the sake of beauty and minimalism. But if you stop here, you’d have an electricity problem. You could go further to support the vision and include outlets that were hidden behind a panel until needed, or out of sight but still accessible, such as underneath a shelf. You could deal with the problem a totally different way to make your whole house work wirelessly with adapters for any wired gadgets.

Falling flat or flying high?

Flat design isn’t a magical thing that makes things better by itself. Flat design can fall on it’s already flat face, or it can push the boundaries of design in exciting ways. But it must be supported by a sound strategy and a critical mind (and sometimes a diet of mushrooms and a red Italian jumpsuit).

photo by: Emil Erlandsson
  • andyrwebman

    The other thing designers forget is to make sure their text isn’t too large for large screen displays. Without wanting to be nasty, I’m afraid this site fails on that front.

    It needs to shrink down a little for PCs

  • ekloff

    Do you happen to have your browser’s default font size larger than normal? It’s usually set to 16, and the text of this site is only 2px larger than that for the widest screen display.

    I find that most websites make it hard for people with less than perfect eyesight to read comfortably, and I’ve taken the opposite approach by slightly scaling the font on large screens. I agree that it can be annoying when there isn’t enough information density, but I have given consideration to that. And luckily, people who like tiny typography can view my site zoomed out with the layout still intact.