From Skeuomorphism to Flat Design: Dimensions of Graphic User Interfaces
A look back on the evolution of GUI
Note: This is an article I wrote 2 years ago when I was studying for a master degree in interaction design. The contents might be a little bit outdated, but I still wanna share with you guys here for thoughts and discussions.
When we talk about the user interface, the term “flat design” has become a buzzword in the past few years since Apple released their new designed graphic user interface in iOS 7, followed by a heated debate between flat design and skeuomorphism. Now more than 2 years has passed, most of the mobile devices on the market has already adapted into “flat” style. It is a good time to have a look back at the debates, in order to figure out why most of the mobile operating systems have turn into this fresh user interface style.
Defining key concepts
Before we start to analyze different graphic user interface styles, we should have a clear understanding of various definitions related to the styles.
In a general context, according to Coyne’s definition, skeuomorphism can be defined as “the preservation in new products of non-functional features from previous generations” (1995, p.283). Thus, within the field of human-computer interaction, skeuomorphic interfaces can be understood as those user interfaces that mimicking objects from the real world with high fidelity (Derboven et. al. 2012, p.498).
Although these definitions to skeuomorphism sound quite obvious and reasonable in our mind, we may have some misunderstanding to them. In our common understanding, skeuomorphism may refer to those interfaces or icons that have vivid details like shadows and textures to simulate the related objects in the real world. It is true, but it is just part of skeuomorphism. That is why Derboven et. al. called it “skeuomorphic interfaces”, but not “skeuomorphism” itself.
Actually, skeuomorphism is not only an interface style, or an icon style — it is a whole bunch of methods to represent the contents and functions, which includes the visual style, visual content and interaction.
For instance, a skeuomorphic visual style may be in a button with bevels and shadows; a skeuomorphic visual content may be an icon that using a closed envelope to represent an unread email; a skeuomorphic interaction may be a transition animation that simulates the flipping pages. All these kinds of visual treatments can be considered as skeuomorphism.
Therefore, the new user interface style that we call “flat design” may not be standing right against skeuomorphism. To some extents, they are even similar, but not conflict with each other.
Let’s take the interface style after iOS 7 as an example. It is true that simulation elements like shadows, lightings and textures are get rid of from the interface, which is the reason why we call it flat. However, most of the icons are still illustrating the real world objects: the clock app is still using a clock; the calling app is still using a old-style telephone receiver; the camera app is still using a camera… What’s more, the overlapping between component layers is using a blur effect, which is simulating frosted glasses.
Looking from this aspect, the new iOS interface design is still skeuomorphic, although it is visually flattened. Based on these observations, Curtis even regarded the new iOS design as skeuomorphism, since Apple’s rhetorical strategies were still originated in their previous implementation of skeuomorphism (2015, p.35).
Similar situations also exist in other flat design interfaces, for instance, material design by Google. One key principle of material design is the elevation represented by shadows:
Objects in material design possess similar qualities to objects in the physical world. The physical qualities form a spatial model that is familiar to users, while elevation and shadows are ways to underpin this spatial model.
Here we can clearly observe that Google’s new design language is still trying to simulate the real physical world, in order to provide users a familiar environment.
The discussions above are making the boundary between skeuomorphism and flat design blurred. Or, to say it in a more accurate way, the discussion above is making skeuomorphism and flat design unable to compare with each other. This is because we state clearly that skeuomorphism is a representation method, instead of only a visual style. Hence, we may need a new coordinate to categorize and re-analyze the visual styles, instead of roughly putting the styles into skeuomorphism or flat design category.
Dimensions of graphic user interfaces
In the new proposed coordinate, I would like to introduce two dimensions that better illustrates the graphic user interface.
The first dimension describes the visual style of a user interface, to see whether it is detailed or simplified.
Detailed interfaces are visually skeuomorphic interfaces, with high fidelity of real world objects. Simplified interfaces are visually “flat”, getting rid of unnecessary visual simulation elements.
The second dimension describes the simulation level of user interfaces, to see whether it is metaphoric or abstract.
Metaphoric interfaces are composited based on the objects or logics from the real physical world. Abstract interfaces are composited based on the contents and functions themselves.
With this 2-axis coordinate, graphic user interfaces can be re-positioned and described in two different dimensions. As examples, several popular user interfaces in the market are also placed in this coordinate. By the axis, we can obviously see that material design is more visually simplified than Apple’s flat design, while Modern UI by Microsoft is more abstract from the physical world than Apple’s user interfaces. At the same time, individual interfaces from particular apps can also be evaluated by this coordinate.
For example, the main interface of iPhone’s audio recording app in iOS 6 is a realistic microphone. Without doubt, this interface will be located at the top-left corner since it is highly metaphoric and crafted in detail. However, the interface for the same app in iOS 7 turns into a clear one with only a volume indicator and a list view of existing audio records. In this case, it will be placed in the simplified-abstract quadrant since it is a simple interface without any association with the physical world, but just logical arrangements.
Skeuomorphism emphasizes the metaphor and association to the real physical world, while flat design focuses on the visual re-organization and simplification of the interfaces.
by showing the concepts in this coordinate, the relationship between the broad sense skeuomorphism and flat design is now much more obvious.
Why do we move to flat design?
Graphic user interfaces moving to flat design is always on-going. Unlike so many arguments in several years ago, nowadays most of the mobile device users are already get used to, and get addicted to flat design. Actually, this move of graphics user interface styles to flat design is determined to happen.
On the dimension of simulation level, which is the vertical axis in the coordinate, we are now exploring the way towards the abstraction direction. The reason why we are leaving the metaphoric interfaces is that users no longer need the metaphors in the interface. As stated by Cooper, metaphors do really give a hand on increasing learnability for first time users. However, there’s the biggest problem:
By representing old technology, metaphors firmly nail our conceptual feet to the ground, forever limiting the power of our software. (1995, p.127)
Since metaphors have to always refer back to the previous objects and functions, it can only help a lot at the beginning point for new users, as a bridge to connect existing and new products. However, due to the rapid development of the economy and the market, mobile devices have quickly jumped into everyone’s hands, and everyone already knows how to use them and gets used to this digital environment. At this time, metaphor has already finished its destiny. Interfaces should focus more on the functions itself. That is why we are going towards abstraction — leave the function as the function itself.
On the other dimension of visual style, we are also gradually cutting down those unnecessary visual elements in our graphic user interfaces. One of the biggest reason is that users are focusing more on the content, instead of the interface. At the same time, users are receiving information in a shorter duration, and in small pieces of time. The time limitation requires the interface to deliver the messages as directly as possible. Under this condition, all unnecessary visual elements will be regarded as visual burden for the users, and these elements have to be removed away from the interface. Another reason is due to the screen size, especially for the smart wearable products, information has to make extremely good use of every single pixel on the tiny screen. Hence, there is no more space for the decorative elements.
Considering the two factors above, we are able to foresee that the future destination of graphic user interfaces will be at the simplified-abstract quadrant, which is already demonstrated in many sci-fi movies. And, “Zero UI” may be a extreme case at the far end in this quadrant.
However, the situation in our world is not always ideal for us. Users need to gradually adapt the transformations in the interfaces, and that is why we didn’t go directly from top-left corner to the bottom-right corner in the coordinate — we still need to take it step by step, to simplified the visual appearance first, and then to abstract the functions. But no matter what, we are on the way now. Let’s wait and see what’s happening in the coming years.
References
- Coyne, R. 1995. Designing Information Technology in the Postmodern Age. MIT Press, Cambridge, MA.
- Derboven, Jan, Dries De Roeck, & Mathijs Verstraete, 2012. Semiotic analysis of multi-touch interface design: The MuTable case study, International Journal of Human-Computer Studies 70.10: 714–728.
- Curtis, Ambrose, 2015. Rhetoric of Flat Design and Skeuomorphism in Apple’s iOS Graphical User Interface, Open Access Master’s Theses, Paper 638.
- Google Inc., 2015. What is material? — Elevation and shadows. Retrieved December 12, 2015 from https://www.google.com/design/spec/what-is-material/elevation-shadows.html
- Cooper, Alan, 1995. The Myth of Metaphor. Visual Basic Programmer’s Journal: 127–128.
- Dittmer, Jacob & Hägerhult, Johan, 2014. Metaphorical Connections to Interfaces: Guidance for Picking Icons Through a Contextual Approach.
- Sanders, Kat, 2013. Skeuomorphism — A brief blog about one aspect of graphic user interfaces and psychology, The Pennsylvania State University.
