HTML5 Zone is brought to you in partnership with:

A friendly Finnish hacker. I am technology consultant, open source advocator and entrepreneur. My expertise areas cover HTML5, Python, Plone, Javascript, WebGL,UNIX and mobile web. Mikko likes sushi, Angry Birds and dislikes winter. Mikko is a DZone MVB and is not an employee of DZone and has posted 43 posts at DZone. You can read more from them at their website. View Full User Profile

Improving mobile site form usability with HTML5

12.30.2012
| 3199 views |
  • submit to reddit

This blog post is a part of Mobilizing websites with responsive design and HTML5 tutorial. For all posts please see the Introduction post.

It is cumbersome to enter any longer input on mobile devices with “thumb typing”.

For better mobile user experience you want to optimize form inputs to have minimal amount of presses.  Also, the form layout might need adjustments to cope with the smaller screen size and harder-to-read text.

In the case we describe in this tutorial, we use mobile.css to override the default desktop form styles so that the form renders and acts better on small screens and touch devices.

1. Making forms more mobile friendly

Some useful mobile enhancements include

  • Make text bigger: Text and <input> field default size is bigger, so that you don’t need to zoom in to read the label.
  • Use fixed width font on input fields: Fixed width fonts, like Courier, are cleaner for reading narrow letters, like i,1,l on small input fields. It may look ugly, but it’s minor usability win.
  • Only one column of form elements: There is only one column on <input> and no <form> elements are horizontally on the same row, so that there is as much as possible horizontal text line length to be consumed for <input> fields. Exception: make sure that checkbox control + label still remain on the same row.
  • Expand controls to full screen width: easier to hit with touch and there is enough space to read the input field values
  • More paddingand margin for form controls to help touch input by avoiding accidentally presses
  • Use field type specific HTML5 inputs: more below
  • Use Javascript to enhance form input logic: e.g. automatically choose sane defaults based on other field values or submit the form when it’s completed, so that the user spends less time to enter the data on the form
  • Use geolocation to pre-fill address fields and filter out lists of unnecessary choices

Here are some example mobile.css styles which we used for mobilizing forms desktop forms:

/*
 * Form fixes
 */

/* Only one input per row */
select, input, button {
   display: block;
   margin-bottom: 1em;
   max-width: 80%;
   font-size: 120%;
}

/* Follow the size of input elements */
label {
   font-size: 120%;
}

/* Checkbox is still inline */
input[type=checkbox] {
    display: inline;
}

How forms looked before fix:

How forms looked after the fix:

2. Short-cutting unnecessary user choices

In our project we also applied a Javascript snippet which will automatically submit the form when the final <select> input choice has been made. Thus, the user does not need to pan around to press the form submit button unnecessarily: this way we decrease the amount of presses needed to proceed with the form.

The Javascript code for the form autosubmission:

<script type="text/javascript">

  // Automatically push form forward when the selection has been
  // made in the selection list
  function onSelect() {
     var form = document.getElementById("IdPList");

     if(form) {
         form.submit();
     }
  }

  // Bind select event handler
  function init() {
 var select;

     // Remember selection permanently and bypass the WAYF service from now on.
     select = document.getElementById("select-idp");

     if(select) {
         select.addEventListener("change", onSelect);
     }

     // Select: In order to access the resource you must authenticate yourself.
     select = document.getElementById("userIdPSelection");

     if(select) {
         select.addEventListener("change", onSelect);
     }
  }

  //window.addEventListener("DOMContentLoaded", init);
  window.addEventListener("load", init);
</script>

_element_enhancements">3. HTML5 <input> element enhancements

It is also recommended to convert<input type=text> fields for HTML5 specific versions. Note that this change is backward compatible, as the legacy browsers will fallback to normal text input. Even big sites like Amazon.com are already using HTML5 inputs. With specific HTML5 input types a mobile browser can open a field type specific touch keyboard. E.g. if you are asking for a phone number the opened keyboard is phone keypad instead of QWERTY touch keyboard.

Different <input> types already exists for

  • Telephone number
  • Email
  • IP address
  • URL
  • Number
  • Search
  • Time
  • Native autocomplete
  • etc.

4. Geolocation

You can use HTML5 geolocation API to determine the city / address of the user and pre-fill form values based on this. This is handy e.g. on a use cases like where the user is selecting city to choose a movie theaters.

5. jQuery Mobile

jQuery Mobile is a theming framework for mobile sites. It includes some touch friendly Javascript widgets to enhance existing mobile experience. However there widgets are more theming side of the things and the necessary user interaction can be reached even without jQuery Mobile.

6. File submissions

iOS devices, like iPhone and iPad, do not support <input type=file> file submissions (iOS 5.0). Android devices do and other mobile phones as well. However, the user experience of selecting files on these devices is not great and you might want to create an app instead.

7. More information

Published at DZone with permission of Mikko Ohtamaa, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)