A List Apart

Menu

Flywheels, Kinetic Energy, and Friction

by Published in Interaction Design, Usability · 32 Comments

Whatever the purpose of the sites you work on, their success depends on visitors doing something. We want our visitors to sign up, or buy, or donate, or download, or apply, or post opinions, or pick up the phone and call us. One way or another if we are to judge our sites as being successful, they have to result in some kind of action on the reader’s part.

At this point we can break the experience down into two phases

Phase one is the period of time during which someone reads about what we are offering them. Phase two is the period during which the reader does something—applying, registering, buying, etc.

As an example, phase one might span the time a reader takes to read two pages about a grant application. Phase two would span the time during which the reader is completing and submitting the application form itself.

Or perhaps someone wants to buy some software. Phase one covers the period while the visitor is reading about all the features and strengths of the software application. Phase two is when he or she clicks the “buy” button and goes through the entire shopping cart until the purchase is confirmed.

This is where the flywheel comes in

You know those kids’ toys where you push the car repeatedly forward a few times, keeping hold of it? The energy from your arm is transferred to a small flywheel in the car. So when you finally let go, the car speeds across the floor… powered by the kinetic energy from the flywheel.

So long as it doesn’t bump into anything, the car keeps going until all that kinetic energy is expended. Why doesn’t it keep going for ever? Because of friction.

Applying this analogy to the web

Put simply, when you write about the reasons why a reader should fill out that application for a grant, you are transferring kinetic energy. So long as what you offer is what they really want, you need to clearly and simply build up their enthusiasm and excitement.

Why? Because if they decide to start to proceed with the application, they are going to encounter friction. You have experienced it yourself…that feeling of diminishing commitment as you start wading through multi-page application or shopping cart pages.

If you want someone to complete a process, you first have to provide them with enough energy to overcome the inherent friction of the process itself.

It’s as simple as that.

Abandoned shopping carts

A great deal of research has been done on shopping cart abandonment. Typically, when a hundred people start buying something online, of those who do not complete the purchase, seventy gave up somewhere while on the shopping cart pages.

Why? Too little energy. Too much friction.

As a formula, it is easy to visualize. In order to maximize the success of your site you need to increase the energy you transfer to your readers, and reduce the friction within the page or pages on which the reader has to do something.

In particular, this means that if the application or purchase process is lengthy, you had better be sure that you have transferred a great deal of energy to the reader before they begin.

Maximize the transfer of energy with words and design

Too often the energy from a home page or second level page is spread too thinly across too many topics.

If you want someone to do something, you need to build what amounts to a funnel, or pathway. Help the reader identify the one thing they want, and then simplify and “narrow” the design and the text in order to focus on that one thing, and build energy and enthusiasm within the reader. Take away any distractions, visually or with words. Focus on the one thing.

And when you come to designing and writing the form or shopping cart, reduce the amount of friction by as much as you can. In other words, ask for as little information as you can, and reduce the number of pages to a minimum.

You need your reader to have completed the process before that kinetic energy has dissipated.

How this works in practice

We tried the energy/friction route with one of our research partners, SmartBrief.com.

We tested a subscription route that did a better job of selling—transferring energy to the reader—and asked for a lot less information on the subscription page.

The outcome? An increase in conversion rates of over 500%. That is to say, of the people who arrived at the subscription offer page, we increased the number who actually signed up by over 500%.

And while we sold a little harder—and offered an incentive at the back end—the primary cause of the increase was almost certainly that we reduced the friction during the sign-up process. We offered more and asked for less.

With another partner we cut back on the number of pages involved in signing up for a paid subscription service from nine to three. (Yes, a nine-page process was more than excessive.)  The result? An increase in sign-ups of 293%.

This simple principle applies across all websites

More energy. Less friction.

It’s an obvious analogy, and a simple one.

But if you apply this thinking throughout your site you will like find places where you can increase the transfer of energy to your readers on the sales or information pages, and reduce the friction on the sign-up, application, or shopping cart pages.

32 Reader Comments

Load Comments