In 2007, right after Steve Jobs first revealed the iPhone in a presentation focusing on Apple’s intent to reinvent the phone, Jobs opened the conversation on the revolutionary user interface: The iPhone replaced the physical keyboards of every smartphone at the time with a full-screen interface maneuvered by a pointing device, the human finger. He argued how existing smartphones weren’t “smart” enough, because these physical interfaces didn’t change and optimize for each application. Then, he explained the multi-touch technology, which allowed the iPhone to have a flexible user interface.
Looking at the newly-introduced iPhone keyboard, it is noticeable that its form resembles the physical keyboards that Steve claimed as “usual suspects”. Roundness of each key, slightly-beveled-look with soft shadows, and even light grey colors seemed to resemble the physical keys.
Of course, full of smart type-assistant mechanics were packed in here; keys would enlarge as people typed, so people could see what they had pressed to prevent mistypes. The device would also autocorrect words when people misspelled them, and keys would create click-sounds to supplement the lack of feedback.
Nonetheless, this familiar visual form of the keyboard smoothly got users onboard with this revolutionary UI. In design, referring attributes of other objects that are more infiltrated into the society to a new object is called Skeuomorphism. This concept can be seen everywhere in society, and its outcomes have become social cues that have connected people to new devices and experiences.
Why does form matter?
The root of Greek Temples’ iconic form goes back to 7–10th century BC, though then, this original structure was mostly made out of wood. The detail of its form is derived from functional features such as wooden joineries. Centuries later, the form was carried over to stone structures, regardless of their material characteristics. For instance, etching of triglyph, vertically channeled tablets seen on sides of stone temples, is believed to be an imitation of the end of a wooden beam from the original structure.
During the 19th century, this ancient Greek architectural archetype was revived in Europe and North America. After centuries of imperial rules and highly ornamental and theatrical Rococo style, simpler and more logical Neoclassical style was favored in Europe. Greek style specifically appeared toward the end of this movement — this Greek Revival architecture, which spread throughout North America as well, was an imaginative interpretation of the classical orders not constrained by historical precedents.
This adaptation of a form into a different context regardless of material property differences can be seen as a means to communicate the cultural cues that the original object implies. For example, there were no practical reasons to follow Greek style in19th century America, yet having done so implies this culture’s civilization roots, which is divorced from the over-decorative imperial European style.
“Affordances define what actions are possible. Signifiers specify how people discover those possibilities: signifiers are signs, perceptible signals of what can be done. Signifiers are of far more importance to designers than are affordances.”Donald A. Norman, The Design of Everyday Things
The term “affordance” was introduced by psychologist James Gibson in 1977. It refers to properties of environments or objects that people can “afford” to act upon, based on the physical properties of the object such as weight, color, etc. explaining how to interact with said object. In other words, an object, like a trash bin, allows people to throw trash into because it’s hollow, but its size is also reasonable enough to be picked up, thrown into the air and so on. Don Norman, an author of The Design of Everyday Things, coined the concept into a theory in design.
His concept “perceived affordance”, with its perceptible signifier, limits affordable actions based on past experiences. In other words, although an object itself may allow people to take all kinds of actions, an individual’s past education and experience should limit the external actions taken upon it to ones that are most appropriate. We only throw trash into this object because its form suggests the function of trash bin based on our education. If the object has a recycle icon, it limits us even further to throw only recyclable items into it.
Now, what about the trash bin in the image below? Many of us have learned that a trash bin icon on a computer screen is for deleting files. The form of trash bin is a metaphor bridging the function of this newer interaction on a computer. The action of dragging a file into the trash icon is also an intuitive metaphor referencing a physical trash bin. The derivative form communicates the “perceived affordance” of this function to users who have never used it before.
Skeuomorph — Skeuos (tools) morphe (shape)
“Skeuomorphic is the technical term for incorporating old, familiar ideas into new technologies, even though they no longer play a functional role. Skeuomorphic designs are often comfortable for traditionalists, and indeed the history of technology shows that new technologies and materials often slavishly imitate the old for no apparent reason except that is what people know how to do.” ―
— Donald A. Norman, The Design of Everyday Things
Some also argue that the success of the iPhone was due to its skeuomorphic design. As argued regarding the keyboard earlier, the iPhone also introduced reading, playing, and calling experiences over a touch screen, and these interfaces also mimicked the look-and-feel of familiar physical objects. After people got used to use these functions on the iPhone, these derivative forms lost their roles. Moreover, the skeuomorphic design was switched to that of a less cluttered and more modern flat design from iOS 7 in 2013 to today’s iOS in 2019.
The above image is a digitized vending machine with a touch screen that I helped create a long time ago. When I first became involved with this project, the project team was excited with the opportunity to reinvent how drinks could be presented in vending machines. The presentation could be more dynamic and sizzling, using much larger visuals. However, the final layout design ended up resembling the layout of conventional Japanese vending machines — it carried a strong social cue signifying vending machines in Japan. In other words, anyone could understand what the machine and its items were, considering even commuters who would walk by quickly. Yes, this is a vending machine just like the one you use everyday.
However, a number of smart functions were hidden behind this conventional look. For instance, when a stock of a particular drink was low, the layout adjusted to promote other drinks more; a drink could promote its details and nutritional content; when drinks would warm up, the machine could clearly indicate the idle state. Additionally, built-in sensors and cameras could also recommend certain drinks based on the outdoor weather conditions.
The power of familiarity in design
In 2010, Toyota’s hybrid car, Prius, began providing an optional device which made fake sounds. Hybrid cars are extremely quiet when their motors are on compared to conventional gasoline or diesel cars. This optional device was intended to mark the presence of a passing car to surrounding pedestrians. Although this decorative sound counteracts their efforts to keep their cars quiet, it could increase safety for both people and drivers and help prevent all parties from running into accidents while maintaining good traffic order.
From these phenomena, I highlighted three significant benefits to utilizing design attributes that reference past and familiar items to users:
- Hint and trigger users: When a technology is new and alien to users, familiar attributes could hint its function and trigger these users to take an action.
- Manage expectations: People tend to over anticipate the capabilities of a new technology, because it is often communicated abstractly. By introducing familiar attributes, people can relate to another reference and lower their expectations to ones that are more in line with the reality of the technology’s capabilities.
- Connect emotionally: A solely functional product can isolate users, especially when the technology is new, because they cannot relate it to their past memory. Referencing something in the past could bridge this gap.
Personifying multi-functional machines
The doll that serves tea from the image above was built over 200 years ago. Its main function was simply to please guests. 200 years later, people developed Pepper, a robot by Softbank, which had a number of human-like attributes. Pepper could assist users by showing them around a public space or responding to their questions. Its personified appearance does not serve strong functions other than entertaining users.
Having human-like attributes is not completely functionless either. For instance, creating these robots have challenged engineers to advance their skills. Additionally, human-shape is meaningful, because our environment is filled with objects designed for humans. For example, if human-shaped robots could handle regular tools that people use, they would also be able to multitask as a result.
Nonetheless, the personification that speaks to human emotions today does serve unique functions to machines. MIT researcher, Kate Darling, conducted a psychological experiment that involved torturing a dinosaur toy that clearly did not feel pain or react to her actions in front of some observers. Following this, the experimenter would observe the subjects and speculate their stronger emotional reactions when the tortured objects consisted of items more familiar to them. People don’t want to see a childhood toy destroyed. In the same study, subjects showed positive feelings when they saw a video of people acting nicely to the dinosaur toy.
The interactive vending machines mentioned earlier also have personified expressions. Their big eyes on screens sometimes look around as if they are waiting for some reactions from people passing by. Other times, they whisper their drink stock conditions as if they were humans with a vocal and auditory sensitivities, represented as speech bubbles. It makes them relatable, but also can reduce the risk of vandalism. It is not a common crime in Japan, but nothing is wrong with preventive actions for touchpanels in public spaces. Who would want to kick its face?
Empathy can be also a safeguard in design when it fails to meet user expectations. Poncho, a weather forecasting bot shaped as a cat, which was announced alongside Facebook’s Messenger bot in 2016, gives a daily weather forecast and provides chat interactions. Although its responses may not be “technically correct” to questions it’s asked due to its imperfect AI, it’s bit dumb but innocent and cute characteristics surpass its inaccuracy in the viewer’s eyes. In fact, its fun character is the reason why people keep interacting with the app, just like the tea-serving-doll.
In this way, personification can be used to manage expectations and connect users with certain emotions. However, the effectiveness of this varies culture by culture. The tea-serving-doll was invented in Japan, alongside a series of personalized objects ranging from anime characters to daily stationaries. Because of the widely adopted Shinto religion, people are accustomed to project emotions onto objects as if they were human.
To be continued: Discovery of the Uncanny Valley
- Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users | Nielsen Norman Group
- Why 3D Logos Fell Out of Favor Overnight — Cheddar Explains | Cheddar
- Skeuomorphism Will Never Go Away, And That’s a Good Thing | Gizmodo
- Prius gets optional underhood, zombie-deterring noisemaker, sounds appropriately futuristic (video) | Engadget
- What are Affordances? | Interaction Design Foundation
- Why Humans Love Robots Like People | Daily Beasts
- Infographic: Drawbacks and Benefits of Flat Design and Skeuomorphism | Creative Story
- Skeuomorphism is dead, long live skeuomorphism | Interaction Design Foundation
- iOS: A visual history | The Verge