Categories
Design

FlatOmorphic – A hybrid approach to the Flat vs. Skeuomorphic debate

While I am a HUGE fan of FLAT user interface designs, and I am happy we’re moving away from the extreme skeuomorphic styling of previous versions of iOS, I feel some designers have taken this trend to a level that is only hurting user interfaces. The problem is that as designers we tend to take the hottest trends to far (remember Web 2.0?). But flat design doesn’t have to lack depth or significance, and we should just stop the insanity now.

There have been 2 great articles that have come out the past week that support this.

A List Apart just released an excellent article talking about how Flat UI and Forms have some potential issues.

Though some decry flat user interfaces as pure fashion, or the obvious response to skeuomorphic trends, many designers have embraced the flat approach because the reduction in visual styling (such as gradients, drop shadows, and borders) creates interfaces that seem simpler and cleaner.

The problem is that most flat UIs are built with a focus on the provision of content, with transactional components (i.e., forms) receiving very little attention. What happens when flat and forms collide? User experiences can, and often do, suffer.

iOS7 is the biggest fail of the flat design trend I think I’ve seen to date. But don’t take my word for it, it was just my initial gut reaction to the extreme flat-i-ness of the new mobile OS. Instead take the word of renowned usability experts, The Nielsen Norman Group. They have just release an analysis of the new iOS7 and how the flat design has really taken away from some of the experience that made the iPhone so popular. The summary of the article says it best:

Flat design hides calls to action, and swiping around the edges can interfere with carousels and scrolling.

This article is great because they really do a good job of pointing out what is wrong with the bigger issues with the OS, let alone the Flat design aspects.

Case in point, the Mail settings page in iOS7 has some issues and not all of them can be blamed on Flat UI. I blame simple bad design.

For instance, when configuring an email account on the Mail page under Settings, there are several tappability cues:

  • Blue color in the navigation bar (<Mail in the top left corner) – this takes advantage of the previous web knowledge (blue is a link on the web) and iOS knowledge (items in the navigation bars are tappable)
  • Arrow in a table view (next to Mail Days to Sync) – this also relies on previous iOS knowledge
  • Toggle switches that look like sliders that can be moved
  • Red color, text centering, and position at the bottom of the page for Delete Account – these are all weaker cues, but they all reinforce each other
Mail page under Settings in iOS 7

So…..

My suggestion to fellow designers is that we take hybrid approach. There can be a middle ground between Flat UI and Skeuomorphic trends that I think can deliver the best user experience.

I’ll coin this style “FlatOmorhpic”. I’m not suggesting we bring back the odd and overdone “stitching” from the iOS Address Book app. No, all I’m saying is that it’s OK to use some old tricks when needed. As designers, it’s our job to make sure the user can do what they need to with our product. If that means putting a drop shadow on form field or rounding corners on a button to differentiate it from something else…. so be it. We shouldn’t be judged by the trendy style of our designs, but the usability of it.