Menu Search
Jump to the content X X

Designing Efficient Web Forms: On Structure, Inputs, Labels And Actions

Someone who uses your app or website has a particular goal. Often, the one thing standing between the user and their goal is a form. Forms remain one of the most important types of interactions for users on the web and in apps. In fact, forms are often considered the final step in the journey of completing their goals. Forms are just a means to an end. Users should be able to complete them quickly and without confusion.

In this article, you’ll see practical techniques that have been gleaned from usability testing1, field testing, eye-tracking studies and actual complaints from disgruntled users. These techniques — when used correctly — enable designers to produce faster, easier and more productive form experiences. There’s a way you can create and design your own prototypes: All you need to do is to download Adobe XD2 (for free) and get started right away. At the end of the article, you’ll also find new ways to design forms.

Further Reading on SmashingMag: Link

The Components Of Forms Link

The typical form has the following five components:

  • Structure
    This includes the order of fields, the form’s appearance on the page and the logical connections between multiple fields.
  • Input fields
    These include text fields, password fields, checkboxes, radio buttons, sliders and any other fields designed for user input.
  • Field labels
    These tell users what the corresponding input fields mean.
  • Action button
    When the user presses this button, an action is performed (such as submission of the data).
  • Feedback
    The user is made to understand the result of their input through feedback. Most apps and websites use plain text as a form of feedback. A message will notify the user about the result and can be positive (indicating that the form was submitted successfully) or negative (“The number you’ve provided is incorrect”).

Forms may also have the following components:

  • Assistance
    This is any explanation of how to fill out the form.
  • Validation
    This automatic check ensures that the user’s data is valid.

This article covers many aspects related to structure, input fields, labels, action buttons and validation.

Form Structure Link

A form is a type of conversation. And like any conversation, it should consist of logical communication between two parties: the user and the app.

Ask Only What’s Required Link

Make sure to ask only what you really need. Every extra field you add to a form will affect its conversion rate. Always consider why you are requesting certain information from the user and how you will use it.

Order the Form Logically Link

Ask details logically from the user’s perspective, not from the application or database’s perspective. Typically, asking for someone’s address before their name would be unusual.

Group related information into logical blocks or sets. The flow from one set of questions to the next will better resemble a conversation. Grouping together related fields will also help users make sense of the information they must fill in. Compare how it works in the contact information form below.

7
Group together related fields (Image: Nielsen Norman Group8)

One Column Vs. Multiple Columns Link

One of the problems with arranging form fields into multiple columns is that users will likely interpret the fields inconsistently. If a form has horizontally adjacent fields, then the user must scan in a Z pattern, slowing the speed of comprehension and muddying the path to completion. But if a form is in a single column, the path to completion is a straight line down the page.

9
On the left, one of many ways to interpret how the form fields relate when they are arranged in a standard two-column layout, versus on the right, a straight line down the page.

Input Fields Link

Input fields are what enable users to fill in a form. Various types of fields exist for the information you need: text fields, password fields, dropdowns, checkboxes, radio buttons, date-pickers and more.

Number of Fields Link

A rule of thumb in form design is that shorter is better. And this certainly seems intuitive: Less effort on the part of the user will lead to higher conversion. Thus, minimize the number of fields as much as possible. This will make your form feel less loaded, especially when you’re requesting a lot of information. However, don’t overdo it; no one likes a three-field form that turns into a 30-field interrogation. Displaying only five to seven input fields10 at a given time is a common practice.

11
Combine multiple fields in one easy-to-fill field. (Image: Luke Wroblewski12) (View Large version13)

Mandatory Vs. Optional Link

Try to avoid optional fields in forms. But if you use them, at least clearly distinguish which input fields may not be left blank. The convention is to use an asterisk (*) for required fields or the word “optional” for non-required fields (which is preferable in long forms with multiple required fields). If you decide to use an asterisk for mandatory fields, show a hint at the bottom of the form explaining what the asterisk is for, because not everyone understands what it means.

14
MailChimp’s mailing-list subscription form.

Setting Default Values Link

Avoid setting defaults unless you believe a large portion of your users (for example, 90% of them) will select that value. Particularly avoid it for required fields. Why? Because you’re likely to introduce errors. People scan online forms quickly, so don’t assume they will take the time to parse through all of the choices. They might skip something that already has a value.

But this rule doesn’t apply to smart defaults — that is, values set based on information available about the user. Smart defaults can make form completion faster and more accurate. For example, preselect the user’s country based on geo-location data. Still, use these with caution, because users tend to leave preselected fields as they are.

15
An intelligently preselected country in the checkout form

Input Masks Link

Field masking is a technique that helps users format inputted text. A mask appears once a user focuses on a field, and it formats the text automatically as the field is being filled out, helping users to focus on the required data and to more easily notice errors. In the example below, the parentheses, spaces and dashes are applied automatically as the phone and credit-card numbers are entered. This simple technique saves time and effort with phone numbers, credit cards, currencies and more.

16
(Image: Josh Morony17)

Desktop-Only: Make Form Keyboard-Friendly Link

Users should be able to focus on and edit every field using only the keyboard. Power users, who tend to use the keyboard heavily, should be able to easily tab through and edit fields, all without lifting their fingers off the keyboard. You can find detailed requirements for keyboard interaction in the W3C’s guidelines on design patterns18.

19
Even a simple date-picker should adhere to the W3C’s guidelines. (Image: Salesforce) (View Large version20)

Desktop-Only: Autofocus for Input Field Link

Autofocusing a field gives the user an indication and a starting point to quickly begin filling out a form. Provide a clear visual signal that focus has moved there, whether by changing a color, fading in a box, flashing an arrow, whatever. Amazon’s registration form has both autofocus and visual indicators.

21
(View large version22)

Mobile-Only: Match Keyboard to Input Link

Phone users appreciate apps that provide the appropriate keyboard for text being requested. Implement this consistently throughout the app, rather than merely for certain tasks but not others.

23
(Image: Google24)

Limit Typing (Autocompletion) Link

With more and more people using mobile screens, anything that can be done to prevent unnecessary typing will improve the user experience and decrease errors. Autocompletion makes it possible to eliminate a huge amount of typing. For example, filling out an address field is often the most problematic part of any registration form. A tool such as Place Autocomplete Address Form25 (which uses both geo-location and address prefilling to provide accurate suggestions based on the user’s exact location) enables users to enter their address with fewer keystrokes than regular input fields.

26

Labels Link

Clearly written labels are one of the primary ways to make a UI more accessible. A good label tells the user the purpose of the field, maintains its usefulness when focus is on the field itself, and remains visible even after the field has been filled in.

Number of Words Link

Labels are not help text. Use succinct, short, descriptive labels (a word or two) so that users can quickly scan your form. Previous versions of Amazon’s registration form contained a lot of words, which resulted in slow completion rates. The current version is much better and has short labels.

27
(View large version28)

Sentence Case Vs. Title Case Link

In most digital products today, there are two ways to capitalize words:

  • title case: capitalize every word. “This Is Title Case.”
  • sentence case: capitalize the first word. “This is sentence case.”

Sentence case used for labels has one advantage over title case: It is slightly easier (and, thus, faster) to read. While the difference for short labels is negligible (“Full Name” and “Full name”), for longer labels, sentence case is better. Now You Know How Difficult It Is to Read Long Text in Title Case.

Avoid All Caps Link

Never use all caps, or else the form will be difficult to read and much harder to scan quickly, because there will be no variation in character height.

29
All-caps labels are very hard to read.

Alignment of Labels: Left Vs. Right Vs. Top Link

Matteo Penzo’s 2006 article on label placement30 suggests that forms are completed faster if labels are on top of the fields. Top-aligned labels are good if you want users to scan the form as quickly as possible.

31
Left-aligned, right-aligned and top-aligned labels (Image: UX Matters) (View Large version32)

The biggest advantage of top-aligned labels is that different-sized labels and localized versions can more easily fit the UI. (This is especially good for screens with limited space.)

33
(Image: CSS-Tricks393634)

The biggest disadvantage to left-aligned labels is that it has the slowest completion times. This is likely because of the visual distance between the label and input field. The shorter the label, the further away it will be from the input. However, a slow completion rate isn’t always a bad thing, especially if the form asks for sensitive data. If you are asking for something like a driver’s license number or a social security number, you might deliberately want to slow down users a bit to make sure they enter it correctly. Thus, the time spent reading labels for sensitive data is insignificant. Left-aligned labels have another disadvantage: They require more horizontal space, which might be a problem for mobile users.

35
(Image: CSS-Tricks393634)

The big advantage of right-aligned labels is the strong visual connection between the label and input. Items near each other appear to be related. This principle isn’t new; it derives from the law of proximity37, from Gestalt psychology. For short forms, right-aligned labels can have great completion times. The disadvantage is discomfort; such forms lack that hard left edge, which makes it less comfortable to look at and harder to read.

38
(Image: CSS-Tricks393634)

Takeaway: If you want users to scan a form quickly, put labels above the fields. The layout will be easier to scan because the eye will move straight down the page. However, if you want users to read carefully, put labels to the left of the fields. This layout will slow down the reader and make them scan in a Z-shaped motion.

Inline Labels (Placeholder Text) Link

A label set as a placeholder in an input field will disappear once the field gains focus; the user will no longer be able to view it. While placeholder text might work for two-field forms (a simple log-in form with username and password fields), it’s a poor substitute for visual labels when more information is required from the user.

40
(Image: snapwi41)

Once the user clicks on the input field, the label will disappear, and so the user cannot double-check that they wrote what was being asked of them. This increases the chance of error. Another problem is that users could mistake placeholder text for prefilled data and, hence, ignore it (as Nielsen Norman Group’s eye-tracking study42 confirms).

43
Placeholder text as field label

A good solution for placeholder text is a floating label. The placeholder text would be shown by default, but once an input field is tapped and text is entered, the placeholder text fades out and a top-aligned label animates in.

44
(Image: MDS45)

Takeaway: Don’t just rely on placeholders; include a label as well, because once a field has been filled out, the placeholder will no longer be visible. Use a floating label so that users are sure they’ve filled out the correct field.

Action Buttons Link

When clicked, an action button46 triggers some activity, such as submission of the form.

Primary Vs. Secondary Actions Link

A lack of visual distinction between primary and secondary actions can easily lead to failure. Reducing the visual prominence of secondary actions minimizes the risk of error and reinforces people’s path to a successful outcome.

47
Equal visual weight versus visual distinction (Image: Luke Wroblewski)

Button Location Link

Complex forms usually need a back button. If such a button is located right below an input field (like in the first screenshot below), a user could accidentally click it. Because a back button is a secondary action, make it less accessible (the second form below has the right location for buttons).

48
(View large version49)

Naming Conventions Link

Avoid generic words such as “Submit” for actions, because they give the impression that the form itself is generic. Instead, state what action the button will perform when clicked, such as “Create my account” or “Subscribe to weekly offers.”

50
(View large version51)

Multiple Action Buttons Link

Avoid multiple action buttons because they might distract users from their goal of submitting the form.

The Reset Button Is Pure Evil Link

Don’t use a reset button. This button almost never helps users and often hurts them. The web would be a happier place if almost all reset buttons were removed.

52

Visual Appearance Link

Make sure action buttons look like buttons: Indicate that it is possible to click or tap them.

53
Shading indicates that it is possible to click. (Image: Vadim Gromov54)

Visual Feedback Link

Design the “Submit” button in a way that clearly indicates the form is being processed after the user’s action. This provides feedback to the user while preventing double submission.

55
(Image: Michaël Villar56)

Validation Link

Form validation errors are inevitable and are a natural part of data entry (because users are prone to making errors). Yes, error-prone conditions should be minimized, but validation errors will never be eliminated. So, the most important question is, How do you make it easy for the user to recover from errors?

Inline Validation Link

Users dislike having to go through the process of filling out a form, only to find out upon submission that they’ve made an error. Especially frustrating is completing a long form and upon pressing “Submit,” you are rewarded with multiple error messages. It’s even more annoying when it isn’t clear what errors you’ve committed and where.

57
(Image: Stack Exchange58)

Validation should inform users about the correctness of text as soon as the user has inputted the data. The primary principle of good form validation is this: Talk to the user! Tell them what is wrong! Real-time inline validation immediately informs the user about the correctness of their data. This approach allows them to correct any errors faster, without having to wait until they press the “Submit” button to see the errors.

However, avoid validating on each keystroke because, in most cases, you simply cannot verify until someone has finished typing an answer. Forms that validate during data entry punish the user as soon as they start entering data.

59
Google Forms states the email address isn’t valid before you’ve finished typing. (Image: Medium656260)

On the other hand, forms that validate after data entry do not inform the user soon enough that they’ve fixed an error.

61
Validation in the Apple Store is performed after data entry. (Image: Medium656260)

Mihael Konjević, in his article “Inline Validation in Forms: Designing the Experience63,” examines different validation strategies and proposes a hybrid strategy to satisfy both sides: Reward early, punish late.

  • If the user enters data in a field that was in a valid state (i.e. previously inputted data was valid), then validate after data entry.
  • If the user enters data in a field that was in an invalid state (i.e. previously entered data was invalid), then validate during data entry.
64
A hybrid approach: Reward early, punish late. (Image: Medium656260)

Protecting Data Link

Jef Raskin once said, “The system should treat all user input as sacred.” This is absolutely true for forms. It’s great when you start filling in a form and then accidentally refresh the page but the data remains in the fields. Tools like Garlic.js66 help you to persist a form’s values locally until the form is submitted. This way, users won’t lose any precious data if they accidentally close the tab or browser.

67
(View large version68)

Conversational Interfaces: New Ways Of Designing Forms Link

Recently, we’ve seen a lot of excitement around conversational interfaces and chatbots69. Several trends are contributing to this phenomenon, but one in particular is that people are spending more time in messaging apps70 than on social networks. This has led to a lot of experimentation with supporting a range of interactions, such as shopping, in threaded conversations, often in a way that mimics messaging. Even as established an element as a web form has undergone a change under this trend. Designers are looking to transform traditional web forms into interactive conversational interfaces.

Natural Language Interface Link

Every interface is a conversation. Traditional forms (the ones we design every day) are quite similar to a conversation. The only difference is the way we ask the questions. But what if we designed our forms to ask questions in a format that more closely reflects real human (not machine) conversation? So, instead of communicating with a machine on its own inhuman terms, you would interact with it on yours. The form shown below creates a conversational context, facilitating understanding without relying on the traditional elements of web forms (such as labels and input fields).

71
This form design from Codrops72 uses a conversational pattern to better resemble the task. (View large version73)

Conversational Form Link

Conversational Form74 is an open-source concept that easily turns any form on a web page into a conversational interface. It features conversational replacement of all input elements, reusable variables from previous questions, and complete customization and control over the styling. This project represents an interesting shift in how we think about user experiences and interactions, leaning more towards text-based conversation to help users achieve their goals.

75

Conclusion Link

Users can be reluctant to fill out forms, so make the process as easy as possible. Minor changes — such as grouping related fields and indicating what information goes in each field — can significantly increase usability. Usability testing is simply indispensable in form design. Very often, testing with just a few people or simply asking a colleague to go through a prototype can give you good insight into how usable a form is.

This article is part of the UX design series sponsored by Adobe. The newly introduced Adobe Experience Design CC (Beta) tool is made for a fast and fluid UX design process76, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app.
You can check out more inspiring projects created with Adobe XD on Behance77, and also visit the Adobe XD blog78 to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free79.

(ms, vf, al, yk, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2013/01/improving-your-website-usability-tests/
  2. 2 https://adobe.ly/2rVwVsU
  3. 3 https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-experience/
  4. 4 https://www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile-apps/
  5. 5 https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/
  6. 6 https://www.smashingmagazine.com/web-form-design-showcases-and-solutions/
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/05/1-Designing-More-Efficient-Forms-preview-opt.png
  8. 8 https://www.nngroup.com/
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/05/2-Designing-More-Efficient-Forms-preview-opt.png
  10. 10 https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/05/3-Designing-More-Efficient-Forms-large-opt.png
  12. 12 https://www.lukew.com/ff/entry.asp?1950
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/05/3-Designing-More-Efficient-Forms-large-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/05/4-Designing-More-Efficient-Forms-preview-opt.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/05/5-Designing-More-Efficient-Forms-preview-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/05/6-Designing-More-Efficient-Forms.gif
  17. 17 https://www.joshmorony.com/wp-content/uploads/2017/01/input-mask.gif
  18. 18 https://www.w3.org/TR/wai-aria-practices/#aria_ex
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/05/7-Designing-More-Efficient-Forms-large-opt.png
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/05/7-Designing-More-Efficient-Forms-large-opt.png
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/05/8-Designing-More-Efficient-Forms-large-opt.png
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/05/8-Designing-More-Efficient-Forms-large-opt.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/05/9-Designing-More-Efficient-Forms-preview-opt.png
  24. 24 https://www.thinkwithgoogle.com/articles/chapter-5-form-entry.html
  25. 25 https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/05/10-Designing-More-Efficient-Forms.gif
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/05/amazon-sign-in-comparison-large-opt.png
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/05/amazon-sign-in-comparison-large-opt.png
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/05/12-Designing-More-Efficient-Forms-preview-opt.png
  30. 30 http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/05/13-Designing-More-Efficient-Forms-large-opt.png
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/05/13-Designing-More-Efficient-Forms-large-opt.png
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/05/16-Designing-More-Efficient-Forms-preview-opt.png
  34. 34 https://css-tricks.com/label-placement-on-forms/
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/05/14-Designing-More-Efficient-Forms-preview-opt.png
  36. 36 https://css-tricks.com/label-placement-on-forms/
  37. 37 https://en.wikipedia.org/wiki/Principles_of_grouping
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/05/15-Designing-More-Efficient-Forms-preview-opt.png
  39. 39 https://css-tricks.com/label-placement-on-forms/
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/05/17-Designing-More-Efficient-Forms.gif
  41. 41 https://www.snapwi.re/
  42. 42 https://www.nngroup.com/articles/form-design-placeholders/
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/05/18-Designing-More-Efficient-Forms-preview-opt.png
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2017/05/19-Designing-More-Efficient-Forms.gif
  45. 45 https://dribbble.com/mds
  46. 46 https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2017/05/20-Designing-More-Efficient-Forms-preview-opt.png
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2017/05/21-Designing-More-Efficient-Forms-large-opt.png
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/05/21-Designing-More-Efficient-Forms-large-opt.png
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2017/05/22-Designing-More-Efficient-Forms-large-opt.png
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2017/05/22-Designing-More-Efficient-Forms-large-opt.png
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2017/05/23-Designing-More-Efficient-Forms-preview-opt.png
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2017/05/24-Designing-More-Efficient-Forms.gif
  54. 54 https://dribbble.com/shots/1898320-Material-Design-Button
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2017/05/25-Designing-More-Efficient-Forms.gif
  56. 56 https://medium.com/@michaelvillar?source=post_header_lockup
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2017/05/26-Designing-More-Efficient-Forms-preview-opt.png
  58. 58 http://ux.stackexchange.com/questions/33108/how-to-best-show-connectivity
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2017/05/27-Designing-More-Efficient-Forms.gif
  60. 60 https://medium.com/wdstack/inline-validation-in-forms-designing-the-experience-123fb34088ce#.fl86493cl
  61. 61 https://www.smashingmagazine.com/wp-content/uploads/2017/05/28-Designing-More-Efficient-Forms.gif
  62. 62 https://medium.com/wdstack/inline-validation-in-forms-designing-the-experience-123fb34088ce#.fl86493cl
  63. 63 https://medium.com/wdstack/inline-validation-in-forms-designing-the-experience-123fb34088ce#.fl86493cl
  64. 64 https://www.smashingmagazine.com/wp-content/uploads/2017/05/29-Designing-More-Efficient-Forms.gif
  65. 65 https://medium.com/wdstack/inline-validation-in-forms-designing-the-experience-123fb34088ce#.fl86493cl
  66. 66 http://garlicjs.org
  67. 67 https://www.smashingmagazine.com/wp-content/uploads/2017/05/30-Designing-More-Efficient-Forms.gif
  68. 68 https://www.smashingmagazine.com/wp-content/uploads/2016/08/image05.gif
  69. 69 https://www.smashingmagazine.com/2016/12/conversational-design-essentials-tips-for-building-a-chatbot/
  70. 70 http://www.businessinsider.com/the-messaging-app-report-2015-11
  71. 71 https://www.smashingmagazine.com/wp-content/uploads/2017/05/31-Designing-More-Efficient-Forms.gif
  72. 72 http://tympanus.net/Tutorials/NaturalLanguageForm
  73. 73 https://www.smashingmagazine.com/wp-content/uploads/2017/05/31-Designing-More-Efficient-Forms.gif
  74. 74 https://github.com/space10-community/conversational-form
  75. 75 https://www.smashingmagazine.com/wp-content/uploads/2017/05/32-Designing-More-Efficient-Forms.gif
  76. 76 https://adobe.ly/2rVwVsU
  77. 77 https://www.behance.net/galleries/adobe/5/Experience-Design
  78. 78 https://adobe.ly/2rOmEi0
  79. 79 https://adobe.ly/2rVwVsU

↑ Back to top Tweet itShare on Facebook

Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

  1. 1

    Thanks for the post. These are great things to remember and take action on.

    I’m really interested in the conversational aspect of form entry. It will be strange for some people today, but as our interfaces become less mouse/keyboard based, it just makes more sense.

    And what about voice input of form fields?

    There is a very cool future ahead for those willing to push the envelope.

    2
    • 2

      I do not agree with that.. at first sight, it looks cool, but you don’t have control over what the user type. It is so confusing, I will give you an example. If the interface ask you in a human way “What is your name?” then you respond also in a human way something like this “Hi, my name is Matt, are you real or bot?” then I save that into database and my name will be that whole sentence instead of simple “Matt”. Do you see the point?

      -3
  2. 3

    Riaz ur Rehman

    June 2, 2017 7:13 am

    Very nice explanation for complex form designs

    3
  3. 4

    For matching keyboard to input (mobile-only) you describe doing this for apps. Can this also be set from a browser?

    0
  4. 6

    simply amazing, expect more tips like this in future :)

    0
  5. 7

    Great Article. Maybe you should think about some aspects on the Smashing Article-comment field as well. For example no asterix on necessary inputs and feedback only when I submit my comment ;)

    0
  6. 8

    Some good ideas and points here.

    I do have some issues with input masking though, from an accessibility point of view (CSS Tricks did a review of some input masking methods last year) and prefer to avoid it altogether where possible. There are several ways of doing it, some noticeably worse than others both in terms of usability and accessibility. Just something to bear in mind.

    4
  7. 9

    Great article, thanks Nick. The only point I don’t agree with is placeholder text, which was not intended to be used for labels (floating or otherwise).

    “The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry… The placeholder attribute should not be used as an alternative to a label.”

    ( https://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#the-placeholder-attribute)

    Your article’s “Takeaway” recommendation of “Don’t just rely on placeholders; include a label as well,” is confusing because it implies people should use placeholder “hints” and replace them with floating labels once inputs receives focus (which would create even more issues than just floating labels).

    This Nielsen Normal Group article covers the issues with placeholder text:

    https://www.nngroup.com/articles/form-design-placeholders/

    And this one from Adam Silver goes further into why floating labels are problematic:

    https://adamsilver.io/articles/floating-labels-are-problematic/

    4
  8. 10

    kunal chandane

    June 5, 2017 7:39 am

    It’s really helpful. Thanks for the post!

    0
  9. 11

    I love this! And all in one place. Will be my go to reference when designing forms and input fields.

    0
  10. 12

    Gavin Thomas

    June 6, 2017 2:03 pm

    GDS (and many others) disagree with the mandatory/optional fields guidance

    http://govuk-elements.herokuapp.com/form-elements#form-optional-fields

    0
    • 13

      I wonder how that accounts for accessibility. It could be pretty annoying going through a form, and not knowing if all fields are required, only to submit the form and have multiple errors for fields the user decided to skip.

      In an ideal world all items are required otherwise they wouldn’t be there. But that’s not reality. Business requirements will force it and I don’t think UX research will prove that not having them is somehow faster or better for filling out the form. Unless there’s some research that does prove that.

      0
  11. 14

    Two of my Co-Workers built a jQuery-Plugin for floating forms in case you are interested:

    https://www.npmjs.com/package/floating-form-labels
    https://github.com/Baedda/floating-form-labels

    2
  12. 15

    This was a fascinating and informative article; I was particularly interested in the segment about the rise of conversational forms. Well written and insightful. Thanks, Nick!

    0
  13. 16

    I do not agree with the conversational form interface.. at first sight, it looks cool, but you don’t have control over what the user type. It is so confusing, I will give you an example. If the interface ask you in a human way “What is your name?” then you respond also in a human way something like this “Hi, my name is Matt, are you real or bot?” then I save that into database and my name will be that whole sentence instead of simple “Matt”. Do you see the point?
    if the form asks me in a conversational way “Where do you work”… users will answer in the same conversational way “I work in a company called FaceMatch” instead of just the company name.

    1
    • 17

      Yup, this would require some form of NL recognition and/or validation, ideally with feedback.

      Same problem with free-text form fields, though!

      0
  14. 18

    Nice! Thank you ~

    1

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top