Designing Perceptual Persuasion

All web designers use perceptual persuasion in their designs, but without knowing they do. Let’s help them find out and become better designers.

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.

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

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

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

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

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

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

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

Wouter Middendorf

Wouter graduated at both the Middle East Technical University and the Delft University of Technology. He likes to call himself a creative engineer but his business card says he's an interaction designer at Fabrique [brands, design & interaction], a multidisciplinary design agency in The Netherlands. You can follow him on twitter: @wmiddendorf.

7 comments on this article

  1. Camiel Bos on

    Leuk wouter! Jij gaat het nog eens maken!


  2. Pingback: Putting people first » Designing perceptual persuasion

  3. Pingback: Friday Link Round-Up |

  4. Pingback: Recommended Links of the Week | Alex Gamela - Digital Media & Journalism

  5. Pingback: What I've been reading lately (week 8-10), by Samuel Ericson

  6. Pingback: Persuasion Picks #2 | PersuasionAPI

  7. Marty Diamond on

    We’ve done A/B testing of the human gaze principle on several websites and in every case getting the gaze of the image correctly placed so that it was “looking at” what you wanted the visitor to focus on improved the conversion rate. Thanks for a great article