Deconstructing Digital Design’s Tastiest Recipes
From skeuomorphism to chatty AIs, the paradigms of interactive platforms
This article first appeared as a talk at the 2016 Seattle Interactive Conference by Tectonic creative director, Benjamin Shown.
Late last summer I came across a fascinating article by Chef David Chang in Wired. In it, Chang lays out his Unified Theory of Deliciousness:
Chang goes on to illustrate this approach with the creation of a Bolognese dish that uses only Korean ingredients. His theory is both compelling and mouth-watering. At its core is an aim to taste (and feel) the interplay between the exotic and the familiar. That’s deliciousness.
I’m a creative director and designer at Tectonic, a studio that works with ambitious companies like Amazon, HBO, and Microsoft to create large digital design systems. Many of our projects explore unique form factors, bleeding-edge technologies, sentient AI, and radical visual aesthetics; pretty complicated and exotic stuff. So with umami on the mind, I realized that Chang’s theory was also oddly apt to what we’ve found out as designers: great interfaces are built on familiar metaphors to unlock the exotic potential of technology. Our design process is essentially a tug-of-war between the familiar and exotic where nailing the interplay between the two yields the most effective (and delicious!) digital user experiences.
Designing Digital Platforms
One of the early approaches to achieving this exotic/familiar interplay was to have unambiguous visual metaphors relate to our physical world in order to help us navigate the (then) extremely foreign experience of personal computing. Files were files. The desktop acted like your office desk. Email was, well, electronic mail.
Today, platforms have evolved well beyond this skeuomorphic approach. The changing landscape of devices, technologies, maturing users, and digital natives have pushed us towards new paradigms for creating digital experiences. By leveraging elements such as immediacy, voice, conversation, touch, and high-definition imagery, these platform paradigms engage our senses and then exponentially extend them.
This graph plots four major paradigm shifts for designing digital experiences. The x-axis may also be understood as advancing technology or, in many cases, how user needs and maturity have evolved. The y-axis is a general measurement of paradigm progress.
This first platform paradigm, Explaining Technology, aligns with the wide PC adoption of the 1990s and extends into the early 2000s. The Mac OS and Windows OS are prime examples. Next, as users became more comfortable with digital environments, there was a major shift to platforms that celebrated content first and foremost. Experiences like YouTube and Microsoft Metro’s content-over-chrome design language exemplify this Content is King paradigm. The third paradigm, Give Me Context, takes the richness of Content is King and delivers it in context to any user with a phone in their pocket. These are mobile-first experiences like Uber/Lyft and Google Now. The fourth paradigm, Let’s Talk, puts conversations at the forefront. Whether they’re verbal like Alexa, text-driven like the Quartz news app, or content-eclectic like Snapchat, these experiences want to talk, chat, and gossip.
These paradigm shifts are made possible by effectively employing three things: a focused approach, a familiar and well-leveraged metaphor, and a specific emotional hook for users.
Explaining Technology / 1990s-2000s
Platform paradigm: explanation
Leveraged metaphor: physical objects
Emotional hook: quality faux-leather
“The only intuitive interface is the nipple. After that, it’s all learned.” — Bruce Ediger, software engineer
In the early days of personal computing and well into the early 2000s, skeuomorphic design was a highly effective tool to explain how technology functioned. Looking back, it feels like training wheels for a populace learning to grasp foreign technology. “Let’s make that calendar feel real and premium by employing page curls and leather binding!” “Let’s show people a shiny magnifying glass to get them to understand what the search function does!” Apple’s software design took this to the extreme:
“We made the buttons on the screen look so good, you’ll want to lick them.” — Steve Jobs in 2000
This lick-able aesthetic resonated with users by equating premium software with a polished digital veneer. This approach is often mocked in today’s design circles but during this era users relished the emotional hook and familiar metaphors when paired with the exotic reality of desktop computing.
Content is King / 2000s-2010s
Platform paradigm: content-rich
Leveraged metaphor: print design
Emotional hook: motion transition states
“Our heads are round so our thoughts can change direction.” — Francis Picabia, French avant-garde painter
There are two paths that came together to create this rich-content paradigm. On one path, users matured beyond the need for platforms that explain technology. Visual metaphors became more subtle and took a back seat. On another path, the screens of our devices became both larger and higher resolution. At the delta of these two paths, ‘content is king’ became the defining mantra of the paradigm. Indulgent software chrome went away in favor of prominent reading experiences and high-definition imagery that filled bright, beautiful screens.
To effectively celebrate content in this paradigm, designers leveraged print design metaphors. Many of these metaphors are still present and feel natural in our digital experiences: pages, scrolling, bookmarking, cards, and cover art to name a few.
The emotional hook in this paradigm was motion design. Coherent transition states not only informed the user on how the content was organized but specifically provided personality, delight, and affinity to previously cold digital experiences.
Pioneers in this platform paradigm were Microsoft and their Metro Design Language. The content presentation principles of Metro laid the groundwork for other contemporary design languages including Google’s Material Design Language and Apple’s iOS7.
Give Me Context / 2010s-present
Platform paradigm: contextual
Leveraged metaphor: physics
Emotional hook: the crystal ball effect
In Content is King, screen real estate was big and beautiful. In this paradigm, one we’re still experiencing, screens have shrunk to fit in our pocket and come with us wherever we go. Now the context in which we consume content becomes the critical metric. The digital experiences that best represent this paradigm provide content when and how you want it, with ease. Order a cab to my exact location. Anticipate and notify me of an important meeting. One vibration means app notification, two vibrations mean important text message.
The metaphor that elegantly brings these contextual experiences to life is physics. Our interactions are informed by touch screens that allow us to tap, drag, and push in intuitive and human ways. Our devices leverage physics beyond touch screens with haptic feedback, location enabling, and a slurry of sensors like accelerometers.
When a digital system provides you timely information, useful feedback, and personalized content, it becomes as a crystal ball, omnipresent and prescient. With a crystal ball as the emotional hook, the digital experience becomes an extension of yourself, helping you see beyond your own cognitive abilities and inform your future.
Let’s Talk / 2010s-present
Platform paradigm: conversational
Leveraged metaphor: social interaction and language
Emotional hook: ephemerality
Language is a fundamental human trait and it serves as the backbone to our last paradigm, Let’s Talk. Various apps, websites, and devices in this paradigm leverage conversations, communication, and language as a platform for digital interaction.
Platforms such as Amazon’s Alexa, Microsoft’s Cortana, and Apple’s Siri are some of the big players’ first entrants into a paradigm still in its infancy. These experiences personify a digital assistant and utilize verbal communication in a way that aims to connect with us on a human level.
There are also more modest, text-based products in this paradigm. Slack puts quick, linear conversations at the heart of their experience, making email feel like a relic from an era before technology cared about users. Snapchat’s take on fast, informal messaging has yielded a wildly rich experience with photos, videos, animation, and augmented reality all being used as eclectic ingredients that make up a conversation.
The core metaphors leveraged in this paradigm are social interaction and language. Conversations have specific visual cues like speech bubbles. The social interaction metaphor is deeply embedded in digital assistant experiences. Chatting with Siri about today’s weather, for instance, is more decipherable with colloquialisms and shorthand.
The most potent experiences in this paradigm embrace a compelling emotional hook: ephemerality. Snaps that delete after viewing, text messages that are abbreviated and colloquial, conversations with Alexa that don’t inundate my inbox reflect how humans actually communicate. The informal and un-precious nature of these experiences is the reason why users love them.
Also couched within ephemerality is a broader shift about access over ownership. We no longer horde archives of movies and music but rather subscribe to digital platforms that provide endless libraries. The entire concept of ‘the cloud’ is that we can access what we need when we need it.
In Conclusion
These four platform paradigms, while by no means comprehensive, provide outlook on where we’ve been and where I envision we might go in the future. It’s clear that we’ve moved beyond platform design that aims to simply explain technology with real-world metaphors. I would argue that most of today’s potent digital experiences lie within the Content is King paradigm but I’m thrilled on the prospect of context and conversation becoming the predominant paradigms for the platforms of tomorrow.
I’m eager to explore new paradigms while not losing sight of systems that emphasize honest and authentic content, which reminds me of this poignant and motivating quote from Mike Monteiro of Mule Design:
“A good designer finds an elegant way to put everything you need on a page. A great designer convinces you half that shit is unnecessary.”
Benjamin Shown is a creative director at Tectonic. As director, Ben leads envisioning projects wrestling with themes including ephemeral media, dynamic typographic systems, and contemporary visual design. Ben loves collaboration, heady problems, Murphy beds, grids, typography, and unity + variety. He is an alum of the University of Washington’s design program and currently lives in Somerville, Massachusetts with his wife and 24-month-old client, Percy.
Tectonic is an experience design studio in Seattle and Boston. We collaborate with the ambitious companies to reimagine how people interact with content and technology. Find out more about us at gotectonic.com, and sign up for our Friday Links newsletter here.
