UX & Web Design tutorial: 7 tablet app design tricks

James Christian, innovation lead at fashion site Net-A-Porter, reveals what he learned from creating the first weekly fashion magazine iPad app.

Ditch your computer for a week

Immerse yourself in each new platform by trying to use it as your primary device.  As well as experiencing what is possible on the platform, you will identify common interactions and expected behaviours across apps.  These could be incorporated within your application to shorten the learning curve for your users. Swiping through product images in our app follows a precedent set by the camera roll browser built in to the iPad.

Avoid the wrong touch

Alleviate issues with touch precision by defining minimum dimensions for buttons/touchable ‘hot-spots’ and ensure there is sufficient non-interactive space around them. Our app allows you to shop the products that a model is wearing.  Users struggled to target small items such as earrings so we added an interstitial screen that is displayed if any part of the model is tapped.  This screen includes all the elements she is wearing in an easily navigable manner.  The added benefit to the reader is discovering items they may not have otherwise spotted.

Integrate interactivity

This isn’t static print design, so take advantage of the capabilities of the device to delight and surprise your users. Rather than showing video in a standard player component, we often integrate video elements in to the page design. Animation can be used to bring otherwise static elements to life.  This page begins in greyscale and a bright colour filter sweeps across the page.  Subtle use of sound or background audio can also add to the emotional impact of a design.

Don’t scroll everything

Reading longer-form text by vertically scrolling is well-established on desktop web-browsers where pointing, selecting and scrolling are controlled independently. Tablets typically use touch to control all of these interactions - so you can find yourself designing an experience that proves awkward to control for some users.

Here, rather than scrolling the whole page we only allow the user to scroll through the text content.  As the text is moved through pre-defined ‘trigger-points’, we switch out the other visual elements to keep them contextual to the current editorial passage.

Get it in front of users

User testing with the device will highlight hidden affordance and take into account the physicality of the device.  How easy is it to miss a feature or accidentally trigger an unexpected action because it is too close to where the user holds the device?  Before the release of the iPad we constructed foam board prototypes to understand the usability implications of its form factor and ensure our designs were readable and usable.

Strip it back

A clean, uncluttered design can be achieved by avoiding unnecessary UI elements and the smart use of space - especially important if working with a small screen size.  For example, rather than using scroll bars and buttons, scrollable elements can be indicated by partially revealing elements at the end of lists – ‘peeking through’ to encourage the user to investigate further.

Show, don’t tell

Avoid the use of explicit call-to-actions if possible.  During design and development, we always asked ourselves, “If we need to explain a feature to the user, has the design failed?”  Visual cues such as motion, depth through shading and texture can be used to imply an element can be interacted with.  Many of our pages build incrementally by animating each element on to the page.  The aim is for the user to think that each element is independent so interacting with each one may lead to a different result.

James Christian heads up the Labs team at Net-A-Porter.com. Check out its iPad at bit.ly/nEMoiE

Note: We may earn a commission when you buy through links on our site, at no extra cost to you. This doesn't affect our editorial independence. Learn more.

Read Next...