Mobile web forms

As mobile continues to explode, there’s a lot of buzz around responsive web design. But what happens when forms are in the picture? A “responsive” site attempts to optimize its presentation across a range of displays. That’s fine when your users are mostly consuming content. When they need to interact with your site, client-side responsive design is not enough.

I’ll focus on just a couple of important items in this article. If you’re interested, Chui Chui Tan’s excellent article Mobile Form Design Strategies  offers a number of guidelines for efficient mobile forms.

Desktop Forms are not usable

Desktop Form on iPhone

As the image hopefully makes clear, the user will have a very difficult time successfully interacting with your site. So, how can we improve the user experience? There are many considerations but I’ll focus on the two that I think are the most important:

  • Break the form up into small steps. The above form has three logical steps: choose a product, create your profile, and provide an address.
  • Make use of the device’s features to make life easier for the user e.g. specialized keyboards.

With frevvo Live Forms, customers will be able to easily create forms that look and work great on a mobile device. The software will automatically break up the form into steps and add Back and Next buttons. The user can also swipe back and forth to navigate through the steps. Of course, as the form designer, you can always tell frevvo where the logical breaks are.

Break the form into small steps

Break the form into small steps

If available, the device will automatically show the most appropriate keyboard for your control e.g. date and time pickers, email addresses, numeric fields, phone numbers etc. Users don’t like having to switch keyboards on the phone to find the @ symbol when entering an email address or switch to the numeric keyboard to enter a phone number. It’s a small convenience that I’m sure your mobile users will appreciate.

iPhone Date keyboard

iPhone Date keyboard

Of course, there’s a lot more that frevvo can do for you on mobile devices and I’ll be sure to post updates in the coming weeks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: