UX Tutorial: How to Design a Form

This video tool will help you design and create a form while tackling many of the common problems facing UX designers.

by Kelly Jepsen
Product Designer at ShopifyFollow

67 views|Start the discussion!|Bookmark

Description
In this video Kelly outlines the basics of how to use Sketch to build a simple and effective form.

He outlines the key success metrics of forms: how quickly the form can be completed, how few mistakes are made in the form and conversion (how likely it is for the user to complete the form).

Kelly emphasises the importance of your choice of fields and how these fields can actually communicate with the user. For instance, a certain field size can indicate how much information is expected to be inputted into it. This is called affordance.

Kelly then shows how you can label each of your fields and where these labels should be positioned. Kelly then outlines the strengths and weaknesses of each different label position in terms of their form's completion time and accuracy. This will allow you to select one that best suits the needs of your online form.

This video will then show you the different kinds of information input methods like radio buttons, check boxes and drop down menus. For instance, Kelly suggests that for information like the user's gender, a radio button is the best thing to use. Kelly shows how these different methods of input can be used for different types of data. Kelly will also describe how you can design your primary and secondary buttons (ie. submit and cancel) to suit your needs.

Ultimately, this video will help you create an effective UX form.

This Best Practice includes
1 Video File