The Emotional Design of Firefox
Earlier this year I read Don Norman’s Emotional Design, and I’ve been reflecting on some of the reasons I decided to start using Firefox back in 2004.
When I hear most people talk about why they used Firefox, they sound pretty rational. They liked Firefox because it stopped pop-ups; it had tabs; or because it was faster than Internet Explorer.
My recollections of my first impressions of Firefox involved some of those things, but I mostly remember having a positive emotional reaction to the product. I’d always supported the mission of open-source software, for instance, but I’d never actually used any open-source software that acted like it wanted to help people who weren’t computer experts. There were a number of cues that indicated this, from the adorable yet professional logo of a firey-tailed fox hugging the world to a clean, simple, and unintimidating user interface.
Don Norman might call this a combination of visceral and reflective responses to the product I was using: “shallow” qualities that are usually associated with marketing rather than usability. Yet they changed the way I used the software, by making me actively want to use it, and not in the same way I used Internet Explorer. I feverishly explored all its dialogs and add-ons and learned everything I could about this new gem I’d stumbled upon. I’d just been a user of Internet Explorer—but with Firefox, I was a fan.
Early in his book, Norman states:
We have long known that when people are anxious they tend to narrow their thought processes, concentrating upon aspects directly relevant to a problem. This is a useful strategy in escaping from danger, but not in thinking of imaginative new approaches to a problem. Isen’s results show that when people are relaxed and happy, their thought processes expand, becoming more creative, more imaginative.
These and related findings suggest the role of aesthetics in product design: attractive things make people feel good, which in turn makes them think more creatively. How does that make something easier to use? Simple, by making it easier for people to find solutions to the problems they encounter.
In short, the social, cultural, and artistic context surrounding a product has a lot to do with its usability. If a product’s context is constructed such that users are positively engaged when they start using it, then it actually becomes more usable.
Today, one of my favorite examples of empathic design in Firefox is actually the title of an error page:
A comment in Firefox’s source code provides the rationale for this:
The title is intended to be apologetic and disarming, expressing dismay and regret that we are unable to restore the session for the user.
The very notion of trying to express dismay and regret is extremely rare in computer software. I love it, as the few times I’ve seen it, the disarming has worked—it’s made me chuckle out loud, and the humor conveyed immediately reminds me that I’m using software created by fallible human beings who care about my data. This sort of affective design needs to be done extremely carefully, since it could easily backfire and come off as ingenuine or patronizing—but in my opinion, it’s worth the effort.
August 12th, 2010 at 11:19 am
Yes on the overall point. That dialog is a good example of emotional design, but it also shows a weakness. As my wife said “it’s cute the first 10 times” (implying that after a while, the emotion it inspires isn’t quite so humane, but just obnoxious.
Two other examples that come to mind from other software systems:
* Flickr’s long-standing tradition of greeting you (if you’re a logged in user) in a random language.
* Chrome’s warning in their private browsing mode that it doesn’t protect you from “Malicious software that tracks your keystrokes in exchange for free smileys” and “Surveillance by secret agents”, and “People standing behind you”, all of which are real and diverse concerns, expressed so as to (I assume) raise awareness of the limits of any one piece of software to protect you.
August 12th, 2010 at 3:12 pm
I second David’s point. Firefox gives me that “Well, this is embarassing” message EVERY. SINGLE. TIME. I open it.
The resulting emotional experience for me is that I feel sort of uncomfortable. Firefox is that friend who is constantly embarrassed about totally normal things. It makes me not really want to hang out with Firefox anymore.
Part of what makes human emotions effective is that they come from our shared human experience. Software doesn’t have that experience, so it’s liable to make constant social gaffes.
August 12th, 2010 at 4:03 pm
The other one that comes to mind is Twitter’s Fail Whale and “Something is technically wrong” and especially this video:
http://vimeo.com/5002952
August 12th, 2010 at 4:14 pm
Little nitpick: It’s not an adorable fiery-tailed fox, but an even more adorable fiery-tailed red panda, which is also called a ‘firefox’.
August 12th, 2010 at 4:21 pm
It’s not normal that it crashes. You probably have your firewall blocking Firefox or something, or maybe some add-on acting up?
August 12th, 2010 at 5:25 pm
David, the animal in the Firefox logo is a fox, not a red panda, proper terminology notwithstanding.
August 12th, 2010 at 9:34 pm
Colby, it seems you’re right. And my emotional investment in the logo just decreased a tiny bit.
August 12th, 2010 at 11:34 pm
Atul–thanks for giving me an excuse to look at some of the notes I jotted down when I read this book! In your post you give the example of empathic design in Firefox but your description of engaging with Firefox and becoming a “fan” of, and now contributor to, the product (quoted below) reminded me of another idea in the book.
“I feverishly explored all its dialogs and add-ons and learned everything I could about this new gem I’d stumbled upon. I’d just been a user of Internet Explorer—but with Firefox, I was a fan.”
In the book Norman writes about the failure of the first Betty Crocker cake mix. It produced a fine cake but people thought it was too easy–they had no sense of personal accomplishment. So they changed the mix so that it required that the baker add an egg. The act of adding the egg was key. It made people feel proud. They formed an emotional connection to the product.
I think so many of feel connected to Firefox because it requires some work on our end. At a minimum we have to install it on a computer ourselves. Then we start customizing it with add-ons and themes. Positive affect results from the time we invest with the product, making it our own.
At the end of the book Norman has a great quote about designers:
“But they cannot make something personal, make something we bond to. Nobody can do that for us; we must do it for ourselves.”
Firefox is a little “do-it-yourself” and that is why we love it so much.
August 13th, 2010 at 8:15 am
@David, @Erik: While I definitely agree that seeing the exact same message over and over is terrible, I think that affective design could still be used to help the situation: for instance, if Firefox kept track of how many times it’d shown the embarassment message to the user, we’d have a very good indicator of the frustration level of the user. Not only could we use that data to tailor an even more empathic message to the user, but we could also take more extreme actions because of it, e.g. directing the user to SUMO Live Chat, or automatically filing a high-priority bug somewhere.
It sounds like a lot of work to deal with an edge case that probably only applies to a tiny percentage of users, but at the same time, it’s at the edges where users migrate to other products: excessive hanging actually provoked me to switch back to IE in the Firefox 2 days, for instance, and all over Twitter we see folks switching browsers because they’re experiencing some kind of strange bug that we can’t consistently reproduce.
@Maureen: wow, that’s a great point, I hadn’t thought of that! I totally agree, and it’d be great to actually promote this more in our materials… have a “What will you put in your Firefox?” campaign or something. Also, do you have a blog? Your comment would actually make a great blog post.
November 29th, 2011 at 12:45 pm
[...] the Hackasaurus tools and events, actually—it’s a combination of stylistic touches and emotional design to help people feel that what they’re doing is fun, along with humane functionality that [...]