Join Luke Wroblewski for an in-depth discussion in this video Dynamic inline forms, part of Web Form Design Best Practices.
In situations where web forms span multiple pages, dynamic inline solutions give…us an opportunity to pull that all into a single page and dynamically expand and…collapse each section.…Let's see this in action.…The Apple Store's checkout Form looks pretty typical for an…e-commerce situation.…Upfront we're asked if you're a returning customer or new?…Next page asked us who you are and for your Billing Information, in this case, Address.…Then we move on to where you want to ship things, how you want to pay for them…and ultimately review all the decisions you've made on the next page…In aggregate, Apple's Checkout flow looks like this 1, 2, 3, 4 and 5 screens.…
When I did a recent redesign however, the Apple store pulled all this…information into a single form, that's right, one dynamic solution that covers…everything we just saw in five pages.…Let's see it in action…The first section on the form is the Shipping Information.…Here we specify where we're asking our order to be shipped and how we would…
- 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?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.