Skip to content

Latest commit

 

History

History
32 lines (22 loc) · 2.51 KB

organize-with-fields-and-labels.md

File metadata and controls

32 lines (22 loc) · 2.51 KB

Organize with fields and labels

It’s important to have clear fields and labels to make your form easy to comprehend and complete.

  • Always try to reduce the amount of fields in your form.
  • Remove fields which collect information that can be:
    • gathered a different way
    • gathered later at a more convenient time for the resident
    • omitted altogether
  • Radio buttons, checkboxes, short answer, there are plenty of field options. Think through which is the best for the question and will make it the easiest and fastest way for residents to complete the form.
  • Keep the field lengths consistent with the type information that will go in the field. So, an address field should be longer than a zip code field.

Payporte’s input fields, image source: https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2

  • Use conditionals to hide information that isn’t relevant to the resident.

Show/hide function on a form, image source: http://www.techtipntrick.com/showhide-form-elements-radio-button-selection/

  • Avoid optional fields, but if you must have them consider the following:
    • If most of the fields are required, then indicate the fields that are optional.
    • If most of the fields are optional, then indicate the fields that are required.
    • Use “(Required)” or “(Optional)” rather than using an asterisk (*).
  • Make sure your labels are clear and concise.
  • Organize your form into logical groups to make it scannable and easy.
  • Have your fields just run vertically. Do not try to align them horizontally.

image source: https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2 A truncated view of hotels.ng’s checkout page showing proper grouping of related fields

  • Top-align your labels to make them easy to read.

image source: https://www.flickr.com/photos/rosenfeldmedia/2367264712