Measuring Great Design – Mad Libs Input Form

image of mad libs pads

I came across a really interesting article LukeW.com, showing how making changes to the way an input form on a website increased interaction by 25 to 40%. The changes reflect the value of thinking outside-in, investing in user experience, and performance measurement.

Bonus: the idea is cool.

Mad Libs Input Form

before and after screenshot of mad libs input form redesign[full size image available in Luke's article]

The idea being presented is to replace the old boring web input form designed for a computer. The new, fun form is a fill-in-the-blank (aka Mad Libs) layout. The article is on Luke Wroblewski’s site.  The team at Vast.com created and tested a version of this form for the Kelly Blue Book site. [Luke cites Huffduffer.com as the first place where he saw this technique.] Thanks, Luke for sharing this with all of us!

Outside-In Development

Product managers are acutely aware of the need to solve market problems. We are regularly reminded that we’re creating solutions for people in our markets who use our products to solve their problems. When we write requirements, we avoid writing design specifications, and thereby lose the ability to enforce that the proposed solutions also take an outside-in approach. We maintain an outside-in perspective, but we lost the ability to influence an outside-in aesthetic.

Note: Outside-In Software Development is a great book, you should read it.

That’s one area where user experience works well in concert with product management – assuring that the same drivers of what to build are informing the design of how it is built.

The genius (or at least elegance) of this Mad Libs form from Vast / Kelly Blue Book is that it humanizes the experience of requesting that a nearby dealer contact you to discuss a possible purchase of a car from them. The forms we’ve all had to fill out on countless web sites are very inside-out. They expose the inner workings of the program – “gather this info, and that info, and this other info.” Those forms force users to do what the program wants. Blech. The form that Ron Kurti designed, however, forces the program to do what the users want. Huzzah!

Bad Requirements Prevent Elegance

I’ve written about the importance of writing design-free requirements several times.  Avoiding design constraints in your requirements is even one of the pillars of the big 10 rules of writing requirements.

If you had written the requirements for this contact the dealer page, would you have specified the design of the form?

Most of the requirements analysts I’ve worked with would have. I’ve even worked with companies that have developed templates / stencils defining how these interface specifications must be documented – requiring that all the fields be aligned, with specific pixel gaps, etc.

If you had specified the design (read: limited the choices of the designer), you would have prevented this solution.

Mr. Kurti’s elegant solution is clearly better.

One way to write the requirements that would not have prevented this solution would be with a user story and acceptance criteria:

As a car-shopper, I want to engage a car dealer, once every few years, so that I can purchase the car I selected.

  • The car-shopper can provide his contact info (name, email, phone) for the car dealer.
  • The system will display the information identifying the selected vehicle.
  • The system will display the information identifying the dealer being contacted.
  • The system will include an opt-in newsletter-subscription option.
  • The system will notify the specified dealer when the car-shopper indicates.

The user story nudges the developers into an outside-in perspective by emphasizing the user’s goal. The acceptance criteria make it clear that any solution that meets those criteria is acceptable to the product manager. It allows the interaction designer to create a compelling solution, rather than forcing him to recreate a boring experience.

Measurement Rocks

The Vast team measured the impact of making this change to their form, and saw between a 25% and 40% increase in conversion (people contacting dealers versus people abandoning the process when they see the form). That’s a lot more leads for the dealers, and presumably a lot more money for Kelly Blue Book and Vast. This is a great example of how you can measure the impact of investing in user experience, because it should spark ideas for you.

What can you measure and test and improve?

Now that’s ROI for you.

Post to Twitter Post to Facebook

This article was published on Monday, March 1st, 2010 at 11:20 pm and is filed under Interaction design, Product Management, Requirements, ROI, Software development, User Stories, UX.
You can leave a comment on this post

2 Comments

  1. It is interesting, because when specifying web sites that can be read by blind people, this is how you have to think your screen layouts.

    I like it!

    Gil

17 Trackbacks

  1. By Ben Sykes on March 2, 2010 at 6:24 am

    #ixd An Example of Measuring the ROI of Interaction Design | Tyner Blain http://bit.ly/90ZH8i

  2. By Roger L. Cauvin on March 2, 2010 at 11:22 am

    RT @sehlhorst: New Tyner Blain article: Measuring Interaction Design http://bit.ly/deB9Po Great #ux ,good #prodmgmt read

  3. By Roger L. Cauvin on March 2, 2010 at 11:22 am

    RT @sehlhorst: New Tyner Blain article: Measuring Interaction Design http://bit.ly/deB9Po Great #ux ,good #prodmgmt read

  4. By Mishkin Berteig on March 2, 2010 at 11:32 am

    RT @sehlhorst New Tyner Blain article: Measuring Interaction Design http://bit.ly/deB9Po Great #ux ,good #prodmgmt read

  5. By Mishkin Berteig on March 2, 2010 at 11:32 am

    RT @sehlhorst New Tyner Blain article: Measuring Interaction Design http://bit.ly/deB9Po Great #ux ,good #prodmgmt read

  6. By Don Cosseboom on March 2, 2010 at 12:38 pm

    Great article and example of designing a contact form differently – Measuring Great Design – Mad Libs Input Form http://bit.ly/dgPU8q

  7. By Don Cosseboom on March 2, 2010 at 12:38 pm

    Great article and example of designing a contact form differently – Measuring Great Design – Mad Libs Input Form http://bit.ly/dgPU8q

  8. By Darrin Johnson on March 2, 2010 at 3:44 pm

    #Designing interactively can create a much better product – http://bit.ly/acpYzO #innovation #prodmgmt

  9. By Darrin Johnson on March 2, 2010 at 3:44 pm

    #Designing interactively can create a much better product – http://bit.ly/acpYzO #innovation #prodmgmt

  10. By Quick Guide: Measure ROI With Google Analytics on March 2, 2010 at 6:26 pm

    [...] An Example of Measuring the ROI of Interaction Design | Tyner Blain [...]

  11. By Steve Hindman on March 2, 2010 at 7:39 pm

    By @sehlhorst: Measuring Great Design – Mad Libs Input Form http://bit.ly/9nBLX9

  12. By Guðlaugur Egilsson on March 2, 2010 at 7:53 pm

    RT @sehlhorst New Tyner Blain article: Measuring Interaction Design http://bit.ly/deB9Po Great #ux ,good #prodmgmt read (via @mberteig)

  13. By topsy_top20k_en on March 2, 2010 at 7:53 pm

    New Tyner Blain article: Measuring Interaction Design http://bit.ly/deB9Po Great #ux ,good #prodmgmt read

  14. By michaelrhopkin on March 2, 2010 at 11:21 pm

    By @sehlhorst: Measuring Great Design – Mad Libs Input Form http://bit.ly/9nBLX9

  15. By Edward Williams on March 4, 2010 at 5:16 pm

    redo your input forms and get your users to interact more…. good read…. http://ow.ly/1eenV

  16. By Ellen Daleng on March 5, 2010 at 10:42 pm

    Measuring Great Design – Mad Libs Input Form http://tinyurl.com/y8dol5l

  17. By Raja on March 9, 2010 at 4:08 am

    Change in an input form increased user interaction 4m 25 to 40%! http://bit.ly/asX5eu Design wht the users want not wht u want to program !!

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>