Flat vs Skeuomorphic design… Skinny Jeans or Bell-bottoms?

Ever since the release of the Windows smart phone and Apple’s iOS7, the design pendulum has been swinging and there has been a lot of talk about FLAT vs SKEUOMORPHIC approaches to interface design. It’s quite surprising that the flat aesthetic – a “revolutionary design craze” – was actually introduced by Microsoft back in 2009, when the Zune was released (remember that music player? I didn’t think so). It wasn’t until Apple introduced iOS7 and abandoned their infamous textured, skeuomorphic approach that people really started taking notice.

Skeuo-what?

In a nutshell, a digital design is skeuomorphic if it “mimics the materials or ornamental elements of something that exists in the real world”. For example, using a volume and tuning dials as controls on an online radio player. Flat design is typically a more minimal approach to the way information and icons are presented. Where skeuomorphic is about realism and detail, flat design tends to be sparse and monochromatic, relying on fewer details and controls that are intended to be efficient and usable.

Is flat better?
Those rooting for the flat approach suggest that it solves the “problems” created by skeuomorphism. Specifically, those related to inefficiencies when the user interacts with controls or inputs information. After all, it can be awkward to turn a volume dial on a screen. But I’m not convinced that flat design is by it’s nature “more usable” because skeuomorphic design works with pre-existing mental models of how an object behaves (eg calculator, radio). When we encounter a flat interface, it lacks a real world , “meat-space” reference to draw upon. Design details like minimalist icons and monochrome colour palettes (that lack of emphasis and contrast) can negatively impact the user’s ability to grasp the purpose and function of an interface. Minimalism does not equal usability.

Visual Design is not Interaction Design

From an interaction design perspective, making something “easy to use” or “simple” goes beyond the visual style of the interface. There is a difference between the aesthetic approach (look and feel, flat vs skeuomorphic) and interaction model (flow and structure of information).

We should distinguish the difference because it is possible that an improvement to an interaction model presented by a flat interface can also be applied using a skeuomorphic aesthetic (and vice versa).

A flat aesthetic is often championed for its simplicity, but making something “simple” is not the same as making it easy to use. Achieving simplicity also requires other considerations such as:

  • minimizing the number of steps in the flow (going from A to C rather than A to… X)
  • minimizing the time required to complete a task or goal
  • minimizing the number of features and elements on each page
  • making next steps and calls to action clear and prominent
  • minimizing the cognitive burden we put on users (“Don’t make me think!”)
Comparing the weather apps from Apple’s iOS6 (above, left) and iOS7 (above, right)*

Visual Design is not Information Design

We should also be wary of confusing the information design with an aesthetic approach. For example, consider the weather information being presented on the iPhone screens above. Aside from an aesthetic preference, it could be argued that the new, flat interface (above right) presents more information and organizes it more efficiently (e.g., the hourly weather report was not presented in the iOS6 version on the left).

But should flat design get the credit for being a more effective information design? I would argue that improvements to the layout and presentation of information are independent of the aesthetics. If we distinguish these differences, we will do a better job of defining design systems, implementing patterns and iterating without breaking what is already fixed.

Do these pants make me look good?

As design styles evolve and pendulums swing, users will explore and adapt to new interfaces, icons and design patterns. Ultimately, deciding whether a flat or skeuomorphic aesthetic is better is akin to arguing whether skinny jeans or bell-bottoms are nicer pants. It’s a matter of preference – but some people just look better in skinny jeans.

Don’t jump on a design trend without considering how the aesthetic approach operates separately from the information design and interaction model. We must always remember that design, as Jony Ives said, “is so much more than the way something looks.”

* Image from Business Insider article

For more info and visual references on this topic, check out Sacha Grief’s great article Flat Pixels: The Battle between Flat and Skeuomorphic Design

Want to collaborate? Get in touch!