What you will learn from reading Seductive Interaction Design:
– The key design concepts for designing interactive interfaces.
– How to foster curiosity in your design to get people to want to learn more.
– Tips and tricks on how to grab peoples attention more easily with your interface.
Seductive Interaction Design Book Summary:
Seductive interaction design is a misleading title. Yes, it teaches you key principles in designing engaging interfaces but it also is fascinating glimpse into the workings of how technology companies build interfaces that engage us.
If you want to understand the best practices and core principles on catching and sustaining attention with your website or application then this is the book for you.
Using visuals to imply use:
Visual metaphors to help explain how something works. I.e. Ibooks was designed as a book shelf. To imply that it’s like picking a book of the shelf by clicking.
Effective visuals, from icons to infographics, can help people make sense of information much more quickly and with less potential for errors.
Use Visual Contrast:
Contrast is relative to the surrounding elements.
Contrast can also occur over time through animation. In an example from StumbleUpon, the button has a subtle gloss highlight that loops about every ten seconds. The designers added this subtle animation to catch our attention.
Key Design Concepts:
Sequencing. We are more likely to take action when complex tasks are broken down into smaller tasks. I.e. We broke down a big request by helping people take the first small step of deciding what to photograph.
Appropriate challenges. We delight in challenges, especially ones that strike a balance between being overwhelming and being boring.
Status. We constantly assess how interactions enhance or diminish our standing relative to others and our personal best.
Achievements. We are more likely to engage in activities in which meaningful achievements are recognised.
Feedback loops. We’re engaged by situations in which we see our actions modify subsequent results.
Curiosity. When teased with a small bit of interesting information, people want to know more.
Pattern recognition. Our brains seek ways to organise and simplify complex information, even where there is no pattern.
Visual imagery. Vision trumps all other senses and is the most direct way to perception. If you think about this page from a technical perspective, it’s nothing more than a list of 35 checkbox items. However, by using photographs of the artists, there was a more immediate, visceral reaction. And I had a larger click target.
Recognition over recall. It’s easier to recognize things we have previously experienced than it is to recall them from memory.
The Problem with Usability:
Usability clears the way for a good experience by eliminating troublesome interface distractions, but a great experience stems from something more—an awareness of why people could or do care. The danger is in confusing “ease of use” with actually desiring to use something.
Author and professor Donald Norman once stated, “When technology delivers basic needs, user experience dominates.”
Moving from bottom to top, you have a basic product maturity continuum:
Functional. Ideas typically start off as functional solutions to a problem—something useful.
Reliable. From there, things have to be reliable. This can be reliability of the service (five nines uptime?) as well as integrity of the data.
Usable and Convenient. It’s not enough to allow me to simply do something—it has to eventually be less awkward to use. This is where the next two levels, usable and convenient, come into play.
Pleasurable. Whereas convenience focuses on cognition, the next level—pleasurable—focuses on affect and emotions. How can we make something emotionally engaging (and memorable)?
The challenge of this model is this: if you want to truly create a revolutionary product, you have to shift your thinking from a bottom-up task focus (which will only get you so far) to a top-down focus that starts with the experience you want people to have.
Attention to detail implies quality:
Attention to design details implies that the same care and attention has been spent on the other (less visible) parts of the product, which implies that this is a trustworthy product.
Thinking and Feeling are intertwined:
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.
Take this example:
The sharp and explosive shape says, in a cognitive and affective way, “Watch out, this is a dangerous option!”
By understanding the associations suggested by different aesthetic cues, we can shape how people respond to our designs.
Whether you care about visual design or not, aesthetic judgments are a reality. – ‘We may know better, but we continue to judge a book by it’s cover.’
The three modes of beauty:
Designer Cennydd Bowles proposes on his blog that there are three modes of beauty: universal, sociocultural, and subjective.
1. Universal beauty is concerned with fundamental aesthetic principles of design, such as symmetry, harmony, the rule of thirds, and the golden ratio.
2. Sociocultural beauty is what we find attractive as a culture at a particular point in time.
3. Subjective beauty is what you personally find attractive. This is where your personal tastes and preferences enter the picture.
Visuals are better than text:
Important definition: Visual comprehension can be summarised as “what you see depends on what you look at and what you know.”
Look for opportunities to reinforce or replace text with visuals. I often evaluate designs by asking, “Could a five-year-old understand this?” Changing perspectives like this is a great way to evaluate a page with fresh eyes.
Changing the meaning of software:
Conversations about users tend to focus on task completion and efficiency. Instead of a “hang out with me and you’ll have a good time” message, we get something quite different.
You have to get interest first:
In dating terms, it’s easy to think, “People will like me for who I am.” The truth is people have to be interested just enough to get to know you (your app) in the first place.
Humour and design:
Humour is appropriate (or inappropriate) based on the situation, not the industry.
Perhaps a more honest reason for avoiding humour is this: The use of humorous elements forces you to know your audience—something that is extraordinarily difficult for most businesses, as businesses often try to appeal to as many people as possible.
Stephen often encounters people who say, “I work in [such and such an industry]. Do you think humour is appropriate?” My simple answer? If it’s appropriate in a real-world interaction, why not online as well? Are we suddenly transformed into emotionless automatons when we sit in front of a screen? No.
Delight:
Themes of anxiety and disappointment run through people’s stories of delightful experiences. The passenger ringing his airline to complain is anxious. He is delighted when the anxiety is unexpectedly removed.
The contrast makes the delight intense and memorable.
We delight in bringing order to chaos. In fact, our brains actually get a brief “high” from solving difficult problems.
Moments of delight lose their luster if they are imposed rather than discovered.
A word of caution: today’s gift may be tomorrow’s commodity. If other companies or similar services are giving away the same thing, it’s not a gift anymore—it’s an expectation.
Great question for producing more value:
How can you work with other services to provide a unique gift?
Fostering Curiosity:
Some tiny bit of information makes us aware of something that is unknown. Black plastic packaging hides a toy inside, or we are presented with a mysterious card.
Information can be presented in a manner that is straightforward or curious. If we opt for the latter, we are guaranteed not only attention, but probably higher engagement as well—curiosity demands that we know more!
Simply stated: I’m curious because there’s a gap between “what I know and what I want to know.”
The intensity of curiosity correlates to the likelihood of certain information to resolve the information gap.
Curiosity correlates with our own understanding of a particular domain. The more we know about some topic, the more likely we are to focus on our own information gaps.
If you want to make someone curious, make them aware of something they don’t know. Find information you can use to tease people.
Turn direct messages into a quest.
A few tips to grab attention:
Make your tease interesting, or at least proportionate in appeal to the cost.
Strive to make the information personally relevant to the user.
Use visuals to suggest or create the immediate perception of mystery.
Don’t try to lure users with something that is given away freely elsewhere.
Empowered Progress effect:
By framing the task as one that has already been undertaken, nearly twice as many people completed their cards. Nunes and Drèze described this as the empowered progress effect.
Non-routine tasks have lots of cognitive effort:
If these were routine, the process would probably make sense. For most of us though, the infrequency of these tasks makes every step seem extraordinarily complex.
Give people specific actions to take or outcomes:
Stephen Anderson ‘In most of my personal and professional interactions, I’ve stopped making big requests of people. My e-mails are direct and to the point, and I clearly state the next intended action.
Based on what I’ve learned about attention spans, interest, and motivation, if getting people to actually do something is the goal, you have to make the process as simple as possible!
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.’
Evolving UI concept:
Could complex systems like these benefit from shaping? Rather than immerse someone in your application, why not start with a small set of features and reveal more with use?
Behaviour Change:
“With the right baby steps you can get almost anybody to do anything.” —B. J. FOGG
We tend not to change an established behavior (unless the incentive to change is compelling).
Inaction is easier than action.
Judgement is fluid
Our internal frame of reference changes over time. We don’t make absolute judgments.
Mislabel people:
Please correct our assumption So, how might loss aversion or ownership bias apply to a Web context? One simple way is to place people in a position of ownership. Or have someone’s name (and identity) attached to such a statement is likely to encourage you to take some action to correct the situation.
Label someone as average to get them to show individuality
Brighter Planet preloads answers based on national averages: average square feet most people occupy, average number of kids and pets, and so on. Naturally, we feel the urge to replace those defaults with our own, real data.
As you “correct” the default information with your own, your also get to see how you compare to the national average.
When something is under threat it becomes important (loss aversion)
Example Mayorship also doesn’t mean much until it is threatened.
As with everything described in this section, you have to take a broader look at the relationship you’re building with a person, not just a single metric.
Systematic Behaviour Design:
Break down compound requests into simple next steps This is also known as sequencing. If there’s a situation where you’re asking multiple questions at once, can you ask them in sequence?
A brilliant question from Joshua Porter in his book Designing for the Social Web: What do people have to do in order for your business to be successful?
Knowing what behaviours 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 behaviour at this moment or on this page and does this design support that goal in some way?
The first thing we’d need to do is translate this business goal into a behavioural goal. “improve the quality of the video content uploaded to our site” is not a behaviour you can design for—it’s an outcome of some changes in behaviour. Something like “encourage people to be more selective about what they upload” is a good behavioural goal.
Next question: “How do we encourage this behaviour?” This is where the fun starts, by exploring what we know about human behaviour—how we make choices, what gets our attention, what we recall later.
Find the fun in what you have:
However, one of the first filters Stephen challenges people 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?
The third teaching attitude, which goes something like this: “This stuff is really quite interesting! I’m going to show you why this is important. But first, I’ve got a challenge for you.”
Game Design:
This thinking forms the basis for Stepehens’ “Elements of Game Design” model:
Play & Challenges.
Conflicts & Choices.
Feedback Loops.
Goals & Rewards.
Imaginary World
Human progress, curiosity and challenge:
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.
Alfie Kohn says, “Do rewards motivate people? Absolutely. They motivate people to get rewards.”
Key Concepts in Games:
Goals. “Site designers assume that the visitor already knows what to choose. That’s not true. People enter hoping to be led somewhere, hoping for a payoff.”
Feedback.“Most Web sites don’t very much care what you do. It would be much better if they said, ‘You’ve made some interesting choices.’”
Challenge. “A flow experience has got to be challenging. Anything that is not up to par is going to be irritating or ignored.” Progression. “You need clear goals that fit into a hierarchy, with little goals that build toward more meaningful, higher-level goals.”
Motivators:
I was playing a puzzle game where the primary motivator (for me) was status. I was competing against my own best average. E.g. Three fewer check-ins than last week is a subtle form of the “best streak.” You are being asked to compete against yourself.
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.
The reasons people comment, share, like, and do all manner of social actions has to do with status, identity, reputation, and a host of other naturally occurring, intrinsic motivators.
With set completion, you have to look at two things: who (or what) defines a set, and the urge to complete that set.
In fact, much of the tension in games comes from setting up opposition between your long-term and short-term goals.
What about earning privileges, such as new features or customisation opportunities that tap into our desire for self-expression.
Don’t just track, get people to guess then track (invested in progress)
Key Idea — Attaching a measure to anything turns it into a game.
The point? Anytime you attach a measure to something, you’ve laid the groundwork for people to create all kinds of games, good and bad.
Imagine a game that combines weekly (or daily) time estimation with time tracking. We all know the value of planning our days. Time tracking is the other half, a way to reflect on our planning.
Time tracking becomes analogous to checking your answers on a test—you naturally want to find out how you did.
You need an idea based on the person using the application; you need to find that thing that people naturally want to get better at. It’s not about adding a fun layer but about finding the core challenge and presenting it in a fun way.
What about what other people will guess you do?
Feedback Loops:
What we’re really talking about is setting up systems whereby individuals can see in a tangible way, reflect on, and learn from their past behaviors.
From report cards to Pac-Man, we’re talking about the same thing: feedback loops that affect future performance
The biggest challenge you’ll find is with tracking qualitative behaviors. For example, if I wanted to know how clearly I’m communicating in my e-mails, that is much more difficult to measure compared to simply tracking if or when I responded to a message.
Dopplr chose to represent each user’s personal velocity (distance traveled in a year) not as a number, but as an animal that moves at approximately the same speed.
In business contexts I’ve found the analogy of a “credit score” to be more often the case; that is, you want to maintain the highest level possible, which you may or may not have been at when the “game” began.
Restrict features and add more as you progress:
Debow adds, “When you encourage and design for brevity, you also encourage people to focus their feedback.”
Most sites prostitute themselves before us: “Please use our features.” However, by holding back, desire and participation only increase more.
The ultimate effect of all these constraints is that people are forced to make choices: Do I do this now, or later? How should I go about doing this task? Who should I involve? What should I focus on first?
Use Exciters:
Kano Model: This model provides a structured way to discuss and evaluate three categories of customer needs common to product and service design:
• Basic needs
• Performance needs
• Exciters or delighters (attraction)