Flat Design and the User Experience
Flat design is now the dominant visual style in web design. It is aesthetically pleasing, minimal, and creates an environment that is easy to manipulate to guide a user through the flow of your site. It is an understandable trend, as the 3D effects, shadows, and shiny translucent surfaces that designers formerly worked so hard to create are essentially contrivances that don’t directly relate to the two-dimensional surface they exist upon.
Flat design, however, is not without its own inherent challenges and possible pitfalls. The biggest challenge is the loss of “visual affordances.” First, let us discuss what exactly the term “affordance” means. The term “affordance” was first coined by J.J. Gibson as a noun derived from the verb “afford”. For example, if something is of the right height, flat enough, and is strong enough, it’s affordance (or what it affords the user) is a place to sit. Don Norman expanded upon that concept by introducing the concept of a “visual” or “perceived affordance”. This is taking the concept of physical affordance and extending it to the visual aspects of an object – does it look strong enough to support a person’s weight? Does it look flat enough to sit upon? Can one perceive that it would be a good resting place simply by assessing its visual characteristics?
This concept becomes more important when we move into digital interfaces – because there is no physical affordance, only the visual or perceived affordance. For example, this image below:
Most users will assume that this is a device that can be interacted with via their mouse, by clicking. It looks like a button one might encounter in real life, and so its use can be inferred. The three dimensionality of the image contributes to the perceived affordance. When we strip away the visual cues, we are depriving the end user of an easy interpretation of the purpose of the element. In Interaction Design, this is referred to as the “Visibility Principle”. (The 5 principles of Interaction Design will be discussed further in a separate article). Joe Natoli explains the Visibility Principle very clearly in the following quote from his website, Give Good UX – “Put simply, you can’t invite interaction and engage visitors if they’re unaware that the opportunity to interact exists!”
The struggle for a UX designer is to find a way around this conundrum, some way to clearly indicate an object’s intended use without three dimensional cues. One of the best means of doing so is through the use of “Signifiers”. This is another concept introduced by Donald Norman. Signifiers are individual hints that collectively suggest the intended use of an object. For example, if someone approached a door with this device attached –
– most people would be able to intuit that this is a push door and not a pull door. Even if they had never seen this device, it is attached to the door, has a portion that is depressable, and does not have an easy way to pull upon it, signifying that this device needs to be pushed.
A common way to add signifiers is through the use of iconography. These fall into two categories; “pattern metaphors” – icons that derive their meaning from repeated use – triangle for play, square for stop, etc. – and “contextual metaphors” – a drawing of a speaker with a line through it for mute, a picture of fire for a fire alarm, a wrench or a gear to signify settings. Traditional signifiers for a web link, for example, are a blue font and an underline. UX designers must also bear in mind that metaphors often have their significance rooted in cultural frames of reference – for example, a women’s restroom sign designated by an individual wearing a dress is easily understood in America, but in Saudi Arabia, it is common to show a bearded and beardless face as the cultural signifier for gender.
Thankfully, since flat design’s introduction in 2011, much has changed. Designers have become aware of the inherent pitfalls of flat design. The new hybrid is commonly referred to as “Flat 2.0”. The overall feel of a flat site can be retained while still introducing some quiet 3D cues to improve the user experience, primarily through the use of subtle shadows and outlines.
In summary, Flat Design is a welcome improvement to the over-dimensionalized skeuomorphism of earlier web designs, but moderation is the key to a clean, minimal design using 3-dimensional signifiers only where necessary to create a beautiful, user-friendly experience. Designers must bear in mind the metaphors, patterns, and visual affordances that will provide the user with the necessary cues to easily and quickly interpret the intended use for the devices within a site.
Gibson, J. J. (1979). The Ecological Approach to Visual Perception. Boston: Houghton Mifflin.
Norman, D. A. (1988). The Design of Everyday Things. New York: Basic Books.