Design for Mobile: iPad Design Tips

by Luke Wroblewski September 22, 2010

In his iPad Design Headaches: Take Two Tablets, Call Me in the Morning presentation at Design for Mobile in Chicago IL, Josh Clark outlined common iPad design issues and ways to address them. Here's my notes from his talk:

  • While there is an impending avalanche of tablets from Android and Microsoft coming, Apple is currently the leader and defining the interaction conventions on tablets –so it makes sense to focus on the iPad for design considerations.
  • The iPad is a new platform with new ergonomics and new contexts. We are in the very early days of figuring out how to design for it. Anyone who is trying to do so now is breaking new ground and likely trying some things that won’t work.
  • The resting heart rate of an iPad user is low. Mobile phone users are on the go, distracted, and in hectic environmnets. The iPad is more likely to be used on the couch, in the bedroom or the kitchen. Picking up the device actually encourages people to go and sit on the couch to use it. The iPad is more about thinking (planning and consuming) than working.
  • Designers should plan for a low resting heart rate in apps too. BUT—also optimize for quick sprints. Don’t think you have escaped the constraints of one app at a time.
  • What are the common interface maladies on the iPad now? Greedy pixel syndrome, media hypertrophy, the frakeninterface, popover pox, and iPad elbow

Greedy Pixel Syndrome

  • The iPad has a bigger display. So it is very tempting to gobble up the full screen with pixels. iPhone developers want to add things. Desktop designers believe more things will fit.
  • We should strive for thoughtfulness and design in software because of the leisure and contemplative context of iPad use.
  • Complexity gives our designs meaning and interest. Complexity should not be complex. They are not the same thing.
  • Think relaxed with your design cause that’s likely what your user is.
  • Prescription: big chunky elements, generous space, clarity trumps density, tap quality trumps tap quantity.

Media Hypertrophy

  • An overdeveloped set of media interactions. Going too far with dynamic unconventional interfaces can actually upstage content. The content should define the app not the technology.
  • A cinematic experience can help put the focus on the content if designed well.
  • The original New York Times iPad app did not look like the newspaper but as they went through the design process, a printed newspaper model for the interface became the right UI.
  • Old interface conventions are not old fashioned. People like clear reading experiences. Familiarly and warmth are important in touch devices because intimacy is a bigger part of the device experience.
  • Familiarity and intimacy invite touch. People get personally attached to mobile products. The apps we put on our home pages say a lot about us and our personalities.
  • Emotional connotations from actual objects help communicate affordances and create a personal connection. Aim for subtle details that make things feel familiar.
  • Prescriptions: feature content over interface; honor overall brand identity; old and tested interface ideas are not old fashioned; ask –is it easier to use or just richer?

The Frakeninterface

  • An app’s visual design uses one metaphor but the interaction design uses another.
  • Example: the Apple Calendar app does not allow you swipe pages even though it looks like it should.
  • The worst place for controls on the iPad is at the bottom of the screen – they are often too small and far away to hit. These controls often run into user’s belly’s when using the iPad.
  • Interface metaphors should suggest how you use an app. Desktop metaphors fight more bold touch-based designs.
  • Don’t mix metaphors. The tablet is an awesome bastard child of a lot of different things: computer, books, etc. Need to pick one route and stick to it.
  • Teach people to use and touch rather than lean on tired and true UI chrome like menus and buttons.
  • Prescription: Avoid mixed metaphors, love the one (metaphor) you’re with, provide touch cues and hints, don’t abandon digital advantages

Popover Pox

  • Popover Pox is when popover menus gradually spread all over your iPad interface.
  • The popover menu is the right click of the iPad. You can use iPhone views in iPad popovers so many developers do. It’s easy to get into a situation where you force users to explore too many layers within little popover menus.
  • Use popovers to act on content and quick peeks but avoid using them for extensive exploration.
  • The iPad back button in the upper left corner requires a lot of work. Buttons are a hack –not a direct interaction. Because you are touching something indirectly (button vs. content). Buttons do not create intimacy.
  • What are opportunities to eliminate chrome in touch interfaces? You can’t rely on gestures alone.
  • On the iPhone, primary controls should go in the thumb zone on the bottom left. Secondary controls go on the right. This does not apply to the iPad because you can’t predict where someone’s thumbs and fingers will be.
  • The phone flips conventions and puts controls on the bottom. The iPad puts them back on top. For landscape orientation, put controls on the left. 85-90% of audience is right-handed.
  • Prescriptions: Seek alternatives for buttons, use larger swaths of the screen for actions, put controls at top and left, avoid popovers for exploration and navigation

iPad elbow

  • Explore the possibility of multi-touch gestures. The phone is really single touch (tap & drag). The iPad enables multi-touch –you have to use it with two hands unless you put it on a surface.
  • Think of multi-touch interactions like keyboard shortcuts –ways for expert/involved users to get things done faster.
  • No conventions really exist for multi-touch interactions.
  • Uzu has ten modes one for each finger. App chrome could be removed –could be thought of a keyboard shortcuts.
  • Prescription: keyboard shortcuts, let people play with your app, experiment, talk, and share, embrace multi-touch for models