Dedicated to Douglas Engelbart (1925-2013)

There has been a shift going on in the world of user interface design in which the favored designs are becoming more simplistic and flat – No longer with the ornamentation of gradients, textures, drop-shadows, beveled edges, and real-world metaphors we now call skeuomorphic design.  And this involves everything from websites to web applications, to mobile applications and screens on electronic devices.  Even the tech industry giant Apple has ditched the skeuomorphism it helped perpetuate throughout the past 30 years in favor of a more simple flat design in its latest iPhone operating system iOS 7.

FlatvsSkeuomorphic7

But is one approach really better than the other?  As it turns out, they both have their advantages, and it really depends on the situation and context of the design.   Both approaches can be beautiful and perfectly suited for the particular user experience.  I think it’s important to understand their history to understand why this shift is happening in the first place.

The History of Digital Skeuomorphism is the History of the Graphical User Interface (GUI)

The classic 1984 Macintosh was one of the first products that used digital skeumorphs

The classic 1984 Macintosh was one of the first products that used digital skeuomorphs

A skeuomorph, for those that aren’t familiar, is basically an imitation of something real. It typically takes the key elements of that object, but depicts them a more simplistic manner. The very first computers that used skeuomorphism were the very first computers that used the now universal “desktop” metaphor. These included early XEROX computers, and of course the classic 1984 Apple Macintosh. It was people like Steve Jobs and Douglas Englebart (the computer pioneer and inventor of the mouse who died recently R.I.P.) who pushed for this new approach and helped to define the the very first personal computers. This was a natural inclination because all real-world work being done at the time (and still today) involved files, folders, trash bins, etc. By having simplified metaphors of these real-world equivalents, working on a computer could be intuitive and simple, even for the average person. Previously computers could only be interacted with through command line interfaces like MS-DOS and required extensive professional knowledge. This was the birth of the PC and the modern operating system.

The rest, you could say, is history. Virtually everything we interact with today has its roots in the early GUIs of the 70s and 80s. Displays are now sharper with higher resolution, millions of colors, and with all of the icons sleeker, sexier, and vectorized – But things are largely the same in terms of the desktop metaphor. Even the shift to touch screens has kept much of these metaphors in-tact, making the transition very smooth between desktop and mobile. You navigate through a grid of icons which you can now tap with your finger instead of click on.

Was the Shift to Flat Design Inevitable?

Flat design also has a history that actually goes much farther back – In Print. You can only do so much with a piece of paper and the elements on it. What becomes more important is contrast and hierarchy for communication. So in some sense flat design is kind of a throwback to old design trends while at the same time a reaction to the beloved skeuomorphism that Apple helped create. One could argue this reaction was inevitable, and is merely the fruition of broader design trends finally taking hold in the digital world.

There is a certain special kind of similarity between what has happened in design in general, with what is currently happening in User Experience design specifically. Gone are the days of gaudy 1800s Victorian ornament, in products, in architecture, etc. and in its place is modernism. Clean, simplistic design that is honest and does not try to be something more – Form merely reflecting function. As little design as possible as Dieter Rams would say. There is a certain kind of green aspect to today’s design trends also, in that all of that frivolous ornamentation often meant extra materials, even rare materials like diamonds and jewels, which equated to added costs and resources and so on. In this age of mass production and industrial design, were ideally designing the best, for the most, for the least. That means high-quality products that are also affordable for most people and don’t use tons of resources to produce.

Good design is honest.  You shouldn't expect to find enlightenment by sitting on a chair or inhabiting a certain residence.  Modern design cuts through the BS, so to speak.

Good design is honest. You shouldn’t expect to find enlightenment by sitting on a chair or inhabiting a certain residence. Modern design cuts through the BS, so to speak.

Similarly, flat design has started to do the same thing in user interfaces. A 2-dimensional interface is just that… flat. There isn’t always a great reason for creating the illusion of 3-dimensions in a 2-dimensional screen. Sometimes it can be useful and I’ll get to that in a minute, but for the most part, keeping the interface simple makes using the interface a little more pleasant and enjoyable. It’s less distracting. We have enough complexity and garishness in our lives. There is enough clutter in the 3-dimensional world, why clutter up our 2-dimensional world too?

But the reason this is happening is much more than a subjective aesthetic trend. The reduced complexity of flat design makes the code cleaner and the interface load faster allowing you to do more with less. It’s actually much more in tune to the digital medium. You’re not wasting computational resources on something frivolous. If the user has a certain goal they’re trying to attain, be it purchasing something, or getting some information, there shouldn’t be anything distracting them from that goal.

Microsoft made a very bold move in 2012 with the release of Windows 8 and a new completely flat design to the most widely used operating system in the world. They even ditched many of the current desktop metaphors that have been used for decades. This has been extremely controversial, but I think it was a good and very important decision for the sake of casual PC users. Most professionals using their computers as workstations will still favor the traditional desktop, which is why Windows 8 still offers that functionality. For an average home user however, that just checks email, watches movies, and uses social media (like my 64-year-old step-mother Karen) it’s ideal, because it’s so much more simplistic and less cluttered. It’s built around doing one thing at a time rather than multi-tasking like you would on a workstation. It’s also built for touch-screens, a paradigm shift that we’re all very well aware of.

Windows got it's name for the very reason that it had "windows", squares on the screen that contained information or applications and could be moved around.  Everyone knows how messy they can get when you're doing a lot at once.

Windows got it’s name for the very reason that it had “windows”, squares on the screen that contained information or applications and could be moved around. Everyone knows how messy they can get when you’re doing a lot at once.

Why Skeuomorphism can be Good, and why it will never Leave Us

There are certain situations (or I should say functions) where Skeuomorphism is alright, and possibly even ideal. In web design, a financial business that just wants to have an informative web presence should favor flat design. It shows sophistication and professionalism and does not get in the way of the information being presented. However the skeuomorphic approach may be ideal for something more entertainment-based like a game or movie. In those cases some amount of skeuomorphism may be ideal to adequately reflect a certain kind of brand or mood and draw the user in. Textures, drop shadows, and 3-dimensionality can really sell some things. For other things… it just gets in the way of what’s being communicated.

On the left is our design of an investment company.  It is a flat design that communicates professionalism and doesn't get in the way of what's presented.  On the right is the website for the popular computer game Diablo III.  Note how the skeuomorphism creates depth and really brings you in to the world of Diablo III.

On the left is our design of an investment company. It is a flat design that communicates professionalism and doesn’t get in the way of what’s presented. On the right is the website for the popular computer game Diablo III. Note how the skeuomorphism creates depth and really brings you in to the world of Diablo III.

In the world of software and applications, skeuomorphism can be very important. Let’s take the example of a flight simulation software. Skeuomorphism may be the ideal approach because professional trained pilots are comfortable with a very specific physical interface. By imitating that interface, pilots can remain comfortable. It can be a major safety concern if pilots are confused by the interface.

On the left is a skeuomoprhic interface that imitates the various switches, knobs, and meters in a cockpit.  On the right is new designs that seek to simplify all of that complexity - But at a cost - Pilots have no familiarity with the interface.  A confusing interface can be a major safety concern when piloting a vehicle traveling 600 mph and carrying hundreds of passengers.  It may be many years before pilots are comfortable with touch screens and flat-designed interfaces.

On the left is a skeuomoprhic interface that imitates the various switches, knobs, and meters in a cockpit. On the right is new designs that seek to simplify all of that complexity – But at a cost – Pilots have no familiarity with the interface. A confusing interface can be a major safety concern when piloting a vehicle traveling 600 mph and carrying hundreds of passengers. It may be many years before pilots are comfortable with touch screens and flat-designed interfaces.

Looking Forward to the Future

The 3D hologram interface from Avatar.  Only our imagination is the limit in how we will interact with technology.

The 3D hologram interface from Avatar. Only our imagination is the limit in how we will interact with technology.

Skeuomorphism still has its role, and as we look forward at the future of interfaces, in may even make a comeback in the form of transparent interfaces, 3D interfaces, holograms, and who knows what else, but for now flat design is trending and that’s a good thing. My take is that flat design will continue to prevail for operating systems and more general purposes, but skeuomorphism will continue to work well in specific applications and situations. This will keep less clutter in our general use of digital technology, but the clutter will still be there if we want it to be. It’s up to the designers to understand that by understanding users and what creates the better user experience for the particular situation and the particular user.

What’s your take on Flat Design vs Skeuomorphism?