NOTE: This blog has been moved to http://www.looksgoodworkswell.com

Monday, February 08, 2010

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?

7 comments:

Martin Polley said...

On the subject of the motion blur that you noticed, maybe Apple has been paying attention to what Keith Lang has been saying:

http://www.uiandus.com/blog/2009/7/2/blur-the-new-black.html

AKS Interactive said...

very good article.

Bill Scott said...

@Martin. Thanks for the great link. This articulates it well. Meant to do a little research on it (recalled some material I had read a long time back about blur during motion).

Bill Scott said...

Also see: http://www.flickr.com/photos/fraserspeirs/sets/72157623224262135/ via @veen on twitter

Duncan Wilcox said...

The delay is likely necessary as a "debounce" mechanism, to make sure the user is swiping/sliding instead of tapping and holding and drifting slightly while holding. So it wouldn't be a time delay as much as a distance trigger.

Regarding blurring it is possible that they have implemented it, but considering the burden on the GPU and the "ghosting" effect that video deinterlace can have, I'd vote for video artifact.

I found image sequences useful as well in my post over at http://duncanwilcox.com/2010/the-shape-of-interfaces-to-come/.

MikeQué said...

I'm almost certain that the blur observed was a video artifact, as the Apple team would have had bigger fish to fry to create a complete iPad user experience.

However, from such a misinterpretation comes an excellent idea on how a subtle blur can make digital motion feel more real. Also with devices like this being the future, we ought to think of more techniques like blurs and bounces to give our users more ease in their interactions.

Ceedot said...

Hej. Great article.
The question about building artificial artifact as if they were real gives me a weird feeling.
First time I saw books on iPad...I was actually disappointed...I said to myself "darn, this is just like reality. Nothing ever changes" And I felt bad thinking about that.
Then again the iPoad needs to be touched before understanding its new interaction paradigms.

Thanks again for your contribution to the UX community.

C.