UI Pattern: Natural Language Forms

For a recent project, I did some research on a UI pattern called “natural language forms”. 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 Wreblowski talks about a “‘Mad Libs’ Style Form”, named after the popular US word game “Mad Libs“. I like the expression “natural language forms” used by Codrops and will stick to that name in this article. In my opinion natural language forms are very promising and deserve further exploration. This blog post is supposed to serve as a starting point.

What are natural language forms?

Image may be NSFW.
Clik here to view.

Get your insurance quote on: https://www.hioscar.com/

Get your insurance quote on: Oscar Health Insurance

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 Wreblowski 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 pro’s and con’s of natural language forms by UXalliance. In general it’s hard to say whether natural language forms perform better or worse than regular forms. The answer is: it depends on the context.

Design Examples

It’s pretty hard to find good and current examples of natural language forms. I still managed to find some nice examples and I’m continuously looking for new ones. 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. Also it’s worth to point out that UI pattern is not only being used for sign-up forms but also for tasks like selection and search.

Do you know of any other examples for natural language forms/filters/search etc? Let me know in the comments and I’ll update the list.

Image may be NSFW.
Clik here to view.