iPad Interesting Moments

To familiarize myself with the iPad UX interactions I studied the Steve Job's video as well as Luke Wroblewski's post on the various multi-touch patterns introduced by the iPad.

I find it helpful to take these interactions and "slow them down" as a series of keyframe screenshots. Doing so gives you a chance to appreciate the care that went into designing each of these interactions.

You can find the fruit of my labor thus far at my Designing Web Interfaces flickr site. I will add more in the days ahead.

A quick observation. There is a longer delay than I expected when initiating a swipe (like a page flip) or activating an edit (like editing in email). In the case of the swipe there does have to be some movement first to discern the swipe event. In the case of the edit activation it seems the delay makes the interaction feel right (a tap is the tap down and pull up just like the mouse click is a mouse down + mouse up... the up part is sloppier with the finger). Also see the delay of items being selected for delete.

Another observation that I am unsure about may just be an artifact of capturing snapshots from the video. There appears to be blurring of images at various stages in the swiping transitions which would indicate faster motion. You can see this effect in flipping photos and zooming the map. Again without having access to an iPad this may just be some artifacts of the capture process... but this would be a good way to make a transition feel faster (speeding up gets blurred as well as moving fast; slowing down gets clearer as well as actually slowing down). [Update: Martin Polley pointed me to an article by Keith Lang on Blur the New Black that could be helpful in understanding this. [Update to the update: I am fairly convinced this is an artifact of the video capture process. However, blurring is a good way to smooth animation.]

The use of real world style transitions (flipping bookcase over, flipping pages, spreading stacks, rotating orientation, collecting selected elements into stacks) work extremely well with a multi-touch interface. I am using my physical body not a mechanical mouse so the response should feel more real world. This is also what Apple mentions in their UX guidelines.

Here is the quote from Apple's iPad Human Interface Guidelines:

Whenever possible, add a realistic, physical dimension to your application. The more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it.

As you work on adding realistic touches to your application, don’t feel you must strive for scrupulous accuracy. Often, an amplified or enhanced portrayal of something can seem more real, and convey more meaning, than a faithful likeness. As you design objects and scenes, think of them as opportunities to communicate with your users and to express the essence of your application.

Use animation to further enhance realism in your application. In general, it’s more important to strive for accuracy in movement than in appearance. People sometimes feel disoriented when they see movement that appears to defy physical laws. As much as possible, make sure your virtual views and controls mimic the behavior of the physical objects and controls they resemble. Convincing animation heightens people’s impression of your application as a tangible, physical realm in which they want to spend time.

Thoughts?