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?
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.
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.
February 13, 2014, 19:11
Yeah, klasse Sammlung und spannender Ansatz für Selections/Filter. Merci vielmals.
July 16, 2014, 08:58
I suspect few UX issues with these kind of forms
1) Its a new pattern, user expectations will be a drop-down rather than a link to initiate drop-down
2) No line of action as Luke described…..user has to look from left to write and read everything to go through this form
3) You can make longer forms like this…it is impossible
So it might work for very short forms less than 5 inputs
July 16, 2014, 10:41
August 14, 2014, 10:16
August 19, 2014, 17:31
What a cool concept! From my perspective this is more natural way to communicate with the customer and It is engaging. I agree that this could be a fun way to fill out a form. I’m going to employ this UI technique and see what happens 🙂
September 5, 2014, 17:07
Hi, this is a nice example of this concept : http://www.lemassif.com
April 7, 2015, 12:22
November 12, 2015, 16:15
January 14, 2016, 06:46
January 21, 2016, 14:28
April 7, 2016, 12:53
June 9, 2016, 22:06
Vielen Dank für diese Beispiele.
Hier meine Umsetzung für die Erstellung und Suche von Inseraten auf der Musiker & Band-Plattform Bandmatch.
June 21, 2016, 12:06
June 25, 2016, 06:39
July 28, 2016, 19:53
havenlife.com uses one that’s really nice
September 14, 2016, 14:29
Could you please help me out. How to use such kind of forms on WordPress?
Really appreciate your help.
April 8, 2017, 18:25
The guys at swiftideas.net use these in their themes. Called SuperSearch.
May 15, 2017, 11:29
Have you already solved this?
Could you help me too.
November 28, 2016, 13:32
May 27, 2018, 04:40
Hey, thanks for this amazing resource. By the way I
think it should be “they’re” instead of “there” just so you know.
April 26, 2019, 02:54
April 26, 2019, 02:58
May 18, 2021, 18:34
April 22, 2022, 08:03