Mobile Form Design Trends: Part 1

How you can make data entry easier and more intuitive for your customers?

Let’s be honest. Forms are functional – not aspirational. If given the choice to design a homepage or design a data-entry form, most design teams and clients would pick the former.

That choice isn’t all that surprising. Our design toolbox is bigger and more impressive than ever before: rich javascript transitions and animations such as parallax scrolling, fullscreen video backgrounds, web fonts, geo-targeting & personalization capabilities…the list goes on and on. It’s just natural that we (and the client) want to spend more time on the pages that are aspirational in content and tone.

But the reality is, forms are the backbone of the experience. They are the final step in the conversion process and need to receive the same attention to detail and effort as any other page or component on the site. And guess what? There are some exciting trends and developments in form design that businesses can leverage to retain a rich and usable experience all the way through the conversion funnel.

In typical Spark fashion, when we see something unusual, atypical or innovative online, we flag it and test it. We’re hungry to learn how new trends will influence customer expectations and their experience with a brand so we can employ the good and tweak the bad. Let us walk you through some new form design patterns we’ve recently tested…

Floating Text Labels

In recent years, the trend in mobile form design was to remove text labels from their location above the form field and instead place them directly into the form field using the hint text label. The objective was to streamline the interface and compress the vertical height of the form. The drawback to this approach was that as the user began to type, the label would disappear and the user would lose all context as to what information needed to be entered. While this created a streamlined and clean interface, it also introduced usability concerns and error recovery issues.

The evolution of field label placement…
mobile trends image1

What are float labels?

Floating text labels were introduced in 2013 by designer/developer Matt Smith, but only recently have become an influential UI pattern on mobile devices. Text field labels are initially displayed in-line with a larger font. As the user types, the in-line text is removed and the label is reduced in size and “floated” to a position above the text field so that the data entry requirement is still visible.

We’ve seen a number of major retailers implement them throughout their mobile websites this year including Target, New Balance, 1-800-Flowers, and UNIQLO. You’ll notice the exact implementation varies by retailer and there are a surprising number of interaction variables Design teams must consider when designing a float label system:

  1. The trigger event for initiating the animation: it could be field focus or typing.
  2. The type of transition & timing: does the text slide up, does the new float label appear with a fade while the hint text disappears with a fade?
  3. The final position of the float label: it is above and outside of the field, inside the field or overlapping the field.
  4. The off-focus behavior: will the float label remain after the data is entered and the user moves onto the next field or should it only be displayed on focus?

We used our enterprise account with UserTesting.com to ask individuals to shop and make a purchase via their phone from either 1-800-Flowers or New Balance, both of which employ float labels in checkout and both of which persist the float label after the user moves on to the next field. During our usability tests, customers didn’t react to the float animation, indicating that its presence wasn’t disruptive. Data entry was quick and intuitive and we did not observe any errors in terms of missing required data or entering the correct information in the wrong field. Based on our observations, we believe this is a form design convention that any retailer could put into practice and be confident that even a novice user would understand the experience.

Float label implementations included in our test….

mobile trends image2

Predictive Address Forms

Sales Force reported in their 2014 Mobile Behavior Report that 76% of users agree that location sharing provides more meaning content and Nielson reported that the majority of mobile shoppers, 95% of tablet shoppers and 72% smart phone shoppers, are at home when they make a purchase from their mobile device. This is the perfect storm of behaviors for geolocation or predictive address features which can help streamline the address entry process.

When entering an address, customers must enter a minimum of 6 pieces of data: Street Number & Street Name, City, State, Country and Postal Code. That’s a lot of typing; particularly during checkout where contact information and payment information must be collected as well.

In usability tests, mobile customers are impressed and thankful for features that minimize the amount of data entry they have to do.

New Balance and Staples mobile sites provide suggested addresses as a user types into the first address line. If the user selects an address from the list, all the remaining address fields will be populated for them. 1-800-Flowers uses geo-location to pre-select the city, state and zip when a user enters the checkout process. Target, Walmart and Home Depot ask the user to enter their zip code first and then the system automatically selects the corresponding city and state. In all these scenarios, the goal is to reduce the amount of data the user has to enter and minimize the possibility of errors and typos.

Predictive address implementations included in our test….

mobile trends image3

“I kind of like that…it’s giving me options for what might be my address.”

– Usability Test Participant, NewBalance.com, Predictive Address feature

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.

Categories

  • ecommerce
  • Form Design
  • mobile
  • user testing

Categories

  • ecommerce
  • Form Design
  • mobile
  • user testing

Related Post

Mobile Form Design Trends: Part 2

Learn how to break conventional checkout design structures and reduce visual complexity in checkout.