Love your online form - 2. affordance is everything

Just like the design of a door handle suggests the way that door should be opened, the design of form fields suggests the type of input they require. This is known as "Affordance" and it's crucial to good UX and usability.

Granted, there’s usually a label next to each field, but users should be able to quickly scan a form visually and get a rough idea of what they need to enter. If all fields look the same and there are no visual cues, it makes this difficult and mistakes more likely by confusing one box for another.

Field size

The size of an input field suggests the amount of data required. So for example an age field should be much shorter than email address. Yet we often see forms where all fields are the same length.

Left vs Right: when all fields are an arbitrary length, there's no visual clue as to what's expected.

Field Style

The style of an input field can also be a help or a hinderance. Have you ever entered a date only then to receive an error about the format being incorrect?

If a certain format is required i.e. DD/MM/YY, then that should be implied visually. Alternatively use an input helper such as a calendar, or autocompleting field.

Grouping

Grouping of fields that belong together is a simple way of hinting at which bits of data go together logically. It also makes the form less daunting to users.

Though sometimes grouping form fields and adding space between the groups can make your form slightly longer overall, it will feel easier to the user because they've been guided through it by better affordance and visual cues.

Don't make users think

Styling form fields for better affordance pays off every time a user engages with your form, because their experience will feel just that little bit more effortless.


Read more articles in this series;

Online Forms - a business game changer?

Love your online form – 1. validation design is critical

Love your online form – 2. affordance is everything

Love your online form – 3. make it mobile

Love your online form – 4. user experience

Love your online form – 5. integration

Love your online form – 6. tracking

Something to say?

Loading