Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Home ›› Content and Copy ›› The Anatomy of a Form

The Anatomy of a Form

by Andy Grogan
7 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

The line-by-line guide to making your online form easy for users to fill out without extraneous errors and missed conversions.

As a UX designer I’ve always been fascinated with error messages. How do you tell your precious visitor that they are doing something wrong? To make an overview for myself, I created an error chart for my book Web and UX Design: An Accidental Encyclopedia that I’d like to share that with you here.

Welcome to MyFakecompany.com, a site with an unruly form to fill in. With every field users have to fill in their ROUI, (return on user investment) plummets. Users have to be really motivated to go through an entire form, and you owe it to them to make sure that any errors they make along the way are properly highlighted and explained. So let’s go ahead and dissect this form line-by-line and look at the best way to keep users on-track and as engaged as is humanly possible.

Anatomy of a form

1: This is an error message quietly sitting at the top of the page. It’s almost invisible to users. They are likely to miss it and will get frustrated if there are no other prompts. Remember, some of the errors may be below the fold, out of the user’s view.

2: A useful trick if your form goes over several pages is to show a timeline—this is helpful and gives users hope that the hell of form filling will soon be over. Remember, however, that if there is an error at the submit stage, the user might not know on which page the error is.

3: If you want to tell users there is an error, don’t use geek language that 90% of them won’t understand. Advise them how to correct the problem instead.

4: Don’t give a generic response to an error, this will never be helpful, especially with multiple errors. Also remember that for some people, a field is where a farmer grows crops.

5: Give users time to fill in the form, they may be distracted or need to look something up. If you time them out, they won’t come back to fill in the form again, they will go away.

6: Don’t be hysterical and don’t shout. Be nice to your users, they are not doing something wrong, they are trying to do something right.

7: A pet peeve of mine. Often there is an asterisk (*) to denote that the field is required, but there is no explanation. Names can be tricky, especially if you are open to the global market. When labeling these fields, be aware that some things are named differently. Some people don’t know what a surname is (last name). Also, a prefix can be spelled many different ways, so set limits by using a drop-down menu.

8: Here, the label “House Address” is in the field—this is fine and is becoming more popular, sometimes taking the place of the field labeling. However, make sure that when users click on this field to enter data, the text is deleted or it might end up in their data. Don’t make the user manually delete all the labels in the field. Also, if users forget to enter something and click on a different field, the labeling should return, otherwise they won’t know what to enter.

9: A second street field should be available, but is not always needed. Don’t make it required.

Some websites add a Captcha element to block spamming. Really? Is this his problem?

10: If your market is a single country then you can limit the zip (postal) code, but you need to keep this flexible for an international website. Remember, folks that live in England or Dubai, don’t live in a state. Don’t force them to choose one. By adding a country drop down you can make your form contextual. Its best to offer a drop down instead of an input field as there are many ways of spelling a country. Also, I am British and English. I am from the UK, Great Britain, the United Kingdom, and also England. All valid choices. If 90% of your users are from one country, put them at the top of the drop down list. I wonder how many pairs of shoes have really been sent to Afghanistan?

11: An email address follows a clear set of parameters and this can be validated by most forms, but make sure that if a user inputs an invalid email address, the error message explains why it’s invalid in clear language.

12: Confirming an inputted email address is common these days (as many typos in emails have led to missed leads) but be clear if the emails don’t match and that this is the reason for the error.

13: As with countries, phone numbers follow different rules, the land code for the US (+1) is different than that of England (+44). Don’t make fax number required, these are not as common as they used to be.

14: This shows how the designer of the form can help the user input the data in the right way, making it easy for the user and keeping the data inputted uniform and accurate. A “more information” icon is also available, and being in the field itself, is contextual.

15: If the user has to agree to terms and conditions (and they usually do) then make sure that they can easily do that.

16 and 17: Don’t be crafty by sticking in stuff that users may not want, it’s a distraction and makes them suspicious. They are already doing lots of work for you, don’t push it.

18: Get the wording right. What is the right answer to the question, “Do you not want to be contacted by our staff?” YES or NO? It’s at best badly worded and at worst manipulative.

19 and 20: Password creation and input is a science unto itself, and tool tips like the approach shown above from Apple, help users create a good password. Also, your system may make minimum demands on password complexity. If so, make sure if users create a password that does not meet these criteria that they are helped in creating one that does. Also consider if users needs passwords at all. Why put them through it if you don’t need to?

21 and 22: As with countries, dates are tricky to input. In the US, the month comes first, in Europe, the day. This means a date like 08/04/2015 can mean August 4 or April 8. Some people may type in the text as a word or as an abbreviation (August or Aug.), the date as 8th or the eighth. Constrain them as much as possible but make it clear what the constraints are. Again, if you need the date in a database, you don’t want to have to hand-edit thousands of inputted dates. Also, what are you going to do with this data—if you’re not going to use it, then don’t ask in the first place. Using a pop-up calendar is often a useful help, but always ask yourself if this is information you really need.

OK, the meat and potatoes. 24 and 25: the credit card details. Let’s create a persona: Frank. He’s had a few beers and he’d decided to buy his mother a present because he forgot it’s her birthday. This is a spontaneous act and he’s struggled through your form to get the order complete. Deep down inside him there’s a little buyer’s remorse already creeping in. You need him to input that credit card and click submit as quickly as possible. He pops another beer and then blurrily types the digits. Make sure he knows what card type you accept without him having to use trial and error. Don’t ask him unnecessary questions to delay him (like what type of card it is—the first four digits of the number of the card has the answer).

Be aware that some cards have the date like JUL/14, while others have 07/14. So help him out by making a drop down were both are given – 01 (JAN) 02 (FEB) etc. If the billing address is the same as the address he has already inputted, make that simple for him to state that. If the product needs to be delivered elsewhere, then inputting another address is the only option, but keep that as simple as possible.

26:Some websites add a Captcha element to block spamming. Really? Is this his problem? Why make Frank work even harder by giving him a puzzle to solve. Imagine his frustration if he has to re-enter all the card details just because he screwed up the captcha field. Don’t do something just because you can, or other people do it. In this case, less is much, much more.

Then there’s the submit button. Some forms gray this out until all the fields are properly inputted. This might be fine on a short form, but if the submit button is below the fold, users don’t have an overview and may not get why they cannot click on the button. Also, don’t put a cancel button close to the submit button: imagine if Frank accidentally clicks cancel instead of submit. He will give up and buy some flowers at the gas station instead of your product. Consider if a cancel button is even necessary.

Oh, and a few words about “submit.” Never use the word submit. Use the right call to action like “complete purchase,” “subscribe,” or “download the brochure.”

Lastly, 27: don’t distract Frank with links to other things. He is focused on doing something that is the whole purpose of him being on the site—buying product—so don’t let him click a link that will take him off somewhere else and potentially lose all that hard inputted data.

These are just a few things that show how difficult it is to craft a smooth interaction between user and website. SSCC:

Image of endless stairs courtesy Shutterstock.

post authorAndy Grogan

Andy Grogan, Andy Grogan is an experienced designer who has followed his passion from printing with ink to coding in bytes. He has designed for magazines, newspapers, websites, and apps, and loves the process of design that follows the needs of the user. He is the author of Web and UX Design: An Accidental Encyclopedia.

Tweet
Share
Post
Share
Email
Print

Related Articles

As consumers’ privacy concerns continue to grow, so should our attention to addressing privacy issues as user experience designers.

Article by Robert Stribley
Designing for Privacy in an Increasingly Public World
  • The article delves into the rising importance of addressing privacy concerns in user experience design, offering insights and best practices for designers and emphasizing the role of client cooperation in safeguarding user privacy.
Share:Designing for Privacy in an Increasingly Public World
9 min read

Knowing your audience, business values, voice tonality, voice refinement, and team trust.

Article by Eva Schicker
5 UX Development Phases to Create Your Brand’s Voice
  • The article offers a concise guide to crafting a brand’s voice in five key UX development phases.
  • The author emphasizes practical strategies and tools for creating a unified brand identity that connects with customers and builds trust.

Share:5 UX Development Phases to Create Your Brand’s Voice
5 min read

Navigating the Creative Landscape.

Article by Adri Mukund
Unveiling the Influence of Cognitive Biases on Design Decision-Making
  • The article explores the influence of cognitive biases on design decision-making, outlining various types of biases and offering strategies for mitigating their impact to foster inclusivity and objectivity in design processes.
Share:Unveiling the Influence of Cognitive Biases on Design Decision-Making
6 min read

Did you know UX Magazine hosts the most popular podcast about conversational AI?

Listen to Invisible Machines

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and