Friction is every webmaster’s worst enemy – and yet, too few of us take the time to understand friction and root out the elements on our sites that lead to this negative state of mind.
Essentially, friction occurs when specific website elements interrupt its natural flow and interfere with its ability to drive readers towards a desired outcome. It’s also important to note that, although it is specific elements on your website that trigger confusion for your readers, friction is a mental process. In order to relieve perceived friction, we must take the steps necessary to identify problematic elements and resolve them, using techniques that draw on human psychology.
To better understand the types of friction that can stop buyers in their tracks, take a look at the following friction points:
1 – Bad Eye Paths
The layout and organization of a single web page can have a tremendous impact on whether users are guided naturally to the owner’s desired outcome or whether friction interferes with their ability to follow a website’s purpose and complete a specified action.
To see an example of bad eye path friction in practice, take a look at the following example, provided by Marketing Experiments:
In the first site design, the way information is structured requires readers to scan up and down through multiple columns. Because the extra effort involved in navigating this site design leads to friction within the minds of its readers, it’s not surprising that a more streamlined design – which creates a less-effort-required eye path – results in substantially higher conversions.
2 – Divergent Objectives
Every web page should have a single, over-arching objective. Whether you’re trying to persuade your reader to purchase a product, opt-in to an email newsletter or take some other action, encouraging multiple actions can be confusing to readers, leading to mental friction.
To see this principle in action, take a look at the following example:
In the first image, text positioned over two separate graphic elements and an assortment of action buttons splits the reader’s focus, leading to mental friction caused by indecision over which specific action to take. To eliminate this type of friction, minimize the number of calls to action or action elements on each page to drive reader attention towards a single desired outcome (as in the second image shown above).
3 – Dissonant Tone
In addition to ensuring that the text used on your website drives visitors towards a single outcome, it’s also important that the tone you use when communicating the benefits of your desired action be consistent with the rest of your web content.
As an example, suppose you’ve decided to sell an ebook on your scientific development firm’s website. If you’ve used a dry, technical tone for the bulk of your web content, be aware that advertising your ebook using a “salesy,” informal tone in your promotional messages could influence the number of visitors who go on to purchase your item, as a result of excessive mental friction.
4 – Distracting Multimedia
While there’s no arguing that multimedia elements – including digital slideshows, Flash videos and other animations – can make your site look pretty, these features could be subtly sabotaging your site’s effectiveness if they overpower your message.
Marketing Experiments offers another handy example of this type of friction at work:
In the first graphic, the use of too many images and video files creates friction by distracting user attention from the sales process. In the second example, these out-of-control images have been harnessed more appropriately, eliminating mental friction by effectively complimenting the sales process.
5 – Discordant Colors
The impact of colors on website effectiveness is widely acknowledged, but although professional website designers are well-versed in the importance of utilizing proper color theory, not all “do it yourself” webmasters seem to have received the memo!
But even if you’ve never studied up on the emotional impact certain colors can achieve, there’s one rule of thumb that should always be respected – accent colors are only accent colors when used in moderation!
Unfortunately, the overuse of bright colors or the positioning of accent colors against closely competing hues can lead to mental friction. Our eyes naturally want to be drawn to focus elements, so when they struggle to determine which element to focus on, friction occurs and disrupts the sales process.
To see this mistake in action, take a look at the following example:
In the first image, the orange opt-in box competes too closely with the bright blue of the page background. Even though these two colors are considered to be “complimentary,” their relative saturation levels are too closely matched for the orange to stand out as an accent color. This effect has been minimized in the second image, which achieved 20% higher conversions over the first example as a result of its better use of accent colors.
6 – Disorganized Content
Let’s face it – website visitors aren’t always the sharpest crayons in the box! And although we might like to think that our stellar content or explicit details will help to overcome these weaknesses, the reality is that most website visitors are easily distracted. To take control and eliminate friction, it’s important that our content be organized as effectively as possible.
For example, check out the following comparison:
In the first instance, website visitors must read through several blocks of test in order to understand and evaluate several different membership types – not gonna happen!
The second image represents a much better way to organize this type of information. Instead of being described through several intimidating-looking chunks of text, the relative merits of each membership level are clearly defined in an easy-to-read, easy-to-understand chart, naturally leading to lower friction levels and higher visitor conversion rates.
7 – Form Length
Finally, be aware that form length represents a significant friction factor for many website visitors.
Although internet consumers are becoming less and less anxious about the prospect of sharing personal information online, the reality of identity theft and excess spam still exists. For this reason, every extra field you add to your web forms increases the level of friction readers experience when deciding whether or not to opt-in.
To prevent this type of friction from occurring, think carefully about the pieces of information you require on your web forms, as every extra field you add increases friction and reduces opt-ins. If you can get away with requiring only an email address, do it. If not, uncover the “bare bones” amount of information needed in order to diminish perceived friction and improve the overall effectiveness of your website.
In general, the best way to determine conclusively if any of the above friction points are occurring on your website is to split test different web page variations. Take a few minutes to go through your website in order to identify any of the specific friction factors described above and then build split tests that are designed to eliminate mental friction and allow your website to be as effective as possible.
Image: Thomas Hawk