UI Pattern: Natural Language Form

I recently did some research on a UI pattern called “natural language form” and got quite excited about it. Although those kinds of forms aren’t exactly a new phenomenon, they’re pretty rare. In fact, there isn’t even a common name. Luke Wroblewski talks about a “‘Mad Libs’ Style Form”, named after the popular US word game “Mad Libs“. I like the expression “natural language form” used by Codrops and will stick to that name in this article. In my opinion, this UI pattern is very promising and offers a neat solution for some UI problems. This blog post is supposed to serve as a starting point for further exploration of this concept.

What are natural language forms?

Get your insurance quote via a natural language form – Oscar

Natural language forms are web forms that don’t follow the traditional label-plus-input-field-style. Instead, they consist of input fields that are embedded within a sentence, written in natural language. The user is asked for the same kind of information but in a narrative form. A quick look at the example above is enough to get the idea. The purpose of natural language forms is to make filling in a form as easy as possible and maybe even a little fun. It’s easy to see how a sentence, written in natural language, is more engaging than a traditional form. For one because it’s a novel concept and this fact alone sparks interest. More importantly, however, a natural language form reflects the mental model of a user better than a traditional form. Completing the sentence “I feel like eating _____ .” feels much more natural than answering the questions “What kind of food do you want to eat?”. The former example feels like talking to a friend, the latter one is being questioned by a police officer.

Do they work better than normal forms?

One of the earliest examples of a natural language form is the sign-up form on the audio sharing site Huffduffer. Luke Wroblewski wrote an article about it, including some details on A/B testing ‘mad libs forms’ (as he calls them) against regular forms. The team from vast.com found, that using a natural language form increased conversions on their site by 25-40%. However, there are also other tests. One suggesting exactly the opposite (22% decrease at Kalzumeus) and two tests confirming a higher conversion rate due to natural language forms: 12% increase at CDF Networks and 25% increase at Netmedia. There’s a nice article on these tests and the pros and cons of natural language forms by UXalliance.

It’s hard to say whether natural language forms perform generally better or worse than regular forms. Most likely the pattern is well suited for short and simple forms but not for long and complex ones. In any case, you should do your own A/B testing on the subject.

Update, September 2014

In September 2014 the folks over at GoodUI.org did some testing for www.prizegrab.com. Their results suggest up to 29% increase in signups with a natural language form. However, the tested form variation also included some other changes like fewer form fields, different styling for input fields, etc. Natural language forms are also included in the website’s ideas for a good user interface.

Update, December 2015

Scott Sharp tested a natural language form for Embrace Pet Insurance and shared his results on GoodUI.org. His results suggest a +3.3% increase in conversions (visits to the second step of quote process). However, the current live website of the insurance does not include the tested natural language form.

Update, May 2021

The open-source design system “Aquila” by Allianz offers an Angular component for Natural Language Forms.

Design Examples

I keep on stumbling upon nice examples of the natural language UI pattern. It’s interesting not only how these forms look but also how they work. I recommend trying out the forms yourself to get an idea of what the user experience is like. Further, it’s worth to point out that the concept is not only being used for sign-up forms but also for filtering, searching and even programming.