Everytime I talk about semiotics I see peoples eyes glaze over. For this reason I’m going to stay away from the hard-core academic side of this visual communication theory and focus on the practical application of semiotics.
For those of you who have never heard of semiotics it is basically a theory describing how people understand their world through the interpretation of signs.
Disclaimer: A number of people have worked on the culmination of these theories for a long time (Barthes, Pierce, Sassure etc) and as a result there is a lot of terminology. Unfortunately we already use the words, but often they have different meanings when talking about semiotics.
There are three kinds of signs: icon, index, symbol.
- Icon: A clear representation of the object. Think toilet icon.
- Index: Something that implies something else: Smoke = fire.
- Symbol: No resemblence to object but culturally imbuned meaning or meaning from previous knowledge: Cross = Christianity.
All signs are based on previous experience and social interactions.
If you want to learn about semiotics in a simple way I highly, highly recommend Scott McClouds book "Understanding Comics."
The skeuomorphic interface, up to iOS 6, was one of the easiest to learn (I mean children under 5 were using it). Skeuomorphic basically means that the icon looks like what it’s representing. This includes textures, glows, bevels etc. Even the buttons themselves have a shine on them to make them feel “buttony.”
For all signs there are levels of abstraction:
All of the images above show a face. The face starts off more realistic. It is also more objective, meaning there is less room for interpretation. Even though it is a drawing of a face we can see it is male, short hair, Caucasian, un-smiling. This information is received, which means you don't need “education” to get the meaning and you understand it immediately. At the other end we have a circle two dots and a line. We still see a face however. Its abstraction has made it more iconic, but also more subjective: meaning the face could be anything or anyone male / female etc. This has to be interpreted or “perceived.”
The Skeuomorphic icons are great for introducing a completely new device because you know what the button is going to do before you press it. It is less abstracted than iOS 7 and therefore requires less “education” for the message to be received.
The Inevitable Move to Flat.
The move to flat design was driven by user interface and user experience. Apple's core themes for iOS 7 were:
- Deference: The UI helps users understand and interact with the content, but never competes with it.
- Clarity: Text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design.
- Depth: Visual layers and realistic motion impart vitality and heighten users’ delight and understanding
- iOS Human Interface Guidelines
The risk of having flat icons on the first iPhone was that it would have required a lot of “education” to understand. The iPhone came out mid 2007. iOS 7 came out mid 2013. That’s 6 years of using a device with skeuomorphic icons and mentally connecting the action of the button to the icon.
Lets look at the calendar icon. The skeuomorphic design resembles a physical calendar. The flat design has no embellishment at all and has been abstracted to its most basic elements. Our experience or “education” with the original icon allows us to understand the flat design. It has become symbolic (definition above).
Using apples iOS 7 guidelines this defers to the content (date / day), and creates clarity with legibility and contrast. As a result, the icon becomes more useful because, through our perception, we receive the information quicker.
Knowledge is Power
Understanding how the users of your App are receiving and understanding your content is important when making design decisions. Apple could have designed their first iPhone with a flat interface, however the skeuomorphic design facilitated the transition from the real-world to a symbol-laden digital world.
Icons in 2014 have become something of an extension of the written word. They are greatly abstracted to the point of symbology, which requires more knowledge but makes them quicker and easier to understand.
It is amazing that with just a few lines our mind perceives a face. The really amazing thing though is that you can’t NOT see it. ;-)
Also for those that didn’t pick it up the top image is a play on René Magritte’s “The Treachery of Images.”