Some though on flat design and skeumorphism

Ah, flat interfaces. Perhaps one of the more ubiquitous trend that has been growing recently. Almost all major players are going flat (or at least flattening down some things), not to say the plethora of internet sites suddenly becoming more flat and ‘modern’. Microsoft, Apple, Google– most of them have recently gone through some major design changes, of which Microsoft’s can be said to be the most radicle. But, I’m not going to compare them here. Maybe in a later post. I’ll try to ask a different question, why flat? And is it better?

The Reign of Skeuomorphism

Sounds like quite a hefty movie title, eh? To talk about this, first I’ll need to clear one term: Skeuomorphism. According to the irreplaceable Wikipedia, a skeuomorph is “a derivative object that retains ornamental design cues from structures that were necessary in the original.” In simpler terms, it tries to duplicate the look of something (bear with me) else to help with familiarity. Imagine a radio. For older radios dials, knobs and sliders were essential. Now, think of a mobile radio app (see fig. i). It copies the sliders and bars, complete with the metal ridges. This is not necessary, one can simply put the name or frequency of the station along with a slider for changing, but still do copy the design of the original for ‘aesthetic purposes’ (fancy talk for good looks) and the fact that people are more used to the original

Actually, this was quite important. Early on, when people weren’t that used to computers, these metaphors helped them understand. Another example: The early Macs. You had ‘files’ and you stored them in containers called ‘folders’. Quite simple and easy to understand.

According to the people who favour plainer UIs, this might have been necessary when people were first using a computer (or anything else for that matter), but is not necessary now. That it just adds clutter and wastes space. Another good argument is that people spend too much effort towards replicating old interfaces than coming up with newer and more efficient ones. Okay, but how does this translate towards computer (and smartphone) interfaces? Before this modern trend, most interfaces mimicked real life objects, some taking this mimicry to absolutely unnecessary levels. Starting from Window’s aero’s frosted glass to OSX’s leather calendar, everything tried to look as real as possible. Glossy realistic icons, faux leather panels, calculators that looked like the real thing, these were, and still are, quite common. So, on to the next question, why flat?

The Rise of Flat: The Death of Skeuomorphism

Don’t judge me. I just love dramatic titles.
Anyhow, the trend of flat interfaces started due to quite a few reasons: The useless and at times pointless skeuomorphs; the older interfaces getting old and overused; to introduce uniformity and for what Microsoft calls ‘digital authenticity’. The first thing you’ll notice when you use any new ‘modern’ design is that it focuses on presenting the content first, in a way that you can understand everything but without losing clarity or ‘clean’-ness, that is, without clutter. But how? Let’s take the example of the radio app again. We ask, what does the user need? Dials are not necessary, so they go away. So do faux sliders, useless ornamentation and the glass panel.

What’s left is the core of the app, the content and the controls. Now, just showing these would neither nice nor easy to use for the end user. What we do is introduce colour, and simplify the controls for a better user experience
You might say, but some ‘skeuomorphism’ still remains. You wouldn’t be wrong. Using some metaphors, some predefined symbols is unavoidable and unintuitive. Which brings us to the next question,

How much ornamentation is acceptable?

The answer depends upon the nature of the app and other things that one must take into consideration. For example, let’s take shadows. Shadows help a lot in designing understandable interfaces. Anything that casts a shadow over another thing is, usually, above it. Some approaches to minimal design actually do not use shadows (think metro). Those rely on dark dividers to, well, divide the app into several parts. It is sort-of a personal preference. I, for one, prefer shadows which help to logically divide different parts of apps and to indicate how an element is positioned on the screen. One example of a relatively minimal design which uses shadows to indicate position is material design, of which I am a big fan. There are many further arguments both for and against removing every trace of emulation from design. But the real answer, as I’ve said, depends on many factors and different people will vary as to which style they actually prefer. This topic, as you’ve guessed, is too long to cover in one post. I will try and make it into different posts: both considering why and how; and with some tips and tricks. Stay tuned.