55 Minutes

Welcome to the 55 Minutes blog.
55 Minutes is a web development consultancy in San Francisco building apps for design-led businesses and startups. On this blog we discuss the technology tools of our trade: Ruby on Rails, Django, Sass, OS X, and more.

Improve Form Usability on Mobile Safari

In which we share how we combine various well-known techniques to maximize web form usability on Mobile Safari.

Why is this a big deal?

Forms are a necessary part of the web, and over the last few years there has been much discussion on how to increase completion rates, reduce completion times, and improve overall user satisfaction. With the emergence of widespread mobile web browsing, improving form usability is doubly important. On top of that, since Mobile Safari has a decisive lead in the mobile browser market, getting web forms wrong in Mobile Safari is not an option. However, few websites and applications actually do get it right.

The best practices we follow

If you’re a web developer who is concerned about mobile platforms—and you should be—you’re probably familiar with many of the techniques I will mention here today. Chapter 6 of Luke Wroblewski’s excellent Mobile First book enumerates the various common-sense changes you can make to vastly improve user experience on mobile web forms. Here are the ones we find give you the most bang for your buck:

Use HTML5 form inputs

HTML5 has a nice variety of purpose-specific form inputs: date, email, number, tel, and url, to name a few. Using these new input types with Mobile Safari has the nice side effect of bringing up a customized keyboard to make input into that field easier; URL inputs have a keyboard that contains ., /, and .com as keys on the first page of the keyboard, so you’re not frustrated by having to switch back and forth to access commonly typed characters.

Disable autocorrect and autocapitalize for email inputs

I don’t know about you, but it drives me crazy when email fields in Mobile Safari automatically capitalize or correct my email address—I believe these features are on by default for all text-like inputs with the exception of the password and URL fields. Do your users a favor and don’t make them backspace or retype when they don’t have to.

<input type="email" autocorrect="off" autocapitalize="off" />

I know these aren’t valid HTML5 attributes, but using them is well worth the validation errors, in my opinion, to make the user’s experience so much better.

Disable autocorrect for name inputs

You’ll probably have a form somewhere that requires your users to enter their names; it’s a good idea to disable autocorrect here, as you don’t want to tell users they don’t know their own names.

<input type="text" id="first-name" autocorrect="off" />

This can be generalized to most inputs that expect proper nouns.

Tweak autocapitalize depending on the input data

Name fields, address fields, and text areas are all fields where it makes sense to leave the default autocapitalization behavior activated. But you can do even more than that: in iOS 5.0, the autocapitalize attribute takes more values than just on and off. Here’s an example:

<form autocapitalize="words">
  <!-- autocapitalize value inherited from parent form element
       if the attribute is not present -->
  <label for="name">Name</label>
  <input type="text" id="name" />

  <!-- inherited -->
  <label for="address1">Address 1</label>
  <input type="text" id="address1" />

  <!-- inherited -->
  <label for="address2">Address 2</label>
  <input type="text" id="address2" />

  <!-- inherited -->
  <label for="city">City</label>
  <input type="text" id="city" />

  <label for="state">State</label>
  <input type="text" id="state" autocapitalize="characters" placeholder="CA" />

  <label for="zip">ZIP code</label>
  <input type="number" id="zip" />

  <label for="comment">Comment</label>
  <textarea id="comment" autocapitalize="sentences"></textarea>

The lesson here is that you should be mindful of the type of data each input expects and adjust your code accordingly.

Even if you do nothing else…

…doing these few simple things will make a huge improvement in the user experience of your site’s forms.

comments powered by Disqus