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#section2
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#section3
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#section4
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#section5
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#section6
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#section7
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#section8
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.
What many articles on the subject of shopping cart abandonment seem to ignore is that people may start the checkout process without any intention to complete it. Why? Because often it’s the easiest way of discovering information such as shipping rates, shipping destinations, payment methods etc. Of course that’s an indication of bad design too but I think it’s an important distinction to make.
How do you build up more energy? How do you reduce friction?
This isn’t an article, this is an advertorial — one of the worst pieces on ALA ever.
Good article!
Martijn; It looks a bit abstract but when you think wisely the author explains it good and gives lots of tips.
what if you made a web site (that was successful) for informational purposses only. no membership/login, no popups, no advertisments! a place where people could go to get information on. now I think maybe your point was focus on delerving that info smoothly and it will be succussful, ok but don’t forget the ‘free info’ sites. thanks
ps this is not something along a blog either.
bq. 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%.
bq. 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.
So basically what you’re saying is “we changed half-a-dozen things and improved conversion, but for the sake of convenience we’re going to claim it’s all due to one thing”? You can’t draw conclusions like that without clear A-B comparison exercises; adding customer incentives is the quickest way to render your results worthless. How many of us have signed up for Microsoft’s free USB key this past week with no intention of paying any attention to whatever else they might want to tell or sell us?
This article would have been better as an example of why giving away free stuff increases conversion rates by 500%…
“How do you build up more energy?”
Energy = appeal of your offer.
Offer me free bottle of “StormHoek”:http://www.gapingvoid.com/Moveable_Type/archives/001646.html, and I might be willing to answer a lengthy survey. Offer me a white paper, and I’m outa here after couple of questions.
I agree that the article is a tad abstract, but Nick stresses an important point nonetheless. If I had a dime for every site that overestimates my interest & patience…
For whatever it’s worth, a couple of weeks ago I gave a presentation (partly) about appeal vs friction of _products_. I posted the slides “here”:http://www.sparkthis.com/2006/02/slides_the_hack.html
I have to agree with Martijn – this is a great, if somewhat overlong – introduction, but Nick seems to have got so carried away explaining his somewhat random analogies that he has forgotten to write the article itself.
Other ALA articles – good ones – tell us how to achieve our aims. All this one does is tell us what we already knew, but mashed through with a load of new buzzwords.
@”Tamlyn Rhodes”:http://www.alistapart.com/comments/flywheelsandfriction?page=#1 : I agree completely. As a Canadian-dweller, I actually have a greasemonkey script that adds every item in my Amazon.com cart to my Amazon.ca cart. With the dollar the way it is right now, it’s almost certainly cheaper to buy from the U.S. store, but it used to be a much closer competition.
I agree with Nick’s statement that building up kinetic energy and decreasing friction is a good thing. But I expect more analysis and more serious work from the author than just statement of obvious. Very good article for general public and people interested in this field but a little bit weak for professionals.
By now I think people already realize that there are bad things to do and good things on websites. But it is not all that simple. It’s not just “make sites easy to navigate”? it’s “how?”? that’s what we discuss here.
Let’s look at the process of conversion described by Nick.
A visitor gets excited about an offer and discovers more and more information that makes the offer more appealing. At some point he makes his mind and converts in his head. Customer converts not when he clicks “place an order”? or submit button. He converts before that, and after he made his mind he would stick to it, unless he meets significant amount of friction to formally finish conversion.
And when he converts in his mind he knows that he will be required to go through several steps of “work”? to get the offer. So when he makes decision either to take or pass, he in his mind weights advantages of the offer against the expected by him labor to get it. And ones he made the decision he will go through even more labor than he expected since people are not easy to give up on what they set their minds on. And how far he or she can go beyond expected friction depends on each visitor’s psychological profile.
So if we look at the process closer we don’t’ have to make process just easy. We should make it not harder than expected by visitors to get conversions. In real life things are more complicated than just easy and hard. How easy is the real question because there are also other goals and limitations that retailers and businesses need to meet.
I know that it’s hard to evaluate the expected friction but it is usually expected on experience basis. If it was easier last time the visitor got similar offer he would be somewhat disappointed. So here is the name of the game — stay ahead of not behind the competition. But there are cases when from business perspective it is not necessary to spend huge budgets to simplify process to save 1/60th of a second.
It is a good opportunity do some thinking about the real points which a good website must take into the design consideration.
Mine are:
1) Play the customer and see if you are satisified
2) Never stop improving
3) Balance depth (clicks) vs information density
4) Focus on your best products, help the user find them
5) See what your competitors are doing and improve it
6) Experiment
7) Show a single short message that summarizes the main action you want the customer to do and why.
After designing with the considerations above I would do an improvement phase using the paradigms from the article and see if the site is focusing the customer efforts and creating enough energy to complete the action. If not, items 3,4 and 7 should be repeated.
Would be interesting to form a list of the most important aspects of perfecting website usablity and rank them for importance.
I’m forever abandoning shopping carts, and often it has nothing to do with friction, but more to do with features and information.
Firstly I need information: The first poster, above, mentions shipping charges. Being in Australia, many times shipping charges are prohibitive but the only way I can view these charges is by starting the checkout process. My online supermarket leaves a ‘shopping cart’ down the right hand side of my screen which shows the contents and current delivery charge if I went to the checkout right now. As I add more items the delivery charge can change.
Secondly, I need features. There are many times I prefer not to shop online (I like talking to people, touching the product etc). Often I will use an online store to create a shopping list that I can then print and take to the store with me. To create this ‘feature’, all that’s needed is the ‘permission’ from the site owner by means of a ‘print’ view of my shopping cart. The problem here is that I’m considered to be an abandonment if I stop at this point. By adding a ‘print’ button to the checkout, I can be counted in some other statistic.
Not every visitor who stops before handing over credit card information is an abandonment. They may have just needed better information earlier, or might be using your site for other purposes.
Cheers!
Rick Measham
I think some of you may be missing the point of this article a bit. I have been working with Nick and the rest of the team at MarketingExperiments for some time on this concept and what he is describing actually can (and is) being modeled mathmatically as we speak. The fact is that users on the web behave certain ways and patterns always emerge in large data samples…we can model user behavior the same way we model anything else in engineering. We can view our subscription funnel the same way we view the flow of water through a canal…or the way a model car speeds across the floor after winding it up.
Here’s the thing. I know what you’re saying about how user trends can be modelled, and I agree that there are elements that can be predicted. It’s accepted that “fewer form pages = better conversion”, and there is a good logical explanation for that.
But it is not the same as modelling flow or friction, where all the elements are known quantities (e.g. canal width and shape, volume and velocity of water etc). Users are unpredictable humans. There’s no formula that can tell you whether your users will respond better to a blue button that says “Continue” or an orange button that says “Next page” (which would be a poor A/B test but then I think we covered that in a previous issue).
That kind of thing can only be determined by testing, and the results are only valid for your users on your site at that time, unless you test the same thing (and get the same results) across a very wide variety of sites and over a long period of time, in which case it’s still only a well-researched observation, not a provable scientific formula.
The canal doesn’t care what time it is. The canal doesn’t get sad or angry or happy. You can’t influence the canal. It’s not the same thing.
bq. 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.
*like* should be *likely*, I believe. Good article overall, if a bit abstract.
It seems pathetic to me that ALA readers need an article to spell out EXACTLY how to accomplish something. This article did a great job of facilitating ones own creative ideas, not giving you the “source code” of great ideas.
The best shopping cart experience I had was over at Atomic Park where you can either sign in, sign up, or check out without signing up. Perfect for me, because I did not want to go through the rigorous sign up process I often see on other sites. After my purchase was complete, the site asked if I then wanted to use my billing info to set up an account…perfect. If I really want an account, I can first ensure my purchase is on its way, then sign up.
I guess I’m just not used to that at ALA.
When someone, for example, says he can make onion skin boxes with CSS, we don’t just take his word for it. He includes his code, we look at it, and then we have something to talk about.
This comments area only has two types of comments: ‘Show your work’, and ‘Yay, Nick’; hardly a starting point for beneficial exchange of ideas.
Really, though, would it have been so hard to include a couple of screenshots (one before, one after) to demonstrate just *once* that the author did any work? There’s the link, but if I’ve never been there before, can I really see what he did?
I have to agree that this article could have used some more meat. I’m not asking for a complete tutorial on the topic or a step-by-step walkthrough. However, the article read to me like the following:
1. Capture the attention – check!
2. Make a snappy marketing analogy – check!
3. Explain what you mean by the analogy – check!
4. Describe how it works – umm…anyone?
Overall, a good introduction to the topic and I think the analogy he’s making really does make sense. And, if you take it a few steps further and start thinking about it, you can start to form some ideas. I guess the article just left me wanting more.
Now, there is a new happening that is left out, after people sign up/subscribe and use the service, they are blogging. It is often those blogs that drive additional traffic to online web logs.
I write about this in my post The power of a newbie. I believe that when people sign up for a service and begin using it that they provide valuable (and free) feedback on the user interface and service if developers would pay attention.
This is an excellent blog for programmers and webmasters. It is very helpful to me as I work with about 30 websites as well as my “day job” teaching high school computer science.
I found this a very interesting article, and a useful way of thinking about the design of processes.
However I would echo an earlier commenter, who said that by mixing up the results of design with incentives, you’re not making it clear how much of the improvement was down to design. I would have liked to see some more objective testing – direct comparison with no other factors.
This article seems to have got me thinking. It has brought forth a sleeping thought and although it isn’t too comprehensive … it gives a fair idea about what lines to think along …
For me, personally, the last thing I want from a site is a bunch of marketing fluff about how great their service or product is, especially if it stands between me and the action I’m trying to make. If I’m on the fence, then fine, give me your whole spiel. But if I show up credit card in hand, ready to purchase, just get the hell out of my way.
Back end incentives can also do this. I don’t want up selling, I don’t want special offers from your strategic business partners, I don’t want to hear about your customer loyalty program, I just want my order confirmation number and a tracking number.
It boils down to using smart design to assist the user as unobtrusively as possible. I think at the heart that’s what this article is suggesting.
However, if some of the marketing types I’ve dealt with in the past caught me reading this, they’d latch on to some of the language as an excuse to mislead and manipulate site visitors into clicking that buy button rather than assisting them in making an informed decision to do so. In that situation, the percentage of visitors who begin the check out process would likely go up. However, the percentage of abandoned shopping carts would likely to up as well, removing all possible gains. And since it’s a problem on the web site, who gets the blame, the marketing team or the web team?
As well as watching friction, it also helps to keep an eye on the amount of commitment required from the user; would you talk about marriage on a first date? Half far are you expected to go? Although every site is different a useful template to keep to the rule of physiological thirds.
Your output:
Graphic
A couple of brief statements
Details (if you looking for input try to incorporate this into you first input page).
Your input:
Never more than 3 pages with the amount of input increasing by about a third:
Percentage questions:- 25%, 33%, 42%.
Input type:- Tick boxes, drop downs, typing.
Personal data:- general, preferences, personal details.
If it looks like you need a fourth page break it down into a two stage process sign up (confirmation email and then log in) than a couple of more questions when they log in.
If you can target at getting the user to the end of page two, odds are they will feel a sense of obligation to third.
Where are techniques? Where are tips?
I’ve looked at the ad… um… example site, but I don’t see how their signup is revolutionary. Aren’t they just getting 500% more ALA readers signing up?
One thing I find nice about the article is I’ve never heard the idea of kinetic energy during web surfing. I suppose I would generally use terms like flow and momentum, but this idea is definetly going to be added to my list of topics to bring up with clients.
It’s unfair that people are calling this a plug for the author’s link. If they write an article about a design idea, they too can use their project as an example.
If Smartbrief.com is really a partner, you should talk to them about redoing their site. They could really use some help going from so graphic heavy to something more usable.
I’d just like to express my enthusiasm for ALA moving into topics outside “hardcore” design, like marketing. Unfortunately, this wasn’t the best article for it.
I was confused by the abstractness, and the need for a complicated metaphor like a “flywheel” when “a good push” would have been good enough, but there were some good ideas in there and it left me thinking.
I think it would have played much better to the ALA audience if the author didn’t include marketing language like “conversion rates” and “incentives”, and more solid examples would have moved it into the real world instead of an imaginary abstract blur of cars, flywheels, pathways, and funnels.
While I understand the analogy being made, I’d argue that the term ‘energy’ is not accurate. A good website doesn’t transfer energy to the user, it empowers a user with choice and control. The term ‘friction’ is a good one, however “˜reducing obstacles’ more accurately describes the goal of effective web design and usability. I see no point in making up new terms, as they merely muddy the waters and dilute understanding.
For those looking for concrete examples of reducing “friction”, here’s but one:
Please don’t make me register before I can make a purchase. Some of us detest dealing with passwords, etc. I’ve abandoned more than one cart myself, just because I didn’t want to go through the registration process.
Basically, this article said to build your page to be conductive to selling a single item and make checkout pages shorter. In return, conversion rates will be better. Also, add incentives or free giveaways to users to increase registrations.
If the kinetic energy analogy and new flywheel buzzword were not used, this article would probably not be accepted by ALA standards. It’s just content about things that are pretty obvious. Show us something we don’t know, and if you want to show us something we already know, go into it in detail as we’ve never gone before.
Basically, this article said to build your page to be conductive to selling a single item and make checkout pages shorter. In return, conversion rates will be better. Also, add incentives or free giveaways to users to increase registrations.
If the kinetic energy analogy and new flywheel buzzword were not used, this article would probably not be accepted by ALA standards. It’s just content about things that are pretty obvious. Show us something we don’t know, and if you want to show us something we already know, go into it in detail as we’ve never gone before.
i thought this was a great article and if you need quality online casino, bingo or poker reviews take a look at http://www.online-casinos.co.uk/Poker/