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."
Consider the many basic functions of text and character data input that a user carries out on their mobile device each day:
- Entering a URL to access a site.
- Entering personal information to create an account.
- Typing a username and password to login.
- Entering payment and bank account details.
- Entering an address to search locations.
- Updating a status on a social network site
- Texting your friends via SMS.
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. Let’s examine these growing trends below.
EHB: Below is a weirdly bulletized list, for you. Normally, you are chattier, and have paragraphs of text instead. Sure, supporting bullets, but just bullets... not sure I get this.
-- SSH
Mobile Commerce
- Mobile purchases in the US (excluding travel) grew from $396.3 million in 2008 to $1.4 billion in 2009. In 2010, that number has more than doubled to an impressive $3.4 billion.
- By 2015, global mobile shoppers are expected to spend about $119 billion on goods and services.
PayPal’s worldwide mobile transactions were $25 million in 2008. In 2010, they have exceeded over $500 million.
- eBay’s mobile sales grew from $600 in 2009 million to $2 billion in 2010.
Source: Milo.com, TechCrunch.com.
Mobile Banking
- Mobile web banking in the U.S. has grown to more than 13 million mobile subscribers – up 129 percent in just two years.
- Globally, in 2010, over 200 million mobile users used their phones for mobile banking either through SMS, mobile web, or mobile applications. By 2013, that figure is expected to exceed 400 million.
Source: blog.nielsen.com, Juniper Research.
Mobile SMS
- According to teens in the U.S in 2010, SMS is now the main reason to own a cell phone. Those US teens text 3,339 times a month.
Source: Neilson Company.
Mobile Social
- 46% of active Twitter users make mobile a regular part of their Twitter experience.
Source: http://blog.twitter.com
EHB: What's up with directly sourcing everything? The rest of the book uses end note style, so this seems particularly cumbersome. And they are pretty vague sources. If you have the specifics, especially in the end notes, I'd skip these and just use those.
-- SSH
Input and Selection in the Mobile Space
This chapter will explain input and selection patterns that can be used to maintain a usable interface. Here are some general guidelines to consider:
Touch area and target size for mobile displays
- Apple recommends a minimum target size to be 29px wide by 44px tall.
- Minimum spacing between touch targets is 8px.
- The visual size should be 60-100% of the touch target size.
EHB: Everything about this section confuses me. First, not at all sure it's the right place to talk about touch targets. I think under General Interactive Controls.
Also, pixels? Hells no! Even apple is stupid for this specification. After they launched a device that doubled the number of pixels for a not-much-bigger screen. We have our own specs, from a mix of our own research and some of that USAF ergonomics stuff. It's solid. And we have illustrations, and text already in the Mobile Design Elements doc. In fact, I'll just paste it into General Interactive Controls in a moment here so you have it.
-- SSH
Use functions that promote quick and efficient input
- Consider using assistive technology such as autocomplete and prediction during text entry.
- Limit the amount of unnecessary "pogo sticking" and selecting of key controls. For example, when you begin entering an email address, consider the benefit of having a key labeled as ".com" predicatively appear to save the user from typing those additional four characters.
- Consider the principles 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.
- Don’t remove your users from context when an input of data is required. Keep input selections on the same page.
- Text fields may not be the most effective choice. They result in many user errors. Carefully consider context of use and user needs. Maybe a dropdown list may be more effective and efficient.
Use vertical space effectively
- On small display devices, titles should be placed above the input area field. This will save vertical space. Do not place titles to the left or right, this will reduce the size of the input field or will require horizontal scrolling.
- When using labels, having them placed inside the field can save space. If that’s not an option, use short labels to the left of the field.
Provide clear affordances
- When information occurs within a circular range, provide visual cues that the range will loop back to its initial value. Spinners can accomplish this.
- Use tape controls to indicate a linear range of value. Values are restricted within that length of tape and are not to exceed beyond the scale. Use labels to indicate range.
- Length and size of the text field is a clear indicator of its capacity.
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.