Learn about using images that will make it easier for the end user.
- [Instructor] Our brains process visuals much faster than text. Using cues like icons, imagery, shapes, whatever helps to illustrate your point will make the user experience more intuitive. Form design should be consistent, but that doesn't mean it can't integrate little moments of surprise. By using non-standard visual UI elements like icons, clickable images, and toggled sliders, you can make form filling more enjoyable and intuitive. Here, I'm using radio buttons that are formatted to look more like a standard button and incorporating graphics. This is breaking up the form and making it a little bit more visually appealing. You can incorporate visuals with radio buttons and this can help to make the form seem shorter and more pleasant to interact with. You want to choose field types that will reduce the number of clicks required to complete a transaction. Here, we're going to take a standard dropdown menu and radio buttons shown on the left and we're going to convert it so that the radio buttons are going to become more graphical in nature. This is going to give the user considerably more feedback. Let's take a look at this. Here you can see that the dropdown menu would normally take two clicks, so I have to click on the menu to open it and then select the size, while the radio buttons are just going to take one click. All I have to do is click on the color that I want and it's selected. This is going to shorten the length of time for the user and we're also giving them more visual feedback by providing images for the selections. When you can incorporate these types of things into your forms, you can make them more user friendly and improve the experience overall.
- 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
Skill Level Intermediate
Design the Web: Styling Form Elementswith Chris Converse39m 34s Beginner
Careers in Web Design and Developmentwith Jen Kramer27m 55s Intermediate
1. Forms Are for Everyone
2. Form Organization
3. Organizing Content
4. Guiding Users Through the Form
5. Actions and Buttons
Alignment and styling3m 24s
6. Form Visuals
7. Specific Form Type Tips
8. Common Form Needs and Considerations
Next steps2m 3s
- 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.