How we design forms at Doctolib
Forms are commonly known to be the dullest part of an interface. It’s become so much of an issue that entire products are being built to solve it. Golden Krishna, in his bestselling “The Best Interface is No Interface” argues that forms might just be the core failure in human-computer interaction. The machine that can’t cope without human input equals humans serving computers and not — how it should be — vice versa. To humanise it further, forms are like an old aunt 👵🏻 nagging you to polish silver cutlery. That aunt who’s never satisfied with the quality of your job. Without ever telling you why, she demands corrections — holding you back from progress.
A good bunch of advice has already been written about form design. I’ll be linking along some great resources, but in this article I would like to focus primarily on a specific case. At Doctolib, where data security is of paramount importance, handling it must be done with extra caution. Considering the nature of users in the medical field (but really any users) — their cognitive overload and the amount of stress to deal with — it’d be silly to assume no errors while adding patient data manually. To address this, we developed a feature that enables reading data from the insurance card and importing it directly to the app. Golden Krishna would be proud: all it takes to feed the system with input is for doctors to scan the card — and voilà, all appears in front of the eyes. Like so:
Wait what? 😳
Problems with forms
Forms can be used for many different purposes: to log in, to make a money transfer, to take a survey, to send a message… and their quiet omnipresence calls for better design. We want our user — be it a doctor, secretary or another healthcare professional — to:
- quickly target and type information in the right field,
- easily find information they need,
- know what can be skipped but also feel supported in case of errors.
Taking the form on the left, you may already have a hunch that neither finding information nor the right spot to type it in strikes as a particularly seamless task.
Make them feel seamless
You see a wall of fields in front of you. Every scroll hurts, you’ll surely have nightmares, what’s seen cannot be unseen. You wish some information was downplayed or at least hidden. Luckily, you’re a designer and instead of whining, you can do something about it 🥊 Your job is to take on the challenge, sort it out, and… have nobody ever notice. Your goal is for the user to never have to think about those fields twice. Using it must feel organic, almost like a conversation. How to achieve it?
Structure
First, let’s confront the enemy: what are we dealing with? In order to answer this question, I’ve listed all the fields and tried to see if they maybe fall into groups. Turned out they did:
Grouping related information into logical chunks helps users make sense of the information they’re filling in or looking at. Moving on from one topic to the next will better resemble a dialogue. So, after that was pleasantly sorted, I took a closer look at each element, identifying issues to solve. For example, can you guess what’s wrong here:
Oh, holy labels. As a user forced to rely on placeholders, I know that this row is all about a name: I type in the First, then the Last. But I gotta wonder: what happens once the content’s already in?
In situations like that, to avoid ambiguity about which name is the first and which the last, top-labelling each field separately is a must. Not to mention, it comes handy when signalising what’s mandatory in case not both of them are:
Not too soon with celebrating success though: glancing at the card below, even with all the fields nicely labelled, I still miss that seamless feel to it. Could you already guess some issues to solve:
There are four different input fields on this card:
- simple input text field — in which user types,
- selector field — with an arrow inviting user to pick something from the list,
- mandatory field — activating form validation when user fails to fill it in,
- date field — that forces a specific date format or else there’s an error.
That’s a lot of different fields. Also, what’s with the six spots for a name? And how about the health insurance — is this section really the most appropriate place for it, does it fit with other information in this category? Any thoughts on the wording of some of those labels?
🤔
When in doubt, contact your data department. After a short investigation, it became clear that the majority of patients have no tiny words attached to their names. Herr Prof. Dr. Marley Gräfin von und zu James — is the possibility though. And don’t forget to add the birth name in brackets. The rule of thumb is always: the fewer fields for user to take care of, the better. Keeping the conversion rate in mind, it made sense to make those extra-detailed fields accessible only on demand — in case the user’s looking for it. And to make this form even more delightful, let’s also order the fields in a logical way that represents the natural flow of the name, so that users don’t need to guess which part of that monstrous name refers to which label.
Speaking of names, together with UX writers, we decided to switch from informal, chilled, funky “Job” to a more mature sounding “Occupation”. We also cleaned up the placeholders to be consistent across all cards. When it comes to the placeholders, “Type here” has been used here as the most effective in inviting users to take action. However, the conversation about actionable placeholders is what’s currently on our minds and we would be thrilled to ignite the discussion on the topic in the comments!
Learning more about the context, it also turned out that the health insurance information is there to trigger specific behaviour: in a form for a publicly insured patient only one field is mandatory, but for the privately insured — a few others. A much more detailed insight about patient’s insurance has its own dedicated space under a separate tab and we also know that the vast majority of patients in Germany is insured publicly. Maybe then, using a simple checkbox could be an idea?
Now, let’s talk about making selections. In this case, two ways have been considered: radio buttons and a selector field with a dropdown. It is commonly known that using radios is appropriate for when there’s only a small number of items to choose from and when it’s useful to compare them at a glance. However, using radios in our cards would make it tricky to display more than three options due to the limited space (you don’t want two rows of gender types, do you). Additionally, the consistency between selector components better supports readability.
Lastly, I added a calendar icon inside the date field to free the user up from complying to a specific date format. Clicking the icon opens a calendar window where the date can simply be picked. On the other hand, if the user wants to type in the date, a technique called input masking has been enabled: as the content’s entered, the necessary dashes, dots, slashes are applied automatically to avoid format error.
Cards
One of the biggest problems of the old design was the lack of hierarchy — all fields crammed together, without a clear guidance where to look at. This issue has partly been solved by chunking the content and grouping it into cards. But to really ensure the proper information architecture, let’s add titles. In the end, what we do here is making sense of a mess and titles tend to offer wonderful anchoring capabilities.
Another tool that could — and should — be used to enable better readability is the king of all good design: alignment 👑 Make sure your margins are set to the same value on each side: top, bottom, left, right, so that no eye of any reader must ever jump across a complicated layout. Similarly, ensure that the space between rows is equal, to enhance the feeling of clean and harmonious.
Your best friend for when you’re seeking that clean vibe in design is white space, hands down. Can you see how different each of the information displays feels like depending on the amount of white space around the content?
When I showed these three iterations to designers on the team (special shout out to Asier Villagrá who’s obsessed with margins), they unanimously squirmed at cards on the left and right. The first one feels suffocating, the last one — unnecessarily odd. On the other hand, the card in the middle presents a balanced approach: enough white space for the form to feel natural while still making the best use of space and creating no waste.
Drunk with that balance, we took it a step further and tested the idea of collapsable cards. They allow users to get an overview of what’s on the page without having to zoom down. They also support focus on the most important information at a given moment and, by the intuitive functionality, put control in user’s hands. This solution will be put to test with real users though, for there’s been rumours collapsable elements might be causing usability issues among non-digital natives 😅
Feedback
Like I mentioned at the beginning of this article, one of the main functions of a form is to communicate with the machine, so that it can do the job. For example, when a user selects a checkbox, they opt-in for notifications and — as a result of that communication — the machine knows to notify the patient about their appointment. This function has originally been placed below all fields. However, following the gestalt principles, it becomes much more self-explanatory who’s getting notified, via what media — if it sits next to Contact details. It’s worth remembering that placing similar items together optimises user flow.
But feedback has its source on the machine’s side as well. For example, when there’s something wrong with the input. Signalising that the user can’t move on unless they fill in the field must happen at the right time. We’re all familiar with that itch of frustration, when, completely oblivious about what’s mandatory, we click “Next” and the screen turns red with error messages. To alleviate the pain, two things can be done:
- clear feedback about what the required information is (to prevent error),
- easy recovery for when the error happens.
Now, let’s move on 🚀
Next steps
Some of you, more vigilant nerds, have probably noticed that our input fields (label on top) are not following the best of the best of practices. The research on this component clearly suggests that the floating label usually best supports usability. It not only saves space but also provides a cleaner page with less distractions and more targeted experience. Thanks to floating labels, the user’s eyes don’t waste energy to travel in a Z-shape and there’s no doubt about what should be the typed-in input because placeholders never disappear.
At Doctolib, we strive for the best design solutions to satisfy user needs but also for us, to follow design practice of the highest standard. For this specific project, we decided to start with an MVP that includes restructuring & new card design. Following the Lean UX principles, the floating label input fields will only be introduced in version 2, as they require a methodical approach to all forms on the platform.
This being said, it’s worth sparing a few words on the sweet reality check. Presenting this redesign idea to the team yielded an interesting reaction, expressed almost in unison: “We’ve already been getting to redesign it in the past”. Why did it have to wait in a backlog for so long then? There are several reasons:
- This page has pretty much been a core of the B2B product, created back in the days, when Doctolib was still being designed by frontend devs (no offence). This means, our users have probably already got used to using it, even in this far-from-ideal format.
- As mentioned before, it’s quite rare that users actually fill this form in — what’s usually the case is simply importing data from the insurance card. Therefore, the pain of finding information while scanning the form was proportionally not that big of a deal from the business perspective (ouch).
- Lastly, for more details on how crazy complex developing forms is, check out this article written by one of our talented devs 😎
Conclusion
Alright, let’s see if we could extract some insight about what to remember when designing great form experience:
✅ Structure your form in a logical way
- Make sure your form is as short as possible.
- Group related information into logical chunks & order your fields to represent the natural flow.
- Place your labels above individual fields & make the placeholders useful.
- Choose appropriate selectors & use input masking wherever possible.
- Consult your UX writers for a complementing copy.
✅ Support better user experience with visual elements
- Ensure proper information architecture, for example by adding titles to different sections.
- Align your content according to the best standards.
- Add appropriate amount of white space for content to breathe.
✅ Communicate well with both, the user and the machine
- Prevent error by providing clear instructions in advance.
- Try to ensure easy recovery for when the error happens.
Wanna contribute?
Have more ideas on how to create seamless forms? Get your hands on our Career page to learn more about design & research opportunities. We’re always on the lookout for talent, so feel free to reach out!
