Touchscreen Design Best Practices

Saturday was Day 2 of the Mobile UX sessions at Nielsen Norman Group’s Usability Week in San Francisco. The focus was on designing for touchscreens. Here are my notes:

  • Allow Users To Go Back and Undo: Make sure users can compensate for accidental taps. Have them confirm any action that would delete their data, erase their work, or process a transaction.
  • Don’t Force Users To Change Device Orientation: Whether your app is a content app like the New York Times or a utility app like American Airlines make sure it can adjust its layout to however a person is holding their device.
  • Pad Those Links And Buttons: Padding a widget can improve people’s accuracy in clicking it. For example, if you display an product image and description in a list layout, make the whole row clickable, not just the image or the text.
  • Padding Can Prevent Errors, But Won’t Increase Efficiency: In cases where you have a clickable invisible padding area around an object, people will still slow the movement of their finger as it approaches the target. Because they don’t know the target is actually larger, they treat it like it is smaller. Fitts’ law is still on the books.
  • Pad Links On Your Wired Site If You Want It Used on Tablets: Many site managers have learned that iPad and other tablets owners are using their wired sites instead of the mobile versions that were designed with smartphones in mind. See Yahoo!’s tablet site for cues on how a wired site can be tweaked to work on a touchscreen tablet.
  • Avoid Localized Swipes: When a left or right swipe only changes one horizontal section of a screen, it confuses people as to what the gesture does. Localized swipes don’t match real world movement, in which pushing something moves the entire object, not a portion of it. Don’t make your app a stack of independent carousels.
  • Provide Cues To Unseen Functionality: Gestures are great for maximizing screen layout but can be undiscoverable by new users. The convention of pulling down on a screen to refresh content that Twitter and other mobile sites use is hidden from the view of new users. Provide cues to new users to help them learn these gestures.
  • Don’t Rely On The Accelerometer For Navigation: People who are new to more advanced mobile devices may not even know about “shaking” as a means for input. Others may find it clumsy or uncomfortable. It’s OK to use the accelerometer, but don’t make it to sole means for input. Urbanspoon’s iPhone app is a good example of an app that uses the accelerometer but also has a big red button.
  • Use Sliders With Caution: Sliders as interface controls are imprecise. Don’t use them if the person has to get to an exact value.
  • Tablets Are Not Smartphones: Don’t be afraid of rich interactions on iPads and other tablets. Tablet users are not “on the go” in the same way as smartphone users.
  • Design A Distinctive Home Screen Icon: Make your app’s icon distinct so it can be recognized on a crowded home screen. If people have to remember your app’s icon, they may never click it.
  • More Is Often Less: Adding features to your mobile app doesn’t always make it better, especially if they add too much complexity. Add features of they make sense in a mobile context, not just because they exist on your wired site.