Form Conversion Lesson One – Creating a Great User Experience

Looking for ways to increase the number of people submitting your forms? Here are specific tips to make your forms a lot more user-friendly!

We know from eye tracking studies that most people consume a web page (or a form) by scanning in an “F” shaped pattern across the page. Most of the focus is on the left margin as they scan down, with the eyes moving right less and less as the reader scans down the content. Consider this eye tracking graph again for a visual of what we’re talking about:

http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

This means a few things for your forms. The examples below will show you low interaction cost methods of form building versus some common methods we often see that can be less than ideal for your users. Keep in mind this isn’t a “always do this but never do this” mandate. Every example is situational. Treat these as rules of thumb that can be broken using your own good situational judgment!

Let’s begin by looking at a form that’s a model of easy scanning. We’re going to take this form and do horrible things to it 🙂 The point is to give you a visual of how different things we see commonly done impact the user experience of the form.

Our model form:

ss1-model-form

Columns

Scan the above, now scan this:

ss2

So this isn’t so horrible at all. In fact, the columned form is easier to scan than the model form! Since we tend to scan in the F shape pattern naturally, it’s easier for us to take in a shorter, columned form than a longer single column. It’s super easy, drag and drop level easy, to arrange your form into columns using the Layout and Styles add-on.

Instructional Text

Instructional text is great when it’s really needed, but text that isn’t strictly necessary raises your form’s interaction cost. An over-the-top example, but to get the point across:

ss3

There’s WAY too much to read here, and people are more likely to nope on past your form the more reading they have to do! Keep the amount of extra reading they need to do to a minimum.

When you do need to add instructional text to a field, just click on the field to open the field settings drawer. In the field settings, expand Display and type your instructional text in the Description box!

Ghost or Placeholder Text

Overuse of ghost text inside the fields can also make your form even more difficult to process, for a couple different reasons.

ss4

Our eyes are drawn more easily to fields with whitespace in them. Empty fields act as kind of a micro-landmark for our eyes as they scan. Filling that whitespace with ghost text makes the form progressively harder to scan.

Another factor is memory load, or making people remember what the heck they just read. Ghost text disappears when you click into the field, so if you put instructions in the field as ghost text… it’s gone as soon as they click. You’re forcing your users to remember directions they don’t have anymore, which is a pain.

In situations that do require ghost text, you can find it by clicking the field to slide out the field settings drawer and expanding the Advanced option there. You’re looking for the Placeholder field.

Label Placement Matters

By default, field labels in Ninja Forms appear on the top left of a field. Without very good reason, they should stay there. Compare our model to these left aligned fields:

ss4pt5

This alignment pulls the eyes in a zigzag motion down the page, increasing interaction cost for no real gain Unlike columns where there’s useful info to the right and zigzagging is productive, this just yanks your eyeballs right for no reason.

If there is a good need to move form labels, you can do so in Ninja Forms by clicking the field to slide open the field settings window and the adjusting Label Position at the top right.

Don’t Yell at People

Using all caps isn’t just rude when you’re commenting on the intertubes. It also raises interaction cost in your forms. We’re used to the convention of capital first letter, lowercase word. Putting your labels in all caps requires more processing power on the part of the user. And it just plain looks obnoxious 🙂

ss4pt6

Paragraph Fields vs the World!

Getting even more into niche use cases here, Paragraph fields should be used sparingly. They’re useful only for times that you want a user to send you information that could not be delivered in any other way.

Any time you’re considering adding a Paragraph text field, ask yourself if there are other options to collect the same data. For example, this:

ss5

…is much better communicated as:

ss6

Not only is this more scannable, it is far less interaction intensive for the user. It’s also much easier for you to get the specific information that you need!

Using Conditional Logic and Multi-Part Forms to Lower Interaction Cost

We’ll talk about this in different contexts and in more detail in future installations of this course, but both Multi-Part Forms and Conditional Logic present excellent opportunities to reduce interaction cost in your forms.

Think about a typical user on a typical desktop, viewing a webpage. If I have to scroll down the page just to see the rest of the form on my desktop, I’m much less likely to engage. If there’s just a couple fields though… sure! Then, if I’ve already put even just that minimal level of investment into it at that point, I’m much more likely to continue filling out the form if I’m then taken to a Page 2. Your first page is a hook, and the rest of the form is more bitesize. More bitesize = less intimidating = more people filling the thing out. Break forms into pages easily with Multi-Part Forms.

Alternately, you can hide fields that are situational. If everyone doesn’t need to fill it in, then not everyone needs to see it. Use Conditional Logic to present certain fields only as needed, and you have a shorter, less intimidating form at first glance.