How to Design Great Forms

Forms are the primary ways in which our visitors will interact with our websites.  For this reason, creating user-friendly and easily understood forms is important to proving a great experience and getting usable data to make decisions upon.

Forms are conversations with users, not interrogations, ensure they have a pleasant experience with your form

There are many critical factors to understand when designing and implementing a good form.  But first, I want to have a quick discussion on form afforndances.

Form Affordances

An affordance is a possible method of interaction with an object.  For instance, a door know, with its round, smooth shape, affords the opportunity to turn it.  The shape and design of the object infer the method of interaction.

A good form also has these affordances.  Look for these main points when identifying the affornaces your form allows:

  • Active Buttons – Flat button designs are not good for forms because they blend in with the form fields and don’t provide clear calls to action
    • use color, shading, depth, shape, and contrast to alter the appearance of your buttons to make them stand out (rounded corners are great for buttons)
  • Button Descriptions – Make sure the button text is actionable and descriptive.  Use verbs to tell the user they are doing something.
  • Input Fields – Pay special attention to input fields as they are your primary means of obtaining data from users
    • Consider the data that will go in the fields.  DO NOT make the postal code and city fields the same size, as the postal code is usually shorter.
    • Use shading to differentiate the different form inputs
    • Bump contrast a bit to make sure everything stands out

This discussion actually takes me to a subject I didn’t think of covering, but I feel is just as important as anything else we will discuss today.  Lets talk about Button Design.

Button Design

Not to fall too far down the rabbit hole, lets identify a few key concepts when if comes to button design:

  • Fit For Purpose – Make sure your buttons match your branding.  The color, shape, and styling of your buttons should be informed by your brand style guidelines.
    • if the website has a flat design, a shiny button with gradients and drop shadows might look out of place
  • Contrast – Make sure your buttons have enough contrast and visual weight to stand out from the rest of your user interface
  • De-emphasize Other UI Elements – Reduce shading a bit for form inputs to make the buttons stand out in comparison.  You want your button to be the star of your form.
  • Borders/Stroke Law – Always give the button a border, with the color and shading of this border depending on the background the button is placed upon
    • is background is lighter than button, use a dark stroke that is close to the button color
    • if background is darker, use a dark stroke that is close to background color.
  • Shadow Law – Drop shadows work best when the element is lighter than the background on which it sits.
  • Iconography – Use icons to provide additional information about affordances with your button
    • for example, if moving to new page, use an arrow pointing right.  If moving down the page, use a arrow pointing down
  • Hierarchy – Design your buttons in a 3 level (or more) hierarchy.  Reserve the strongest, boldest colors and designs for primary buttons, drop off a bit of the saturation and styling for secondary, then remove most styling and make tertiary buttons smaller
  • Feedback – Buttons can provide feedback in the form of styling to let the user know what is happening.  Consider the following five feedback states to offer the user:
    1. Default – Full color and border, with subtle drop shadow
    2. Hover – Lighter color with border, same drop shadow
    3. Click – Darker color with border, no drop shadow (go for pressed look)
    4. Busy – Red or alert color, light border, use drop shadow
    5. Disabled – Greyed out color, very light border, no drop shadow

And finally, on to designing great forms

Great Form Design

There are a few general rules and guidelines you can follow to get the most out of your form design.  These include:

  • Organize Your Form – Properly group your related form fields. I.E. Break out personal information form fields from billing information form fields.
  • Hide Unnecessary Fields – Hide unnecessary fields until they are needed to reduce noise
  • Show Helper Text – Forms should be intuitive, but there are a few uses for helper text and tooltips.
    • Use helper text to explain how you will be using the data the user submits
    • Explain the field format that will be used to evaluate the entry
      • think passwords, which might have to be in certain configuration
    • For best practice, use an icon to allow user to bring up helper tip if they want
    • Use as few words as possible for the helper text
  • Always use Correct Input Type- We have access to many different input fields, so its important to choose the right one for the situation.
    • if a user must choose a single option from a list, use radio buttons
      • if there are more than 4 elements in your list, use a select box
    • if a user can choose multiple selections, use checkboxes
  • Always use Correct Input Length – When dealing with text boxes, we want the length to be informed by our expected data returns.  We talked about this before, don’t make the zip code box the same length as the address, the zip code will always be shorter.
    • Give users enough space to write clearly and read what they write.  Avoid tall and narrow text fields and super-wide but short text fields.
      • best practices state the text box should be about 50 or 60 characters wide and ten lines tall.
  • Provide Clear Labels for Each Field – The labels should communicate clearly what the field is for and how it will be used
    • Don’t put the labels inside the fields as placeholders because people might forget what data they are entering into the field
    • Use a maximum of two words per label
    • Put labels above field elements
      • if labels are to the left, vertical space is decreased but form completion time explodes
    • Always make which fields are required and which aren’t
      • use an asterisk next to the label with a tooltip explaining required fields at the bottom of the form
  • Clearly Describe Expected Input Format – When necessary, explain the format of data you expect when the user submits the field.
    • Do with tooltips
    • Only use with fields that require special formatting (date / phone number)
  • Giving Feedback – Used to tell user when they made a mistake or completed a milestone
    • Display the error message but also guide the user on how to fix the error
      • if empty field, then highlight field to let them know that it needs data
    • You can also offer feedback as the user enters information
      • use checkboxes to show when a piece of data is entered correctly
  • Mobile Form Design – Mobile devices have smaller screens, so we must plan accordingly
    • Ensure font size is atleast 14px and no smaller
    • Ensure fields are tall enough to allow for easy user focus (Apple recommends between 32px and 44px height)
  • Don’t Ask for Necessary Info – Nobody likes completing forms, so only ask for the information you need at that time.  Each additional question is noise and our goal is to reduce noise to boost conversion rates.