UX for Web Forms
2h 21mIntermediate2020-02-07
Authors

Emily Kay
Web Developer and Graphic Designer
Course details
Explore ways to design web forms that excel in usability, and learn about techniques for creating forms that are visually appealing and simple to use. Instructor Emily Kay begins with an explanation of why form design is important, describing the ways that specific form elements can influence results. Discover how user expectations impact design, and how to make a form accessible so people using screen readers can more easily identify and understand form controls. Find out how to organize a form to keep users focused for optimal results, and how to overcome common design challenges. Learn ways to help circumvent scams and malicious submissions to a form, and methods to handle errors and validation.
Topics include:
- Why form design matters
- Incorporating visual information
- Selecting colors for web forms
- Designating types of inputs
- Grouping and sequencing questions
- Helping with predictive search
- Showing validation and success messages
- Addressing errors
- Designing forms for mobile screens
- Leveraging boxes, buttons, and tabs
- Adding CAPTCHA to forms
- Accessibility considerations
Topics include:
- Why form design matters
- Incorporating visual information
- Selecting colors for web forms
- Designating types of inputs
- Grouping and sequencing questions
- Helping with predictive search
- Showing validation and success messages
- Addressing errors
- Designing forms for mobile screens
- Leveraging boxes, buttons, and tabs
- Adding CAPTCHA to forms
- Accessibility considerations
Skills covered
FormsAdobe XDUX DesignUser ExperienceProjectAdobeWeb DevelopmentBusiness Software and Tools
Concepts
0. Introduction
- 01 - Get your UX web form jam on
- 02 - What is a form
- 03 - Why does form design matter
- 04 - Terminology
1. Forms Are for Everyone
- 05 - Types of forms
- 06 - Audience
- 07 - Types of inputs
2. Form Organization
- 08 - The impact of form design
- 09 - Form design principles
- 10 - Considerations prior to starting
- 11 - Expectations
3. Organizing Content
- 12 - Main purpose of a form
- 13 - Voice and words matter
- 14 - Psychology of forms
- 15 - Types of inputs and key components
- 16 - Incorporate visual information
- 17 - Endowed progress effect
- 18 - Show progress
- 19 - Colors and design
4. Guiding Users Through the Form
- 20 - Question order
- 21 - Grouping questions
- 22 - Placeholder text
- 23 - Default values
- 24 - Labels
- 25 - Conditional logic
5. Actions and Buttons
- 26 - Primary versus secondary buttons
- 27 - Alignment and styling
- 28 - Labeling, agreeing, and submitting
6. Form Visuals
- 29 - Placement of labels
- 30 - Floating labels
- 31 - How many columns
- 32 - Width of fields
- 33 - Required and optional fields
- 34 - Help text
- 35 - Errors
- 36 - Validation and success messaging
- 37 - Mobile forms
7. Specific Form Type Tips
- 38 - Login forms
- 39 - Booking or registration forms
- 40 - Contact forms
- 41 - Payment forms
8. Common Form Needs and Considerations
- 42 - Very long forms
- 43 - Input masks
- 44 - Redundant fields
- 45 - CAPTCHA
- 46 - Accessibility
- 47 - Confirmation
Conclusion
- 48 - Next steps