10 tips for online form design

The use of mobiles is continuing to grow, yet we still see a significant amount of online forms and applications that still make it hard for users to quickly and easily complete forms. Let’s face it, no-one really enjoys filling out an online form, so here a few tips to help reduce errors and increase form efficiency.

1. Inline Validation – Provides real time feedback as users enter data on individual form fields. Once focus is removed from each field a notification, generally a small green check mark next to the field is displayed.

Mint  Inline Validation

 

 

 

 

 

 

2. Specify Input type By specifying input type you restrict input to only the required input format. For e.g. if a phone number is required ensure the numerical keypad shows when numerical form field is activated. To further reduce errors introduce input masks to automatically dismiss any non-numerical input such as a dash, space or full-stop. Make sure the numerical keypad remains active when a user moves between phone number inputs such as area code to main number entry.

Presentation1      imgres

3. Feedback Some stages on forms take time to process such as calculations, uploads or submissions. Be sure to provide system feedback to the user when actions are being processed. Disable the submit once it has been clicked to avoid multiple form
submissions.

Processing

 

 

 

 

4. Increase size and vertically align labels Mobile screen sizes are small enough as it is. Consideration needs to be given to the context in which they are used. The size of form fields should be maximised to screen width and kept in a vertical format. By keeping fields vertical you reduce the fixation rate and keep users working in one visual direction.

Top-aligned-mobile-labels

5. Stop password masking Let’s stop making it harder by showing bullet points when entering passwords. Whilst security concerns have been raised in the past, I’d prefer optimum usability over the minimal security risks, if any. Alternatively, include the option for users to hide password by tapping on a show/hide icon.

hidepass4   show-hide-password

6. Don’t use Inline Labels Labels placed inside form fields (inline labels) are widespread and often used in mobile design. Inline labels have a place, but be careful where and when they are used. An exception can be for a sign-in form, where a user is performing a familiar task such as username or email address. If the information required is unique or performed infrequently, place labels above each form field so users can identify required information easily.

in field labels

 

 

 

 

 

 

 

7. Language Keep it simple and remove the jargon. Consider first time users to your product or service by using succinct informative language. Remember your users might not necessarily be using the same language as internal business and marketing teams.

8. Error Messaging If errors are made, ensure users knows where on the form the error is and how to fix it. Inline validation error messaging can also increase form efficiency letting users know an error is made immediately. Increase accessibility by including an icon (e.g. ‘x’ or ‘!’) as well as red visual elements. This way you’re not dependant on colour in perceiving errors.

Mint  Error Field

 

 

 

 

9. Reduce requirements Try and minimise the required fields within any form or application. Consider what fields are absolutely necessary and remove the rest. Another way of reducing input for users is to use default information where possible. Information often used such as email addresses and the current date could be selected by default thus giving users one less task to complete.

10. Time and Place Form field requirements also have a time and place, and the placement of requirements can have a significant impact on form completion. Through research sessions conducted in the Objective Digital lab we have seen frustration from users when personal information such as email addresses and phone numbers are being asked for much too early in a form process, resulting in users hesitating and often not continuing with the form process. The thought of marketing or sales teams contacting customers who are simply retrieving quotes or inquiring about services can cause users to hesitate and often exit the process.

Myles Clemones
UX Consultant

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