I wonder how many of you got the joke in the cover image 🙂
When I talk about semiotics I see people’s eyes glaze over. I know. But, 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.
The Basics
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, Saussure etc) and as a result, there are a lot of terminologies. Unfortunately, we already use the words, but often they have different meanings when talking about semiotics.
There are three kinds of signs: icon, index, and symbol.
- Icon: A clear representation of the object. Think toilet icon.
- Index: Something that implies something else: Smoke = fire.
- Symbol: No resemblance to object but culturally imbued 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 McCloud’s book “Understanding Comics.”
Skeuomorphic
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, with short hair, Caucasian, and 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 abstract 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 the 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 in mid-2007. iOS 7 came out in mid-2013. That’s 6 years of using a device with skeuomorphic icons and mentally connecting the action of the button to the icon.
Let’s 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 Apple’s iOS 7 guidelines refers 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 information more quickly.
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.”
