1) Don’t Allow “Overflow”
Ever try to type in your phone number, but the field is divided into three separate boxes, and you have to either click or tab to get to the next one? Isn’t that annoying? Especially when it should know what you mean?
Doing this not only breaks up the user’s ‘flow’, it also prevents simply copy/pasting a number. That’s not going to ward off bots (programming three selections on the user/bot side is only marginally more work than programming one) but it is super annoying to humans, especially ones using mobile. Overflowing the box into the next one allows the user to type continuously, reducing frustration!
On the flip side, you can’t allow the end user to type endlessly in one box, because submitting 99 characters might interfere with your database on the other side. Proper form sizing is going to change depending on how much information the user actually needs to share (for example, an extension box may need room for seven or eight characters, even if on average companies only use three or four). While the vast majority of phone numbers are ten digits, a country code might be necessary for a company that ships internationally.
2) Don’t Allow Users to Type in Drop-down Menus
States and countries are often listed alphabetically in dropdown menus, so some states take more scrolling than others. On mobile, this doesn’t matter – you can’t type into that box because the keyboard doesn’t pop up, so you’re still going to scroll no matter what. Your screen behaves as both a mouse and a keyboard, so you don’t have to lift your hands anyway. On desktop, however, where keyboard and mouse are separate, typable dropdowns are a timesaver! They allow the user to simply tab over and continue typing to find their state, country, etc. without raising their hands from the keyboard. (Assuming you did your tab order correctly – but that’s more about the website’s deep setup options and less about forms).
While convenient, this isn’t necessarily a requirement… unless the list is very long, and you didn’t alphabetize your entries. If you do that and don’t allow users to type to find things, you’re wrong!
3) Make Things the Wrong Kind of Thing
You shouldn’t use a dropdown for things like zipcode unless you’re being very specific and only accept a handful of zipcodes. Not everything can be a dropdown. You shouldn’t use a text box for states unless you don’t value your sanity, and you shouldn’t use multi-select buttons for shipping speed. Radio buttons are a poor choice when a single question has more than, say, six or seven possible answers. If your user has to scroll to see choices for the same question, that can make it tough for them to pick accurately. Scantrons only have six options for a reason!
Many customers, maybe even most of them, will fill things out correctly if given bizarre form choices, but the break is likely to confuse some and toss out others. Some of these can be avoided with simple testing, especially custom forms for things like design quotes and the like. Can your user select two impossible options? Can they leave you with a broken, unusable address that should have been functional if the format had been correct, but they mistyped MB in the state line and now you don’t know what state they meant?
If the answer is yes, then congrats – you’ve got a form that will frustrate both sides!
4) Make Too Many Things Mandatory/Ask for Too Much Info
While filtering is important, the greatest balancing act in online for user-facing forms is asking for juuuust enough info to sort the user effectively. For example, a tattoo shop: not everyone goes to one knowing exactly what they want, or where they want it, or what style they want it in, so they may not know which artist they want. Giving the patrons who already know what they want the option to pick an artist is great, but making the choice mandatory isn’t ideal for undecideds, who will be relying on the shop’s guidance to pick a style and artist. Plus, coming in, deciding the idea would look better in American Traditional with the photorealist’s advice, and then having to reschedule the consult because the American Traditional guy is mornings-only is frustrating when the artists could have figured that out when they got the form… if the user had the option to let them. At the very least, when including questions about who the user will be interacting with or something they may be unsure of, include an “any” option.
Users who find your fillout too confusing to navigate may call – but that sucks time from other things that the form was designed to free up time for in the first place. If they call at all.
5) Narrow the Options
If you want to frustrate users and force them to call, narrow the options. To go back to the tattoo shop, say they allow the customer to pick a preferred day. But only one per form. If that day doesn’t work for the artist because the idea is a four-hour appointment and they only have two hours left free that day, what can they do but call the customer anyway? Allowing a range would have been better.
Or, look at a salon. If a hair salon offers cuts, colors, and styling, but the form does it radio-button style and only allows the customer to pick one instead of all three (which they do offer), they’ll have to call. Worse, they may assume the salon doesn’t offer all three on the same day and head elsewhere, costing sales.
5.5) Or Leave Them Too Broad
Similarly, if the form wasn’t set up right and allows the customer to pick any hour the shop is open, and they pick ‘wrong’ (as in the during the wrong artist or hairdresser for the job’s shift) because the form let them, that’s also going to be a frustrating call. Sometimes these issues are legitimately just glitches (see Target accidentally setting TVs to 14.99$, for example) but sometimes it’s in the set-up, and a lack of testing before launch.
The form should, generally, be able to self-regulate with the inputs it’s getting. If it’s a calendar-based form, then it should know when a day is full, or what days the business is closed. If it’s based on supply, it should be easy for the owner to tell the form ‘we’re out of X as a topping’ and have the form prevent X from being picked while placing an online order until X is back in stock.
This goes hand-in-hand with #3 – making the form questions the wrong kind of thing. Some options don’t need to be text boxes or checklists, because if they are, the customer can do things like ask for cucumber to be added to their fries, or choose every topping, including mutually exclusive ones, at the same time. Most people are reasonable… ‘most’ is not the same as ‘all’. Setting limits within lists and setting limits on what people may add to their orders will save you calls. If the customer can select too many things for your process, then the text box or multi-select needs some limits!
6) Make Things Disappear if You Hit Submit
This is more of an issue for older web forms, the ones that didn’t ‘remember’ data and didn’t verify it all before trying to ship it off and clear out the fields. People have mixed opinions about cookies, but this is one of the times that they’re really, really useful – the data should stay in the field long enough to be sure it’s right, and if it’s not – and the user has to come back – the user should be able to just re-fill out the problem fields without starting completely over.
If you’re not essential and the buyer isn’t invested, this can cause them to quit. Even if you are essential, the customer might call to avoid the agony of filling out the form again instead of just starting over.
7) Don’t Use any sort of CAPTCHA
This one is for you, not the end user. If you don’t use CAPTCHA, or an anti-spam bot, or something to protect your form fillout box, you’re going to be flooded with spam bots offering things like writing services, website services, and advertising services – sometimes via the same bots. Our fillout box only went without CAPTCHA for about a day, and in that day it collected some pretty nasty stuff. One particularly bold example promised it could get past CAPTCHA, so anyone who bought services could hawk their wares to anybody with an online form… once CAPTCHA was set up, and the box protected, that was proven false. These things are everywhere!
Even if you don’t mind spam, you should still have something in between them and the fillout. If your website isn’t configured correctly, a spam filter can prevent disasters like SQL Injections or DDoS attacks from taking advantage of it. Not all spam is harmless text.