User friendly form design

Posted Over 12 years ago. Visible to the public. Draft.

There are two types of forms: User forms, e.g. for sign up, and Administration forms, to maintain data. They are quite different in purpose: The former must be simple and quick to fill in, whereas the latter should organize a lot of data in a reasonable way.

Guidelines

  • Simple is win.
  • Align forms vertically, one element below the other.
  • Never explain your form. If it is too complicated, redesign.
  • Skimp on lines and boxes. If you need them, something is wrong with your form.

A form element needs

  • Label. Above the field is faster, next to its right gives more overview
  • Field
  • Hint, only when useful, e.g. "may be a pseudonym"
  • Error message, e.g. "must not be blank"
  • Clear mark-up if it's a compulsory field.
    • Don't use asterisks
    • Label non-mandatory fields in grey
    • Have mandatory fields framed in a color

Structure

  • Highlight important elements, e.g. have a prominent Save or Sign Up button (using color, bold text, ...)
  • Fade out less important elements, e.g. present form hints in grey
  • For administration forms, you may split wide screens into two parts
  • Give Headings for parts of the form. This will help people to deal with them.

For your inspiration

Dominik Schöler
makandra.de
Say thanks1
Last edit
About 11 years ago
License
Source code in this card is licensed under the MIT License.

Related cards:

A collection of useful design resources for developers

This collection contains some useful design resources for developers. Many of them were mentioned in the Refactoring UI tutorials.

Tutorials

Web forms design guidelines: an eyetracking study | cxpartners

cxpartners has an interesting eye tracking study on form design. They distill the results into a few simple guidelines which are definitely worth keeping in mind when designing forms.

How to not die with ActionView::MissingTemplate when clients request weird formats

When HTTP clients make an request they can define which response formats they can process. They do it by adding a header to the HTTP request like this:

Accept: application/json

This means the client will only understand JSON respon...

Use form_for without the enclosing form tag

In rare cases you might need something like form_for (for using form builder methods on the resulting block element) but without the surrounding form. One such case would be upda...

Remove resource fork files from a FAT volume on MacOS

Be careful!
The following solution will delete files on a volume. If you don't know exactly what you're doing, you can run into big trouble with your computer.

I play mp3 files on my car stereo that are stored on a SD-C...

Always show all form errors during development

You've been there: A form cannot be submitted, but you don't see a validation error because the field at fault has no corresponding input field on the form. Because this is usually a bug, you insert debug information listing all errors into the fo...

Devise: How to allow only HTTP Basic Auth and disable the HTML sign-in form

By default, Devise redirects to a sign-in form when accessing a route that requires authentication. If for some reason you do not want this, but use Basic Authentication (and the corresponding browser username/password dialog) instead, this is a s...

Use <input type="number"> for numeric form fields

Any form fields where users enter numbers should be an <input type="number">.

Numeric inputs have several benefits over <input type="text">:

  • On mobile or tablet devices, number fields show a special virtual keyboard that shows mostly digit...

Rails: Assigning associations via HTML forms

Let's say we have posts with an attribute title that is mandatory.

Our example feature request is to tag these posts with a limited number of tags. The following chapters explain different approaches in Rails, how you can assign such a...

How to build the perfect number of blank records for a nested form

When you render a nested form for a Movie which has_many :actors, you want to render the right number of blank Actor forms. The right number means:

  • A minimum number of blank forms so the user can add more Actors to an existing Movie, ...
Posted by Dominik Schöler to makandra dev (2011-11-29 09:53)
This website uses short-lived cookies to improve usability.
or learn more