Mobile Form Design Trends: Part 2
Creating the illusion of less in form design
In 2012, Google conducted research that correlated visual complexity with negative first impressions by users. Shockingly, customers will judge a website’s appearance in just 1/50th of a second! The more visually complex it is, the less they will like it. This type of research is most commonly discussed in context of a homepage, but its relevance extends to all the pages of your website and when your customers go to “check out”, you’d better believe they are going to judge the page that loads and process that follows.
So how do you reduce visual complexity in checkout and encourage the customer to complete the process – particularly on a mobile phone where data entry is slower and more difficult?
Well, we have some good news…we’re seeing some new and innovative form design conventions that help create the illusion that less information is required from the customer and checkout is ultimately easier and simpler. Even better – these patterns worked when we conducted usability tests with customers.
Combined Data Fields
Traditionally, the form we present to the customer is a direct reflection of a table structure on the backend. Each field corresponds to a separate and distinct cell in a database. But why should we impose backend architecture on the customer?
One way to streamline forms, and ultimately the data entry process, is to combine data points which would normally be collected separately into a single field. For example, rather than display 2 fields for both First Name and Last Name, display 1 field for First and Last Name. This minimizes the number of fields on the screen and reduces the amount of taps a user has to make to move between fields.
This is definitely a less common form design convention and one Spark was particularly interested in testing. Staples’ mobile checkout, which is built on the SkavaOne platform, has radically simplified their checkout screen by employing combined data fields. They have managed to reduce what used to be 21 fields down to just 5 to start. First and last name are collected in 1 field and all address details are collected in 1 field.
Is this successful? Based on our research, yes. Staples smartly combined the single address field with a predictive address feature so that a user can select their address from a list and reduce their data entry necessary to checkout. If there is an error, Staples reverts to the traditional form display with separate fields for all data points.
Staples combined first and last name field in action….
The only issue we observed was the name field. One of our 3 users failed to enter their full name and only entered their first name. This issue is actually tied to our insight in Part 1 about in-line labels. Once the user starts to type, the label goes away and the user loses context as to what information they need to input into the field. This becomes more important with combined data fields, to which customers have less familiarity.
Progressive Disclosure of Form Fields
Progressively revealing more and more information as the user asks for it is not a new concept. Menu systems, off-canvas push panels, accordion panels…there are a multitude of UI patterns in place that allow designers to reduce the amount of information that is visible on page load.
We have to return to the Staples mobile checkout in order to see how this convention can be applied to form design to create the illusion of a less involved checkout process. As we mentioned above, Staples combines data collection into single fields, but they also hide form fields behind buttons that look like text fields. For example, “Credit Card Details” looks like a text field and certainly encourages a tap because of it. On tap, the actual form fields for credit card number, CCV and expiration date are displayed – this is progressive disclosure. We see lots of single page checkouts on mobile that progressively display steps of the checkout process. But it is Staples’ use of an initial text field button that is so compelling. There are no progress bars, headers or other indicators framing steps in order to communicate “process”, “multi-step”, “lots of work ahead” – just a simple text field.
Staples credit card fields progressively disclosed to users….
Our test participants had no issue with the progressive display of form fields. There was no confusion or surprise. Users went about entering the form data as they would in any other implementation. The difference was in their perception of this checkout versus others. The Staples checkout was perceived as easy, simple, streamline and to-the-point. In fact, the overall perception of the Staples checkout by customers was unsurpassed by any other site we’ve tested. While the same amount of data is required during this checkout as any other, the simplicity of the process is unrivaled thanks to these 2 UI conventions.
“I think this mobile checkout was much more streamlined than other times I’ve shopped from my mobile phone. Other mobile sites have required additional time & information, which I hate.”
-Usability Test Participant, m.staples.com
A Quick Note
We conducted this research in 2015. Our research findings are limited by the number of participants, their context, the site content and task(s) selected for the study.
- Form Design
- user testing