Join Luke Wroblewski for an in-depth discussion in this video Actions, part of Web Form Design Best Practices.
While labels ask the questions that people fill out in web forms, input…fields allow them to actually provide an answer.…Actions are the things that let people tell us they are done, in other words…they are the final hurrah.…However, not all actions in web forms are created equal.…In fact, some are primary, they lead to success like Save, Continue, and Submit.…Others are secondary and can sometimes lead to destructive actions like…Cancel, Reset, or Go Back.…Because these actions aren't equal we don't want to represent them…visually equally either.…
Here is a couple examples of how we can represent primary and secondary…actions in web forms.…In the example at the top the big blue button is the primary one, the light gray…one is a secondary action.…We can introduce even more contrast by making the primary action a big blue…button and the secondary action just a link.…We can even go further by taking that link and moving it far away from…the primary action.…Each of these instances creates contrast between what's the main successful…
- 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.