Ultimate Guide to Online Forms

Love Your Online Form 1
Ultimate
Guide
to Online Form Design.

TABLE OF CONTENT S
03 Introduction
05 Validation design is critical
10 Affordance is everything
14 Make it mobile
18 User experience
24 An integrated approach
30 Track your form
35 Conclusion

INTRODUCTION
Online Forms
A Business Game Changer?
It’s a subject that’s bound to fall into the same excitement category as tax and
insurance however a simple well designed online form can revolutionise your
business - who’d have thought? Forms can be a crucial point of connection and
engagement with your customers, and influence your ability to efficiently process
and respond to them.
In competitive markets where you're trying to establish your point of difference and
grow your business, a thoughtfully designed form presents an enormous
opportunity to distinguish your organisation from the competition and gives you the
ability to scale. There's a bit of an art to designing and building a good form and in
this guide we'll draw your attention to some of the aspects that have a big impact
and stop customers pulling their hair out in frustration.
“It’s changed what used to be a lot of paper based systems to
automated systems which has really improved our bottom line.
We’re getting more accurate data but also it’s the ease of use.
It’s hard to get someone to donate to you and if you make it
difficult for them you lose people. Whereas if you’ve got
someone willing to donate and it’s really easy you’re winning,
which is helping us financially, massively.
– AU STRA LIAN FELLOWSHIP O F
E VAN GELICAL STUDENT S

From complex order forms in the print industry, to fully integrated certiﬁcation
applications and everything in between. We have ﬁrst-hand experience of how a
good form can change the life of you, the business owner, the staff that work for you
and even more importantly your customers and users.
If your organisation has a form somewhere at the core of your customer
engagement – a product order form or an extensive application form then read on,
because when you get these things right you can expect customer satisfaction,
employee happiness and productivity levels to skyrocket.
Julie Ryan
Managing Director
julie@customd.com | +64 21 605 177 
““The introduction of an online application screening and
approval system has saved our application review team
hundreds of hours of time and made their collaboration on
candidate assessment so much easier. The CustomD software
was a game changer for us.”
– IN SPIRE FOUNDATION

VALIDATION
Validation Design
Is Critical 

Validation Design Is
Critical
Validation is the process that checks whether what you’ve entered into a form is
correct and displays the appropriate feedback.
It's often overlooked because it’s not immediately visible on the page, yet poorly
designed validation is a major cause of frustration for users and at its worst will lead
to complete abandonment of your form.
On the flip-side, well designed validation that includes positive feedback when fields
are entered correctly guides and gives confidence to the user. 

Validate as you go
How many times have you worked diligently through a form only to be told at the
very end when you submit that there were errors. You are then left with the task of
going back through the form to amend them – painful? We've all been there.
As research shows, it is best practice to validate form fields as they are entered and
show immediate feedback to the user, so they can make corrections while still in
context.
Be clear
If a specific format is required and the user has made a mistake, ensure the
validation messages tell them exactly what is expected, not just "there was an
error". Examples are: a requirement for set number of digits in the case of a credit
card number, or a specific prefix for local phone numbers.

Keep it close
Validation messages need to be in close proximity to the fields they relate to.
Highlighting the field in the same colour or style as the validation message is a
further visual clue. Make it immediately obvious so users don't need to join the dots.
Use Positive feedback
Positive confirmation messages when fields are entered correctly assures users
that things are going smoothly and offers a small sense of achievement.
 
Just be careful not to overdo it. These messages shouldn't detract too much from
the ultimate goal of completing the form.

Consider helpers
Remove the burden altogether from users by using helpers like date pickers, and
address lookup ﬁelds. This not only makes it easier and faster for the user to enter
but it also ensures the data is validated at the same time.
 
Forms are designed to be interacted with, not just looked at. And a key part of that
interaction is ensuring what has been entered is correct and valid. Therefore it's a
good idea to plan for validation and work it into your designs right from the
beginning.

AFFORDANCE
Affordance Is
Everything 

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 ﬁelds 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 ﬁelds for better affordance pays off every time a user engages with
your form, because their experience will feel just that little bit more effortless.

MOBILE OPTIMIZATION
Make It Mobile 

Make It Mobile
Poorly optimised forms can be a real pain
for users to fill in from their mobile devices.
It doesn't help matters that internet
connections are often unreliable and the
effort and frustration involved in entering
data is higher. Yet none of this stops people
from using forms on their mobile.
Studies show that people using mobile
devices are more focused on completing
set tasks (e.g. ordering a product, paying a
bill, or finding a specific piece of information) than those on desktop computers. If
the task in question involves a form, then they are going to use it even if it's not
been optimised for mobile. You can make things much easier for them by following
some simple guidelines below.

Adjust the layout
A typical mobile screen is much smaller than a computer screen, so the first
question should be: does everything on the page need to be there for mobile?
Consider removing large graphic elements and non-important information,
remembering that the user is focused on the goal of filling out this form. Anything
not helping that is a distraction.

By using "responsive" design techniques, it's possible to design a form that adjusts
its layout on-the-fly and reshuffles and hides elements that aren't needed. The
layout "responds" appropriately to whatever device it's being viewed on.
Responsive design is considered the best practice for mobile optimisation by
Google.
Add focus
It’s easy to get lost in a form when there are
multiple fields to fill in, so make it clear which
field currently has focus. This can be done
through visual highlights.
The current field along with any visual cues or
notes should always be visible and in focus.
Minimise input required
Reduce the amount of data people need to enter. Let's face it: it's a pain typing and
people just want to get to the end of your form. The more you can cut back on what
they have to enter, the higher your form completion rate will be.
Do you really need their name and title, or just their name? Perhaps you don't need
to capture everything upfront – you can always ask for more later. Only ask for the
information that's critical to completing the process in question.
51% of searchers are more likely
to purchase from a mobile
optimised website
– QUICKSPROUT

Pre-fill where possible
Pre-ﬁlling any saved details is always appreciated if the user has an account.
You can also take advantage of modern phone technology, such as the inbuilt
camera to capture input like credit cards, or the GPS to automatically detect their
location.
Keep it simple
People accessing websites from their mobile device are often out of their usual
environment, with a higher number of distractions going on around them. Think
about the number of people using their phone on the bus, or those waiting for their
partner to try on a piece of clothing.
The simpler and more focused your form can be, the faster people will be able to
get through it and higher your completion rate will be. 

UX
User Experience 

User Experience
Websites have become more and more complex as technologies continually
advance. What began as simple groups of webpages have evolved into rich and
interactive experiences.
Online forms are a crucial part of this experience, because they're often the place
where the most complex interactions happen.
Just imagine if customers said that using your form was enjoyable – that it guided
them through the process and felt rewarding at the end. That kind of positive user
experience doesn't happen by accident or by plug 'n' play, it happens by careful
design and implementation.
User experience
design is a balance of
many different factors
that come together to
effect how someone
feels when they use
your website or
application.

Why should you care about UX? If a customer has a negative experience using
your form, it undermines your brand and lowers conversions which negatively
impacts the bottom line.
Usability
The term 'usability' is often used interchangeably with UX, but usability is actually
just one of the factors contributing to the overall user experience. Depending on
your customers' context and objectives, usability may be prioritised ﬁrst or it might
take a back seat.
 
The route on the left is easy-to-use and efﬁcient - it will get you there faster but you
probably won't bother taking any photos along the way. Usability is prioritised above
all else.
The route on the right will take longer, but with beautiful scenery and a winding
road, it's going to be more enjoyable for many (unless you get car sick). Here
usability is downplayed in favour of enjoyment, excitement and a more memorable
journey.

Audience and Context
Who is going to be using the form?
It's important to know your audience
before designing a form, as different
demographics will have different priorities,
needs, and preferences.
A young computer gamer entering a
competition might enjoy quirks and
challenges that others ﬁnd annoying. In
the context of entering a competition,
certain challenges built into the form
may help build a mini sense of
achievement and exclusiveness.
 
At the other end of the spectrum, a
senior citizen who simply wants to
pay their parking ﬁne online wants
as little fuss as possible. They may
not be tech-savvy and don't want to
be burdened with having to decipher
complex form controls and inputs.
Usability is more important here. 

Desirability
All forms are there to facilitate a certain process, whether that process is to submit
an application, make a payment, enter a competition, or complete a review. It may
be a desirable process or it may be undesirable but mandatory.
Where your process sits on this scale should help determine how to approach the
design.
Usability and efficiency are key for an undesirable process: just let them get in and
out without causing headaches. That could mean making a payment form really
easy, or pre-filling some of their information for them if possible. For instance if they
enter a parking fine infringement number, all other details including the total should
be preloaded.
For the more desirable process, it might be a case of building the excitement, by
emphasising the benefits and adding playful elements. In this case perhaps the
form lets them know the sportscar they could win goes from 0-100km in the time its
taken them to enter their first name.
88% of online consumers are
less likely to return to a site
after a bad experience.
– G OMEZ
Why Web Per formance mat ters

Test with Real Users
There’s nothing like watching a group of customers in person interact with your site
to give you some cold, hard, instant feedback on UX.
Success or failure depends on how your users interact with the form, so don't wait
until you've launched to ﬁnd out. Get real users involved early in the process with
prototypes for feedback. Then you can be assured that when you do launch it to the
world it's already been road-tested with your target audience.
User Experience is Worth It
Spending the time to craft a good user experience upfront will pay back every time
a customer interacts with your form. And the quality of that experience is a direct
reﬂection of your product or service, so it’s well worth the effort.

INTEGR ATION
An integrated
approach 

An integrated approach
Simply put: an integration connects one system with another system so their data
and features can be shared. Improving workflows with a 'simple' integration can
have a huge impact on your business, lowering overheads, reducing repetitive
admin and giving your company the ability to scale. 
In today's digital world, integration is the glue that connects different apps and
services together. If it weren't for integration, many modern-day online platforms
and products wouldn't exist. 
The ongoing opportunities for integrations to transform the way we do business are
massive. Whether it be to increase efficiency or offer added value to customers,
most businesses could benefit from a little more integration.

Examples
Let's look at a couple of simple examples:
1. Purchasing and paying for something online:
The payment form sends the customer's credit card details off to the bank via a
secure integration. This goes on behind the scenes, so to the customer it's
completely seamless because they never leave the storefront.
2. Completing a credit check as part of a loan application: 

Traditionally when applying for a loan, the lender would complete a credit check
after the application form is handed in.
Integrating the application form with an online credit bureau makes this approve-or-
decline process instantaneous. The form simply passes the data that has been
entered by the customer off to the credit bureau in a mutually agreed format and the
bureau passes back its score.
Why Integrate?
Improved Workflows: by combining multiple processes into one, you cut down the
overhead involved in switching between different tools or services.
Automation and Efficiency: repetitive data entry is eliminated when data can be
sent automatically from one system to another. This frees up huge amounts of staff
time to be better spent on activities that improve your business
Competitive Advantage: integrating with other services in new ways may give you
a completely new product offering and create a point of difference. One well-known
example is Xero, which was one of the first accounting products online to
automatically pull in transactions from your bank accounts.
Better Experience: if there's something you're asking customers to do which you
can do by way of integration, then do it and save them the hassle. Perhaps there's
extra information you can pull in from an external service to help make their
process easier? For instance offering a “signup with Facebook” integration will short
cut the standard registration process by pulling in name, email and other details
from the user’s Facebook account.
How Does this Apply to Forms?
Forms offer countless opportunities for integration that will add value and improve
the overall experience. Here's just a few:
Shipping: Integrate with courier companies to offer real-time pricing right there on
an order form.

ID Verification: Use ID verification services so that during your form process, you
can verify the user in real time.
Map and GPS: Connecting to map services such as Google Maps and detecting
the user location is a great way of working with location based input.
Address Input: Integration with address suppliers means that you can pre-fill
addresses when the user starts typing, and validate it at the same time.
Social Media Integration: Giving users the option to connect their social media
accounts can make sign-up processes easier for them and give you a stronger link
to them as a customer.
SMS Integration: By connecting with SMS message gateway services, you could
verify that a phone number entered on a form is real and belongs to the person
filling in the form. 
 
Integration is Everywhere
As more apps and services offer the potential for integration, opportunities are there
to leverage them for customer-facing and internal business systems. And forms are
at the heart of both.
Many opportunities are still untapped. The limiting factor is often the lack of expert
skills required for implementation. However investing in an integration can pay off
when it increases efficiency, improves user experience, and brings a competitive
advantage. 

TR ACKING
Track your form 

Track your
form
Tracking how people use your form is
often an afterthought, but without tracking
in place how will you know if it’s really
hitting the mark after it’s launched?
To measure long-term success, you need to set clear objectives and track user
interactions.
The amount of data you can capture these days is almost overwhelming. So it’s
important to customise tracking to your business and website processes in order to
be meaningful.
Luckily web technology offers a raft of customisable tracking methods. They just
need some thoughtful planning to get the most from them.
Set Clear Objectives
First things ﬁrst. What is the purpose of your form in a business sense? This needs
to be understood by everyone and then distilled into clear online objectives.

It seems obvious, but getting concrete clarity on what you’re setting out to achieve
will guide decisions and keep everyone focused on the end game.
With digital technology, it’s easy to get distracted by what could be done, but if it’s
not contributing to the objectives then why do it?
Make Them Measurable
Making objectives measurable keeps things honest and on-track. If there’s a
reluctance to set targets because you might fall short, ask yourself what’s better: to
fail early and improve fast, or sit with something oblivious to how it’s performing?
The latter is the state of many forms today.
Start with a realistic target that you can measure. Even a ballpark is better than not
having one.
Examples of clear and measurable objectives for forms:
▪ Generate 20 enquiries every month
▪ Keep checkout time under 3 minutes for 90%+ of customers
▪ Get 5 new signups to the newsletter each week
These objectives would typically be aligned with higher-level business goals (e.g.
increase revenue, or improve efﬁciency).

What can you track?
Out of the box, most tracking tools will tell you what pages on the website users are
visiting, how they arrived, and some other basic stats. This standard tracking won’t
show you the interactions unique to your form, yet that’s where the real insights
come.
With a bit of custom setup, it’s possible to lift the lid on exactly what’s happening.
Here are just a few examples:
Validation errors encountered
Track the number of validation errors people are encountering when using the form.
If these are high, your design may be confusing in places.
Time spent on each step 
How long are people spending to complete the form? Too much time might indicate
that people are getting stuck. Tracking time spent on each individual step would
help to identify exactly where that’s happening.
Submissions 
Quite often, standard tracking does not record the action of submitting the form.
Putting in place tracking for this is essential given it’s usually the ultimate goal.
“
“If you can’t measure it,
you can’t improve it.”
– PET ER D RUCKER

Example: ABC Rental Cars
ABC want to boost annual revenue by
$200k and they’ve identiﬁed the
quickest way to get there is by
increasing the number of repeat
customers. Feedback from customers
told them the form is confusing and
causes too many validation errors.
So ABC have worked out if they can
redesign the form to be simpler, they’ll be able to keep more of the customers and
should hit that $200k target easily.
Business goals 
Increase repeat rentals and improve customer satisfaction
A measurable objective: 
Reduce the incidence of validation errors by 75% when ﬁlling in the rental form
What to track: 
The number of validation errors encountered per user during the form process
Review and Refine
Based on the tracking data that comes in, it’s a process of continual review and
improvement.
Forms are usually there to complete a goal. So
be clear what that is, make sure you can
measure it, and get those tracking measures in
place before it’s launched to the world. 

CONCLU SION
Congratulations!
If you’ve read this far you will now have all the tools you need to make sure your
online form is optimised to be a user friendly journey that your customers can
complete hassle free.
Your form is a direct representation of your brand - so make sure you’re making the
right impression.
Don’t forget to track your form so you can see the results any changes you make
have on submission rates. Here’s some tools we recommend;
• Google Analytics in the most commonly used software for tracking
https://analytics.google.com
• To see actual screen recordings of sessions - watch how users interact with
your website
https://www.fullstory.com/
• An alternative to Google Analytics which is more focused around tracking
the customer
https://www.kissmetrics.com/
https://blog.kissmetrics.com/google-analytics-and-kissmetrics/

About Custom D
Custom D develop custom web-based software that let’s your business run, not walk.
Custom developed websites and applications tailored to the unique circumstances of
your organisation can transform your business - boosting efﬁciency, improving
workﬂows and giving you the ability grow and scale.
Unlock your businesses potential. Get In touch today
customd.com

Ultimate Guide to Online Forms

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (16)

Semelhante a Ultimate Guide to Online Forms

Semelhante a Ultimate Guide to Online Forms (20)

Último

Último (20)

Ultimate Guide to Online Forms