If I ask you, what is one aspect that most clients often overlook while getting a website designed, then chances are “Contact Us” page would rank very highly on that list. Most of the clients as well as web design teams spend most of their creative vision and a bulk of their research time on jazzing up the home and service/product pages of the website.
Now, there is nothing wrong with that. Home Page is the first page that a user will see on the website hence it makes sense to spend maximum resources on ensuring that it is as good as it can be. And the product/service pages are the ultimate destinations of the users. This is why they came to your website – to avail your service; to buy your product.
At ClixLogix, we build websites for a wide variety of clients from top-notch e-commerce giants to celebrity photographers such as John Keatley.
Each kind of website comes with its own set of challenges but the unifying factor in most cases is the fact that the intended user will almost always be filling some kind of form on the website. For an e-commerce website, it could be a product specification form whereas for a local service provider, it could be an enquiry form.
If your web design team is anything like us – services clients from several market verticals and industry niches – then having a sound knowledge of how to maximize conversions using “good” forms will go a long way in helping you further broaden the smile on your clients’ faces and also in answering those difficult “Why doesn’t my website convert?” questions that clients often come asking after you delivered their website 6 months ago.
What Makes A Website Form Bad?
At ClixLogix, we love crafting websites that make jaws drop. The other, perhaps a boring counterpart of our favorite activity, is getting to the “why” of the things. Why isn’t a website converting as it should be? Why are users abandoning the sales funnel like it’s a drowning ship? Why did Rickon Stark not zig zag?
That last why is an article for another day but we did do a solid number on the first two. We took 20 most popular websites in a variety of industry niches from real estate to e-commerce to local service providers.
In the next step, we took a break from our usual work routine and decided to personally test each and every form on all these websites (sorry for the spam guys!). The focus was to experience first-hand what an average user experiences while sending a request using a form on a website. Apart from these websites, we also asked our web design clients for their conversion scores where we had approached contact forms in a unique way.
We found that some contact forms convert more than others irrespective of how the corresponding website looks and what they offer. A unifying theme emerged which suggested that contact forms that take less time, do not ask invasive questions and don’t shift the user’s attention are the most converting.
And in 90% of the cases, the culprit was a select-menu or what average populace refers to as a drop-down menu.
The section below details more on what makes a “bad” website form.
Why Drop-Down Menus Make Conversions Drop Dead
Select Menus, by their very nature, hide information. But they also present the easiest way to list a number of options in a small space.
In our research, we found that what makes select menus bad often stems from their design.
They require an increased attention from the user’s end so as to not mistakenly select a wrong option. They also form a large part of “corrected” information list which means users often end up choosing the unintended option and have to go back to correct their choice.
Moreover, select-menus or drop-down become even more criminal from a UI/UX stand-point when a user is on a mobile device. With touch being the primary input method, drop downs manifold the probability of wrong selections.
They are also not very suitable for options that have longer than usual text fields such as question-based choices etc. These kinds of options often get trimmed on mobile devices as well as on desktops, thus adding to the frustration of users.
User’s Work Flow is Hampered
A majority of the designers tend to create forms which have text fields in which one has to key in the response. However, when a select menu appears, one has to move from the keyboard to the mouse to select an option. This not only slows down the user and the typing flow, it can be rather annoying as well if the form has a number of such select menus.
Users Are Punished Going Through So Many Options
Once the select menu has been selected, one has to go through the options and choose the right one. More often than not they appear as a long list which has been squeezed together in a minimum amount of space. This can be a serious impediment for those with an unsteady hand, as well as ones who have difficulty controlling a mouse.
Maneuvering the Mouse (Too) Nimbly
In order to make a selection, one has to point the mouse at the right option without drifting off it. This necessitates maneuvering the mouse rather dexterously as one can very easily click on the wrong option if one is not slow and steady.
The other reason behind this is that the menu is limited in size and has very little spacing between two options. This again leads to the user clicking on the wrong option.
After the selection has been made, one needs to double-check to ensure that the right option has been selected.
Next one needs to move back from the mouse to the keyboard to prepare oneself for the next field. All this makes it a rather clumsy affair and where interaction is difficult.
Oh My Goodness! – Yes, that’s exactly the reaction of most of the users when they have to go through the ordeal of pointing the mouse at the right option. One needs to understand that it’s a simple form that needs to be filled up and not a shooting competition where one has to aim for the bull’s eye.
Not Everyone Knows What to Do With a Select Menu
The very nature of drop-down menus is such that they tend to hide information. This very information needs to be unpacked and presented to the user in a rather palatable manner which the user can digest in just one glance. Only after this has been ensured will the user make an effort to find the correct response.
Excess Usage of Arrow Keys
Preferences play a big role in filling up forms. For instance, some users prefer using the keyboard instead of the mouse. This makes the experience an even slower one as one has to make use of the arrow keys to scroll through each of the options. This can be rather tiresome when a number of options are involved.
Being Cautions When Flicking the Picker Wheel
If desktop users need to be cautious when maneuvering through a menu, mobile users need to be even more so when going through the list of options in a picker. When users open a select menu on a mobile device, a picker wheel is displayed which looks appealing but the problem is, if one is not careful then they can end up making the wrong selection with just one flick of the wheel. This compels the user to keep fiddling with it repeatedly till the right option is chosen leading to wastage of time and effort.
Another problem with such a menu is that the options which have lengthy texts get truncated and are displayed with an ellipsis sign at the end leaving the user to indulge in a guessing game of what exactly the rest of the text might be. This makes it tough for the user to make an informed decision and many times leads to abandonment of the form altogether. Now having discussed above the points which lead to the abandonment of forms due to the use of the select menu, one can’t help but wonder that are there any alternatives to the select menu? Thankfully, there are…
Worthier Alternatives to the Select Menu
To begin with, one should try and refrain from using the select menus in forms as much as possible. For the ones who thought that there is no other option apart from the select menu, now have a reason to cheer.
Using Radio Buttons
Whenever there happens to be a list with two or more options and in which the user has to select one choice, radio buttons can be used. This ensures that by clicking on a non-selected radio button, any other button which was initially selected from the list automatically gets deselected. Usage of radio buttons is highly desirable instead of cramming the options in a select menu. All of the options remain visible which the user can go through without the need to open the menu. They have more than ample room to click each option and would not be punished if they were to choose a wrong option as happens in a picker wheel.
However, it needs to be understood that radio buttons should be made to look like actual buttons. The buttons should have enough button padding and a clear border around them. Next labels need to be added to the radio buttons. Hover effects also need to be implemented so that the user knows that they can click on the labels in order to toggle the controls. Another option by which the radio buttons can become easily clickable is to place them in a button zone. This again signals the user that they can click to toggle controls.
Lastly, when using radio buttons, the button zone should get highlighted in color to tell the user that it has been selected. This helps in giving the user a better visual feedback when looking at dense areas of radio buttons.
Usage of Text Fields Which Autocomplete
Inhabitants of the United States are always in luck. This is because whenever they have to select the country from a drop down menu, “United States” happens to be there by default. However for people from other countries this can be nothing short of a nightmare as they have to scroll through a list of countries which can be more than 190 in number. The solution to this is simple – using autocomplete text fields.
When there are several options (say a long list of countries) which need to be displayed, then instead of using the select menu which can take up the entire screen, one can opt for autocomplete text fields. An autocomplete text box displays a small collated list of possible suggestions which best matches the input which the user enters. The catch here lies in distinguishing the user’s typed input from the suggested options. The text of the option which matches the text which the user enters should thus be highlighted with a different color contrast. This allows the user to quickly reach the option one desires instead of being compelled to go through the entire list.
An autocomplete textbox thus serves as a very effective replacement for the dropdown menu. It gives users a much better form filling experience and because of which it can serve as an alternative for the select menu.
Giving Users the Room to Type
It is highly imperative to give the users the right field length. For instance, when entering a name just because someone’s name is small, doesn’t mean everyone’s name would be so. Think of someone from Greece or Austria. A minimum of 20 characters need to be provided for the first and the last name fields. Also, for text areas, sufficient room needs to be given to the user to enter as well read the text being entered. The exact values can be ascertained based on the use of the text field but a minimum of 10 lines tall and 50 characters wide needs to be maintained to ensure readability.
Shortening the Forms and Asking Questions Which Matter
If a form is a long one then chances are that the user might reject it with a single glance. As such it is important to ask questions which matter. Thus before entering any field, a web designer needs to ask whether the piece of information which is being collected is indispensable or not. If it something which is not so important then there is no point wasting the user’s time.
The other point is asking whether it is necessary to collect information from user from which ultimately the latter will be restricted access from. This can again help a lot in shortening the length of the form and asking questions which actually matter rather than filling up the form with a long list of questions which are of little or no relevance altogether.
Marking the Fields which are Important
Some fields are extremely important like the name of the shipping address when selling goods. For highlighting fields which are extremely important a number of methods could be used like using bold or italic texts, using asterisk and writing the word “required” in brackets or even dividing the form into two sections – required and optional information. Color coding can also be used to mark the fields which are important. For instance, if a user has left an important field blank then the red color could be used to denote an error.
Forcing Users to Return to an Altered Form
Many times users are forced to return back to the very form which they apparently thought they had filled up to the best of their ability. Here two things need to be understood. Firstly, the user needs to be given the freedom to choose which information he/she would like to divulge. If apart from the basic information, the user is not ready to give out any further info, then he/she should not be compelled to do so.
Sometimes, users are also made to sign up for newsletters and emails of promotions and if the email id is not provided then the user can’t go to the next stage of form filling. Surely this kind of a compulsion or coercion can be avoided. Isn’t it?
The website should be such that users come back to it from time to time for finding out more about the products and services. They should also sign up for the promotional emails of their own accord and out of their own interest.
Users also tend to complain about forms which they are compelled to fill up again due to very trivial typing errors. The question here is should the valuable customer be bothered based on a small typing error? The solution here lies in designing the form in such a manner that the job is done with the bare minimum amount of information and typing on the part of the users, else chances are that the user might refrain from using the website ever again. One needs to understand that the more control the users are given over their experience, the more they will enjoy using the website.
Using Responsive View Menus
Now in order to understand Responsive Menus, one needs to understand what exactly it is. It refers to coding a website in such a manner that it provides the best possible viewing experience, ease of reading and navigation which involves the least amount of panning, resizing and scrolling be it on desktops or on hand-held devices.
A designer when creating a Responsive Design must make sure that that the website’s audio/video players, images, navigation elements, text, screen-layouts and other user interface elements re-adjust themselves according to the device used by the user. This ensures that one does not spend extra money and time in the creation and maintenance of a mobile site and another desktop site for the same website.
Responsive web designs are more fluid compared to any other layout because of which the content moves freely across on any screen no matter what the resolution or the device. The contents of the website just flow out and occupy the screen in just the same way a liquid fills up in the space allotted to it without compromising on the design’s appearance or responsiveness. This proves to be beneficial as this type of a layout caters to the needs of a wide array of individuals as it eliminates the need to scroll or resize irrespective of which device the user is using. It thus enhances SEO efforts by directing all the users to a single website no matter what device they use.
Well that sounds good but does it have any other advantage too?
As a matter of fact, it does and the upper hand lies in the fact that it is preferred by Google. According to Google, a responsive web design is the best industry practice. This is because a website with responsive design has just one URL and consequently the same HTML irrespective of the device which makes it easier for the search giant to better organize and index content. In contract when the same website has a mobile version and a different URL and HTML than the desktop version then Google has to index multiple versions of the same website.
Google also prefers responsive web design because the content and URL of one website are much easier for user to share as compared to the website which has a desktop and a mobile version separately. For example, if a user accessing Facebook from a hand-held device shares any content with a friend who accesses it on a desktop ends up getting a stripped down version of the mobile site on their screen which creates a less optimal user-experience. This is the reason why Google is using user-experience as a factor for ranking websites which needs to be taken into consideration when considering SEO.
Lastly, having separate desktop and mobile websites entails running separate SEO campaigns. It goes beyond a shadow of doubt that managing one SEO campaign and website is easier than managing two.
When Should Select Menu Be a Necessity?
The only situation when a select menu should be used is when the user is expected to answer something specific. For instance, if someone would like to know the sexual orientation of the users. In such a case, if users are not furnished a list of specific options, then they could end up giving answers of a rather vague nature.
Most of the users begin filling up a form but don’t finish them. Until and unless they are given a reason to abandon the form, they won’t do it. The thing they are least interested in doing is flicking through the select menus. Most designers put in a lot of time and effort in designing forms which have select menus. If the same efforts are channelled towards alternate methods then the users would not run away without filling up the forms.
Making Your Clients See What’s Wrong
All good web design teams have to face clients that often complain about not getting good end-results from their websites. They often complain that the website isn’t helping their end cause – could be leads, product enquiries.
In that event, before you start quoting the above tirade on select-menus to them, it makes sense to drill-down to the exact cause of a poor conversion rate. Most of the times, the culprit is hiding in plain sight in the sales/leads funnel.
A good way to begin is using Google Analytics to track form abandonments. Form abandonment measurement is an excellent tool for monitoring form-based interactions on your clients’ websites. Since testing and data are your only means to get to know how actual users behave on a website, it is crucial to modify a leads/sales funnel only with firm information, drawn from in-depth analysis.
Forms in particular pose an interesting challenge for tracking purposes, as user interactions surpass those on only clicks. The focus is to know the fields that users most often ignore or give up on, the fields that are hurting your clients the most.
Tracking Abandonment
Here is where Universal Analytics’ event tracking language comes to rescue. Event tracking uses Javascript to push information to the Analytics suite, generally working best for button and click elements. In general, the event toolset makes use of operators that define the type of event being tracked – the most common is “onClick,” used to push user click data.
“onChange” is a lesser-known operator that helps track user activity on website forms much more efficiently. OnChange registers an event when a user changes a value on a form or field, either from a blank value to anything or from one dataset to another, onChange allows you to monitor things like a user filling in a field on a contact page or email subscription form.
To utilize onChange for form abandonment tracking, we use Google’s standard event format: Category, Action, and Label. With Universal Analytics, you also need to use “send” and “event” to properly parse the data. To begin to track field interactions, modify the below code with your own Category, Action, and Label strings for each field call and place the code within the class tag itself.
onChange="ga('send', 'event', 'Category', 'Action', 'Label');”
Get Cracking
Phew! That was a long read. But now you have all you need to tackle clients that are worried about their target audience not filling up website forms.
So, have a quick session with your web design team and get set on the path of designing forms that add to the business value of your clients.
After all, where would we be without clients who are happy with their websites?
If you got any interesting take on this, let us know your thoughts
When there are several options (say a long list of countries) which need to be displayed, then instead of using the select menu which can take up the entire screen, one can opt for autocomplete text fields. An autocomplete text box displays a small collated list of possible suggestions which best matches the input which the user enters. The catch here lies in distinguishing the user’s typed input from the suggested options. The text of the option which matches the text which the user enters should thus be highlighted with a different color contrast. This allows the user to quickly reach the option one desires instead of being compelled to go through the entire list.
An autocomplete textbox thus serves as a very effective replacement for the dropdown menu. It gives users a much better form filling experience and because of which it can serve as an alternative for the select menu.
Giving Users the Room to Type
It is highly imperative to give the users the right field length. For instance, when entering a name just because someone’s name is small, doesn’t mean everyone’s name would be so. Think of someone from Greece or Austria. A minimum of 20 characters need to be provided for the first and the last name fields. Also, for text areas, sufficient room needs to be given to the user to enter as well read the text being entered. The exact values can be ascertained based on the use of the text field but a minimum of 10 lines tall and 50 characters wide needs to be maintained to ensure readability.
Shortening the Forms and Asking Questions Which Matter
If a form is a long one then chances are that the user might reject it with a single glance. As such it is important to ask questions which matter. Thus before entering any field, a web designer needs to ask whether the piece of information which is being collected is indispensable or not. If it something which is not so important then there is no point wasting the user’s time.
The other point is asking whether it is necessary to collect information from user from which ultimately the latter will be restricted access from. This can again help a lot in shortening the length of the form and asking questions which actually matter rather than filling up the form with a long list of questions which are of little or no relevance altogether.
Marking the Fields which are Important
Some fields are extremely important like the name of the shipping address when selling goods. For highlighting fields which are extremely important a number of methods could be used like using bold or italic texts, using asterisk and writing the word “required” in brackets or even dividing the form into two sections – required and optional information. Color coding can also be used to mark the fields which are important. For instance, if a user has left an important field blank then the red color could be used to denote an error.
Forcing Users to Return to an Altered Form
Many times users are forced to return back to the very form which they apparently thought they had filled up to the best of their ability. Here two things need to be understood. Firstly, the user needs to be given the freedom to choose which information he/she would like to divulge. If apart from the basic information, the user is not ready to give out any further info, then he/she should not be compelled to do so.
Sometimes, users are also made to sign up for newsletters and emails of promotions and if the email id is not provided then the user can’t go to the next stage of form filling. Surely this kind of a compulsion or coercion can be avoided. Isn’t it?
The website should be such that users come back to it from time to time for finding out more about the products and services. They should also sign up for the promotional emails of their own accord and out of their own interest.
Users also tend to complain about forms which they are compelled to fill up again due to very trivial typing errors. The question here is should the valuable customer be bothered based on a small typing error? The solution here lies in designing the form in such a manner that the job is done with the bare minimum amount of information and typing on the part of the users, else chances are that the user might refrain from using the website ever again. One needs to understand that the more control the users are given over their experience, the more they will enjoy using the website.
Using Responsive View Menus
Now in order to understand Responsive Menus, one needs to understand what exactly it is. It refers to coding a website in such a manner that it provides the best possible viewing experience, ease of reading and navigation which involves the least amount of panning, resizing and scrolling be it on desktops or on hand-held devices.
A designer when creating a Responsive Design must make sure that that the website’s audio/video players, images, navigation elements, text, screen-layouts and other user interface elements re-adjust themselves according to the device used by the user. This ensures that one does not spend extra money and time in the creation and maintenance of a mobile site and another desktop site for the same website.
Responsive web designs are more fluid compared to any other layout because of which the content moves freely across on any screen no matter what the resolution or the device. The contents of the website just flow out and occupy the screen in just the same way a liquid fills up in the space allotted to it without compromising on the design’s appearance or responsiveness. This proves to be beneficial as this type of a layout caters to the needs of a wide array of individuals as it eliminates the need to scroll or resize irrespective of which device the user is using. It thus enhances SEO efforts by directing all the users to a single website no matter what device they use.
Well that sounds good but does it have any other advantage too?
As a matter of fact, it does and the upper hand lies in the fact that it is preferred by Google. According to Google, a responsive web design is the best industry practice. This is because a website with responsive design has just one URL and consequently the same HTML irrespective of the device which makes it easier for the search giant to better organize and index content. In contract when the same website has a mobile version and a different URL and HTML than the desktop version then Google has to index multiple versions of the same website.
Google also prefers responsive web design because the content and URL of one website are much easier for user to share as compared to the website which has a desktop and a mobile version separately. For example, if a user accessing Facebook from a hand-held device shares any content with a friend who accesses it on a desktop ends up getting a stripped down version of the mobile site on their screen which creates a less optimal user-experience. This is the reason why Google is using user-experience as a factor for ranking websites which needs to be taken into consideration when considering SEO.
Lastly, having separate desktop and mobile websites entails running separate SEO campaigns. It goes beyond a shadow of doubt that managing one SEO campaign and website is easier than managing two.
When Should Select Menu Be a Necessity?
The only situation when a select menu should be used is when the user is expected to answer something specific. For instance, if someone would like to know the sexual orientation of the users. In such a case, if users are not furnished a list of specific options, then they could end up giving answers of a rather vague nature.
Most of the users begin filling up a form but don’t finish them. Until and unless they are given a reason to abandon the form, they won’t do it. The thing they are least interested in doing is flicking through the select menus. Most designers put in a lot of time and effort in designing forms which have select menus. If the same efforts are channelled towards alternate methods then the users would not run away without filling up the forms.
Making Your Clients See What’s Wrong
All good web design teams have to face clients that often complain about not getting good end-results from their websites. They often complain that the website isn’t helping their end cause – could be leads, product enquiries.
In that event, before you start quoting the above tirade on select-menus to them, it makes sense to drill-down to the exact cause of a poor conversion rate. Most of the times, the culprit is hiding in plain sight in the sales/leads funnel.
A good way to begin is using Google Analytics to track form abandonments. Form abandonment measurement is an excellent tool for monitoring form-based interactions on your clients’ websites. Since testing and data are your only means to get to know how actual users behave on a website, it is crucial to modify a leads/sales funnel only with firm information, drawn from in-depth analysis.
Forms in particular pose an interesting challenge for tracking purposes, as user interactions surpass those on only clicks. The focus is to know the fields that users most often ignore or give up on, the fields that are hurting your clients the most.
Tracking Abandonment
Here is where Universal Analytics’ event tracking language comes to rescue. Event tracking uses Javascript to push information to the Analytics suite, generally working best for button and click elements. In general, the event toolset makes use of operators that define the type of event being tracked – the most common is “onClick,” used to push user click data.
“onChange” is a lesser-known operator that helps track user activity on website forms much more efficiently. OnChange registers an event when a user changes a value on a form or field, either from a blank value to anything or from one dataset to another, onChange allows you to monitor things like a user filling in a field on a contact page or email subscription form.
To utilize onChange for form abandonment tracking, we use Google’s standard event format: Category, Action, and Label. With Universal Analytics, you also need to use “send” and “event” to properly parse the data. To begin to track field interactions, modify the below code with your own Category, Action, and Label strings for each field call and place the code within the class tag itself.
onChange=”ga(‘send’, ‘event’, ‘Category’, ‘Action’, ‘Label’);”
Get Cracking
Phew! That was a long read. But now you have all you need to tackle clients that are worried about their target audience not filling up website forms.
So, have a quick session with your web design team and get set on the path of designing forms that add to the business value of your clients.
After all, where would we be without clients who are happy with their websites?
If you got any interesting take on this, let us know your thoughts at ideas@clixlogix.com – we’re always delighted to hear from our fellow web design aficionadas
at ideas@clixlogix.com – we’re always delighted to hear from our fellow web design aficionadas.
John Keatley
