Humans. We’re such shallow creatures.
When we find someone attractive, we automatically attribute other positive qualities to them: “She’s beautiful, so she must be funny and smart too!” We know this isn’t necessarily true—but we can’t help ourselves.
This kind of cognitive bias has a name in social psychology: the “halo effect.” Fuelled by aesthetics, our minds project a golden orb onto the person in front of us.
Interestingly, something similar happens in UX.
Consider the websites of Apple, Zara, and Airbnb. Sleek, restrained, intuitive—all three are a master class in beautiful UI (and an ode to Hick’s Law). That’s the aesthetic usability effect: We believe visually appealing interfaces are better, faster, easier, and we’re more tolerant of errors if they occur on a gorgeous screen.
“Attractive design makes users more patient and tolerant. And when it comes to form-filling—a task that often causes impatience and frustration—that is crucial.”
Our positive emotional response helps mask usability issues. This played out in a recent study of the Fitbit website: despite serious navigation flaws and interaction difficulties, one user rated the site very highly: “It’s the colors they used. Looks like the ocean, it’s calm. Very good photographs.”
That’s why a little shallowness is not just understandable, but important, when it comes to form design. After all, first impressions count: It only takes 0.05 seconds for someone to decide if they want to stay on a page.
Of course, a form needs to be more than a pretty (inter)face; it should be clear, quick, and easy to use, but it also needs to look like it is clear, and quick, and easy to use.
We at Jotform recently rebuilt our main forms tool, and we learned a lot about the principles of form design while doing this. Now you can learn from our work.
The advantage of familiarity
More than 36,000 branches of McDonald’s operate worldwide. I’m not much of a Big Mac fan myself, but I always find myself in the queue when I travel. There’s something hugely comforting about seeing something familiar in an unfamiliar place.
There are no nasty surprises. You know what to expect. It’s like a security blanket. Familiarity helps when it comes to form-building, too. Certain features work precisely because we’ve seen them a million times before.
Use recognizable fields
Radio boxes, image picker fields, checkboxes—they do what they say. Users can glance at them and understand what they’re being asked by default.
Oh, and go easy on the styling. Standard formatting of form elements is widely accepted to equate better usability. No double-checking required.
Keep design consistent
An effective form illuminates the path to completion like a one-road map. Users should be lulled into a rhythm of answering that doesn’t require them to think too hard.
People often don’t give forms their full attention: they’re tired, bored, or distracted—so repetition and reliability are crucial.
What we learned about form design from rebuilding our own
Consistency reduces learning curves, especially in forms. However, we built JotForm Cards with one (quite big) aim: to reinvent forms. That meant they had to look, well, new.
The visual identity had to be different from all the other forms out there. But it still had to a) look like a form and b) leverage the power of consistency. No easy feat. In the end, though, our solutions was fairly simple: we made the layout of each card identical.
The answer input box is always in the middle, the description is always at the top, the previous and next indicators are always left and right, respectively. The description and question label are the same font and style, creating a clear distinction in comparison to the input box.
The Card layout will feel unfamiliar for new users. That’s okay; it will quickly start to feel like an old friend, thanks to the power of consistency.
One-thing-per-page
Chinese takeout menus. Government forms. The number of headphones for sale on Amazon. Dozens of options, or questions, presented at once boggle our minds.
When a task looks boring, complex, and/or time-consuming as a whole, our brains default to distraction mode. As content multiplies, we begin to feel overwhelmed.
“An effective form illuminates the path to completion like a one-road map. Users should be lulled into a rhythm of answering that doesn’t require them to think too hard.”
That’s why we decided to use one-thing-per-page when we built JotForm Cards. We wanted our users to be able to focus on the question at hand—not the questions as a whole—so we decided to present each one individually.
One-thing-per-page is a psychological technique defined as “…splitting up a complex process into multiple smaller pieces, and placing those smaller pieces on screens of their own.”
Basically, users have only one important thing to focus on at a time.
- One piece of information to understand
- One decision to make
- One question to answer
Other page elements, such as titles, branding, icons, and the progress bar are hidden, but easily accessible with the click of a mouse.
Less page noise equals less friction; less friction encourages users to stay on task. And being able to move through sections quickly creates a feeling of momentum.
Ryan Holiday stated in The Obstacle Is the Way:
“Remember the first time you saw a complicated algebra equation? It was a jumble of symbols and unknowns. But when you stopped to break it down and isolate the parts, all that was left was the answer.”
Give context
The form-filler’s nightmare: You fill out a page. You click next. No dice. You’ve missed a field or answered something incorrectly—but you don’t know what. You’re forced to trawl through your answers and keep refreshing the page until it lets you progress, like the worst guessing game ever.
This traumatic, teeth-grinding frustration is something we wanted to avoid at all costs. Ditto guesswork. We were on a mission to make interactions more transparent and human.
So we created fun micro-animations to nudge the user toward the correct action for each card, giving context and clarity to the questions. And in the case of an error, the screen shakes “no” as soon as an incorrect answer has been entered.
There are opportunities for context and shortcuts everywhere: letting users select their delivery address as their billing address, including postcode lookup, and using predefined answers. They may seem like small touches, but they go a long way.
Size matters
User-friendly things, like all other beautiful things, are well-proportioned. A Baymard Institute usability study found that if a field is too long or too short, users start to wonder if they understood the label correctly. This is especially important for fields with unusual data or a technical label like CVV (card verification code).
Adjust the width of the field so it’s long enough to contain all the characters that could be input— users should be able to see their full entry—but no more.
Of course, there are exceptions; some fields—like “Full Name”—should be kept as variable as people’s full names are.
Prioritize glance-ability
We all scan web pages, rather than read them. The same goes for filling out forms.
Users read only about 20 percent of the content on any given page, and their eyes will glaze over when faced with a large block of text. That’s why it’s so crucial to label elements like titles, headers, and buttons correctly. Users should know what happens after each click just by glancing at the button.
“Less page noise equals less friction; less friction encourages users to stay on task.”
Generic labels like “process,” “submit,” and “send” aren’t much help to anyone. Customize this text to describe the action as accurately as possible. The resulting label should complete the sentence “I want to…” from the user’s perspective.
A beautiful form = beautiful data
Attractive design makes users more patient and tolerant. And when it comes to form-filling—a task that often causes impatience and frustration—that is crucial.
For once, we can be grateful for humanity’s tendency toward shallowness. Beauty is no substitute for brains—a form needs to run well in the back end—but the aesthetic usability will enhance what’s already there substantially.
Looks aren’t everything—but they’re a good place to start.
Want to learn more about form design?
UI Developer at JotForm.
