From the course: UX for Web Forms

Incorporate visual information - Adobe XD Tutorial

From the course: UX for Web Forms

Start my 1-month free trial

Incorporate visual information

“

- [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.

Contents