A UX Guide For Great Forms

If you have a form in your product (which you probably do and why you are taking the time to read this article) then you are probably wondering, “Why aren’t users interacting with it?” And then naturally, “How can I get users to interact with it?” The second question should always be asked and as a byproduct, if you cover your bases, the first may no longer exist. Here’s to helping you cover your bases when it comes to proper form UX.

Create A Delightful Experience

As UX Designers we have seen this phrase scattered around the community. It’s a broad saying that try’s to paraphrase what great UX should accomplish. If a user enjoys using your product it’s pretty much a no brainer that they will continue to use it as long as it satisfies a need. So how can we break down this saying and apply it to great form UX?

Reduce Cognitive Load

Guiding the user through your layout is essential in successfully accomplishing the purpose and goal of that screen. If the screen contains a bunch of unrelated or un-useful information, lacks information architecture, and does not clearly define what the user is trying to accomplish then it will fail.

Why?

The user may be pulled away or distracted, confused as to where key actionable items live, and may not understand why they are performing the task or how they will benefit from it from it and leave. This sounds like a lot of frustrating work for the user. Continually ask yourself, “How can I refine this without losing value?” And “Does this help the user complete the goal at hand?” If the answer is no. Get rid of it. So, how can we reduce cognitive load in form UX?

Keep It Simple

Only ask the user to supply information that is absolutely needed. This is an effort to reduce the amount of work the user has to perform. Long forms will often deter users from filling out and submitting your form. To them it looks like a lot of cognitive work and may not be worth their time.

Logical Flow

Input fields should flow naturally and come across as a conversation.

Eye Tracking: Create A Single Line Of Motion.

The majority of major languages follow the same format when it comes to visual structure. Text is left justified and is read from left to right. We are taught as children that this is how you visually communicate and consume information. Form elements should follow the same status quo. This will increase scan ability and eliminate the time it takes to find the next place in the form to consume or input information.

When the user has a single line of motion to follow they can preemptively expect where their next point of interaction will take place.

Label Placement

Labels should be placed above the input field. This will help reduce the time it will take for the user to complete your form.

Placeholder labels should be avoided. Studies have shown that when users click into the input field and the placeholder label disappears it will allow users to potentially forget the purpose of that input field and lose track of their current task which is to supply the input with their specific information. Also, eliminating standard form labels will make your form unaccessible to many impaired users.

If you absolutely love the look of placeholder labels use Floating Labels instead.

Single Column Layout

Utilizing one column for your forms input fields will keep your single line of eye motion in check. In addition to this each input should own its own horizontal space.

Left Aligned Buttons

The primary action button should fall in the single line of motion down the left hand side of your form. This will also ensure that your buttons will be inline with your form.

The secondary action should be “Cancel” and would be a way out of the form page. This should only be applied where it makes sense. The cancel button should act as the only way out of the page. Having a back button with a cancel button will lead to confusion. Primarily around the back button. What happens with my data when I hit back? Cancel clearly defines you are opting out of filling out the form.

Avoid a reset button.

Description Text

Description text should only be used to clarify the user on important information that they need to know. Since the information is important we will want to show them that before they fill out the field. So, the decription text should be left justified for readability and live under the label but above the input field.

Use White Space

White space can be the most effective tool for keeping your screen clear of ineffective graphical elements that just add more to the screen that the user will have to mentally digest. Visual things we can avoid include horizontal divider lines, drop shadows, a lot of UI element colors, ambiguous icons, ect.

Proper leading, kerning, margins, and padding can create enough white space to visually separate different sections of your form without the addition of graphical elements. Sometimes less is more.

Predefined Input Characters

Use predefined input characters for information such as phone numbers and calendar dates instead of separate input fields.

Communicate: Users Can’t Read Minds

Communication via your UI is crucial to helping your users understand what they are supposed to do. Communication can live in the form of text, graphics, UI elements themselves, colors, icons, etc.

Don’t Yell At Your Users

Your form should contain primarily crucial information for the sake of keeping it simple. That means optional fields would be the minority input requirement in your form. In the vein of reducing cognitive load it is better to tag optional fields rather than a bunch of required fields. Your form will seem more inviting without all the red, icons, and required demands.

Visible & Specific Error Messages

Error messages should communicate to the user clearly what they need to do to satisfy the requirements of that input field. A growl that just says “Error” won’t cut it.

Error messages should display as the user interacts with the form. A user having to submit the form only to find out that it didn’t go through and now they have to scroll back up to figure out what went wrong to resubmit is a pretty bad user experience. That’s a lot of work on their end and we want to try and make this process as simple as possible.

Icons Communicate An Action

I’m generally not a fan of icons. But, there is very limited space in an input field and using an icon in these scenerios makes sense. Icons should live inside the input field and be right justified. When a user sees an input field with an icon it indicates that there is an additional interaction point coming up. This might be a date picker, drop down, time selector, ect. Avoid ambiguous icons.

Input Fields Width Should Match Its Content

Making sure your input fields match the size of its content will help communicate to the user the size of data they will be entering. An example would be a single input field in comparison to a text area. Giving premptive clues to the user as to what they will be expecting creates a more comfortable experience. Try to elminate the fear of the unknown.

Putting It All Together

If you have any questions on any of the nitty gritty details when it comes to forms leave a comment or shoot me an email and I’d be more than happy to help! Thanks for reading. Here’s a bare bones example.