Going Mobile - Giving users the finger

Last month I gave a talk for UPA Boston, this is a summary of that talk.

Over the last five years we've seen a shift in mobile applications.  For about 30 years people thought of mobile phones as an extension of traditional phones. They would make calls and that was the primary use. Over the last 10 years we've added features like voice mail, texting and even basic web browsing. It wasn't until just the last 4-5 years that the next wave of mobile has taken off.

Mobile today

Mobile phones today are dominated by three classes of devices, 16 button, 60 button keyboard and new touch devices. There are about 1Billion 16 button phones, 50-100 million keyboard phones and about 20-40 million touchscreen phones. I'm mostly talking about this last category of emerging phones though some principals apply to both keyboard phones and 16 button phones.

The key difference between the phones of yesterday and the phones of today are a combined set of capabilities and technologies that fundamentally change the user experience. These include:

• Always connected - email/web/etc
• Adaptive input screen (control every pixel)
• Geo-location
• Touch/Gesture interface
• Accelerometer
• Apps you can download

A lot of these technologies existed either in isolation or in awkward implementations. Together they allow for a much richer application experience. This has become a platform that is fun, exciting and profitable for application developers.

Design for existing behaviors

When designing an application it's key to keep scenarios in mind. A scenario is the basic story of how a person may use the application. The important thing when thinking about scenarios is that actions tend to stay the same but the way you complete those actions changes.  Behavioral changes are difficult and rare. It's much easier to design tools that encourage and support existing behaviors. Similarly it's much easier for end-users to adopt your application or tool into their existing behaviors rather then changing established patterns.

Designing for Mobile

When designing for mobile remember that people are out in the real world. Your application needs to be a good alternative to the desktop/laptop. The factors for this type of design should include:

• Input methods - make it easy and minimal to get information into the device.
• Form Factor - Design for a smaller screen size and make it easy to read and get information back out of the device.
• Location - Take location into account
• Efficiency - A mobile application should be quick and efficient

Input Considerations

You can't always expect that the user has both hands free. People are often holding something else in their hand, coffee, bags, railings, doors, etc.  You should design your application to be usable with one hand. Consider scenarios where the user may have both hands occupied, driving, running, etc.

Opposable thumbs are great but they aren't perfect. There are spots on the phone that are particularly hard to hit with one hand. Certain apps aren't designed well for single handed use. Fitts law doesn't work on mobile devices. Because of the mechanics of the human hand certain zones are easier to hit and this has little relation to the screen edge.

Output Data

Use large presentation size fonts, 14-18pt fonts are typical. Use large finger tip sized targets, 30-40px are easy to tap.  Small targets are particularly hard to hit. Examples: Info buttons are tiny and sliders tend to be particularly hard to tap.

Touch Screen Language

The user interface language is being defined now. The desktop conventions of click, double click, right click. These conventions don't always hold on a mobile device. A whole new interface language is being developed in rather an ad-hoc way. Certain conventions are becoming more popular:

• Tap - most similar to click
• Tap & Hold - magnify, copy/paste, selection/make dragable
• Swipe - scroll, secondary action/delete option
• Pinch - Zoom
• Shake - Undo/Refresh/Clear

Basic guidelines

1) Each screen should do one thing (well)

2) Minimize on-screen elements (quantity, not size)

3) Make things easy to tap

4) Avoid preferences

5) Design for the 80% case

The session covered other topics including Mobile Wireframe Design, Mobile Web Design. Mobile Usability, and Mobile Gaming. The variation of the talk will be given at this years Mini-UPA, an event put-on by Boston UPA.  If your company or organization is interested in hearing it first hand contact me for additional info.