Join Luke Wroblewski for an in-depth discussion in this video "Mad Lib" forms, part of Web Form Design Best Practices.
We see so many forms on the web, that sometimes just changing how a form looks…can make things more approachable.…Mad Libs forms do just that.…As you can see on the site Huffduffer, this form looks like the kids' game Mad…Libs where there is a series of empty fields that people filled in and created…humorous conversations as a result.…On Huffduffer though, this same technique is being used to let people join the service.…Let's see it in action.…As you go into the form, you can fill in your username, your password, e-mail address.…
Note that you can still tab to this form as you can with a traditional form. It all works.…You can also click on the labels inside the paragraphs of text to jump to any…particular input field;…once again, keeping with mouth behaviors that people expect in other places.…Yet, the layout of this form makes it a lot more approachable. It doesn't feel…like the typical web form you encounter everywhere else, and the result is,…well, let's just say it's kind of satisfying.…
- Understanding why forms matter
- Deciding on the form length and structure
- Adding tabs to a form
- Creating required fields
- Adding input masks
- Creating selection-dependent inputs and actions
- Displaying success and error messages
- Adding inline validation
- Understanding gradual engagement
- Enabling touch and audio input on devices
Skill Level Appropriate for all
1. Form Organization
2. Form Interaction
3. Moving Beyond Static Forms
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.