This Interface Is A (Good) Joke!
Email Newsletter
Weekly tips on front-end & UX.
Trusted by 200,000+ folks.
Sponsor OWD on GitHub
Click here to kickstart your project for free in a matter of minutes.
Build skills. Boost ROI.
Take a break with a 3D game built on Netlify!
Start with a free demo —For a few years now, a mild debate has simmered over “delightful” interaction design. For some, features that instill delight, as long as they don’t interfere with the fundamental capabilities of the system, sit with pleasure atop Maslow’s hierarchy of needs as redrawn for interactive systems.
Others don’t really care about such features, or place “delight” alongside “frictionless” and “seamless” as just the latest buzzwords (leaving “scalable” and “disruptive” in their dust). What none of these design partisans gets is the place of delight in a much larger process that everyone can enjoy: the hearing of a good joke.
This is not about using humor to instill delight; rather, it’s about weaving the structure of jokes into the structure of an interaction, so that the feeling of delight one gets from a joke is re-expressed as a more lasting form of understanding and competence through the interaction. Specifically, it’s about the very moment one does or does not get a joke, does or does not understand an interaction.
Both Jokes And Effective Interactions Convert Surprise Into Meaningful Pleasure
The essence of good designs and good jokes is managing expectations. Designers use design patterns such as the carousel and the hamburger menu so that users experience feelings of familiarity and competence. Users draw upon previously developed skills to understand a new website or design quickly. Within this experience, a fun tweak or creative twist can indeed be momentarily delightful.
A more difficult task for the designer is when a design or technology is truly new, “revolutionary” even. Previously learned design patterns cannot help in such cases. Recall that when Apple first marketed the iPad, the commercials all showed a user interacting with the screen: the ads were shot in “first-person swiper” mode. Apple was imbuing us with the experience of having used the device so that we could do it again (for the first time!) once we purchased it.
But few of us can launch a multimillion-dollar advertising campaign to help our customers with our new design. We have to recognize that if we launch something that users haven’t seen before and don’t know how to use, they are more likely to experience panic and anxiety than anything resembling delight. Users will always seek to apply previous learning to a new task, will always form expectations based upon past experience, but with truly new designs, these expectations will not be met. The resulting surprise will be either pleasant or the opposite of pleasant. The whole process can take less than 50 milliseconds.
This is where knowing how good jokes are structured — and, in particular, how listeners experience a joke — can help. When you tell a friend a joke, it can land in one of three ways. In the worst-case scenario, your friend might not get the joke at all. They will be upset that there is some knowledge they don’t have that was necessary to understand the joke, and they will resent you for pointing it out. This is the equivalent of a user not understanding an interactive system and worrying about the safety and security of their content and perhaps even their job.
A second possibility is that the joke falls flat. It might be mildly funny for a second or two, during which it will elicit a groan and, at best, some non-Duchenne laughter. Your friend will appreciate the effort, but it will not strengthen your relationship in any way. This is what people are usually talking about when they say they hate “delightful” interaction design. Something cute happens in the interface that elicits a momentary smile (as long as it moves the interaction forward, or at least doesn’t interrupt it). But it is then shrugged off, nearly (but not quite) forgotten, like an old joke that retains a fresh kind of staleness.
The third possibility is, for the briefest moment, just like the first: Your friend doesn’t get it; but then, in a miraculous moment of insight, they do get it, and the result is genuine mirth. When we hear such jokes, our understanding of the world — the way that understanding is constructed through language — is enlarged. Behind this experience lies a structure that we might hope to transpose to the structure of interaction design.
Incongruity Theory Of Jokes — And Interaction Design
Of the many efforts to explain humor, the incongruity theory best explains this moment of insight and understanding. It marks an “unexpected, often sudden, shift in perspective“: You lure your friend into thinking you mean one thing and then suddenly reveal that you mean something else. But the crucial detail is that the sudden awareness is pleasant: The original, expected meaning is revealed to be less fun than, inferior to, the revealed meaning.
If I tell you, “College students are under a lot of pressure, until they take a shower,” you build in your mind an expectation about what the word “pressure” means, and then your perspective on that meaning shifts in a pleasant way.
Incongruity also explains the strange success of Bob Mankoff’s classic New Yorker cartoon, “No, Thursday’s out. How about never — is never good for you?” The joke sets up the expectation that the businessman is trying to find a date to meet with the person on the other end of the phone, but then that expectation is upended — in a pleasant way that helps the reader understand what is really going on. As Mankoff notes in the video below, “Through jokes, we delight in these synergies, these paradoxes, that don’t resolve themselves… But we make it funny by also bringing in the emotional factor of people.”
This is the kind of “delight” we should strive for in innovative interaction design. We want to subtly shift users’ expectations toward a feeling of insight, enlightenment and liberation. If we must violate their hard-earned expectations, we want the result to be better than what they expected.
According to this model, here is the best joke told by an interaction design in the past 10 years:
The first-time user of Google Docs will spend 20 minutes or so creating content and then look for a “Save” button. Not seeing one, they experience a moment of fear for the safety of their work. Their expectation of how document-creation interfaces work most certainly is not met. But then they see “All changes saved” and discover that the onerous task of saving their work has been taken from them. This is better, a pleasant surprise indeed. They might even tell themselves the joke again a few times, adding to their file and watching the reassuring message validate their new perspective on the interface.
While it might not look like it, Google’s auto-save is a new linguistic idiom translated on the screen into a new interaction idiom, one that replaces the more familiar “Save” button or icon. To new Google users, it’s an unexpected turn of a phrase, a surprise that leads not to panic but to a feeling of relief.
This is not to say that new interaction idioms are easy to adopt — just as clever puns are not necessarily easy to recognize. Sometimes they require additional learning in order to be understood. Users who are new to Google Docs’ save interaction often take some time to poke at it — to make sure it works the way they think it should, to develop the trust they need in order to believe it will always behave the way they expect it to.
Many of us have gone through a similar process of testing the Mac OS’ Time Machine backup utility, intentionally deleting a file and then finding it in a previous location in the timeline. This is the equivalent of running through a new joke a few times, testing out the phrasing to make sure it is just right — producing maximum pleasure with a minimum of confusion in the final telling. (And anyone who has experienced backup utilities on a Windows machine will appreciate the Mac “joke” very much).
It’s akin to the latent pleasure we experience when hearing a joke we’ve heard before — if it’s good enough, we take pleasure in the smoothness of its actions, in the expected outcome and in the delight it causes others.
Jokes (And Human-Computer Interaction) As Problem-Solving
This view requires that we consider much human-computer-interaction to be an exercise in problem-solving, but only in the sense that enjoying a good joke is problem-solving. Matthew Hurley, in Inside Jokes: Using Humor to Reverse-Engineer the Mind, notes the similarity between “getting” a joke and solving a problem:
"There is an undeniable similarity between the joy of humor and the joy of problem solving. When we "get" a joke we feel a sense of discovery rather like the sense of triumph when we solve a problem. And when we are unable to solve a problem, there is a sense of confusion or missing knowledge that is reminiscent of the feeling we get when we are unable to get a joke."
Human-computer interaction is problem-solving in which we need to understand the language of the problem, or at least “come to terms” with the computer to find a common language that describes the problem and helps us solve it. The computer interface, and the design of the interaction, are what allow us to learn that language (or not) and to get the joke (or not).
Compare Google’s save interaction above to changes introduced in Mac OS X Lion (and subsequently modified in response to user confusion). In Apple’s Modern Document Model (MDM), there was no “Save As,” and users were baffled. The change “caused a lot of confusion,” wrote John Martellaro at The Mac Observer, and “made matters worse for many long-time users who were accustomed to a specific workflow and the operation of the Mac’s OS since the beginning of Mac times.” The MDM was revolutionary, but, as Matt Neuburg at Tidbits wrote, “for many users, it wasn’t a revolution they liked.”
While there are many logical arguments in favor of Apple’s new model and the tools of Autosave, Resume and Versions, the change continues to baffle users, especially new Mac users. It induces the surprise (and panic) of not finding a familiar “Save As” option, with none of the delight that could be produced by simultaneously offering up an obvious, pleasurable alternative.
Anxiety and panic can result from interaction designs that do not adhere to our expectations, that do not deploy design patterns that we are familiar with or that connect to our experiences in some way. In a previous article, I showed how our brain produces a pleasure-inducing neurochemical, dopamine, when we recognize familiar patterns in the world around us. When we act on these patterns and are successful in whatever we are trying to do, we get an additional burst of this pleasing chemical. This is one of the neurochemical processes that lies behind the state of “flow.”
However, when a pattern is broken or behaves unexpectedly, all hell breaks loose. An area of the brain called the anterior cingulate cortex (ACC) monitors the activity of the prefrontal cortex for reduced dopamine activity, which indicates that a predicted or expected event has not occurred. When the dopamine activity slows or stops, the ACC sends out a “prediction error signal,” and this tells the amygdala and hypothalamus (and other brain areas) to release chemicals that cause feelings of panic and anxiety: The heart races, the muscles tense, and we become short of breath. In other words, when something doesn’t work as expected, we become anxious.
For obvious reasons, we do not want our users to experience these feelings of panic and anxiety when they use our systems. Yet, we do want to introduce new interaction patterns and improve the ways in which existing patterns behave.
The anterior cingulate is the common ground for jokes and interaction design. By monitoring the production of dopamine in the prediction cycle, the ACC becomes the switch that turns on or off the brain’s panic signal. As long as the pattern-recognition system of the prefrontal cortex is delivering successful experiences to the rest of the brain’s perceptual system, the ACC is relatively inactive. But when a pattern isn’t recognized, or a pattern that was recognized results in an unexpected outcome, the ACC alerts the rest of the system that something is amiss. This can happen when someone doesn’t get a joke, just as it can happen when a human-computer interaction goes wrong.
The Pleasant Surprise Of A Good Joke (And A Good Interaction)
Good jokes offer a way out of this dilemma, because they show how a change in mood can lead to a change in productivity. In Ha!: The Science of When We Laugh and Why, Scott Weems summarizes an experiment at Northwestern University in which researchers explored the neuroscience of insight. To study this, they asked subjects to consider three words and then come up with a fourth that could be attached to the others. For example, if the first three words were “tooth,” “potato” and “heart,” the fourth would be “sweet.”
Researchers gave subjects pre-tests to measure their mood, and they discovered that the better their mood, the better they were at solving these insight problems:
"Subjects in a good mood not only solved more problems than those in a bad mood, they also engaged a specific part of the brain responsible for managing conflict [the anterior cingulate]."
Another study, called the Stroop test, found a similar connection between good mood and the ability to maintain focus. We want our designs to leave users in a good mood vis-à-vis our interaction designs so that they can focus on solving problems and resolving conflicts in their own work. Understanding how jokes work, and how to integrate them structurally into our designs, can help us do just that.
Weems uses insight problems to illustrate three stages of humor and of all complex thinking: constructing, reckoning and resolving, “three stages our brains go through when transforming ambiguity and confusion into pleasure.” These stages can also form the structure of a positive experience with new or innovative designs:
- Constructing refers to our propensity to explain the world around us. When solving problems, “we don’t simply search our memories for possible solutions. Rather, we let our brains go to work generating lots of possible answers” — some useful, some not. The same thing happens when we read or hear a joke, and when we encounter a new or unfamiliar design.
- Reckoning is “the jettisoning of our mistakes so that we can uncover new interpretations.” This creates the pleasurable surprise effect that we recognize in appreciating a joke. “We take pleasure in being pulled from false assumptions,” but, crucially, only if, at the other end of that experience, we gain insight and understanding. According to Weems, “What elicits laughter isn’t the content of the joke but the way our brain works through the conflict the joke elicits.” The key is to make “working through the conflict” pleasurable by making the surprise that comes at the end productive, non-destructive and educational.
- Resolving refers to the pleasant outcome of the reckoning stage, and it relies on the concept of scripts. The listener of a joke (like the user of a new interface) makes comparisons between the expected and the actual outcome of the experience. The setup of the joke, like the initial user interaction, elicits expectations, often several at once, about what is going to come next. The brain then compares these expected outcomes with the actual outcomes. This is where one or more incongruities are experienced. In the resolving stage, these incongruities are brought together so that the actual outcome retroactively “explains” the setup in a new way. “Surprise” and “delight” aren’t enough — in the resolving stage, “we must also provide a shift in perspective.”
In a human-computer interaction, this shift in perspective must support the user’s goals and lead to further understanding. When jokes are good, they elicit one or more expectations and then “activate an opposing script” that allows the joke to “come together.” This activation of an alternative and resolving script is what constitutes resolution and pleasure in the joke. The result is a new “frame of reference” that opens up possibilities for new understanding.
A recent experience of redeeming iTunes gift cards took me and my daughter through Weems’ three stages. She received four $10 cards, each with a 16-digit authorization code. Instructions on the card set up the interaction/joke:
- go to iTunes;
- click “Redeem”;
- enter code.
Primed for this familiar (and unpleasant) interaction, we didn’t read the screen and didn’t even notice the instruction to use the computer’s camera. We set our plan: I would read out the codes as she typed them in, and we would get through it somehow.
After the first card (yes, it took a whole card), she noticed the blue “Use camera” button, clicked it and gave it a try. Using this method, redemption occurred instantly (ha!). I can’t describe the feeling of relief I experienced, admittedly all out of proportion to the situation.
We had set about constructing the experience in our minds, at first limited to our past experience of entering codes, but open, if subconsciously, to the possibility of alternative scripts. Reckoning began as we glimpsed the possibility of scanning instead, of jettisoning our assumption that codes must be manually entered. The quick and accurate action of the scanning interaction resolved the experience in a pleasantly surprising way, incongruous with our expectation, but way better. The “shift in perspective” that we both achieved coincided with new learning that will benefit us in similar future interactions.
The details of a good interaction (like those of a good joke) are difficult to remember after the fact. But contextual cues can bring them to mind when they are needed. “Tell me a joke” always leaves me speechless, but when the right situation arises, the appropriate joke often occurs to me. In the same way, without looking at it, I can’t recall the exact design of the card-scanning alternative for iTunes. Even now, I am amazed that I completely missed the camera option when first presented with it. But in the future, when I find myself in the midst of a similar setup, I’m sure I’ll recall how the interaction goes.
The Need For Contextual Understanding
One further unavoidable similarity between good jokes and good interactions cannot go unstated. A good joke assumes that the listener has the social, cultural, educational and other backgrounds to run the appropriate scripts associated with the joke. The assumption, Weems writes, is that the listener’s brain “holds all the knowledge necessary to know what jokes actually mean.” But we know that this is not always true for the scripts we want our users to run inside their heads when they encounter a new design.
It is still the case that many people use computer systems even when they don’t “get” them. They derive no pleasure from the interaction because there are few shared assumptions, no whimsical surprises leading to discovery and understanding. This is why it has always been so important for designers to know their users, to know what the users do and don’t know, and to provide educational information in the interface, in feedback, in visual design, etc. We want to avoid the appearance of offering a non sequitur in our jokes and in our interactions.
This is a relatively new challenge for interaction designers: Build systems that allow users to reinterpret failed expectations as moments of creative insight — incongruous, yet still pleasant and productive. It is a natural result of the “conversation” metaphor that has come to dominate interaction design.
What is not new is the decades-long effort to reduce anxiety in computer users, which the GUI went a long way toward addressing in its day, but which must receive new attention as the WIMP paradigm (windows, icons, menus, pointer) is replaced with touch, gesture, voice and even autonomic interfaces. Jokes, rightly considered, offer a fuller model than “delight” for what we are aiming at as we make these transitions.
Further Reading
- “Practical Techniques On Designing Animation,” Sarah Drasner
- “Designing With Reduced Motion For Motion Sensitivities,” Val Head
- “Understanding Easing Functions For CSS Animations And Transitions,” Adrian Bece
- “Orchestrating Complexity With Web Animations API,” Kirill Myshkin
(cc, ml, al, il, mrn)
