Jennifer Tidwell’s Mobile User Experience Patterns session at Interaction 09 cataloged a number of design patterns under development for rich mobile devices.
- Mobile is important: in Q108 294M mobile vs. 71M PC sales. Tens of millions of Google searches on mobile devices. 80% of those are from outside the US
- Mobile guidelines: fast -need to be responsive, minimize typing, fierce task focus –as little as you need to get done, many others.
- 98% of the world’s mobile phones are keypad phones. Focus on general purpose, always connected phones. While sales of smart phones are small, they have a disproportionate use of Web activities.
- Criteria for patterns: consensus on best practice but not too obvious, specific and buildable, does it improve life for a user (or is it just a technical convenience).
- One column layout: lay out content in a scrolling vertical stack. One of the first things to consider.
- Persistent toolbar: put the most important tools in a short menu anchored to one side of the screen: top or bottom?
- Touch tools: only show tools in response to keypress or touch, in a small, dynamic overlay.
- Item markers: use bold colors, icon and other visual differentiators in menus and lists. Most mobile conditions are not ideal: light, small screen, etc.
- Infinite List: at the bottom of the list, put an item that appends and adds to the list. Can’t load too much into a single screen.
- All in one button: a single target in a form can hold a label and an edit indicator -does two things in one.
- Two-part button: a single button or list that contains a large and small hit target each with different actions.
- Aggressive auto-completion: use whenever typing can be reduced as typing on a phone sucks.
- Text field clear button: clearing a text field with one button is very useful in mobile context.
- Share button: when people find content of interest, enable them to share it.
- Micro-loading indicators: while a page or block is loading, show a tiny progress indicator where the user tapped or clicked.
- Rich interconnections: put direct links to other apps within your app or page and prefill them with data from the users context. It’s difficult to switch apps on mobile devices.
- Data in the cloud: pull user data from networked repository. Synch automatically.