Seductive Interaction Design: Creating Playful, Fun, and Effective Use
Bibliographic Information
Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences
Publisher: New Riders
Pub. Date: June 15, 2011
Print ISBN-10: 0-321-72552-2
Print ISBN-13: 978-0-321-72552-3
Web ISBN-10: 0-13-211847-5
Web ISBN-13: 978-0-13-211847-7
The Rider and the Elephant
One metaphor introduced by psychologist Jonathan Haidt is that of the elephant and the rider. It’s an apt way to think about the brain’s controlled processes (the rider) and automatic processes (the elephant). Picture a rider sitting atop a six-ton elephant. He may know the right way and try to steer the elephant in that direction, but it’s a challenging task, and one that’s not always successful. Think of how you might make plans, for instance, to get up earlier and begin jogging in the morning, but when the alarm goes off, there’s another part of you that says you should stay in bed and start jogging tomorrow. This is the tension between the rider and the elephant. One part of you is doing the planning and thinking. The other part relies on gut feeling, emotions, and intuition.
In their book Switch, Chip and Dan Heath extended this metaphor into a framework for changing behaviors. Specifically, they present three areas to focus on in any change effort:
-
Are you speaking to the rider by setting clear goals, expectations, and a path to get there? Are you learning from examples where people have been successful?
-
Are you motivating the elephant through stories and other things that excite and inspire action?
-
Are you shaping the path to nudge the elephant and rider along in the right direction? Are you making change easy by removing the friction that prevents people from taking action?
I’ve found this to be a useful metaphor not only for understanding inconsistencies in human behavior (why we desire to lose weight but then give in to the temptation of a chocolate chip cookie), but also as a way to evaluate the proposed combination of ideas. Much of what has been described in this book is about motivating the elephant or shaping the path. But it’s important to remember to give the rider reasoned, clear instructions and a way forward. At a minimum, you should be assessing your application to see if it’s operating on all three levels. Facts and data are needed, but to motivate you have to arouse people emotionally through stories, play, humor, and other means described in this book. Of course, motivating people isn’t enough—you have to shape the path so that people are nudged to take action.
This leads me into a model designed specifically for behavior change.
BJ Fogg on the Behavior Model
The Behavior Model is a way to describe what leads to a behavior. There are three elements that have to come together at the same moment. A person has to have some level of motivation. They have to have the ability to do the behavior. And then they have to be triggered to do the behavior. Those three things have to happen at the same time. If any element is missing then the behavior won’t happen.
Motivation and ability are trade offs. Somebody could have low motivation. But, if the behavior is really easy for them to do, if they’re triggered, they will do it. Conversely, in the other corner, if it’s really hard to do, but they have high motivation, then when the trigger hits, they’ll do it.
Of the three elements, motivation is the least important when it comes to behavior change, for most types of behavior change anyway. It’s more important to trigger the behavior, and only last do you worry about the motivational piece. If there’s a behavior that’s not happening that you want to have, focus on triggers first. Make sure it’s in their path, next focus on ability, and only last start figuring out how to boost the motivation.
The metaphor I use is to think about cooking; the techniques are ingredients in the cabinet. The trick is knowing which techniques to use for which recipe. You don’t just grab every single ingredient and dump it in the pot. That’s going to be awful. You have to know the right ingredients or the right combinations. My contribution is more on the how to think clearly about behavior. Once you know what the target behavior is, you can begin to design for it. I’m really big on patterns. Patterns are like the recipe. So understanding what patterns lead to which types of behaviors, that’s the core of my work—not the specific techniques.
Books on Game Design to Read
A Theory of Fun for Game Design by raph koster
The art of game design: A book of lenses by Jesse schell
Fundamentals of game design by Ernest Adams
Consider using avatars on the PDTT. Might make it easier to communicate.
Green is good. Red is bad. Yellow is something to think about. When designing, we must consider how the brain interprets the meaning of color, shadow, and shading. We rarely notice these aesthetic choices, except when people get them wrong:
Whatever the natural reference is—shadows, reflections, lighting, bevels—I like to ask designers, “Could you build a physical model of this page?” If you can’t, then the viewer will likely be disturbed, as something feels not quite right.
Showing Relationshops with Sifter[*]
With the bug tracker Sifter—and almost any bug tracker for that matter—bug and issue statuses are one of the key attributes, and they generally follow a progression as they are fixed and reviewed for quality. Unfortunately, it’s not always immediately obvious what step should be next. Creating a visual relationship between the options helps overcome that challenge and makes it clearer which step is next.
The statuses could be listed in a traditional list of radio buttons, or they could be listed in a drop down, but in both cases, the context isn’t really there. By arranging the statuses horizontally with relevant arrows in between, we’re communicating a progression, or in some cases, a regression.
By using radio buttons, all available states are always visible, as opposed to being hidden in a drop down. This helps provide a clear context and communicates the relationship between the different statuses. By arranging them horizontally, they almost begin to feel like a status bar. When an issue is in a resolved or closed state, the arrows combined with moving right-to-left instead of the natural left-to-right reinforce that reopening the issue is taking a step backwards.
–Garrett Dimon, Sifter creator
Consider using this idea for the PDTT. The arrows could show the continutiy.
//TOREAD
Visual Thinking: for Design
by Colin Ware
Designing with the Mind in Mind by Jeff Johnson
Watches Tell More Than Time: Product Design, Information, and the Quest for Elegance by Del Coates
Understanding Comics: The Invisible Art by Scott Mccloud
Reality Check!
In other words, how we think cannot be separated from how we feel. At all times, we are evaluating (affect) and interpreting (cognition) the world around us.
This raises some interesting questions—especially in the area of decision making. In short, our rational choices aren’t so rational
Reality Check!
This chapter was largely an argument for visual aesthetics in interactive environments. However, none of this should be taken as an argument against basic usability and usefulness. The most attractive site in the world will fail if it doesn’t deliver on basic promises or is too difficult to use.
If adding more images adds significantly to the load time, this will detract from the overall experience. If a fancy-looking title bar confuses people into thinking it’s clickable, that’s a problem. If a really nice layout means your content will be difficult to read on a mobile device, that’s a serious consideration.
As interaction designers, we make things people use. We have to consider the people, the activities, and the context of these interactions. And while there are certainly plenty of patterns and conventions we can fall back on, every project presents new and unique challenges. There is rarely a clear-cut way of doing things (and I’d be wary of anyone saying otherwise). What works in one situation may fail miserably in another, and we often have to prioritize one thing at the expense of another. Agencies tend to value branding and identity over all else. IT departments often see visual design as an afterthought. Usability tests focus on functionality, efficiency, and task completion, but rarely measure whether or not the experience was actually enjoyable.
Design, in a general sense, is largely about making difficult decisions. “If we do x, will it detract from y?” Sometimes it’s about finding the delicate balance. Sometimes it’s about a trade-off. Other times it’s a prioritization. The key is to be clear about the end goals of the project, and then make decisions accordingly.
My aim with this section is to elevate the role of aesthetics in our functional conversations, to provide an objective way to balance aesthetic considerations and traditional (functional) considerations. In doing so, I’m hoping people can make more informed and less-biased judgments. Aesthetics are but one aspect of the overall user experience. But they should be taken as seriously as reliability, uptime, or speed. By shifting the conversation to perceptions, judgments, and behavior, we can make informed design decisions, whether for or against a particular choice.
Since entering the field of user experience design (UX) more than a decade ago, I’ve witnessed the constant tension between usability engineers, development teams, designers (with different levels of experience), business folks, marketing groups, and others. Each has something quite valuable to add to the equation. But, it’s frustrating when we don’t value one another’s contributions or understand how to orchestrate these different interests to work together to create value for both business andcustomers.
Aesthetics are only one consideration. However, much is lost by isolating them as an afterthought or a separate consideration. I think it’s more accurate to think of aesthetics as a key ingredient in a recipe, as opposed to the icing on the cake.
Does and Don'ts
Don't Do
|
|
“You should follow me on Twitter here”
This matrix presents the different dimensions of curiosity originally proposed by D.E. Berlyne in the early 1950s.
Closely related to the endowed progress effect is a principle called sequencing—if you want to motivate people to do something, break the task down into small steps.
Sequencing doesn’t just apply to complex processes. Think of scenarios where there are multiple nonsequential things to be
done. While being able to choose the next task is nice, I’d argue that having someone direct us is probably more effective at getting people to actually complete something. Left to our own devices, we’re terrible at prioritizing where to spend our time.
Sequencing can be used to break down a complex set of questions into a series of simpler ones. Luke Wroblewski describes an approach to form design called inline contextual actions.
Some things succeed because they only ask you one thing at a time. After you complete a task, you are given another. Sequencing the conversation.
Also note the subtle addition of icons to visually reinforce what is requested. Effective visuals, from icons to infographics, can help people make sense of information much more quickly and with less potential for errors. The icons here primarily reinforce the inline form label; let’s look at something a bit more complex.
If you’re a start-up with a low volume of traffic, aside from being easier to use, you may not see the immediate benefits of these minor changes. However, it’s exactly these kinds of subtle details I’ve seen make measurable differences when A/B tested with sites that have significant traffic.
People will always take the path of least resistance.
I’ve tried making this shift in many of my communications (you’ve no doubt noticed the conversational voice throughout this book). I feel it draws you into the text and allows for a story to develop. I’m speaking to you about a particular subject.
Speaking directly to a person can be particularly useful if action is required.
“You should follow me on Twitter here”
In 2009, blogger Dustin Curtis, curious about the effects of forceful language, ran a little experiment. At the bottom of his Web site, he has a call to action that invites people to follow him on Twitter. He wanted to see if he could “increase the clickthrough rate even more by altering the way [this phrase] was worded.”
It worked!
Be short and to the point. Be conversational. Be aware of what is suggested by your choice of words.
Obsessing over every word isn’t always required. Just being clear and direct can change behavior.
A Quick Note On Status
Status is often confused with reputation. While status may indicate your standing relative to others, it can also indicate your standing relative to your own personal best.
[Flow is] being completely involved in an activity for its own sake. The ego falls away. Time flies. Every action, movement, and thought follows inevitably from the previous one, like playing jazz. Your whole being is involved, and you’re using your skills to the utmost.
—MIHALY CSÍKSZENTMIHÁLYI
Adding Game Mechanics to things
A thing
Add some game mechanics
The thing now has a new layer of fun it didn’t have before
People are more likely to engage with that thing
Every business owner wants growth, repeat visits, and active users. Games seem like an easy way to encourage and further these goals. And they might work, for a time, with some people.
Recurring themes/patterns in games.
Play & Challenges
Conflicts & Choices
Feedback Loops
Goals & Rewards
Imaginary World
It turns out that curiosity drives us to do a lot more than just sign up for something or rate a movie. In many ways, curiosity, and its cousin appropriate challenges, are vital to human progress. Curiosity leads to challenges. What happens if we do that? Can
we go there? Am I capable of doing this? We accept challenges because we are curious about our own abilities or some new subject. (We also accept challenges because we are threatened, but that’s another discussion!)
However, for more mundane activities, there’s a good chance you have something resembling the sugarcoating attitude, the one that wraps something in fun, gaming elements. You might have added punching bubbles or tending to a virtual garden to try to bring fun to an otherwise dull activity. However clever your idea, if it’s not integral to the activity itself then it is sugarcoating.
In my workshops, we come up with a lot of creative ideas. However, one of the first filters I challenge participants with is this: Did you have to add something to the application to make it fun? Or did you find the fun already in the application?
If you’re going to make a service more gamelike, think about the dynamics that make gameplay interesting. Don’t borrow superficial details from a game, but start by understanding what makes a good game fun to play. Then, look for these dynamics in your service. When you do this, the challenge and accompanying reward isn’t like an artificial sweetener added to the content. Pleasure is found in the challenge that was there along.
Does your service have something that is inherently interesting? Or more to the point, have you found the way to frame your service in a way that is engaging in and of itself?
By creating a challenge, you can sustain some of the delight. Let’s continue now with some of the things that make the challenge more interesting.
Fans
While a business goal might be to “increase the number of paid subscribers,” the associated behavioral goals might be to “get more people to click on the register button” and “help people understand our pricing plan options.” You may find that one business goal often fans out to multiple behavioral goals. Defining these behavioral and business goals ahead of time, before a project starts, does several things for us.
-
Links design work directly to business outcomes.
-
Too often, there’s a disconnect between business stakeholders and the work done by designers. This question creates a link between these groups, and the accountability that goes along with it. We can trace the effects of our design decisions back to measurable business goals.
-
Brings focus, and ideas.
-
Knowing what behaviors to design for at a page by page level creates focus, and leads to better ideas. As you walk through a designed experience, you can ask at every moment, what is the desired behavior at this moment or on this page and does this design support that goal in some way? I’ve found that there’s a correlation between detailed behavioral goals and creative, effective ideas.
-
opens the door for creative ideas
The first thing we’d need to do is translate this business goal into a behavioral goal. “improve the quality of the video content uploaded to our site” is not a behavior you can design for—it’s an outcome of some changes in behavior. Something like “encourage people to be more selective about what they upload” is a good behavioral goal. This is something designers can work with.
Next question: “How do we encourage this behavior?” This is where the fun starts, by exploring what we know about human behavior—how we make choices, what gets our attention, what we recall later. Basically, the things described throughout this book!
Let’s pull a few of these ideas at random and see how they might help in our scenario.
Scarcity—We infer value in something that has limited availability or is promoted as being scarce.
What if we limited uploads to just a few per week—everyone is allowed to upload three videos, but no more. Might this give people pause to think twice about what they’re uploading?
Limited Access—We naturally desire things that are perceived as exclusive or belonging to a select few.
What if those users who uploaded HD or highly rated content were given access to more editing features?
Authority—We want to follow the lead and advice of a legitimate authority.
What if we sent out short video tips from noted directors?
Shaping—To teach something new, start with the simplest form of the behavior; reinforce increasingly accurate approximations of the behavior.
What if we started of with very small, generic challenges that would apply to most people uploading videos. Try using dramatic lighting... This week, try a dramatic angle... Use this filter... Practice the “rule of thirds.” No one is expected to become a film director, but easy techniques like this would raise the bar on quality of videos uploaded.
You get the idea.
Assignment
Are you humans involved in your project? If so, then stop. You have an assignment:
-
What are you working on, right now? (The name of a project)
-
What are some of the business goals associated with this project?
-
Once you’ve written down a few business goals, translate these into behavioral goals.
-
Now, let the fun begin! What do you know about human behavior? What have you learned from this book that you might apply? Again, the theme of this book is “How can we apply what we know about human behavior to interaction design?” It’s time to put that knowledge to the test.
As a handy reference tool, I created a deck of cards (Mental Notes) to help bring these ideas from psychology out of textbooks and research papers and into our projects. find out more at www.getmentalnotes.com
Decisions, Decisions, Decisions
It’s natural to make decisions based on what other people are doing. We are incredibly social creatures. If you’ve ever seen a crowd of people watching something in a mall, you probably felt compelled to see what all the commotion was about.
Online, if we’re choosing between a presentation that’s been viewed 20 times and another that’s been viewed 20,000 times, most people will choose the one everyone else seems to be watching. If you look at a service like Digg, it is built entirely on this idea of social proof—the power of groups surfaces the best (or at least most interesting) items on the Web.
But this idea of social proof—that in new or unfamiliar situations we follow people we perceive as being similar to ourselves—shows up in other, more subtle ways. Consider testimonials that sing the praises of some site or service. The reason these work is they signal that other people have tried this out and found it to be worthwhile. It’s tapping into a drive for safety. If the group is doing it, there’s some measure of safety.
If you understand why testimonials work, that they leverage social proof, you can come up with more creative ways to show that lots of people support this idea. One of my favorite examples comes from the fixoutlook.org campaign. Rather than handpick a few testimonials, the entire background for this page is a wall of avatars—everyone who is tweeting about this campaign. The background refreshes every few seconds, so you’re literally seeing all of these faces and people who are (presumably) in support of this cause.
In the context of our seduction analogy, I treat the social element as another influencing agent. By including a follower count or allowing people to share things, you add an element of social influence, just like you might use feedback loops or scarcity to encourage a certain behavior. Of course, social interactions are too complex to treat simply as another influencing factor. Fortunately, there are some excellent books devoted to the topic of social design on the Web. One is Christian Crumlish’s and Erin Malone’s Designing Social Interfaces; another is Randy Farmer and Bryce Glass’s Building Web Reputation Systems. Both of these books are excellent resources for understanding online social systems.
Seduction. What is it about?
Seduction isn’t about deception or well-crafted manipulation—it’s about giving someone more of what they already want, desire, or need, even when they don’t know it yet. Seduction is about building a bridge between two lovers who might otherwise never have known each other. This can be used for nefarious purposes, for instance, leading the user to buy something they don’t need, or used instead for the mutual benefit of all involved, as with most of the examples I’ve tried to share here. But, if you don’t have a good value to begin with, fix that before you talk about seducing someone. You’re seducing someone as a way to reveal who you are and what you are about—and letting that person know along the way why they should care. If that person will never care, or if the goal of seduction is deception, stop now. Seduction is about people, and the goal should be ongoing love and devotion, not a home run. We don’t want regret or remorse, but delight.
My goal in writing this book was to inspire you with lots of interaction design ideas that are relatively new territory for our profession. I also wanted to offer an explanation as to why these ideas have been or might be effective. Like any technical book, the actual examples will soon be outdated (or imitated), but the reasons these ideas worked in the first place won’t change. And that’s what this book is really about: the psychology behind these ideas—timeless insights into human behavior. If we can start with an understanding of what kinds of things excite and attract us, keep us engaged, and win our hearts and minds, I believe we can create many more delightful, seductive experiences.