Sarah Watson from The Net-A-Porter Group explains how interactivity is best used to enhance user experience.
Picking up a book and reading it, examining the quality of a fine silk scarf, catching up with a friend or visiting a gallery – it is amazing how many real-world experiences can now be emulated on a mobile phone or tablet.
But with only the very limited proportions of a mobile screen to play with, how can you make sure that the mobile app experience is convenient, engaging and interactive?
1. Get the basics right
Like a good kitchen drawer, an app should be smooth and streamlined rather than jarring and clunky – so simple that you don’t even need to think about how you use it.
It should also give a sense that the user is in control. With the scrolling function, make sure the page tracks with the user’s finger so they can speed it up or slow it down depending on how quickly it is swiped.
We used this technique for the product detail on the Net-A-Porter iPhone app (above). To view more information the user has to scroll down from the product image. If they want to see every detail they can do this at a leisurely pace. If they're just skimming, the app helps them to get to the relevant content more quickly.
2. Keep it Simple and Intuitive
Sometimes the best apps are the ones with no tricks and no gimmicks.
Intuitive navigation, high res product imagery and a sleek design were the key things we had in mind when designing The Outnet app for iPad and iPhone (above)
The app was created with on-the-go in mind to suit the busy shopper who wants to snap up a designer piece at great value on their mobile, before it sells out. This meant following the mantra ‘if in doubt, take it out’. And if you’re not sure what features will be most useful, make sure the app has a customer feedback option, with comments going direct to marketing and development teams. This feedback loop is one of our best tools for fine-tuning all our apps.
3. Stimulate the senses
When formulating the concept of your app, consider the other senses beyond sight which will help to really immerse users in your app. Can you bring touch, motion or sound into the equation for a more realistic experience?
For example, when designing the Mr Porter Tux App for iPad we wanted users to feel like they were examining the product up close to explore the smallest detail so they become more than just 2D images.
We achieved this by using clever techniques that gave the user the impression that they are actually moving, touching and interacting with the items. These included velvet slippers that you could stroke, with each touch changing the velvet’s colour, just as it would in real-life.
Similarly, cuff links were shot using stop motion so by tilting the iPad you can see them from all different angles (above). Users can also view their reflection in a watch, hear the creak of leather as they open a leather wallet, giving the user a fully immersive experience. The Retina display of the iPad is a gift when it comes to this level of detail.
4. Use intuitive triggers
Just like the push and pull signs on a door can cause confusion (especially when there is a handle on the push side), unexpected or unfamiliar functionality can also baffle users. Avoid this by sticking to the conventions that suit the device.
For instance, the Confirm and Cancel buttons are positioned on the opposite sides on iOS devices and Android. Mixing the two is like having taps that turn the wrong way: the user will keep hitting the wrong button. The Net-A-Porter app for iPhone features the tab bar on the bottom part of the screen (as expected), whereas for Android it was moved to the top of the screen.
And when it comes to icon design, don’t make your users work harder than they have to. Many icons are so recognisable it makes sense to stick with them – for instance, the magnifying glass for search.
5. Speed and responsiveness trump new and sparkly
A golden rule of app development is that actions must happen instantly: delay by less than a second and a user will tap again, thinking the app is broken.
The last thing you want is for the user to feel like they’re jumping through hoops so make the complicated stuff happen fast in the background. The TUX app for Mr Porter (above) shows exactly how to tie a bow tie with an interactive tutorial where you can test your skills by swiping the screen. To produce this, we used stop-motion photography and draggable path recognition. To keep it responsive, images load in the background. This keeps the loading time to a minimum so the user can move seamlessly from one instruction to the next.
6. Don’t forget the Fairy Dust
Unexpected interactions can also help to surprise and enhance the user experience. We’ve been working on the concept of shoppable video for the wow factor – in the TUX apps users can pinpoint items in the film as it plays and source their details to buy them, which most people will not have experienced before.
Mobile devices themselves are getting more and more interesting so finding creative ways to make the most of the latest features such as the accelerometer, Retina HD display and camera will also lead to a more immersive experience for your users.
Sarah Watson is group mobile manager for The Net-a-Porter Group. The Group owns online luxury fashion retailer Net-a-Porter, fashion outlet The Outnet, and men’s style site Mr Porter; and provides global services, logistics and technology expertise to these businesses. The Net-A-Porter, Mr Porter and The Outnet apps are all free to download and available from iTunes.