Let’s talk about feelings, emotions, and forms.
In Designing for Emotion, author Aarron Walter lays out the hierarchy of user needs. Digital products should be:
- Functional. They solve a problem.
- Reliable. They work consistently.
- Usable. They get the job done to a high standard.
But they should also be pleasurable—aha!
Of course, we know that the latest iPhone or slick online shopping experience needs to evoke feelings of surprise and delight—but what about products that are more utilitarian in nature? Like…forms? Can they surprise and delight too?
My short answer to that is: absolutely.
And all it takes is a little imagination.
Let’s go into:
- Nontraditional form elements
- UX flows for forms
- Tricks for designing playful forms
Explore the potential of UI elements
Form design should be consistent, but that doesn’t mean it can’t integrate little moments of surprise. By using nonstandard UI elements like clickable images and toggled sliders, you can make form filling enjoyable and intuitive.
(Move your design to prototype easily using InVision Craft.)
This train of thought formed the basis of some features in our product, JotForm Cards.
“Form design should be consistent, but that doesn’t mean it can’t integrate little moments of surprise.”
Sure, the design itself looked cool, but what about the form-filler’s experience? Could users express their answers in a more dynamic, interactive way? We thought so.
Orange you glad you’re filling out this form?
Evaluation slider
By dragging the blue dot or clicking on the gray one, respondents can see their answers change at their fingertips.
Sliiiide to the left. Sliiiide to the right.
Emoji slider
Users can express their level of satisfaction by using emoji sliders instead of scales. Hated the event? Crying face! Super-happy? Love-heart eyes.
The emoji slider lets form-fillers answer in the teenager’s native language.
Yes-No toggle
It’s satisfying, it’s simple, it’s decisive.
When we watched the user-testing videos, it was obvious that these new features made people smile. And lucky for us, such responses are easy—and fun—for us to evaluate.
Keep it simple for the people.
Good UX flows
Tasks that are easy and satisfying to complete will lull users into a state of flow: peak enjoyment, intense concentration. This is tricky to achieve at the best of times, and if users encounter obstacles and errors, it’s downright impossible.
We needed to work hard to create a smooth path to completion that requires minimal effort on the user’s part. Success here is defined by minimizing pain points and foreseeing moments of frustration.
“Tasks that are easy and satisfying to complete will lull users into a state of flow: peak enjoyment, intense concentration.”
Motorize actions
High cognitive load is the enemy of successful form-filling. It happens when people have to think or do more than necessary. Motor actions are less “load-intensive” on your brain than those pesky cognitive actions (which are a bit like the type of software that makes your laptop slow down).
That’s why every UI element should ideally involve a motor action (a mouse click, for example), rather than a cognitive action (anything that involves thinking and typing).
(Explore your UI elements using InVision Cloud Prototyping.)
Where can you cut corners to reduce the need for typing? Think predefined answers, autofilling, smart defaults, and zip code lookup—according to Google, these features help people fill out forms 30 percent faster. Both Google and Parsley offer a JavaScript API for your site code to cut down on typing.
“High cognitive load is the enemy of successful form-filling.”
Minimize clicks
OK, so you’ve transformed every action into something clickable. Now it’s time to cut out as many of those clicks as possible. When Microsoft changed their shutdown prompt from a clickable shutdown icon to a dropdown box, they found that fewer people were shutting their computers down—just because of an additional two clicks.
Always use checkboxes, and use radio buttons instead of dropdowns. Never splice fields for phone numbers or date of birth.
(Get valuable feedback on your designs using InVision Freehand.)
And most important, reduce fields. Cut as many as you can, and then cut some more. Expedia lost $12 million by asking one additional question in their booking form. Don’t follow in their footsteps.
Shorter web forms create less friction for users, which improves the chance of a conversion. A study by Hubspot found that reducing the number of form fields from four to three improves conversions by 50 percent.
“Usability is what allows people to accomplish their goals, but 
As the mathematician Blaise Pascal famously said, “I have made this longer than usual because I have not had time to make it shorter.”
Form design, but make it playful
Brains love to play and experiment. There are plenty of ways to gamify the experience of form-filling by leveraging the power of momentum. And adding humorous twists with animations makes the experience that little bit more human.
Gamify
Well done! Keep going! Almost there!
This is the type of encouragement we want to convey to help our users complete a form.
For example, JotForm Cards’ multistage layout follows the theory that users are more likely to continue when they feel like they are advancing. Always moving to the next step, as opposed to statically remaining on one page, creates a sense of momentum.
“Animation marries beauty and emotion with function.”
We illustrate this with a progress dot that shows how many questions have been completed and how many remain. This dot appears only when the user hovers over it. Users can easily switch to overview mode, which lets them toggle between numbered questions and use a free horizontal scroll, just like a map.
Animate
Animation marries beauty and emotion with function. It can make the interface feel alive, grab user attention, and illustrate errors or instructions in a brighter, more engaging way than a static screen can.
If the user inputs something incorrectly, the screen shakes “no” to notify them. Every step should make users feel as if they are moving forward toward a goal.
Final thoughts
Designing for a good user experience involves a lot more than making a product usable. Usability is what allows people to accomplish their goals, but experience is what makes your product memorable.
Good UX is satisfying because it has been crafted thoughtfully. It immerses you and spurs you on, like a game, an app, or a movie. And there’s no reason why forms can’t tick all of those same boxes.
Remember, user experience isn’t just about usability—it’s also about feeling. So make your form a pleasure to use by connecting feelings with features.
