Interaction 09: Mobile UX Patterns

by Luke Wroblewski February 7, 2009

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.