Mascots in Product Design
Why we hate Clippy, love Duo and MySpace Tom might not scale.
We are least accepting of creatures that look very human and perform badly. We are not nearly so dismayed — or frightened — by nonhuman shapes.
— Masahiro Mori, paraphrased by Don Norman in Emotional Design
It’s early days for robot emotions but reading Don Norman’s book made me think about how we use humanized mascots in web and mobile apps. The first example that comes to mind, of course, is Clippy.
Did that make you cringe a little? It’s the consequence of what Norman refers to as the reflective part of emotional design. He breaks down the emotions elicited by design into three layers:
Visceral: The “Oooh, shiny! I want” or “Ugh, this is ugly” first-glance reaction. This comes straight from your nervous system without taking any time to think.
Behavioral: “Does this thing do what it’s supposed to do and do it well?” This is our emotional response to usability engineering, which he wrote a classic book on.
Reflective: “I will buy this $80 notebook because its reflective of my personality” or “These old drawing tools look great but it was so much harder to use them than Photoshop”. This part is the most subject to nostalgia, context, culture and age.
If this is the first time you’re seeing Clippy, you’ll likely judge it by its visceral appeal. You might even find it cute (8 year-old me certainly did). Once you got into using Microsoft Word and Clippy became your daily companion, it wouldn’t stop with the error dialogs, lost files, interruptive spell correction and other bad news.
We’re now getting into behavioral territory. If the software is not great to use, we feel frustration, and it’s a well-studied fact that we love to shoot the messenger.
By giving the software a face, designers made it vulnerable to a greater range of human emotion.
Finally, Clippy is long gone, but he’s ingrained into our minds as an annoyance. In the age of autosaving, sync and live sharing, you might not even remember why exactly you hated him, but you certainly remember how you felt. This is the reflective layer kicking in.
Content Creators and Mediums
To understand what makes Clippy so annoying, let’s try to establish some context with a little detour.
On your first day as a new employee at Facebook, Chris Cox does a talk emphasizing that Facebook is a medium. This is a critical mental shift for a new employee to make, because their perception of Facebook has largely been defined by the content creators, i.e. their friends.
What each Facebook user sees and how they interact with the product is unique to them. To illustrate, if you take away all personalized content from your home page, this is how barren it looks:
Contrast this to the home page for Duolingo, a free language learning tool which helps you learn a new language by taking a series of well-defined albeit adaptive lessons. The content is static, curated and consistent. This makes it easier to lend a voice, and consequently, a face to the product.
Notice how this page would lose very little content if I removed personalized information (the leaderboard in the right column would go).
I can think of a few reasons why Duo the Owl does his job as a language-learning companion really well.
- Language learning on the internet is lonely. It’s good to have a friend at the beginning, even if it’s a cute virtual owl. Of course, there’s the slight risk that the user predisposed against owls and your reflective emotions will kick in, but its statistically unlikely.
- Duo is the voice of Duolingo, not the real friends you learn with. He helps you navigate content that he (the creators) understands well and can speak consistently about. He’s reassuring when he guides us through the product.
- So far, Duolingo is a solid product with a good user experience. Duo is carefully placed in the product so he does not get in the way in the wrong places — alerts, dialogs and modals. Also, Duolingo is a completely free learning experience you can opt-out of at any time. Because of the nature of the product, it’s generally hard to assign blame to Duo.
- Mascots are good at reinforcing positive emotions. They celebrate with you when you succeed and sympathize with you when you fail. Duo is never the angry teacher who shouted at you in class.
Contrast Duolingo with Coursera, the product I help build now. Coursera is a platform for online courses ranging from Guitar to Dinosaur Paleobiology.
With Clippy, Microsoft made the mistake of taking a medium and giving it a voice. You could be writing about anything from deep-space science fiction to the age of dinosaurs. Clippy doesn’t belong in either. Our emotions reject it.
Aside: Kids and Mascots
Norman’s framework also helps us understand why mascots and faces perform extremely well on kids’ apps. Children are less likely to have reflective predispositions against mascots and are more subject to visceral emotions than adults.
Evolving Products and Middle Ground
Finally, I want to share two examples of products that are somewhere in the middle between having a very humanized voice and trying to get out of the way to emphasize content over Chrome.
Foursquare is one of my favorite apps. It started out masquerading as a game with the dual intent of helping you find out where your friends are while helping the company crowdsource a places-of-interest database from all over the world.
In the beginning, there wasn’t a critical mass of users on the product, so you’d play for points and compete against yourself checking in to as many places as you could.
After a relatively bare first few versions, Marsbot popped up. To help you along, Marsbot would show up from time to time helping you along and celebrating with you.
www.marisheibley.com
As Foursquare reached more users and could be a medium where more value was derived from your real friends — their tips, photos and checkins — Marsbot and the other game mechanics slowly gave way to a more utilitarian experience while retaining some of its fun and quirky character.
For those of you who follow Foursquare, I suspect they may have swung too utilitarian and some of the quirky language is returning in version 7, having mostly gone away in version 6.
I also found MailChimp and their prominent use of their mascot Freddie fascinating.
They’ve since replaced it with a nice interactive animation showing the product in action.
I suspect Freddie served to ease users into a relatively complex and hard to explain product with his friendly face. He also leads our eyes towards the main text and call to action button.
Once the designers figured out a great way to illustrate a simplified version of the product itself, this was more effective in converting the intended audience. Function and form together trumps form alone.
MailChimp is interesting because it’s the kind of product you wouldn’t normally associate with a cute animal mascot (they help create email newsletters). I suspect it works well for them though. It helps them differentiate in a crowded marketplace and their customers are mainly programmers, web developers and product managers, an audience not particularly averse to mascots as long as they’re not over-the-top.
Foursquare and Mailchimp prove that one doesn’t have to go all out with mascots. Like Duolingo, they too make sure that theirs are used only in a positive context.
Remember MySpace Tom? By putting himself up on Myspace’s messaging, he made us feel more personally welcome. But sadly, when the product took a nosedive into clutter, the rioting masses looked to him as the sacrificial lamb.
Finally, I’d like to leave you with a somewhat uncomfortable parting thought. If you think you find Facebook can get unhealthily addictive and somewhat annoying at times, imagine how you’d feel towards this poor fella.
