Eight ways mobile commerce apps make great use of imagery

app hp

If you work in ecommerce, you will understand the importance of great product imagery to entice users to buy.

In a medium where the customer can’t actually touch the product, images provide an important role in convincing the user to part with their cash.

For a long time it seemed natural that the desktop would be the best place for users to browse big images. Desktop sessions were traditionally longer and users could spend more time clicking through galleries and comparing.

Meanwhile mobile sites or apps looked to save on bandwidth and would only present small images.

However, several things have changed in the last few years to mean that users now expect to see strong imagery on their mobile devices as well:

  • Faster internet has become prevalent through 4G technology.
  • The rise of apps such as Instagram and Snapchat (along with advances in camera technology) mean that the mobile phone has become the natural place to view photos.
  • The traffic share of mobiles on ecommerce sites just keeps on going up. China demonstrates this well, with $14.3bn spent on the ecommerce bonanza of Singles Day in 2015 and 69 percent of purchases coming from a mobile phone.
  • Mobile devices now have great high definition screens, with things like Apple’s retina technology.

Gone are the days of little thumbnail images, the user now wants to experience what they are buying in even greater detail.

Several ecommerce apps are already thinking this way. Native apps tend to offer the best experience with transitions and the chance to pre-load big images, so this is where I’ve been looking for inspiration.

I recently spent a couple of months delving into the world of ecommerce iPhone apps and documenting the results. One of the things I took away was just how much better the experience of browsing imagery was on a native app, particularly in the holiday and fashion categories.

Here, I’ll take you through some of the best examples of imagery being used on ecommerce apps that should provide some inspiration.

1. Image-led landing screens

Airbnb is a good example of an app hitting users with good quality photography upon landing on the app.

The user is immediately shown appealing Instagram-like images of popular destinations and a selection of the best properties in a high-quality showcase.

Airbnb mobile images

2. Big images on search results

Search can often be a place where small thumbnail images still reign but there’s no reason they have to.

Men’s fashion app Mr Porter offers a single column search view, where the user is able to make a much more informed decision about what a product looks like before viewing the product screen.

It’s quicker to scroll than tap and this enables the user to compare products easily.

2-mr-porter

3. Image-only browsing

Fashion house Chanel has an iPhone app that goes for an image-led experience in a big way.

When browsing the gallery of looks the user is only presented with an unbroken grid of photography.

Tapping a photos creates a complete full-screen takeover of the image, with no text and minimal iconography on top. The menus are stacked with imagery too.

3-chanel

4. Transitioning with images

The app of clothing shop Zara has its problems but one thing it does nicely is transition from the search screen to the product screen.

Tapping the image causes it to enlarge and smoothly become the focal point.

4-zara

5. Image-only product screens

H&M have product screens where the image gallery fills literally the whole screen, almost acting as a background.

Any other information appears over the top of the images. Once you swipe to the end of a gallery the related items are also just images with no other text.

They recognize that when it comes to fashion, how the product looks is everything and the main thing to prioritise.

5-handm

6. Immersive slideshows

Hotel booking app Jetsetter has slideshows on its property screens that can be scrolled through in-page as you would expect but can also be tapped to become full-screen.

They are so much more immersive than the average gallery as everything fills the portrait view, with no borders, which really adds a sense of luxury.

The images could do with being higher resolution however.

6-jetsetter

7. Seamless videos in slideshows

Several apps now include video in their selection of images, as even something as short as 10 seconds can give a better idea of what an item looks like.

Clothing company Net-a-porter has one of the best examples of integrating its videos as an item in the slideshow, with it being shot on a white background exactly like the still images.

7-net-a-porter

8. Full-screen zoom

Many apps offer the ability to zoom in and see a detailed view of the product, something that is particularly important for fashion items.

The department store House of Fraser has an app that does this well with the gesture of a pinch zoom.

8-house-fraser

Summary

Product photography and video is hugely important in making a sale online or in-app.

The eight examples I’ve covered are some of the ways you can make the imagery the star of your show.

As you can see, if your app isn’t doing that then plenty of the competition will be.

Matt Isherwood is a UX design consultant specialising in ecommerce and marketplace websites and mobile apps. He has experience in the luxury sector and working on UX strategy with start-ups. He teaches UX design with General Assembly and can be found at mattish.com

Related reading

prog
prime
/IMG/581/253581/amazon-logo-com-uk-320x198
specs
<