The New Rules of Form Design, Button Bars, Plasticity, and more
There are changes to what is popular – and working – in Form Design
And these changes apply to what you need to know about form design in FileMaker. And I think this is a good thing, as form design (and readability) suffered from the Flat Design fiasco that swept the design world a couple of years ago. But there’s a lot more to this article than just the use of colors:
We’ve all heard that when it comes to form user experience, shorter is better. But this guideline fails to account for other factors such as which fields are used, how they’re designed, and how engaging the form experience is. That’s why Mike Madaio is here to show us the new rules of form design….
The sacred cow when it comes to form user experience is that shorter is better. And though this certainly seems logical—that less user effort will lead to higher conversion—this guideline fails to account for other factors such as which fields are used, how they’re designed, and how engaging the form experience is.
As one example, the study I found referenced far more than any other, quoted as gospel in slew of articles and presentations, was shockingly limited. Conducted nearly 10 years ago by Imaginary Landscape (an open-source web development agency), it shows how an 11-field form, cut to 4 fields, drove a conversion increase of 160%. But this was simply one page, one test, two variables. That’s it. Did they try different groups of 4 fields, for example? No. What about 10 fields vs. 11? 5 vs 4? Nope. In this one particular case, yes, cutting the amount of required information by 64% made the form easier to fill out.
In a presentation at Call To Action 2015, Michael Aagaard of Unbounce shared a study of similar focus. Tasked with improving lead conversion on a particular form, he first cut the amount of fields from 9 to 6. Conversion dropped by 14%. Digging into the research, he discovered that the most engaging fields to users were the removed fields, resulting in a less compelling experience. In round two, he tweaked the original form for clarity and organization, but kept all 9 fields. Conversion increased by 19%. Turns out shorter isn’t always better.
It turns out that shortes isn’t always better. Who would of thought that? And how do you change your forms to deal with it?
Read the rest of the article. Here is some of what you will learn:
- Prioritize scanability (including label location, floating labels, and placeholder text)
- Providing effortless formatting (input masks and proper input mobile keyboards)
- Limit typing (for FileMaker, this includes lookup fields and auto-complete)
- Leverage location (something now available to FileMaker developers)
Finally, there is my own pet peeve: Use high contrast, dark colors. You won’t appreciate this until your eyes get older and lack of contrast makes it harder to read your form. Especially on small screens. And given that your goal is to get people to fill out your form, that is one more thing you can do to insure that it happens more frequently.
Source: The New Rules of Form Design | UX Booth
Control the look of Tab Panels
If you’ve wanted complete control of your tab panel’s looks, check out this post from Mark Scott of BeezWax, Fun with FileMaker Button Bars, Part 2: Expert Panel. Check out this panel made from Button Bars:
That’s pretty impressive! Read the whole thing, and be sure to download the free FileMaker example file.
Seth Godin on Plasticity:
It’s possible that you’re the way you are, that you do what you do, that you react as you react, and that it can never be changed.
Believing this is incredibly sad, though.
Each of us is capable of just a little more. A little more patience, a little more insight, a little more generosity.
And if you can do a little more, then, of course, you can repeat those changes until you’ve done a lot more.
If you don’t read Seth Godin, you are missing out. Here’s his website address.
The customer doesn’t expect everything will go right all the time; the big test is what you do when things go wrong.