To date I’ve only touched on the not-so-great moments in UI, but since the study of user interface design is something I enjoy I thought I’d start posting about great UI I’ve seen around the internet or articles that really highlight great UI.
Mad Libs Styled Forms
First up is an article and example of “Mad Lip” styled forms by LukeW. Thanks to my coworker Adam for pointing this out to me.
Ron and his team ran some A/B testing online that compared a traditional Web form layout with a narrative “Mad Libs” format. In Vast.com’s testing, Mad Libs style forms increased conversion across the board by 25-40%. You can see a before and after view of the Contact Dealer forms where they ran these tests below.
I think there is a bit more at play here than just the mad libs styling. I personally find the new forms heading much more engaging. Not to disparage cars salesman, but they’re not especially known for their honesty, so changing the header from “Contact a Dealer” to “I’m Interested” to me really changes the perceived purpose of the form for the end user. Also the new form highlights what specifically the contact form is for. But the real star here is how the form is completely changed by wording it naturally. Gone is the feeling that you’re signing up for the draft.
I’m eagerly awaiting a chance to A/B test my own form using “Mad Lib” styling.
One drawback of Mad Lib forms though how well they scale for longer forms. By their nature they require labels within the fields and while natural text around the fields works as a label too I can see a longer form loosing out on legibility.
