A Comparative Study of “Flat” vs. “Skeuomorphic (3d)” Design on Usability
In the last few years, there has been a swing in website design and application design from 3 dimensions and elaborates to minimal and flat. This brought the rise to the concept of skeuomorphism. Skeuomorphism is a design concept that helps to create elements that emulates real world counterparts. With the increased use of touch screen tablets and mobile phones, users started to prefer large and clear buttons over the wooden or leather user-interface controls.
Flat design has always been around, but recently it has experienced a resurgence in popularity as companies like Microsoft and Apple redesign their interfaces to remove extra ornamentation. The value of embellishment goes back to 19th century with the Arts & Crafts movement led by William Morries and John Ruskin. Morris and Ruskin aimed at raging the against the machine concept decrying the nineteenth century industrialized surfaces that were starting to diminish the craftman’s practiced hand.
Keywords: Flat Design, Skeuomorphism, Usability, 3-D Design
“Flat design” is just a reactionary swing of the design pendulum. While simplicity should be the default state of things, flat isn’t necessarily universality simple. Flat design has been gaining momentum for the past year or so – we still see gradients and drop shadows on our screens, but we’re also seeing more solid blocks of color and sharper edges. Interestingly enough, while everyone is proclaiming that once again the world is flat, it’s only in the past few years that 3D has become simple to emulate on the web, with browser support for shadows and gradients becoming fairly standard and uniform. Having this said, this review aims at comparing Flat design and Skeuomorphism on usability.
Flat design is a design methodology that highlights usability. In simpler terminology, flat design concentrates on bright colors, clean lines and 2D illustration techniques (Johnson, 2013).
Skeumorphism is a design methodology that keeps the ornamental design prompts from structures that were necessary in the original (Self, 2013). This terminology means, elements uses gradients, shadows, ornate details and textures to better reflect the real world object that they represent.
After the introduction of its first iPhone by Apple in 2007, Skeuomorphism was accepted broadly. Now, Apple has altered its design style after nearly six years (Gandin, 2013). Lately at Apple’s World Wide Developer Conference, iOS 7 was exposed which showed a clean and simple interface - also known as flat design - promoted as “metro” design recently by Microsoft with the publication of Windows 8 and its Surface tablet (Hou & Ho, 2013). As it is perhaps tough to find out if implementing of fresh design trends early is right, both the design styles will be explained in this article, advantages and disadvantages of both will be viewed closely and the thoughts for applying of new styles will be highlighted (Johnson, 2013).
In digital circumstances, skeuomorphism can be explained as the use of decorative add-ons on to make the interface feel like a realistic entity – its bodily counterpart generally (Gandin, 2013). For an instance, textures of stitching, paper and leather can be used in an application for address book so that it looks similar to the black little book which our parents owned in the past. Functionally here, a minute purpose is assisted by the decorative details. While realistically, pages were adhered jointly in an address book through stitching, grip was assisted by leather and paper resolved the lenience of pen skimming across the sheet or absorbed ink. Though, from a reasoning perspective, the function of the application to the operator and mutual actions might be suggested by a skeuomorphism design.
It is aided to present a well-known mental model to a modern application through Skeuomorphism. Numerous screens created in a way that they look similar to pages of a book suggests the operator may begin “flipping” through the display as they would do in the time of actually reading a book. An elevated link represented as a button implies that it can be pushed. Affordance or apparent affordance in the digital domain is defined by this: the interaction operators may perform with it is suggested by the characteristics of an object.
Lately, people have begun criticizing this method as it is being overused, messy and outdated (Johnson, 2013). As new medium comforts the populace increasingly, the necessity of a graphical representation becomes meaningless. Also, concealing of insufficiently arranged interactions at the back of visual noise is extremely easy.
A flat or metro design’s idea is to concentrate upon the content, depending on scale and typography to convey function (Johnson, 2013). Inessential properties like gradients, drop-shadows and textures which rule the present user interfaces are uninvolved in it (Strochlic, 2013).
iOS 7’s guiding design rules
- Deference. The UI assists the users to recognize and communicate with the content, avoiding any kind of struggle with it (Strochlic, 2013).
- Clarity. Text is readable no matter what the size is, lucid and accurate icons are used, decorations are slight and proper and the design is driven into with a perfected focus on the functionality (Gandin, 2013).
- Depth. The users’ understanding and enjoyment are enhanced by the visual layers and lifelike gestures (Hou & Ho, 2013).
Applications of iOS 7 which demonstrate these rules are:
- Video Player
- Control Panel
- Parallax Lock Screen (Gandin, 2013)
This practically signifies:
- A great importance on using size and positioning and font so that a visual grouping of info can be formed (Gandin, 2013).
- Giving background and depth by letting the underlying stuff to appear through using glowing and frosted overlays (Strochlic, 2013).
- Delighting animations that enhance liveliness.
- Action states and content functioning shown via colour assignment.
- Removing borders, drop shadows, textures and further visual noise.
- Content that is edge to edge.
- Text sizes that are dynamic.
Due to this new kind of approach, the business owners and designers are forced to focus more on the content and remove any visual type of clutters (Strochlic, 2013). Though, just like it is in Windows 8, the biggest problem of a flat type of design is the low amount of discoverability it possesses (Hou & Ho, 2013). The actionable items and the apparent affordance are removed by it. Copy is treated in a similar manner, yet it doesn’t behave in a similar manner (Johnson, 2013).
Google had taken an “almost-flat” approach in the designation of the Android OS so as to resolve these types of issues (Ansari, 2013). Elusive depth along with tone-on-tone and soft gradients was added which barely-raised the drop shadows.
Things to Consider
Designation could prove to be really subjective. The same thing might be appreciated by some while criticized by others (Pogue, 2013) (Bram, 2013). Disregarding the personal tastes, there exist a few principles that are overriding and have to be integrated right into a design so as to make sure that a strong user experience is provided (Hou & Ho, 2013). The following are some of the considerations to keep notice of if you plan in embarking on and redesigning your very own solution.
There’s nowhere to hide
- One can really got to take into consideration the application’s architecture, the content’s relationship and the way the typography’s going to support it more than ever before (Hernandez, 2013).
- The purpose as well as the action has to be communicated by nomenclature and language both (Johnson, 2013).
- Users could easily lose their information scent in case of poor labeling (Ansari, 2013).
Make sure you’ve got a consistent and strong visual language.
- The designers should be able to bring in more than one ways so as to communicate affordances like shape, location and color without having to use 3D effects to add dimensions (Johnson, 2013).
- Spacing, size and contrast are some of the fundamental design principles so as to establish hierarchy (Ansari, 2013).
- How are the images being used and when? Are they decorative or just content?
- Perceivable: is it possible to experience the information in multiple ways?
- Animations and translucency aren’t really enough to rely on in case of showing depth. Meaningful heads have to be used during the change of context (Johnson, 2013).
- In case of distinguishing information, do not solely rely just on colour.
- Make sure that enough contrast is being provided by the background in case you’re using overlays (Hubbard, 2013) (Rankin, 2012).
- It is a good thing to lay increased focus on a particular content but keep in mind that you’ve got to deliver a reachable substitute to rich multimedia (Lowthorpe, Taylor & White, 2013).
- Operable: in case of sight, cognitive, hearing or dexterity limitations, how usable does the application prove to be?
- Do not make use of such animations which popularly cause seizures; be sure that no decorative, content or anything else related to it doesn’t flash more than three times in a period of one-second anytime (Ansari, 2013).
- Even if it looks like the button is borderless, be sure of implementing it in a way through which the target area has around its label a tolerance threshold (Hubbard, 2013).
- Understandable: are the users aware about what to expect?
- Copy has to be given a careful consideration.
- You’ve got to stay consistent and predictable (Lev, 2013).
- Make sure that the sequence of the contents makes sense even on a resized screen in case you’re using responsive web and adaptive text (Hubbard, 2013).
It has to be known what’s best for your product as well as its users. Many-a-times, the user interface goes independent of all its contents such as utilities, tools, etc (Rotondi et al., 2007). The UI has to be used as a medium to navigate from a part of information to another. Flat design could prove to be a bad step in case the interface lies as a part of the content (such as immersive experiences, games, etc.).
With the latest debate, the great solution lies usually somewhere in the middle. With extreme opinions, compromise is hard for people and usually gives a lot of benefits (Hou, 2013).
Flat Design and Usability
One could end up having an unappealing and cold experience in case you strip a user interface of literally anything which resembles real life, disregarding the personality of the brand (Fadeyev, 2013). Even though this does not cause any kind of effects on the utility, it is capable of having and probably will be causing an all-round effect on the experiences faced by the user. Though, the experiences of the user continue to get induced by the flat design by offering the user a medium through which he could relate to the product (Appleyard, 2013). To achieve this, the supportive imagery has to be included as the organic content so as to counterbalance the user interface’s flat design (Lovett, 2007). All kinds of positive things can really be taken from the flat designed and further be applied in such a way that they still remain usable, even in case of interfaces that are extremely complex.
The Future of Flat Design
Even though we’re seeing the world going totally flat, it isn’t true that it is going to stay that way forever. It is possible for us to garner where UX and UI are running for flat designs so it could run its course keeping the past century in mind, in which every modernism wave opposed the one which existed before (Appleyard, 2013). One might as well see that the designers would, after flatness, more carefully try and reintroduce the dimensionality wherever the need is high (Dollaghan, 2013).
If the flat design is what you feel you’re going to implement, think of the “almost flat” approach which was basically used by Google to take care of its Android OS to turn it into a happy medium. This “almost flat” design helps you to keep up with the trends and doesn’t make you look dated without any usability sacrifice.
One has been explained about the dangers of taking a design too far by Skeuomorphism – adding whistles and bells that cause distractions from the content. Make sure that anyone don’t make that mistake using flat design. A user mightn’t be able to find out where the interface is in case everything looks like content.
To conclude, both flat design and skeuomorphism have been in existence for a while now; but to choose between the two has become difficult now. In any case, from various researchers and studies that had done, one can conclude that digital design will continue to become individual design language and increasingly distinct instead of imitating real life.
Hou, K & Ho, C. (2013) A preliminary study on aesthetic of apps icon design. IASDR 2013 5th International Congress of International Association of Societies of Design Research.
Johnson, S. (2013) The rise of flat design. Target Marketing, 36(8), 8-9.
Ansari, A. (2013). The flat Earth: Object oriented ontological explorations in design praxis. Retrieved from http://repository.cmu.edu/theses/51/
Gandin, S. (2013). User interfaces in iOS and Windows Phone: A comparison. Retrieved from http://tesi.cab.unipd.it/43096/
Hou, K. (2013). A preliminary study on aesthetic of apps icon design. Retrieved from http://www.academia.edu/4726767/A_Preliminary_Study_on_Aesthetic_of_Apps_Icon_Design
Hubbard, J. (2013). The Zen of Web discovery. Retrieved from http://dc.uwm.edu/lib_staffart/2/
Lowthorpe C., Taylor S., & White G. (2013). Stop just making stuff!. Journal of Audience & Reception Studies, 10(2). Retrieved from http://www.participations.org/Volume 10/Issue 2/17.pdf
Strochlic, N. (2013) Why Apple went flat. Newsweek Global, 161(22), 1
Rotondi, J. A., Sinkule, J., Haas, L.G., Spring, M. B., Litschge, C. M., Newhill, C. E., Ganguli, R., Anderson, C.M., University of Pittsburgh. Designing Websites for Persons with Cognitive Deficits (2007): Design and Usability of a Psycho educational Intervention for Persons with Severe Mental Illness. The American Psychological Association. Psychological Services 2007, Vol. 4, No. 3, 202–224
Lev, G. (2013). Flatland. Time. 6/3/2013, Vol. 181 Issue 21, p50. 2p.
Appleyard, B. (2013) Is Apple dying? New Statesman; 11/22/2013, Vol. 142 Issue 5185, p26-29.
Hernandez, P. (2013). Microsoft Touts Design Amid 'Flattened' iOS 7 Buzz. eWeek. 6/ 7/2013, p1.
Rankin, J. (2012). Moving targets and experiments: One publisher's mobile journey. Information Services & Use. 2012, Vol. 32 Issue 1/2, p19-24.
Pogue, D. (2013). Out with the Real. Scientific American. Feb2013, Vol. 308 Issue 2, p29-29.
Bram, T. (2013). Plain and simple. Entrepreneur; Oct2013, Vol. 41 Issue 10, p22-22.
Self, W. (2013). The skeuomorphs are taking over. Soon our personalities will be purely ornamental. New Statesman; 10/4/2013, Vol. 142 Issue 5178, p54-54,
Lovett E. (2007). The world is super-flat. Print. Mar/Apr2007, Vol. 61 Issue 2, p91-93.
Dollaghan, K. (2013). What Is Flat Design? Retrieved from http://gizmodo.com/what-is-flat-design-508963228
Fadeyev, D. (2013). Authentic Design. Retrieved from http://www.smashingmagazine.com/2013/07/16/authentic-design/