Form fields - getting the simple things right

Do I need to worry about form fields?

When thinking about your eCommerce or event booking platform, you’ve most likely considered “What information do we need?” & “How should the form look?”. One thing we often come across at Natural Interaction is that little consideration is given to form fields themselves.

This causes issues like making it difficult or impossible for a partially sighted person to complete the form. It could also cause annoyance and frustration thus causing potential customers to abandon the site and look elsewhere.

If you’re an Amazon member you probably don’t even think about the check out process anymore. It’s seamless, your detail are saved and ready to go with a few clicks. You can even enable 1 click ordering which is instant if you are signed in.

Easy to use = Higher conversion

Make it easy - Use the right keyboard (Mobile)

It is so important to minimise friction as much as possible for your customers. It’s no good having a beautifully website which falls over when you are presented with a 3 page form which doesn’t even work.

Think about the last time you filled in a form on your smartphone. One of the first fields you need to complete is your email address. You tap into the field and behold the following keyboard pops up.

The text keyboard on apple iPhone

This is immediate friction. While entering your email address you have to click the ‘123’ to find the ‘@’ and ‘.’ symbols and then click ‘ABC’ to go back.

If I put my email address which is, I will have had to hit the ‘123’ and ‘ABC’ button 6 times! This may seem minor, but it’s frustrating to users. One simple code change and you are presented with the below keyboard instead:

An alternative version of the Apple iPhone keyboard which is easier to use

Hey presto, both ‘@’ and ‘.’ are immediately available! This makes the user experience much slicker.

While the above is annoying, a bugbear of mine is when the alphabet keyboard is presented for a phone number. Come on people, this is straightforward stuff. Stop and think about what you are asking from your user, a phone number would call for the below:

Alphabet keyboard alongside numbers on a typical phone UI

Come on, leave it out (of the field that is)

Another popular (yet misguided) design decision is to put the field label in the field itself. You know the one - as soon as you click into the field, the field title disappears.

This can cause difficulties for anyone, not just those with disabilities. Users forget / miss what field they are completing and the only way to find out is to remove what's written and click away.

The best practise is to put the field label above the field itself. This matches the natural reading pattern of your user so they will be able to complete the form faster.

Some put the hints/tips in the field instead, while not best practice this is better than the below...

A typical form field on a website showing areas for your name, email, subject and comment
This is a no from me...

The first screen you see when creating an account on Amazon
This is much better.

Focus! Autofocus on Desktop

Autofocusing a field gives the users a starting point to begin to fill out the form. You should provide a clear visual ‘notification’ that the focus has moved there . It can change colour, fade in a box, a visible flashing text indicator etc.

Labels are not help texts

Keep your form labels short and succinct. If you include extra words in the label it will slow down completion rates when they are unnecessary.

You don’t need put “My name is (first and last)” or “Please enter your date of birth here”. People are going to understand “Name”, “Date of birth” and “Email”.

Sentence case vs Title Case

Sentence case is easier to read so First name is better than First Name. You should never use ALL CAPS as this makes your form more difficult to read and will then take longer to complete.

Do you need to know everything?

Everyone dislikes completing forms. From large paper forms for your tax return to an online form to register for a shopping website. They key is keep it simple and ask for only what you need. Someone is less likely to be put off completing a form asking for this...

- Full name

- Email

- Password

Compared to being asked for this...

- First name

- Last name

- Date of birth

- Email

- Phone number

- Mobile number

- Address

- Password

In conclusion

People can be hesitant to fill out forms as it is. You need to make the process as straightforward as possible so they don’t feel overwhelmed. Minor amends like grouping fields together and only asking for information you need. Carry out usability testing on your form, often a few tests can pick out issues that you may have missed.

Consider your users, people will want to fill out a form on their phone. Make it easy for them to do so, check what keyboard is needed for each field and don’t use the default.

Looking for UX services but not sure where to start?

Download it free

We've created a free guide to buying UX services. Quickly get up to speed with the tools, techniques and terminology used on digital product design and research projects.