New Multi-touch Interactions on the Apple iPad

by By Craig Villamor and Luke Wroblewski January 28, 2010

During Apple's 90 minute unveiling of the iPad this week, a lot of new multi-touch interactions were shown off. But they went by fast. So as a service to digital product designers everywhere, we took the time to extract 8 minutes of new user interface demos from the iPad keynote. Now you can quickly just catch the UI in action on Apple's new native iPad and iWork applications.

Interactions in Apple's iWork Applications for iPad

Creating Bundles (0:21) In Keynote for the iPad, you can move multiple slides at once by collecting them into bundles. Start by selecting a single slide to move (hold finger down on slide). While holding this slide, tap other slides you want to move with your free hand. These additional slides get "bundled" together and you move the bundle to the desired position.

A similar bundle or “pile” treatment is used in Mail. As each message is selected, it gets added to a pile. You can then mass delete the pile of messages.

Multi-touch resize (0:41) Resizing an image is a simple matter of manipulating a drag handle with your finger (handles appear when you tap on an image). However, you can quickly make two images the same size by tapping on a second image while resizing the first.

Page Navigator (1:45) In Pages on the iPad, you can press and hold your finger in the scrollbar area to access a page navigator feature. As you slide your finger down the screen, you see a small preview of the page you will be taken to when you release your finger.

Contextual Keyboards (2:35) Another feature we’ve seen in use on the iPhone is the contextual keyboard. You can see how this is logically extended for the Numbers iPad application, providing a numeric keypad for number columns with access to formulas via a floating control panel.

Interactions in Apple's Native iPad Applications

Floating Control Panels (0:00) In portrait orientation email messages consume the entire screen, leaving no space for the list of messages. However, clicking an Inbox button at the top of the screen reveals a scrollable message list in a floating control panel. Note the similarity of this control panel to the standard iPhone navigation UI.

Optimized View by Orientation (0:10) When rotating the device from portrait to landscape in the Mail application, a split pane appears and the list of messages in the inbox is displayed on the left.

Spread/Pinch to expand/close piles of photos in iPhoto (0:38) In iPhoto, piles of photos can be expanded or closed by using a pinching motion. This gesture could be applied to virtually any document type.

Information Popovers (1:10) iTunes albums appear in a grid format. Tapping on an album cover invokes a visually rich popover containing a list of the album's songs. Tap any song to play.

Drag Over Lists for More Detail (1:35) In iCal's month view, dragging your finger over each event reveals a floating panel with additional detail.

More gestures in the SDK?

Of course, there’s plenty of user interface innovation yet to come from third party developers. In one example during the Apple keynote, Gameloft showed off a a game that used a three finger gesture to unlock a door. It will be interesting to see if developers have the flexibility to define a lot of new gestures using different combinations of fingers. After all, the large iPad screen provides scope for multifinger gestures, including gestures made by more than one person.

Much thanks to Craig Villamor for helping find and write-up these interactions!