How to Design a Talking Form

Today you’re designing something new. Something simple and straight to the point. A new digital experience that will bring your company new prospects and keep the conversation going with the existing customers. Something that really works, that keeps users interested and involved.

A form. Somehow this modest word resonates of exhaustion. Forms can be little and artless, but this one you’re designing today resembles a long questionnaire from the physical world, like opening a bank account, filling in your CV into the company’s template, or paying your taxes.

Let’s go

Think of your form as a meeting room. You’re sitting there, waiting for someone to come in and talk to you. If your guest feels like staying, then you both engage in conversation. Now, is it a conversation that he really needs to have? Does he need to travel and do you have, by far, the best available rate? Or is he just shopping around for new software and he has some specific queries for you and your competitors? Is he trying to register in order to belong to your community or social network? Or is he concluding a specific task, like a wire transfer or paying a bill?

Whatever his objective is, can this be a positive experience? Can this replicate good customer service and be a digital touchpoint for new or existing relationships? How can you leverage user effort to make it look more like a conversation and less like someone handled you pen and paper, and then told you: please fill it in and get back to the queue when you’re finished?

Set the tone

“Every question you ask someone within a Web form forces them to decide what you are asking, come up with an answer, and then enter their answer into the affordance (form input) you have provided.” (Luke Wroblewski, Web Form Design — Filling In The Blanks)

A form can be the last and decisive step to completing a task in your website, and users generally need to be really motivated to go through long and (apparently) difficult forms. In this kind of conversation, there’s no face-to-face and no smile, so all the non-verbal communication to keep a positive vibe also needs to go on your design.

Creating a good look and feel will make people enter the room; great user experience will define if the conversation ends where it should. This means setting clear expectations and minimizing distractions, but also, and more importantly, avoid tricking your user into unintended actions (what is commonly known as dark patterns) and bear in mind that integrity is the key to building up any relationship.

Tell the story

Start by breaking the information into coherent categories, a little like storytelling — with beginning, middle and end. This works by organizing questions into groups that make sense to the user and make a clear separation with clear titles, wizards or even tabs to each section.

If you make your intentions clear, identifying all form sections, organizing questions according to blocks of meaning and clearly identifying the main action in the form, it will help the user to decide if he wants to engage to the conversation or not. Stay in the room or leave. Do I have time for this? Do I have the answers to these questions?

More than that, during the process, it will prevent sudden changes of topic, which can create confusion and frustration; and unexpected questions, which can be time consuming and produce abandonment. I don’t have my credit card here, I’ll do this later on.

Make sure your user knows where he is, and what to do next. He has a specific goal, a task to fulfill, and the feeling of being lost and not knowing how long the whole thing will take, can also be causes for abandonment. Show progress in your timeline or wizard, collapse the completed panels or show section validation to reinforce motivation.

Drive the conversation

The good impact of having a structured form, with clear parent-child relations, questions and sub-questions, can be enhanced by displaying only the information that is relevant to your user at a given time.

That means carefully selecting your questions, removing the unnecessary (why do they need my birthday?) or clarifying why you’re asking (we’re sending you a little surprise for your birthday), and using tools like progressive disclosure to separate information into multiple layers, revealing new questions based on the answers given by the users. A simple and very common example would be displaying the state field only if the user lives in the US, and not forcing him to be creative. I don’t live in the US, but (sweet home!) Alabama seems like a nice place.

However, as there’s always the risk of miscommunication, preventing error is critical. There are specific strategies to do this, such as using placeholder text with examples on how to fill in a specific field, tooltips, micro-copy with further explanations, contextual help, properly signaling the mandatory or the optional fields, autocomplete, selecting from given options instead of trusting free text, which is especially difficult in mobile… But none of these rules work better than removing the unnecessary and presenting your questions with clear and unambiguous language.

No matter how good your error prevention strategy is, you will still have to deal with errors when they happen. And they will happen. Explain your user what he is doing wrong with clear language and let know what to do to overcome the problem. As soon as possible, and as close to the error as possible. And don’t just rely on server validation — don’t wait for the user to submit the form to tell him that something is wrong. That can cause a fit of rage!

Stay positive

So today you’re designing a new form. Make it simple and straight to the point. Make sure all fields are relevant, and that you group information in sequences that are natural to your user, reducing cognitive effort and abandon.

Take into account that the user can face numerous errors along the way: invalid dates, too many characters, incorrect credentials, incompatible browsers… It is a little world of try again, but the blame is never his, and you should make sure that any errors he makes along the way are properly highlighted and clarified.

All along the conversation, remember that from your user’s perspective there will always be some uncertainty tied to the process of filling in a digital form… it may derive from vague or unclear questions, too many questions, or just the overall suspicion that he is alone in the room. Your job is to make him feel like there are humans around.

Sílvia Otto Sequeira | UX Expert at OutSystems

This is part of the process we run as an Expert Services team at OutSystems, to help our customers deliver great user experiences, that are fully aligned to user expectations.