Given that the completion of forms are often the end goal for many online conversion processes it’s surprising how badly many sites still present them. Following is a checklist of commonly understood but often omitted techniques to improve form performance and overall usability

1. © 2015 Zuni | All Rights Reserved | Confidential
4 Ways to Increase Survey
Sign-up’s and Improve Online
Form Performance

2. © 2015 Zuni | All Rights Reserved | Confidential
• Given that the completion of forms are often the end goal for many
online conversion processes it’s surprising how badly many sites still
present them
• Following is a checklist of commonly understood but often omitted
techniques to improve form performance and overall usability

3. © 2015 Zuni | All Rights Reserved | Confidential
#1.
Are you using in-line validation?

4. © 2015 Zuni | All Rights Reserved | Confidential
• One of the most frustrating aspects users have with forms is the validation
process
• The typical default method of validation tends to occur server side (on the
server housing the website) rather than the browser itself. Ie: the user is taken
back to the form page after they click submit and displayed the list of missing
information and/or incorrect data they have added = really annoying and is
arguably the biggest cause for user attrition through the form process.
• With fairly basic use of client side scripting (at the users’ browser) most, if not
all, validation can take place as the user inputs their data. This is called
“inline validation”.
When a user, for example, fills in their first name (assuming this is mandatory) the
script will recognize that this field has been completed instantly and show a green
tick to indicate that this part of the form is complete. √

5. © 2015 Zuni | All Rights Reserved | Confidential
Example of in-line form validation:

6. © 2015 Zuni | All Rights Reserved | Confidential
• Checking data formatting – emails, credit card numbers and phone numbers can be checked for
correct format ensuring that users haven’t, for example, left out the “@” symbol or “.com” in their
email addresses, left out numerals in their credit card number or omitted their area codes in phone
numbers.
• Checking field completion – mandatory fields can be identified as being completed immediately.
This can be further augmented with progress indicators that show the number of fields a user needs
to complete as opposed to the typical pages of form fields left in a process.
• Cross referencing existing data – It’s relatively easy to check if someone is trying to setup an
account with an email address or username that already exists or replicates/conflicts with any data
already existing on your database.
More examples of in-line validation techniques that can
be used while the user is completing a web form:

7. © 2015 Zuni | All Rights Reserved | Confidential
#2
Are you pre-formatting fields where
possible?

8. © 2015 Zuni | All Rights Reserved | Confidential
• The ability to type is often taken for granted by those that can! For those that can’t
type, seeing a page full of empty text fields to fill out can appear daunting to say the
least! By using as many checkboxes, radio buttons and drop downs as possible, filling in
large forms presents more as a clicking exercise than a typing one.
• An additional benefit to using check boxes, drop downs etc. is that all the data that’s
being passed to you is preformatted. This makes sorting and analysis of data
significantly easier as you don’t need to re-interpret what users have typed into open
text fields. If, for example, you ask people what their interests are and one of your
internal categories is sport – how many ways can users identify that they like sport:
“Rugby”, “Netball”, “Running”, “Rock climbing”, “Kung-foo” etc…

9. © 2015 Zuni | All Rights Reserved | Confidential
• Phone numbers are notorious for format errors; is the area code included or not,
what about the country code, will the numbers include or exclude spaces?
By using separate text areas for each of these requirements you can ensure they are
all completed correctly. You can also setup each text area to only allow a specific
number of characters to be input and even disallow spaces and letter characters to be
input. Not only does this help you to standardize data collected it also makes it
visually clear to users what their input expectations are
Image via http://ux.stackexchange.com

10. © 2015 Zuni | All Rights Reserved | Confidential
#3
Are you using users’ data to pre-
populate fields?

11. © 2015 Zuni | All Rights Reserved | Confidential
• Addresses are particularly problematic for data normalization (technical term for
standardized format). There are lots of pre-developed tools available to help users
select predefined state, city, suburb and street values or better yet you could ask for
their post code first. This will allow you to then automatically populate what state, city
and list of suburbs they live in
• The number of brands and sites users belong to now can be quite daunting. I often try
to rejoin a site I already have a membership to or an affiliate site that shares the same
user authentication. If this maybe the case with your user group then consider asking
for users email address before anything else. That way you can tell users immediately
(using inline validation) if they already have an account before they carry on to fill any
other data

12. © 2015 Zuni | All Rights Reserved | Confidential
#4
Is your form as small as it can be?

13. © 2015 Zuni | All Rights Reserved | Confidential
• The basic rule of thumb is that there is a direct correlation between the size of a form
and the amount of user attrition in its completion.
• The scale of forms can be measured in a number of ways:
1. The number of fields and quantity of data you are trying to collect.
Often data requirements are determined by committee, and often committees are
full of people who ‘need’ to be involved. This can result in a lot of data
requirements for a single business process. Before finalizing technical
requirements, have a think about what the basic business goals are, and what the
minimum data requirements are to achieve these goals.
2. The area on a page that the form takes.
Often this is measured in “page folds” i.e. how far down users’ need to scroll to
get to the bottom of the form. Excessive scrolling is a pain. It makes it hard for
users’ to assess the amount of work they need to do and can be fiddly on mobile
devises and tablets. Using 2 columns can help reduce the overall vertical space a
form takes up, as can using expandable accordions to house categories of data
e.g. Address details or content/product preferences

14. © 2015 Zuni | All Rights Reserved | Confidential
3. The number of pages the full form requires.
Ideally forms should sit on a single page. If your forms are spread out over a
number of pages you might want to consider using some of the techniques
already discussed to reduce the overall page count. Accordions in particular can
be good at this. For larger forms, it’s not always possible to include all content on
a single page (excessive scrolling is often worst that multiple pages). For these
instances make it clear to the user how long the form is and how far through the
process they are as they complete the form.
Images via http://baymard.com/blog/accordion-and-tab-design

15. © 2015 Zuni | All Rights Reserved | Confidential
It’s not rocket science
• There’s nothing new in any of the techniques, but they’re so often missed out.
And from a development perspective using these techniques doesn’t have to
break the bank.
• All too often the development of forms is left solely to the developer building the
site with maybe some visuals from a designer.
• Good forms don’t just happen, they need to be planned and designed from the
users’ perspective.
• Make sure that you consider the efficiencies of your forms as early as possible in
the design process. Better yet, include some of these techniques in the initial
requirements documentation so your dev team knows exactly what to do and
you don’t have endless rounds of amends.

16. © 2015 Zuni | All Rights Reserved | Confidential
Thankyou
Written by Alan Clark
Digital Strategist at Zuni
www.zuni.com.au