CINXE.COM

<!DOCTYPE html> <html id="doc" class="no-js" lang="en"> <head> <meta charset="UTF-8"> <title>LukeW | “Mad Libs” Style Form Increased Conversion by 25-40%</title> <meta name="description" content="LukeW Ideation + Design provides resources for mobile and Web product design and strategy including presentations, workshops, articles, books and more on usability, interaction design and visual design." /> <meta name="keywords" content="Strategy, Mobile, Web, Interface, Design, Mobile design, Web design, Interface design, Interaction design, Design startegy, Web application, Application, TV, Device, NUI, Product, Internet, Software, Expert, Usability, Information Architecture, Book, Design, LukeW, Luke Wroblewski, Luke, Wroblewski, GUI, HCI, UI" /> <meta name="author" content="Luke Wroblewski">  <meta property="og:title" content="LukeW | “Mad Libs” Style Form Increased Conversion by 25-40%" /> <meta property="og:url" content="http://www.lukew.com" /> <meta property="og:type" content="article" /> <meta property="og:description" content="A while ago, I came across a unique registration form built by Jeremy Keith for his audio sharing site, Huffduffer. Though it asked people the same questions fo..."/> <meta property="og:image" content="https://static.lukew.com/huffduffer_signup.gif" />  <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="LukeW | “Mad Libs” Style Form Increased Conversion by 25-40%" /> <meta name="twitter:description" content="A while ago, I came across a unique registration form built by Jeremy Keith for his audio sharing site, Huffduffer. Though it asked people the same questions fo..." /> <meta name="twitter:site" content="@lukew" /> <meta name="twitter:image" content="https://static.lukew.com/huffduffer_signup.gif" />  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="format-detection" content="telephone=no">  <meta name="apple-mobile-web-app-title" content="LukeW"> <link rel="apple-touch-icon-precomposed" href="//static.lukew.com/apple-touch-icon.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="//static.lukew.com/touch-icon-ipad.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="//static.lukew.com/touch-icon-iphone4.png" /> <link rel="apple-touch-icon" sizes="76x76" href="//static.lukew.com/touch-icon-ipad76.png" /> <link rel="apple-touch-icon" sizes="120x120" href="//static.lukew.com/touch-icon-iphone-retina.png" /> <link rel="apple-touch-icon" sizes="152x152" href="//static.lukew.com/touch-icon-ipad-retina.png" />  <meta name="msapplication-TileImage" content="//static.lukew.com/icon-win8-lukew_wht.png"> <meta name="msapplication-TileColor" content="#79aa1b"> <link rel="shortcut icon" href="//static.lukew.com/lukew.ico" /> <link rel="alternate" type="application/rss+xml" href="http://feeds.feedburner.com/FunctioningForm" title="LukeW Ideation + Design" /> <script type="text/javascript"> var doc = document.getElementById('doc'); doc.removeAttribute('class', 'no-js'); doc.setAttribute('class', 'js'); </script> <link rel="stylesheet" type="text/css" href="//static.lukew.com/rwd_07122023.min.css" />  <script type="text/javascript"> var changeActive = function() { var page = document.getElementById("page"); if (page.getAttribute("class") === "not-active") { page.setAttribute("class", "active-sidebar"); } else if (page.getAttribute("class") === "active-sidebar") { page.setAttribute("class", "not-active"); } } window.onload = function() { if(document.getElementById("sidebar-button")) { var sidebar_button = document.getElementById("sidebar-button"); sidebar_button.onclick = function(event) { changeActive(); event.preventDefault(); } } } window.onresize = function() { var page = document.getElementById("page"); page.setAttribute("class", "not-active"); } </script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-6BKCKPFXK7"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-6BKCKPFXK7'); </script> </head> <body id="page" name="page" class="not-active"> <div class="container"> <header class="header writingsheader"> <nav class="off-canvas-nav-links"> <ul> <li class="menuli"><a class="menubutton" href="#menu">Menu</a></li> <li class="menulogoli"><a class="menulogo" id="sidebar-button" href="#sidebar">Additional Information</a></li> </ul> </nav> </header> <section role="main" class="h-entry"> <h1 class="p-name">“Mad Libs” Style Form Increased Conversion by 25-40%</h1> <p class="attribution" itemscope itemtype="http://schema.org/Person">by <a href="http://www.lukew.com/about" rel="author" class="p-author"><span itemprop="name">Luke Wroblewski</span></a> <span class="right dt-published" datetime="Thu Feb 25 2010 00:00:00 GMT+0000 (UTC)">February 25, 2010</span></p> <article class="entry writingsentry e-content"> <p>A while ago, I came across a unique registration form built by <a href="http://adactio.com/">Jeremy Keith</a> for his audio sharing site, <a href="http://huffduffer.com/">Huffduffer</a>. Though it asked people the same questions found in typical sign-up forms, the Huffduffer registration form did so in a narrative format. It presented input fields to people as blanks within sentences (<a href="http://en.wikipedia.org/wiki/Mad_Libs">Mad Libs</a>-style, if you will).</p> <p><img src="//static.lukew.com/huffduffer_signup.gif" alt="huff duffer sign-up form" /></p> <p>Jeremy built the form to work as you'd expect. You can tab between the "blanks" just the way you tab between standard Web form input fields. You can click on any "blank" to start entering text. The password "blank" masks any characters you enter just like a standard password input, and the whole form manages errors if you answer any questions incorrectly. In other words, it works like a standard Web form but it looks quite different. The presentation is inviting and fun, which is quite unlike a standard Web form.</p> <p>After seeing the Huffduffer form in action, I was curious how it would perform against a traditional form. Would people be more inclined to complete it because of the narrative format? Or would the unfamiliar presentation format confuse people? Thanks to <a href="http://ron.kurti.com/work">Ron Kurti</a> and the team at <a href="http://vast.com/">Vast.com</a>, I now have some early answers.</p> <p>Ron and his team ran some A/B testing online that compared a traditional Web form layout with a narrative "Mad Libs" format. In Vast.com's testing, <b>Mad Libs style forms increased conversion across the board by 25-40%</b>. You can see a before and after view of the Contact Dealer forms where they ran these tests below.</p> <p><img src="//static.lukew.com/vast_contactdealer.gif" alt="Vast contact dealer form" /></p> <p>Most of the input fields have stayed the same but the "comments" text area has been replaced by a "personalize this message link" and the phone number set of three input fields has been replaced a single flexible input. While it's possible these adjustments also contributed to the increase, it's unlikely they were solely responsible for it. As a result, the mad libs layout likely had an impact as well.</p> <p>Examples of this form are live at <a href="http://www.vast.com/detail/cars/ob-N7sTu5m7i7S5yLm2u7BBDbZ7e23d0RAHbbu7k8YMNsOLTw==/?pl=0&csearch=0&v_ref=aHR0cDovL3d3dy52YXN0LmNvbS9jYXJzL2xvY2F0aW9uLTk0MTE0L3ZlaGljbGVfY29uZGl0aW9uLUFsbA%3D%3D&v_user=dmFzdF92Mw%3D%3D">Vast</a>, <a href="http://usedcars.kbb.com/detail/cars/ob-N7w5w7u8u7TQsBsE0LZLg7t7e2uzkQaHUTuBbL1rlrtsgQ==/?pl=0&csearch=0&v_ref=aHR0cDovL3VzZWRjYXJzLmtiYi5jb20vY2Fycy9sb2NhdGlvbi05NDExNA%3D%3D&v_user=a2JidWNp&kbb_zip=94114">Kelley Blue Book</a>, and several more sites. Ron and the Vast.com team are rolling out new versions of these forms over the coming weeks and will continue to test improvements. Hopefully, they'll be able to share their results again.</p> <p>Thanks to Ron Kurti for sharing these images and performance stats!</p><h2>About Vast.com</h2><p>Vast.com, Inc works within the auto, travel, and real estate industries to create online marketplaces for the world's most respected companies. Partners such as Kelley Blue Book, Orbitz Worldwide, AOL, and Overstock have integrated Vast's custom platform into their portals to serve over 20 million consumers per month.</p> <p>This article has been translated to <a href="http://www.designcontest.com/show/entry-lukew-be">Belorussian</a> by Patricia Clausnitzer</a>.</p> </article> <div class="share_sec"> <ul class="share_btns"> <li><a class="share_btn" href="http://www.twitter.com/lukew" title="Follow on Twitter"><span class="share_img share_tw"></span>Follow</a></li> <li><a class="share_btn" href="http://feeds.feedburner.com/FunctioningForm" title="Subscribe to News"><span class="share_img share_rss"></span>Subscribe</a></li> </ul> </div> <ul class="rel_links"> <li class="rel_linksli"><a href="/ff/entry.asp?949">Web Form Design: Adobe's Error Messages</a></li> <li class="rel_linksli"><a href="/ff/entry.asp?727">Alternative List Box UI</a></li> <li class="rel_linksli"><a href="/ff/entry.asp?1000">Web Form Innovations on Mobile Devices</a></li> <li class="rel_linksli rel_tags">Tags: <a href="/ff?tag=forms" rel="tag">forms</a> <a href="/ff?tag=interaction design" rel="tag">interaction design</a> <a href="/ff?tag=innovative UIs" rel="tag">innovative UIs</a> <a href="/ff?tag=communication" rel="tag">communication</a> </li> </ul> </section> <section id="sidebar" role="complementary"> <aside class="writings"> <a href="/" class="sidelogo">Home</a> <a href="/"class="sideimg">Home</a> <q class="dquote">"Good designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures." <cite><a href="/quotes/">Jeffery Veen, 2000</a></cite></q> <p class="rel_linksli sidepromo"> <a href="https://abookapart.com/products/mobile-first"><img class="bookimg" src="gfx-mobilefirst-sm_2x.png" border="0" alt="Free online version of my book" /></a> <strong>Free</strong> online version of my book. <a href="https://abookapart.com/products/mobile-first">Read Mobile First</a>. </p> </aside> </section> <nav id="menu" role="navigation"> <ul id="nav" class="navlist"> <li class="navtop"><a class="navtoplink" href="#page"><span>Top</span></a></li> <li><a class="navabout" href="/about/"><span>About</span></a></li> <li><a class="navwritings navwritingshl" href="/ff/"><span>Quotes</span></a></li> <li><a class="navpresos" href="/presos/"><span>Presentations</span></a></li> <li><a class="navask" href="https://ask.lukew.com"><span>Ask</span></a></li> </ul> </nav> <footer class="site-footer" role="contentinfo"> <ul class="footeractions"> <li><a class="footeraction" href="http://feeds.feedburner.com/FunctioningForm"><span class="footeractionRSS">Subscribe to News</span></a></li> <li><a class="footeraction" href="http://www.twitter.com/lukew"><span class="footeractionTW">Follow on Twitter</span></a></li> </ul> <p>©1996-2025 LukeW Ideation + Design. <a href="/about/">Contact me</a> with any questions or comments.</p> </footer> </div>  </body> </html>