The Wheels on the Bus Go Round and Round

Growing up as a kid, I remember singing the song “Wheels on the Bus Go Round” on those long bus rides up to summer camp. It was the adults’ secret weapon to pass the time and keep the kids out of trouble, I presume. It went something like this:

• The wheels on the bus go round and round,
• round and round,
• round and round.
• The wheels on the bus go round and round,
• all through the town.
• The baby on the bus says "Wah, wah, wah;
• Wah, wah, wah;
• Wah, wah, wah".
• The baby on the bus says "Wah, wah, wah",
• all through the town...

Well, the rest of the song is outside the scope of this book. But imagine if the song was describing today’s city bus commute instead. It might go something like this:

• The wheels on the bus go round and round,
• round and round,
• round and round.
• The wheels on the bus go round and round,
• all through the town.
• The teen texters on the bus tap "LOL, LOL, LOL;
• LOL, LOL, LOL;
• LOL, LOL, LOL."
• The teen texters on the bus tap "LOL, LOL LOL,"
• all through the town.
• The businessmen emails go "Clicky, click, click;
• Clicky, click, click;
• Clicky, click, click."
• The businessmen emails go "Clicky, click, click;
• all through the town.
• The traders on the bus type "Buy, buy, buy;
• Buy, buy, buy;
• Buy, buy, buy."
• The traders on the bus type "Buy, buy, buy;
• all through the town.

Mobile Trends Today

The landscape of mobile use is defined by user-generated input. Luke Wroblewski wrote a blog post titled Data Monday: Input Matters on Mobile, and points out the following:

“Web forms make or break the most crucial online interactions: checkout (commerce), communication & registration (social), data input (productivity), and any task requiring information entry. These activities are taking off in a big way on mobile. So getting input on mobile devices matters more each day.”

So as Luke W points out, filling out fields and forms make up a large part of our mobile experience. Which is why it’s essential for UX designers to make the interfaces capable of handling the way users input and submit information.

Slow Down Teen Texters!

Take a moment and reflect on some of your most aggravating moments filling out fields or entire forms on a mobile device. Here is a common scenario that frustrates me.

First off, I’m not a savvy texter. I’m amazed by the accuracy and rate at which some people, mainly teens I’ve seen, can whip up a textual conversation at a supernatural rate. I’m embarrassed to text whenever I’m next to them. Though when I am forced to input text and characters in a field, such as an SMS, it’s very likely I’m going to make errors.

I constantly enter the wrong character because my fingers extend past the target size. Positioning the cursor to edit my mistakes is even more maddening. I end up clearing the wrong part of the word, or deleting everything I didn’t want to. The only reason why I continue with these tasks, despite my build-up of dissatisfaction, is because, many times, there isn’t a better UI offered.

If these basic functions of inputting data fail due to an unusable interface, the user will likely not bother with the site or service. That’s a huge risk, considering the emerging trends users are engaged in with their mobile device.

Input and Selection in the Mobile Space

To many of us still, having to always type characters on the small mobile keyboard is a challenging task. It’s quite error prone, and it takes a lot longer to use. Luckily, there are solutions we can implement in our designs that will offer a more valuable user experience with less frustration and loss of data.

Use functions that promote efficient and quicker input

Here are some things we recommend you consider:

• Consider using assistive technology such as autocomplete and prediction during text entry. By requiring your user to only type the initial part of the word before the device recognizes the rest, can allow for quicker text entry and less error.
• When possible and only if appropriate, consider using a dropdown list rather than a text field to complete an input. For example, selecting a Counrty or State from a list can be more efficient than having to type it and risk misspelling. Remember, though, never take your user out of the current context when using a dropdown list.
• Limit the amount of unnecessary pogo sticking and selecting of key controls. For example, when you begin entering an email, consider the benefit of having a key labeled as .com predicatively appear to save the user from typing those additional four characters.
• Always keep in mind the principle’s of Fitts’ Law. The more clicks it takes to make a selection, the longer it takes as well. Therefore, use appropriate controls to limit the amount of steps a user has to make to get a desired result.
• If your device has the technology, take advantage of it’s location based sensors to assist the application in prepopulating information that can be detected.

Patterns for Input & Selection

Using Input & Selection functions appropriately provides users methods to enter text and make selections within a list or field. Within this chapter, the following patterns will be discussed.

Input Areas -- Provides a method for users to enter text and other character-based information without restriction.

Form Selections -- A method is provided for users to easily make single or multiple selections from pre-loaded lists of options.

Spinners & Tapes -- A simple, space-efficient method must be provided for users to easily make changes to a setting level or value.

Clear Entry -- Users must be able to remove contents from fields, or entire forms, without undue effort and with a low risk of accidental activation.