Skeuomorphism

Recently there has been a lot of discussion about skeuomorphism vs. flat user interfaces, but I think the entire discussion is broken. Let’s go back to the beginning: The original Macintosh GUI. An extremely flat UI, but full of skeuomorphism.

Source - http://www.webdesignerdepot.com/2009/03/operating-system-interface-design-between-1981-2009/

Source – http://www.webdesignerdepot.com/2009/03/operating-system-interface-design-between-1981-2009/

Folders look like folders. File deletion is done through a trash item, that not only emulates a trash can but looks like one. Floppy disks that are inserted into the Mac appear as disks on the desktop. The desktop itself is a metaphor based on a real world object.

Let’s now take a look at Letterpress, a popular game that is supposedly a flat, non-skeuomorphic application.

Letterpress Screenshot from the iOS App Store

Letterpress Screenshot from the iOS App Store

The tiles in this application look and act like real world tiles, with similar physics. They’re shaped like real world tiles, and cast shadows like real world tiles. Deeper in the application, Letterpress is full of round rect buttons, which very well approximate real world buttons.

The point I’m getting to is that there is no such thing as an interface that is not skeuomorphic. All good UIs seek to make the concept behind the application more relatable to the user by using analogs to concepts the user is already familiar with. Flat interfaces and skeuomorphism aren’t in conflict. In fact, they’re two entirely different things. A flat UI is a style, while skeuomorphism is a strategy in how to make an interface more accessible.

So where did Apple go wrong?

Podcasts App

Podcasts App

Apple’s Podcasts App seems to be the classic example of iOS’s design issues, but most people have been defining this as skeuomorphic vs. flat. But if all UIs are skeuomorphic and skeuomorphism and flat UIs aren’t in conflict, we need to redefine how we talk about the problem.

Stylistically, this UI isn’t bad. It’s detailed and attractive. But emotionally, this UI misses the mark. The human brain is going to naturally latch onto skeuomorphism, and this UI implies a lot of skeuomorphism that isn’t actually there. It’s emotionally drawing on the user’s experiences to train them on how to use the application, but it’s leading them down the wrong path. The user is going to leap to the conclusion if it looks like a tape deck, it acts like a tape deck, so any aspect of this UI does not act like a tape deck will annoy, and possibly confuse the user. We can say that the tape deck is just a stylistic element, and that it’s not meant to imply function, but then you’re just fighting the user’s natural instincts. The form should be true to the function.

Game Center suffers from the same issue, to a lesser degree. It contains a lot of felt, wood, and poker chips, trying to imply a poker game sort of feel, but Game Center is obviously not a poker game. None of these elements are that central, so the user probably won’t be too confused, but it’s the sort of thing that’s going to quietly bother the average user in the back of their minds. If you’re an obsessive designer with a trained eye like Jonathan Ive, I suspect that sort of thing is going to stand out a lot more.

Are flat UIs the solution?

Yes. And no.

As I said, flat is simply a style choice. Flat applications are still skeuomorphic. The trend towards flat UIs is really more akin to someone having an all night bender, waking up with a bad hangover, and going on an all water diet. Flat UIs make designers go back to basics, shedding anything that’s not necessary for communicating the central theme of the app. It removes the temptation to send the wrong message with your application’s style because it removes most of the application’s style.

That’s not to say I dislike flat UIs or think designers who work on flat UIs are unskilled. I think Letterpress looks very attractive. But there is certainly room for more detailed UIs as long as designers remember that every pixel sends a message, and every detail matters. Every detail in a UI should be building towards the central theme of the UI, not detracting from it. If an element doesn’t re-enforce the path the user should be taking through the application, it’s a distraction to both the designer and the user, and needs to be considered very carefully.

So in the future, when we talk about skeuomorphism, we shouldn’t talk about it as if it is in conflict with flat UIs. With this distinction, we can have a more constructive conversation about the user experience of iOS.

As a side note, I think Microsoft’s adoption of flat UIs is also a very shrewd move. Because flat UIs are easier to understand and implement for non-designers due to it’s lack of distractions, Microsoft has created a platform well suited for developers who don’t have design resources. It’s hard for a developer on Windows Mobile to screw up an application design just because a flat UI expects far less design investment.

The Interactivist wrote a great post while I was drafting this that I feel basically says the same thing.