As you may have heard us say before, in order for your site to work (i.e. actually contribute to your business’s bottom line) you need to have CTAs that are attractive, easy-to-understand, and valuable. We refer to these as the three Cs: Clear, Concise, and Compelling.
So, when we talk about calls to action, we’re talking about a request for a user to trade their info for something of value. That means you’re going to need to capture their info in some way. In the vast majority of cases, this means using form fields. Form fields may sound like the most straightforward thing in the world to design, but (like anything), the reality is a bit more nuanced.
“Wow, the design of form fields, how thrilling,” you may be saying, and I’d forgive you for thinking it. An insatiable urge to create the perfect form field isn’t why anyone became a designer. That being said, they are one of the best uses of a designer’s time from an ROI perspective.
If creating a great user experience is in the details, something as simple as how form fields look and work is pretty crucial. In fact, spending time and focusing on this will net you better results (like actionable, sales-qualified leads) from your site than any other design element or pattern you might focus on (I’m looking at you, parallax).
Your CTA has a price — don’t be afraid to name it
So, what makes a form both inviting and attractive?
First off, don’t hide the form fields! You see this pretty often these days (including here on Newfangled.com — for the moment, anyway), where a CTA displays an offer, and then requires a click or some other action to see the form fields you have to fill out. It’s a design pattern that’s often described as “cleaner,” and on the plus side, it uses less real estate. But it’s also a bad pattern for UX.
Usability folk refer to this as “hiding the cost of the interaction.” Basically, you’re making an offer to your user: “give us your info, and we’ll give you X”. The cost to the user is the info they have to give you. Like anything else with a price, in determining which form fields to include in a CTA, you’ll need to balance out what information you want versus what someone would likely be willing to pay. Usually (not always, but usually), it’s not a great idea to hide your price. Same goes here: don’t hide the form fields, since that’s the cost the user has to pay. Let them know upfront what your Blog Digest (or whatever compelling offer your CTA has on display) will cost them.
Use a light touch in your form design
Here’s a fun fact: the eye is drawn to a form field that’s empty (and looks like it has some depth). Nature may abhor a vacuum, but the eye loves it. Don’t fill that beautiful empty rectangle with an in-line label or placeholder text. Put the label above the form field.