Booklet

author

Fullstack HQ

Design

How to Design Forms for a Better User Experience

design

Design

|

How to Design Forms for a Better User Experience

  • Try to avoid using multi-column layouts so that user can quickly navigate in the form.
  • CHOOSE THE RIGHT INPUT ELEMENTS
    If you have less than 5 options for user to scan option easily and quickly.
    Text fields are the preferred input when the user knows the input from memory or are following a set format e.g. birth date , credit card expiration date.
  • Group related information to each other that will allow users to think what values to enter faster.
  • Use descriptive call-to-action buttons so that user will know what's going to happen next. Keep the copy to 3 words... don't just add the 'action', add the 'context' as well.
  • For validation messages, have good placement and descriptive info for users to understand what is wrong.
  • Differentiate primary from secondary actions.
    There are three types of action buttons:
    1. Positive — Changes, sends, or adds information
    2. Neutral — Makes no change or takes users back a screen (e.g. Cancel)
    3. Negative — Deletes, resets or blocks information
  • - Marking required fields makes users skip optional fields if you wanted to get as many data as possible.
    - The red asterisks make users more fearful.
    - There are always more fields required than optional.
    Less visual noise on your form makes it more readable and faster to complete.

More booklets by Fullstack HQ

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets