Persuasive Design is Hot

Persuasive design is hot. Especially on the web as designers found out that the internet perfectly lends itself for persuasion. The combination of both interpersonal and mass communication as well as its interactivity creates a perfect environment to apply persuasive techniques like the ones described by Maurits Kaptijn in his article on Persuasion Profiling. These kind of persuasive techniques can be traced back to psychological principles that rely on symbolic strategies to trigger emotions or emotional aspects in order to motivate people towards a preferred behavior. Almost all of these techniques work on the level where users interact with the website. A good example of such a persuasive technique on that interaction level can be found on LinkedIn. Users are persuaded (or motivated) to complete their profile through the completeness bar that is placed next to their LinkedIn profile. The psychological principle that is at work here is the fact that people crave for completion, which is why it works so well.

The completeness bar of LinkedIn.

Interaction, communication, and appearance

But there are more levels at which we can influence users in their behavior on websites other than through interaction. Birkigt and Stadler (1986) describe three levels in their model on brand communication. Besides the interaction level there are the communication level and the appearance level. In more concrete terms these come down to copy and visual design. Many designers and copywriters have found out how to make copy persuasive by focusing on things like motivation and activation. But how about the visual design level? Is it possible to persuade users towards certain behavior visually, besides making things just beautiful?

Not visual but perceptual

BJ Fogg from Stanford University has made a model in which he describes how to influence human behavior through boosting motivation, ability, or both. The main focus of persuasion on both the interaction and communication level is on the motivation part. Purely motivating people visually is hard, but we can boost ability by making certain things easier to achieve on that visual level. By making certain elements attract more attention for instance or desired actions easier to perceive. These kinds of principles are largely constrained by low-level visual properties rather than determined by higher cognitive processes. That is why I like to call these kinds of low-level visual properties to influence users; perceptual persuasion instead of visual persuasion. So what perceptual persuasion basically comes down to is making elements on a website, that are important for conversion, be seen, stand out, or easier to perceive.

“So what perceptual persuasion basically comes down to is making elements on a website, that are important for conversion, be seen, stand out, or easier to perceive.”

This is nothing new, right?

You must think; “We already do make important elements stand out visually”. You are probably right, but what I saw during my research is that most web designers apply these kinds of techniques unconsciously and based on their intuition. Most of the time they stick to something like a contrasting color for their buy button. I think that there are three reasons for that. First, most designers are not very aware of the concept of perceptual persuasion. Second, little is known about its possibilities and effects. And last, there is little guidance available for designers to apply perceptual persuasion. I figured that by making the concept of perceptual persuasion better known and accessible, designers would be able to apply it more deliberately and systematically, resulting in better and more persuasive design.

A fundamental basis

I started gathering and investigating perceptual persuasion mechanisms for which I consulted three resources. The first resource was an extensive literature study. Second were multiple workshops, focused on retrieving the latent and tacit knowledge of the participating designers regarding perceptual persuasion. The last resource was the web itself with all its best practices.

Now lets become a little more concrete. During my investigation I found five main fundamentals that form a conceptual basis of perceptual persuasion. Lets take a look at these first. They are:

• Contrast
• Guiding
• Fluency
• Magnetism
• Proximity

First is Contrast which helps to show the difference between elements on websites or emphasize the importance of a single element. It is one of the easiest and most commonly used fundamentals to create perceptual persuasion.
Guiding helps directing the eyes – and attention accordingly – towards important elements by suggesting a certain visual path or flow.
Fluency has to do with the ease with which a visual web element can be perceived. It refers to the mental effort it takes to process visual elements. Elements that allow fluent perception are easier to pay attention to and therefore more persuasive.
The Magnetism fundamental covers mechanisms that can be traced back to evolutionary or cultural learnings regarding things that (should) grab attention.
Last is Proximity, which makes elements appear closer than others and thereby making such an element increase in importance and become more persuasive.

The inSights design tool

Getting more concrete

These fundamentals do give a good overview of the conceptual basis of perceptual persuasion, but are still very abstract. I found that they are too abstract for designers to work with. If I wanted to make perceptual persuasion better known, accessible, and especially applicable, I needed to make it more concrete. Therefore I concretized the fundamentals with more hands-on principles. Through my investigation I came to a total of 60 principles to design perceptual persuasion. For each principle I tried to find a concrete example on the web. These principles and their examples were the basis of a design tool I created called inSights. Let me highlight 5 principles and their examples, one for each fundamental.

Principle 09 from inSights: Rotation Difference

The human eye is very good in seeing difference between an element that is slightly rotated compared to its neighboring elements. If the rotation is big enough (so it has enough contrast) it will grab attention and stand out. The principle Rotation Difference, based on the Contrast fundamental, describes how you could use this effect near a call-to-action. In the example above the skewed street stands out and draws attention towards the green button.

Principle 23 from inSights: Human Gaze

People tend to look in the same direction as others are doing. The Human Gaze principle explains how you could use this effect on websites by placing important elements in the line of sight of a pictured person. This principle is based on the Guiding fundamental and shows how attention is automatically guided towards the call-to-action, like in the example above.

Principle 20 from inSights: Visual Sequence

The Visual Sequence principle, which is based on Fluency, is about making elements look like a sequence to follow (if relevant of course). It allows people to perceive and understand the necessary steps to take fluently and therefore much easier. Attention is focused along the sequence towards the end. At the end of the sequence there can be a something like a call-to-action, similar to the example above. The other way around, you could also disrupt a visual sequence to turn attention towards the interrupting element.

Principle 34 from inSights: Quotation Marks

People are more likely to read text that is placed in-between quotation marks, as they have learned that quoted text is often regarded as important. The principle Quotation Marks therefore describes how you can use quotation marks to persuade people to read certain text. This principle is based on the Magnetism fundamental as it concerns a cultural learning.

Principle 22 from inSights: Overlap

Elements that are perceived to be closer attract more attention. So through clearly overlapping visual elements it is possible to let certain elements attract more attention. This is described in the principle Overlap based on the Proximity fundamental. In the example above the blue call-to-action is clearly overlapping the red bar and as result more visually persuasive.

Does it actually work?

Now the million-dollar question: does deliberately applying perceptual persuasion make web designs better converting. Through collaboration with the Delft University of Technology and the Middle East Technical University, we were able to empirically test the outcome of using inSights during design projects. These studies showed that web designers not only got a better understanding of perceptual persuasion, they also applied these principles more deliberate and thoroughly. It helped them keeping the project focused on conversion.

In two separate experiments we asked web designers to redesign websites focusing on perceptual persuasion. As none of the website owners liked to participate in an online experiment, we tested the original and redesigned websites in a lab environment. 30 participants were interviewed regarding the persuasiveness of the websites through a questionnaire and a click study. The outcome of these experiments showed a significant increase in persuasiveness of the redesigned websites. Participants especially indicated the redesigns to be more eye-catching.

To conclude

So through perceptual persuasion we can influence users’ unconscious decisions by playing with low-level visual properties on websites. I think that perceptual persuasion has great possibilities and when given the proper attention results in better and more persuasive web design. Therefore I hope that I convinced you of the concept of perceptual persuasion and made you interested in this kind of persuasive web design.

If you want more inSights you should check fabrique.nl/insights.

Peter Morville and Jeffery Callender recently released their brand new book “Search Patterns: Design for Discovery“.  I had the honor to chat with Peter about what drove him to write his new book, why he thinks search is such a challenge still,  and his thoughts on where the future of search lies.

JH: Why did you decide to focus on search for your new book?

Peter Morville

PM: In my consulting projects, search kept surfacing as the single biggest opportunity to improve the user experience, and I felt unequal to the task. So, I decided to invest in my own edification by writing a book. Plus, I wanted to inspire others to make search better. After all, search is among the most disruptive innovations of our time. It influences what we buy and where we go. It shapes how we learn and what we know. Designing for search and discovery isn’t just interesting. It’s important. We have a responsibility to get it right.

How is designing for search different from traditional browsing and navigation?

I design for multiple (complementary) modes of seeking, so that users can browse and search their way to success. Explicit navigation serves as a map for wayfinding and understanding, while the search box offers a shortcut that employs semantics to bypass structure. Often, these modes need be distinct only in the opening. In search, users make the first move by typing words to declare intent. But, the SERP (search engine results page) is a browsable interface with visible context. Alternatively, you may begin with browse, but then query the category that you’re inside using scoped search. A well designed system lets people flow between modes and offers immediate feedback, because in the endgame, it’s all about interaction.

What makes search such a challenge, especially given all the advancements in technology over the years?

Search is a wicked problem for two reasons. First, it’s radically multidisciplinary, requiring real collaboration between design, engineering, and marketing. For most organizations, right there, it’s already game over. They simply can’t get these folks to work together. Second it’s a project and a process, requiring a major initial investment and the commitment to continuous improvement. Few organizations are good at both.

How do you see the findability of large scale gestural interfaces (i.e. The ‘Minority Report’ Interface) working in the future?

I’m very interested in gestural interaction, and we include examples in the book from the activation of Google Voice Search (raise your iPhone to your ear) to the augmented reality of Yelp Monocle (query the world by wandering). Undoubtedly, large scale gestural interfaces will offer us surprising new ways to interact with digital and physical objects such as images, video cameras, and UAVs (unmanned aerial vehicles). That said, absent a great leap forward in the technology of the human brain, it will remain as important as ever to make key features easy to use and discover. In fact, I predict that the large scale gestural interfaces of the future will sport a search box as a starting point, even in 2054.

I predict that the large scale gestural interfaces of the future will sport a search box as a starting point, even in 2054.

Why do you think that search has become such a natural behavior for people?

Search is more natural than language. That’s why “natural language search” won’t work. It’s inefficient and artificial. Why string together complete sentences? We’d rather grunt and point or enter a few keywords and go. It’s a great way to start that admits the “paradox of the active user.” We routinely prefer the illusion of speed and simplicity instead of taking time to understand the territory and chart an optimal course. But, the first result set can be a terrible place to end. That’s why the SERP is such an important map. When we find we haven’t found what we need or expect, we’re surprised and ready to learn. In this way, search results create a “teachable moment.” And this evolution from “act” to “learn” is also natural. It’s only when we get lost and know we need help that we stop and ask for directions.

What was the inspiration behind taking a visual approach to writing about Search Patterns?

Search Patterns

Two major sources of inspiration were Dan Roam’s The Back of the Napkin and Dave Gray’s work on visual thinking. Collaborating with graphic designer Jeffery Callender (my co-author) to bring search and discovery to life with sketches, diagrams, and cartoons was seriously fun. And, I think the book is better (and different) as a result.

Of the patterns you identify in the book, which ones are misused the most? And why?

Advanced search is the pattern we love to hate. Here’s a brief excerpt:

“Often, advanced search is a clumsy add-on that’s rarely used, and it lets engineers and designers take the easy way out. Valuable features that are difficult to integrate into the main interface can be relocated to the ghetto and forgotten. Plus, there’s confusion about its purpose. Is it a user-friendly query builder for novices or a power tool for experts? Many interfaces try (and fail) to be both. For instance, isn’t it fair to assume that users who understand what “exact phrase” means also know to use quotation marks to specify such a search? The main problem with Boolean isn’t the syntax, it’s the logic. Even the plain language is unlikely to help the few novices who brave the intimidating realm of advanced search, as shown below:

Advanced search at Genentech: Plain text doesn't make it less intimidating

“This pattern also suffers from an ignorance of context. Searches are situated. They take place in a space. Having navigated through music to the folk genre, users may want to search without leaving. Scoped search is a pattern that meets this need. There’s a risk that users won’t see the scope, but overrides in the case of few or no results can help. In most cases, users benefit, because scoped search caters to context. In contrast, advanced search often teleports us to a distant, unfamiliar locale. It’s disruptive to flow.”

But, advanced search isn’t always an anti-pattern. Sometimes, it’s really useful. When? For that, you’ll have to read the book.

What are your goals with the new search pattern library that complements your book?

Our goals for the book and the library are one and the same. We want to make search better. Or, to be more precise, we want to inspire you to make search better. The book is a linear narrative. It’s best read front to back. The library offers random access to patterns of behavior and design. It’s a maze for getting lost and a labyrinth for self-discovery. And, as with any living library or garden, it’s eternally incomplete. We hope you’ll join us by adding novel patterns and forking paths.

So what’s up with the butterfly?

O’Reilly authors don’t choose the animals, but we do have veto power. To get the lemur, I rejected a golden retriever. To get the butterfly, we refused a kestrel. And, to get the polar bear, we just got lucky.

How do you see search changing as the world becomes more mobile? Will we soon ‘Google our shoes’, as Bruce Sterling suggests?

PM: In search, the potential exists for a multitude of diverse futures, many of which will occur. And, it’s a good bet that these possible futures will co-evolve in a loosely joined sorta way. For instance, I still do most serious searching at my desk, even though today’s mobile devices support traditional web search (via a browser) while also reframing search and discovery through the lens of the specialized app. With my iPhone, I can query barcodes with RedLaser, search for bathrooms with SitOrSquat, and find friends with Foursquare. These are all fairly discrete activities, but for personalization, there’s value in aggregating all of my behavior across applications and platforms.

When we use the term “mobile search” we should unbind the concepts of “searching while mobile” and “searching on a phone” because our devices and the ways we interact with information are likely to undergo radical change. I don’t expect, when I’m 64, that “mobile search” will involve small screens. Instead, we’ll augment reality via iGlasses and display data directly on skin, clothing, sidewalks, and buildings. But, I absolutely do expect to Google my shoes, to learn about their construction, history, and proper disposal; and to find out where I left them.

Recently you launched a contest where people had to try and explain IA as best as they could. Why? What’s the biggest takeaway from this challenge?

Last year, as preparation for his information architecture class, Dan Klyn asked Twitter #whatswrongwithia. My response kicked off a discussion with Andrew Hinton that led to Explain IA. Our goals were to engage the IA community (by fostering creativity and discussion) and advance the field (by evolving our definitions and sharing our stories). It was a huge success and a lot of fun. My takeaway was that although the IA community is quieter than it was ten years ago, there’s still tremendous energy and passion beneath the surface.

How have you found yourself thinking differently about the way people search after putting these patterns together?

PM: Search isn’t just about findability. It’s also about learning, understanding, sharing, and acting. In mobile, for instance, we can enable people to buy products, share songs, play movies, and make calls directly from the results interface. Or, in research, we can offer ways to compare and contrast results with rich visualizations and overlays of time and place. Having worked through the more basic patterns, I’m now enjoying the challenge of designing search and discovery applications that embrace the full spectrum of user goals.

What would you say is the most important concept regarding search?

PM: C. S. Lewis once noted “Aim at heaven and you will get earth thrown in. Aim at earth and you get neither.” That’s why I see every search application as having the potential to become a complex adaptive system that exhibits macroscopic properties of self-organization and emergence. And, that’s why I include creators as part of the anatomy of search. On every project, I try to design for interaction and feedback, and to connect (and intertwingle) users and creators, so that the whole is greater (and different) than the sum of its parts.

The Anatomy of Search

You’re going to be talking about Search Patterns at the IA Summit. What else are you looking forward to?

PM: I’m genuinely excited about this year’s IA Summit, but not because of my own session. What I’m looking forward to in Phoenix is Seeing the Summit through the eyes of Dan Roam, Dave Gray, Dan Willis, Richard Saul Wurman, and Kevin Cheng. And, I’m hoping to build on their ideas in my upcoming workshop, Information Architecture with Maps, which is really just another lens for examining search and discovery.