Creating good form (s)

Forms are an important part of the conversations we have with our customers

Web forms may not be the sexist thing to talk about in UX but they sure are important. They are a medium through which our customers can tell us what they want to do online; be that to register, order, sign up to something or simply provide feedback.

Done well, forms give customers a sense of control and allow them to get stuff done online.  Well designed forms enhance customer trust and brand reputation.  Done badly, the opposite is true and ill thought-out forms are a sure fire way to annoy customers and increase their general dislike in a brand.

Recently I was part of a team at work who presented a session on ‘Beautiful, useful and accessible forms’ and below i highlight some of the key take-aways.

Making forms useful, accessible and beautiful, what is good form?

  • Consider when in the journey is the right time and place to introduce the form. Too soon will annoy your customers and too late, you will miss the opportunity.  Consider Jared Spool’s button million dollar button example.
  • Give users an immediate general overview of what is involved in the form. For short forms provide a clear scan line start to finish. An example of what people look at when filling in a simple web form.

    form - eye-track
    eye-tracking of form
  • For longer more complex forms break into into bite sized, clearly labelled chunks and give an overview of steps involved. And provide a progress indicator, we humans like to know where we are in the process and how far it is to the finish.
  • Often there is an asterisk (*) to denote that the field is required. Is this necessary? To encourage completion rates, only include questions in form that are absolutely necessary.
  • If passwords need to be complex provide guidance and examples.   Allow the unmask option, especially on mobile.
  • Good recovery from errors is a basic Interaction Design principle.  To achieve this, we need to ensure error message are timely (appear when we make error), are in context and are useful .i.e. they tell us how to  resolve the issue.
  • People don’t like filling out forms on mobile but it is becoming more common.  Make it easier for the user by providing the correct  HTML5 mobile input types.  If the user needs to enter an email address ensure @ is available.
  • Placeholder text can provide help on what data you expect from users and in what format (e.g. dd/mm/yyyy) but beware that this can get lost once the user starts typing.
  • In terms of accessibility, placeholders should not be used as an alternative to a label.  All form inputs should have a label, which must be associated with the form input and  these labels must be positioned near to form fields.

For those that don’t use a mouse to navigate, the form and all form elements must be operable via the keyboard, and not rely on hover state.

Accessiblity
Should not rely on hover state

Further Resources and reading on forms:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s