In some countries, more internet traffic is handled on mobile compared to desktop. Soon, this will be worldwide. The amount of hours we use our mobile devices, including games, is already surpassing the time we spend behind our desks. Companies without mobile websites should worry. But it doesn't stop by having a mobile or adaptive website. The next question is how to optimize forms for mobile. Mobile users are far more critical about forms. That's the reason why designers currently focus on reducing the number of questions in forms and the way we present them. Still, I am missing one very important usability issue: the sequence in which we present these questions.
Many websites offer information in the wrong order. Not by accident, but by design. They think their particularly order is user friendly. A well known example: the page title in the webbrowser's title bar. A lot of websites start with the name of the organisation followed by the title of the article, like: "Company Name • Article Title". It seems structured, because we read from left to right and the company is hierarchically higher. But users do not think about the hierarchy of a website. Users are first and foremost interested in the content on the page when they scan the results from a search engine. The name of the organisation is secondary. A better approach is to write your page title as follows: "Article title • Company Name". It is a well known advice, and still many websites don't use this simple and effective approach.
This kind of problems also occur in forms. A form is a crucial point where you talk with your customers. You present your questions and ask the customer to answer. At the end, a form is responsible for conversion. And still nobody likes filling in forms. Therefore, you can never put enough attention in designing a form. Presenting the questions in the right order is as important as reducing them. I will give you some examples.
With a contact form, start with the customer's message
The ordering goes wrong with even the most simple forms. Most contact forms start asking for name and email address, at the end they ask what the customer would like to say: the message. From a user's perspective, it should be the other way around. The users has a question in mind and wants to write it down. He is not interested in the contact information at that moment. Filling in a name and address doesn't reduce his cognitive load. We create a complete different story if we change the order. After the user wrote down the message, it is relatively a small effort to write down his contact information. It would even be a waste not to fill in the correct contact information. He could loose his message. So, with a simple switch, you can improve your contact form immensely.
For the same reason it is a wrong design approach to let the user think about and write down a subject for an email before writing the actual message. Of course, reading the subject before the message is better for the receiver. But the writer's flow of thought is the other way around. The difference between sending and receiving.
Start with payment options
For more complex ordering processes, it is odd websites show payment methods as icons as early as possible to reassure the user, but do not make it selectable. When the user sees these icons, he already makes his decision. The problem is he cannot submit his choice to the system. Why shouldn't it be possible? Websites force users to make choices over and over again.
By asking for payment method as early as possible, we can reassure the user and let him make the choice just once. On top of that, payment methods like PayPal Express - in the future this will be more common - are able to send information already available to them, like an address, to your form. Result: the user has to type even less and less typing errors can be made.
Most websites I see, ask for payment method at the very end, right before sending you to the payment provider. It is supposedly a logical path. But that's not the case. During our usability studies, we see that users do not really care about that particularly order. Therefore, start with payment method before asking for contact information. That way you lower the cognitive load as early as possible and build in the option to let a payment method prefill all the contact details.
Ask for personal information at the very end
Not only is it wise to ask for payment method before asking for contact information, it is also wise to ask all other questions before arriving at the contact information. Even if someone wants to send his order as a gift. The payment method is not the only uncertainty for the user. Contact information is always the least interesting thing to the user. Giving contact information is a requirement and doesn't lower the user's cognitive load. Ask for personal information at the very end of your form and lower the user's cognitive load as soon as possible by asking other questions first.
One of our clients told me to place the questions about the user's contact information earlier in the process, so they can show where the user can pickup his package. Even in that case the rule still stays valid. It is better just to ask for the bare minimum (which is solely the zip code in the Netherlands) and let the system prefill it later on. In that way, it remains a goal oriented task and not a requirement in which the user is not interested.
Ask for company name after address information
A well known example about the importance of optimizing forms comes from Expedia. Expedia removed one question and earned 12 million dollar extra.
When visitors see the 'Company' field, they were confused. Visitors thought Expedia meant they should put in their Bank name. Users then put their’s Bank's address into the billing fields. This led to failed transactions, which led to abandons.
– Zac Johnson, 2012, Landing Page Optimization
This example illustrates perfectly how questions earlier in the process can mislead the user's thoughts.
We tackle this issue by asking, for example, the addresss information first and the company's name second. The user will be presented with a checkbox asking if the above address is about a company. When the user checks it, the website will show a new field for the company's name and automatically focusses on it.
Forms often ask for a company name before the address because that is how we read an address on an envelop or business card. That is our cognitive model. But, by doing so, we place ourselves in the mind of the reader and not in the mind of the writer, the customer.
Group inputs based on interaction style
Also, the way we ask questions should affect the order in which we ask them. Different types of questions, such as text input, checkboxes, radio buttons or pull-down menu's, require the user to perform different kind of interactions, for example: checkbox with a mouse, text input with a keyboard. It is very annoying and inefficient to switch continuously from mouse to keyboard and back.
This is not only the case for desktop users, it also affects mobile users. Each time, the user is required to change the way he is interacting.
Group similar type of questions as much as possible. For example, ask someone to subscribe to a newsletter (checkbox) after the text inputs and not directly after entering an email address (text input) and before a phone number (text input).
A humane dialogue
Removing questions is not always the right approach. When a user wants to share something with you, lets say a company name, you want to provide the user with that option. Instead, focus on the order of questions.
With the correct order you minimize the user's cognitive load as early as possible. You reduce the psychological barrier and the user will create even sooner a commitment to proceed. All the information is already there.
Design a form based on the mindset of the user and not on how we want to receive the information at the end. Writing and reading are completely different goals and require different kind of interactions.
Design Lead at Incision. My background: Industrial Design and Psychology at the University of Twente, graduated at Philips in midair pointing for the next generation TV's, Apple Design Award for CSSEdit, usability researcher at MetrixLab and blogger.
You can contact me via email or Twitter, GitHub, or Flickr.