How To Increase Your Conversions With Narrative Web Forms

Ever had fun filling out a credit card application?

Ever looked forward to doing paperwork for your bank or insurance company? Perhaps you’ve spent time delighting over the simple joy of entering your details into tiny boxes, and relish every opportunity to exercise your penmanship on their finely-crafted documents?

Presumably not in this reality.

Why would I even ask such a bizarre question?

Well, I ask because I’m wondering—you obviously don’t like filling out credit card applications and the like. And you can probably guess that no one else does either. So…why do your conversion forms look like this?—

paypal form looks like a credit application

Online conversion forms like PayPal’s registration page (right) are invariably formatted exactly like printed forms such as this credit card application (left)—approximately as fun to complete as a hazing ritual, despite having exactly the opposite purpose.

And it gets stranger still, because if you’re like most people reading this article you know a credit card-style form is a terrible way to make prospects interact with your site. You’ve probably invested a lot of time into learning how clarity trumps persuasion. You’ve put a decent amount of effort into writing compelling content for your website, using the four keys of clear, non-icky copy. You may even have tweaked your site’s design to improve its conversion rate, because you know that sexy sites suck at sales.

So why, when it comes to the element your prospects have to interact with in order to become customers, are you throwing all those fine principles out—in favor of a credit card application form?

If I may ask, as politely as I can: Are you nuts?

“BUT BNONN, WHAT IS THE ALTERNATIVE?”

It is something I call “narrative web forms”. Literally, forms that follow a narrative structure. They continue the conversation with your prospect, rather than ending it abruptly with a grid of information for him to fill out.

They’re also widely known as “Mad Libs” forms, for reasons which are obvious to Americans but not to the rest of us. Here’s a well-known example from Huffduffer:

huffduffer form

The registration form for Huffduffer uses a “fill in the blanks” style paragraph structure, rather than laying out each field on a grid. Far more entertaining to complete—something that makes a decisive difference to conversions on the web.

These were a fad around 2010, after Vast.com reported that their narrative forms increased conversions by 25-40%:

vast.com split test of a grid form

Vast.com’s split test of a grid form against a narrative one led to a reported conversion increase of 25-40%.

But like most fads, there was a brief burst of “isn’t that neat” blogging, and not much else—these kinds of forms don’t seem to have widely caught on. But they should have, because in general they will produce conversion lifts.

Why Narrative Forms Work Better Than Grids

You might be thinking, from the example above, that 25-40% is a pretty vague number. Was it 25% or was it 40%—because those are pretty wildly different figures? And that’s a good point.

From what I can tell, because there were several changes to the form aside from the narrative structure itself (notice the number of forms and the call to action), Vast couldn’t determine exactly how much the narrative structure had contributed to the overall increase. So they gave a deliberately loose figure. But the important thing is they did get a conversion hike.

Why?

Let me suggest three major reasons:

1. Narrative forms create a context your prospect cares about

Your typical grid form is all about getting your prospect to give a website details about himself. A narrative form, however, reframes that process into a way for him to get the website involved in his personal story.

In other words, the form becomes about your prospect and his “journey”, rather than about you and the information you need from him.

Since what your prospect really cares about is him, and not you, it only makes sense that reframing the conversion process in this way will lead to lifts. It is simply focusing him on the thing that matters in his own mind.

2. Narrative forms closely mimic your prospect’s thought sequence

This follows on directly from the first point. As Flint McGlaughlin of MarketingExperiments is fond of saying, you don’t optimize web-pages—you optimize thought sequences.

Shockingly, the way the human brain makes sense of things is not by memorizing and regurgitating brute facts, but by placing those facts into narratives. We learn, think, and teach best when we use stories—because that is how our brains are wired to work.

So using a narrative form allows your prospect to place himself into the process of conversion, not just in the sense that it becomes about him, but also in the sense that it reinforces what he is thinking. As well as placing the conversion process into a “first-person” context, a narrative form continues the simulated conversation your prospect has been having with you—or with himself. It literally mimics what he is thinking at the time of conversion. This focuses him on what he is doing, emphasizing his thought sequence in his own mind. It creates the sense of continuity with what he was doing before, structured in a way he can follow toward his goal.

Compare this to a grid layout, which forces him to enter his information devoid of context, thus breaking continuity with what he was thinking before, eliminating his thought sequence—replacing it with a series of brute facts which he must regurgitate.

Notice also that by mimicking his thought sequence, you are getting him more invested in the process of conversion—so he is less likely to give up half-way through—while enjoying the chance to reiterate the benefits of converting as if he himself were speaking. This is very powerful. Just as call-to-action copy works better when you emphasize what your prospect gets, rather than what he must do, so it is with form copy.

3. Narrative forms reduce visual friction

Now I don’t say this as a hard-and-fast rule, but certainly in the A/B example above you can see that the narrative form looks easier to complete. This isn’t just because less space is used. (Although this certainly contributed to the overall conversion, it had nothing to do with the narrative structure.) Rather, it is that the fields are broken up, leading to a more varied visual appearance. This kind of contrast makes a surprising difference to engagement. Nothing turns off the brain like sameness.

Incidentally, this applies to any kind of copy and not just form design. Rows of equally-sized paragraphs will reduce readership just as much as rows of equally-sized form fields.

To demonstrate that length is not the issue so much as contrast, here’s my own contact form by way of example. It is not perfect, but what I want you to notice is that although it takes up a lot of vertical space (far more than it would in a grid layout), it does not feel long:

narrative style form

My own contact form, written in a narrative style. Although it takes up a lot of visual space, it does not feel long because the contrast between the various elements engages the brain, instead of numbing it.

When Narrative Forms Fail

This is all dandy, but what if you split-test a narrative form and discover it converts worse than the old grid form? Like, for example, Patrick McKenzie at Kalzumeus:

grid sign up form

In a split test, the narrative form on the bottom garnered only a 21.7% conversion, while the grid-based control trucked along at 27.6%.

Patrick discovered that his narrative form had reduced his original conversion rate by 22%. How can that be if narrative forms are so great?

In my view, at least five things contributed to the failure of this narrative form—and they can all be avoided when you’re building your own narrative forms:

Firstly, there are actually two tests running here at once. It’s hard to know what effect that “Sign in as guest” link was having, so that casts some doubt on the results to begin with.

Secondly, while a form this short can benefit from a narrative structure, it is actually rather visually awkward to place the form fields inside the narrative. There isn’t enough space, and so it tends increase visual friction rather than reducing it. It would be better to place the narrative above the fields.

Thirdly, this is not a complete narrative form! He has simply given a narrative structure to the first half of the form, while leaving the second half the same as the control. It shouldn’t come as any surprise that if you don’t use narrative consistently, it doesn’t tend to work well.

Fourthly, what narrative copy there is, is just plain badly written. “I want to make bingo cards! Save them for me under my email address and I’d like to use this word as my password.” It reads like something written by someone with a less than adequate grasp of both grammar and the nuances of phrasing. How differently might the test results have been if the narrative had been expanded into a real conversation, and written competently?—

Hey Patrick, I’d like to make some bingo cards! I understand I have to register to do this, so please let me sign in with my [email address] (that way I don’t have to remember a separate username). I’ll use the following [password].

[x] Please also email me your free tips for using Bingo Card Creator, and [x] your monthly Bingo Activities Advisory.

Start Making Bingo Cards

Notice I ditched the “We don’t spam or sell your details.” I’ve never seen any evidence they increase conversions, and it just doesn’t fit into the narrative. Indeed, if a salesperson said that to me in real life I’d be like, Why would you even say that…? Is it because you actually are gonna do it? Putting the thought of spam in your prospect’s mind seems like an almost certain way to inadvertently increase anxiety, rather than reduce it.

I also used much better button copy—in fact, this is what Bingo Card Creator is currently using on their signup form.

Fifthly, I don’t know what people were seeing before they got to this signup form, but it should go without saying that narrative forms cannot stand alone. Because the whole point of them is to mimic your prospect’s thought sequence, they will not work effectively if that thought sequence isn’t initiated higher up the conversion chain with effective, clear, conversational copy.

There’s no point trying to get all conversational at the conversion form if you haven’t been writing like that all along. It will simply seem jarring.

Will You Test Narrative Forms On Your Site?

I’ve explained why narrative forms work well and are likely to produce lifts for you. And I’ve given you some principles to apply, and pitfalls to avoid. But have I convinced you to give them a shot on your own site?

Add your comments below—I’d like to hear what you have to say.

About the Author: Bnonn is the author of the free email micro-course 5 Sales-Spiking Website Tweaks Web Designers & IM Gurus Don’t Know. It’s one quick lesson per day, each with a tested conversion-boosting tip you can implement on your site in 30 minutes or less (and none of them are about narrative forms).

  1. Hey Bnonn,

    Just wanted to say I’m an avid reader of your newsletter and this post ties in perfectly with what you’ve been saying of late about using language to your benefit.

    I had completely forgotten about Mad Lib forms. Thanks for the reminder.

    I have just the project to use this on! :-) Again, thanks a ton! This will really add the conversational tone that I’m looking for…

  2. Bnonn, as usual, fantastic insights! :) I’m currently reading a book called The Tipping Point by Malcolm Gladwell that, among other things, discusses why Blues Clues was a more popular children’s TV show than Sesame Street. (Both shows were wildly popular educational children’s shows in the US.) One of the reasons given was that each Blues Clues episode follows a story narrative whereas each Sesame Street episode is composed of short non-sequiter sketches. Blues Clues worked so much better because it taught children to think in the same way they were already teaching themselves to think – in the form of a story. It keeps them engaged in their environment and helps them remember details better. I think this relates very well to your second point of mimicking your visitor’s thought sequence. It’s how our brains are designed to work from an early age, and I think it’s naturally more engaging for visitors. Anyways, loved being able to connect what I’m reading to your spot-on techniques. Thanks for the great article!

  3. Hey Bnonn,
    Solid stuff and nice job breaking down the possible reasons the last example converted worse than a traditional form. I think people miss the nuances and throw the baby out with the bath after they run a test like the one above and don’t get the results they expected.
    Another innovation that I think goes even further than narrative forms is interactive forms.
    Check out http://typeform.com when you get the chance.
    They’re still in beta, but the tool looks really spectacular!

    • Thanks for linking to Typeform, Josh. Absolutely delightful personalisation in the form-filling market! Hopefully, I’ll be able to score a beta invite and they won’t slap on branding…

  4. Not convincing….

    Isn’t the main difference between Patricks form and yours that Patricks form is shorter than yours?

  5. Beatrix, if you’re unconvinced, why not tell us why? Where do you think my reasoning goes wrong?

    There are many differences between Patrick’s form and mine: what the form is asking for; where on the site it is located; how people get to it; the language used; and as you say the length. When you say the “main” difference, what exactly do you mean?

  6. Hi Bnonn! I’ve learned a lot in this post. I didn’t really give much attention to the forms but after you’ve pointed it out, I can see the difference now and why it matters. I’ll give the narrative web forms a try and see how it goes. Thanks! :)

  7. Nice usability info! Thx

  8. I LOVE IT! Those signup forms actually make me want to sign up (isn’t that the point :) I like anything that helps my readers take a break from the 100/mile-a-minute cyber-culture and just relax. Those signup forms make me feel relaxed.

    Good work D.

  9. Thanks! I can see the difference now and why it matters. I’ll give the narrative web forms a try and see how it goes.

  10. Thanks for the methods, we will be applying them to our site.

  11. Hey Bannon !
    Such an informational post specially for me. great attempt.
    I can clearly understand each and every step.
    Thanks.
    Matt

  12. Hi Bnonn,
    We were inspired from your article as the JotForm team and decided to make a beta( or alpha) narrative web form builder.

    Check out: http://www.jotform.com/narrative-web-forms/ if you have the time. We’ll improve it more if we can get enough feedback.

    Many thanks for this great research!

  13. I agree with your point and about reevaluate, We’ll improve it more if we can get enough feedback.

  14. I agree about the narrative friction, as you describe it, in the Bigno sign-up

    “and I would like to use this word ***** as my password”

    I can see someone thinking – This word? What word? Oh, you mean there isn’t a word yet, and I have to make it up. Oh, now I get it. –

    But the reader has to go back and read this and decipher it, and that disturbs the flow.

    Had he written “and I would like my password to be **** ” I think the take up would have been better.

Comments are closed.

← Previous ArticleNext Article →