UI Pattern: Natural Language Form

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 Wreblowski 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, the natural language form 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 Form - Oscar

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 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.

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 websites 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 second step of quote process). However, the current live website of the insurance does not include the tested natural language form.

Design Examples

It’s pretty hard to find good and current examples of 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.

Do you know of any other examples for natural language forms in a user interface? Let me know in the comments and I’ll update the list. Thanks.

Sign up form on https://www.cheekd.com

Sign up form on Cheekd

 

Search for flights on http://www.b-reel.com/projects/products/case/401/escape-flight/

Search for flights on Escape Flight

 

Find you way around the city: https://www.moovel.com/de/

Public Transport App: moovel

 

Natural language forms as part of a sales process: https://wantful.com/recommendations/recipient?price=50

Natural language forms as part of the sales process on wantful.com

 

Beats Music

Selecting music be completing a sentence in the Beats Music app

 

Natural language filter on kickstarter.com

Natural language filter on kickstarter.com

 

BahnSharing App

Natural language used in the BahnSharing app for iOS and Android

 

http://www.lemassif.com/

Great example on http://www.lemassif.com/; Thanks Anderson for the comment!

 

Digital agency Archer uses the natural language form UI pattern for filtering content.

Digital agency Archer uses the natural language form UI pattern for filtering content.

 

Flight Search Virgin America

Flight search by Virgin America

 

onX UI

on{X} uses natural language for their programming UI

 

Contact form by prospek.ca

Contact form by prospek.ca

 

 

asdf

Oscar applied the pattern throughout their website

 

asdf

Oscar applied the pattern throughout their website

 

Requesting an insurance qute from Allianz Autria

Requesting a car insurance quote from Allianz Autria

 

Getting started with https://www.betterment.com/

Getting started with Betterment

 

Filtering events by audience at http://www.staedelmuseum.de/de/programm?group=3

Filtering events by type and audience at Städel Museum Frankfurt; Thanks Jens B. for the tip.

 

Natural Language Filter by Google

Filter on  Think with Google

 

Signup form Chefsteps

Signup form on Chefsteps.com

 

Search feature at caniuse.com

Search feature on caniuse.com

 

Login and registration forms on moof.com

Login and registration forms on moof.com

 

 

Searching for an insurance broker on https://www.allianz-persoenlich.de/haftpflicht

Searching for an insurance broker on https://www.allianz-persoenlich.de/haftpflicht

 

 

Ordering coffee via a natural language form on http://departmentofcoffee.com/product/subscription/

Ordering coffee via a natural language form on http://departmentofcoffee.com/product/subscription/

 

Natural Language Filter on http://bandmatch.ch/

Natural Language Filter on http://bandmatch.ch/.
Thanks to Raoul for pointing this out in the comments.

 

Filter on https://www.openprocessing.org/browse#

Filter on https://www.openprocessing.org/browse

 

Relatively complex prototype for a public liability application by dock9

Relatively complex prototype for a public liability application by dock9.com

19 Comments

  1. Ahsan Idrisi

    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

  2. Pingback: UI Pattern: Natural Language Forms | Simo Profumo

  3. Pingback: Good UI | CROWZO

  4. Danniel Rolfe

    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 🙂

  5. Pingback: 19 個常見的 UX Q&A | 設計大舌頭

  6. Pingback: digitalmadamblog

  7. Pingback: A Good User Interface | Free Hub

  8. Pingback: Best practices for UI designing | Only for HTML, CSS

  9. Pingback: Good UI – CROWZO

  10. Pingback: Natural Language Forms

  11. Pingback: Good UI (Good User Interface) - CROWZO

  12. Pingback: Tüm formlar sıkıcı olmak zorunda mı? | SHERPA Blog

Leave a Reply

Your email address will not be published. Required fields are marked *