I draw boxesA blog on user experience & design

March 9, 2011

iPad UX tips


The iPad offers user experience designers a whole new way for users to interact with content

I’ve recently been working on a pet project for the iPad. It’s my first user experience design project for the iPad so I thought I’d share a few of my findings and thoughts here.

My first port of call was uxmag’s useful article on iPad UX guidelines. They summarise a number of key principles, taken from Apple’s Human Interface guidelines which is also a useful reference. The most important quote I think is this one, from Apple:

the best iPad applications: downplay application UI so that the focus is on content; present content in beautiful, often realistic ways; and take full advantage of device capabilities to enable enhanced interaction.

For me this returns to the old mantra of ‘content is king’ which has been true since the web was invented. Make sure the main ‘stuff’ you have to present is the main feature of the app and is easy to get to. The rest of the quote is about the nature of the device – it has a large, beautiful screen driven by a revolutionary touch interface. Here, Apple are encouraging user experience designers to make use of this to the full and really bring out the ‘magic’ of the iPad. I think this quote is excellent as it summarises a fundamental set of ideas for designers to keep in mind while working.

Next, as I have only used an iPad briefly I thought it would be important to familiarise myself with the basic interaction styles, or gestures, that the existing apps make use of. In interface design I always think it’s important to make use of what the user already knows – patterns, interactions and conventions that they have used before and are therefore more intuitive.

iPad Photos app pinch gesture

The iPad Photos app allows you to 'pinch' open a stack of photographs

I used the Apple guided tour videos (Part 1 on YouTube, Part 2 on YouTube) to get a feeling for the gestures that Apple feel will make best use of the iPad interface for users. Particular interaction patterns that stand out are:

  • The ‘pinch’ gesture to open a ‘stack’ of photographs (shown here)
  • The ‘swipe’ to move between photographs
  • The ‘scroll’ gesture to move through web or textual content
  • The page turn interface to mimic reading a book

I particularly like the ‘swipe’ gesture to move between photographs as it a) allows the photograph to be viewed full screen, with no interface elements at all, and b) because it is somehow very intuitive, probably because it mimics somewhat moving through a stack of physical photographs.

So in summary, review all the main existing interaction patterns and see if you can apply them in your design. For example, I also borrowed features from the Google Earth app, because the app I was designing needed a map interface.

Finally, a point on wireframe presentation. In order to get across exactly how your gestures should work, I would recommend taking the following steps to communicate as clearly as possible.

  1. Include links to Apple or YouTube videos showing how the interaction should work, if possible;
  2. Include a detailed textual description of the gesture in your wireframe notes; and
  3. Also use gesture icons on the page wireframes themselves with a small textual description. For example, this OmniGraffle template from LukeW.

Together these steps should help bring your exciting ideas for iPad interactions off the boring wireframe page. Also, a great OmniGraffle stencil is available from GraffleTopia.

The iPad offers a great chance to create a new style of relaxed, engaging digital experiences. By ‘keeping it simple’ and allowing the content to stand out we can really make the most of this new device.

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress