May 13, 2015

325 Views

Skeuomorphic vs Flat Design

Working in design teams can open up a whole new world for you. Don’t worry, I’m not going to get into an extensive and long treatise on the beauty of design or run you through a whole barrage of concepts! Rather, I intend that this blog be a brief and concise introduction to a subject of debate for designers and a dilemma for non-designers i.e. the relevance of skeuomorphic design.

I remember working on a project where the client wanted to turn the pages of their e-book similar to how we turn the pages of an actual physical book or paperback. Since many people in the team wanted to control the flow via simple scrolling, the whole thing turned into an argument. I must mention however, that in the end, the e-book ended with the same effect and experience that governs the page turn of an actual physical book. 

However, the question here is - is the client always right?

Well, clients run their businesses and they know their customers who can provide valuable insights that can make or break products. But situations like these educate us on the choices that design teams need to make.

As far as the user is concerned, the GUI is the software for him or her. This makes the GUI itself a subject of careful design and requires that it have elements that the user can easily identify or relate to.

One of the approaches taken is to relate the functionality and purpose of an element of the GUI with that of a real world object/tool with similarities, even if they are only ornamental in nature. This approach of using real world references applied to an entire interface in a wholesome manner is what is generally referred to as skeuomorphic interface design.

http://www.oxforddictionaries.com/definition/english/skeuomorph

To quote from the above link, skeuomorphic interface design is defined as -  

‘ An element of a graphical user interface which mimics a physical object: ‘note-taking apps offer skeuomorphs of yellow legal pads, squared paper, ring binders, etc.’ ‘when you first load up the app, you’ll be presented with a skeuomorph of a photo album. ’

For example, a calculator app made to resemble an actual physical calculator does not make the app in anyway an actual physical calculator – it’s after all pixels, not plastic. But what it does to an excellent degree is to get the user instantaneously familiar with the interface of the virtual calculator, so that he/she can easily and intuitively operate it.

On a similar note, other examples that one may come across are notepad applications that resemble the design of an actual physical notepad or notebook. Another example is the book shelf interface of the iBook’s iOS application, and even the sound of ‘click’ when you operate your phone camera, or the page flip mentioned earlier, are all examples of skeuomorphic design. I am sharing a couple of examples of Skeuomorphic Design:

 

Pros of Skeuomorphic design

  1. Using Skeuomorphism can make the interface more intuitive to use, as it will have more visual clues. This way, people new to the application will easily be able to find their way around the interface as compared to when skeuomorphic design is not used.
  2. By making the interface intuitively familiar, the time taken by a person to become productive reduces. In other words, a user can become effectively productive sooner.  
  3. Skeuomorphic design also allows for a variety of techniques and effects to be used in design. These include textures, drop shadows, and can make for richer looking interfaces.

Cons of Skeuomorphic Designs

  1. Because this design has roots in the physical world and objects, skeuomorphic elements can at times tell less of what may actually be possible in the virtual space. (For example, the page flip does not indicate scrolling, even though that is a possibility in a virtual space)
  2. Skeuomorphic design can increase the visual complexity of an interface if not handled carefully.
  3. A skeuomorphically designed interface can go out of trend sooner, as it depends on the physical design of objects which could change over time. A telephone with a round dial immediately references a really old telephone design. As a result, the interface that has this design will appear dated.

If skeuomorphic design is so great, why is it being replaced? And what is replacing it?

As computers have become more ubiquitous over the years, audiences and users have matured and got far more comfortable with the GUIs and the patterns that populate these GUIs. As such, they do not require the degree of initiation and hand-holding that was necessary in the early days. Also, with the growing adoption of a plethora of devices by each individual, it has become important that people are able to use their most required software via any of these devices. This requirement of a more generalized experience across a variety of devices and an audience that is more comfortable with user interfaces than before, brings us to what is being considered as a replacement of skeuomorphic design these days.

It is Flat Design.

Flat Design is becoming increasingly prevalent. Flat Design ups the level of refinement in user interface design while still keeping the focus on retaining the communication of functionality. It is a design approach that many GUI designers use today.

Skeuomorphic vs Flat Design /Material Design

Flat Design has been around for quite some time and with Google and Apple endorsing it, has become one of the latest ‘Trends’ in the UI space. Flat design has certain advantages like optimum utilization of space and is more adaptable when working with responsive design with a variety of devices and with different form factors. But that does not mean that it spells the end of skeuomorphic design. Whether the new material design is fundamentally different from flat design or an extension of it is a matter of another debate.

Conclusion

Flat Design is here to stay. The audience has matured and evolved being constantly in touch with virtual environments. They will not have to depend on skeuomorphic design that much, although there will be areas where skeuomorphism will have more leverage than Flat Design. It is not a matter of whether one should apply Flat Design or skeuomorphic design, but rather a matter of selective application - i.e. applying flat design where it can be used to maximum effect and applying skeuomorphism where it would be best suited. In the end, one can say that a good combination of both these approaches which results in a more satisfying user experience would definitely be the right choice, rather than trying forcibly to stick to one or the other resulting in an inefficient application of neither.

Reference

Quote Link: http://www.oxforddictionaries.com/definition/english/skeuomorph