15 Ways to Optimise Product Screens in Native Retail Apps
I've seen some great examples of product screen design in native retail apps, and some equally dire ones!
Native design patterns play an important role in all aspects of app design, but in product screen design, they can greatly help improve usability, and potentially even conversion when used effectively.
The article aims to provide first-hand insight, hints and tips, regarding a range of techniques that can help with this.
As a Mobile UX Architect working in the Fashion Retail industry, this post is heavily weighted towards native iOS apps in this sector (not "web wrappers" or "hybrid apps"); however, the advice given, can similarly be applied to retail apps, across other sectors. In addition, the advice could equally be applied to native Android and Windows Phone apps too, with a small element of tweaking to ensure consistency with design principles for those operating systems.
I'll be discussing the following mobile, product screen optimisation techniques in further detail:
- Make Your 'Add to Bag' CTA "Sticky"
- Use Geolocation Technology to Determine the User's Nearest Physical Store and Display Stock Availability in that Store
- Ensure Hit Areas Accommodate Fat Fingers
- Consider Serving High-Resolution "Product Zoom" Images
- Ensure Users are Aware of "Image Zoom" Capabilities, by Providing a Clear CTA
- Utilise the "Peek" Effect to Make It Clear There are Alternate Product Images
- Don't Hide Options Behind a List Box - Consider Sliders Instead
- Provide Options to "Add to Favourites" or "Save for Later" to Accommodate Distractions
- Only Show Available Sizes - Clearly Highlight "Out of Stock" Sizes
- Enable the Ability to Cycle Through Products in a Product List / Search Results Screen, Directly from a Product Screen
- Prioritise & Minimise Content on the Product Screen
In addition, I'll also cover off other optimisation techniques that apply to both mobile and desktop:
Make Your 'Add to Bag' CTA "Sticky"
The add to bag button needs to be easily accessible, regardless of how far down the screen the user has scrolled. Making your CTA "sticky" (fixing its position in the viewport, despite scroll), ensures it's always visible to the user.
A further consideration would be to position your CTA to the bottom of the viewport, to help accommodate a comfortable thumb reach. Admittedly, this could cause issues if your app makes use of a tab bar, as is common in iOS apps. If this is the case, you essentially have two options:
- Remove your tab bar from the product screen only and position the add to bag CTA at the bottom of the viewport (as per, Best Buy's iPhone app); or
- Leave your tab bar in place and fix your add to bag CTA to sit directly above it (as per, Mothercare's iPhone app).
There are pros and cons to both methods.
With option 1, you're stripping away what may be considered to be the primary mechanism for users to navigate through your app (albeit, only on the product screen). In doing so, you're also reducing ease of access to routes that direct the user away from the product screen, thereby forcing them to focus on the task of deciding whether or not to add to bag.
With option 2, you're allowing the user ease of access to other areas of the app and maintaining consistency by showing the tab bar in the same position, across all screens of the app. On the flip side, by docking the add to bag CTA to the top of the tab bar, you're reducing the amount of screen estate in the viewport to display your product screen.
Whatever option you go with, there's bound to be some element of trade-off between delivering a great UX and striving to increase conversion.
Use Geolocation Technology to Determine the User's Nearest Physical Store and Display Stock Availability in that Store
Stock availability messaging is one of most important pieces of information to your user, as far as making an informed purchasing decision is concerned. Users don't want to add an item to their bag, only to then be disappointed to find it's out of stock. For that reason alone, it's important to be honest and upfront about stock availability on your product screen.
For retailers with a physical store presence, it's equally important to advise of instore stock availability, from within the app. One way to achieve this is to make use of geolocation technology to determine the user's current location and proximity to their nearest store. Once determined, you can then advise of stock availability in that store (or perhaps, the user's "Preferred" store) for any given product you sell in your app. In doing so, it helps prevent wasted trips to the store, if that item is deemed to be out of stock.
With 737 stores nationwide, Argos already offer this functionality in their iPhone app. Upon opening the app, as long as you've agreed to allow access to your location, the app will immediately attempt to find your local store, based on your current location. On any product screen you visit thereafter, you'll be presented with stock availability for that store - helpful if you're considering ordering for store collection. If the item is out of stock at your local store, you can then tap the "Change Store" option on a product screen, which in turn will show stock availability at the next nearest stores to your current location, listed in order of distance from your current location. Similarly, if you choose the "Home Delivery" option on the product screen, you'll also be forewarned of the estimated delivery time upfront.
Surprisingly, so few high-street retailers have yet to really adopt the power of geolocation technology in their apps. This may ultimately be down to a lack of confidence in their inventory management systems' ability to relay stock availability, in real-time. Boots, are a prime example of a retailer who could greatly benefit from this integrating this functionality into their app, but currently don't - somewhat astonishing, considering they've got over 2,500 stores across the UK (more than any other UK-based retailer).
Ensure Hit Areas Accommodate Fat Fingers
Smaller target areas require a greater degree of accuracy to hit. As such, users have to work harder to hit the intended area and are often prone to inadvertently tapping something in close proximity that they didn't mean to interact with. Not only is this frustrating for the user; it's also easily avoidable. The simple solution is to provide a larger hit area.
As a general rule, always allow for less-than-accurate thumb interactions - certainly as far as smartphone apps are concerned, anyway. Users are more likely to use smartphones using one hand, than say, tablets, for example, so are therefore more prone to making mistakes during interaction.
When interacting with an app using the same hand as that, which I'm holding my smartphone with (usually my right hand), chances are, most of my interactions will be thumb-based. The only time I'll use my index finger, is if there is a CTA out of comfortable thumb reach, at which point, I'll switch the device to my left hand and use my right index finger to interact with that CTA, before reverting back to my right hand again, for one-handed thumb use.
Admittedly, not everybody will mimic my behaviour; however, by providing a larger hit area to account for thumb use, you've got your worse-case scenario covered, as the thumb tip is usually wider than the index finger.
Given the limited screen estate available on a smartphone device, a 72px touch target may be asking a lot of the app designer, as there could be any number of hit areas a user could interact with on a product screen, all within close proximity to one another. It's a tough one, but ideally, your primary CTAs should allow for this 72px hit area - namely, your add to bag button. You could possibly afford a slightly smaller touch target with your secondary and tertiary CTAs though.
Be sure to check out notonthehighstreet.com's, "Gift Finder" iPhone app, for inspiration. The hit areas of the primary and secondary CTAs on their product screens, are all equal in size (but styled differently to emphasise priority) and most importantly, thumb-friendly.
Consider Serving High-Resolution "Product Zoom" Images
Unlike shopping in a physical retail store; when using a mobile app, it's difficult to gauge a sense of a product's size, quality and texture, among other things. You can't touch or feel the product, like you can in a physical environment. One such way to overcome this virtual restriction, is to offer a "Product Zoom" facility, whereby the user can pinch and zoom in on a product image to inspect the product in more detail.
For this functionality to add value to the shopping experience, you really need to consider serving a high-resolution (or retina quality) image to the user. Fail to do so, and the user will soon start to notice degradation / pixellation as they zoom further into the image - not ideal when looking to further examine the pattern print on a designer dress, for example. As trivial as it sounds, it could make or break the user's pending decision to add to bag, especially as far as high-end / luxury clothing items are concerned.
One of the key considerations to bear in mind, is the user's mobile connection. Serving high-resolution images will inevitably result in a larger file size. Over a Wi-Fi network, this is less likely to be an issue, but over a 3G / 4G connection, not only will it take longer for the image to load, but it'll also quickly eat into a user's data allowance. Not ideal for those with a monthly allocation of 500MB.
One way to overcome this, is to adopt a similar approach to that used by Spotify. Allow for high-resolution images (or in the case of Spotify, a higher streaming quality) to be served over a Wi-Fi connection, but revert to a lower resolution image (by default), if the user is detected to be browsing (or in Spotify's case, streaming) over 3G / 4G. You could always provide an option in the app settings for the user to toggle high-resolution imagery on / off , as some 3G / 4G users may have an "unlimited" data plan and no such issue or concern with being served high-resolution images.
Ensure Users are Aware of "Image Zoom" Capabilities, by Providing a Clear CTA
Many features introduced to apps often go unnoticed, for the simple reason that users don't know they exist. Whilst it's not always a bad idea to leave some of the less-important components of your app as "discoverable" features, your core functionality should be immediately obvious to the user.
One such feature that may get overlooked on a product screen is, "Image Zoom". This is the ability to double-tap and / or pinch in on a product image to further zoom into that image. Whilst it's a common pattern used across most retail apps, it's still a good idea to provide a CTA of some description that clearly highlights to the user:
- That "Image Zoom" capabilities are indeed available; and
- How to go about performing the action to zoom into the product image, in question.
Those that do provide a CTA, often provide an instruction over the product image itself - something along the lines of, "Double Tap to Zoom", "Double Tap Image to Enlarge", "Tap Twice to Zoom", or "Tap to Zoom".
Utilise the "Peek" Effect to Make It Clear There are Alternate Product Images
As far as fashion apps are concerned, you would expect a product screen to present the user with multiple shots of any given item of clothing - the garment being worn on and off the model, and perhaps, front and back shots, for both scenarios.
You want to make the most of the screen estate you have, to show all off your product photography. This is often easier said than done on smaller-screen smartphones. One way to make it clear to your user that multiple product shots exist, is to make use of the "peek" effect (as per American Eagle Outfitters, Nordstrom and notonthehighstreet.com's, "Gift Finder" iPhone apps). I believe this pattern first started to gain traction after the introduction of the "Panorama Control" in Windows Phone 7.
Imagine your main product shot is visible front and center in the viewport. As a visual cue to the user, you could partially display the left-hand edge of the first alternate product image, with the rest of the image hidden off canvas, behind the right-hand edge of the viewport. By swiping right-to-left across the screen, the user can then bring the first alternate product image into view. In doing so, the right hand-edge of the main product shot will now be peeking out the left-hand edge of the viewport, with the left-hand edge of the second alternate product shot, peeking out the right-hand edge of the viewport.
There are other ways to achieve the same effect, as far as making it clear that alternate product shots exist:
- The use of left and right-facing chevrons (see House of Fraser's iPhone app)
- Screen indicator dots (see ASOS and JD Sports' iPhone apps); or
- By stacking your alternate images as thumbnails down the left / right-hand side of your main product image (see the PINK Nation iPhone app, by Victoria's Secret).
However you go about it, just make sure it's clear to the user.
Don't Hide Options Behind a List Box - Consider Sliders Instead
"Size" and "Colour" - two example product attributes, whose option values are often hidden behind a list box. The problem with list boxes is that users have to tap into them firstly, to see what options are available.
Whilst the number of taps to get somewhere or to complete an action on mobile, aren't considered as big an issue as clicks are on desktop sites, hiding information unnecessarily, is a UX concern. Yes, screen real estate comes at a premium; however, there are other ways to better handle the display of list values that don't rely on completely hiding them - "completely" being the keyword there.
One such pattern, is to use a horizontal slider, whereby you present your sizes or colours on a single row, allowing the user to slide options hidden off-canvas by default, into view, with a right-to-left swipe across the row and vice versa to carry out the reverse action. If, for example, a sweater is available in 8 colours, you may only be able to display 5 swatches in the immediate viewport by default, with the 6th one "peeking" into view, in a manner, similar to that described earlier in this article. The same mechanism works well for clothing sizes. This is the exact approach that's been adopted in both John Lewis' and House of Fraser's iPhone apps, and it seems to work really well. Nordstrom's iPhone app is another example, but it seems a tad bit overworked here, and may be a little more complicated for "non-power app users" to get their heads round.
On the back of the above, another very important point worth mentioning, is to ensure you present your colour options as swatches, or, better-still, support the swatches with labels indicating the name of the colour. By presenting colour variant labels such as, "Coral", "Crimson", "Ecru", "Emerald", "Iris", "Mauve" & "Taupe" (without colour swatches in support), chances are, not all of your users are going to be familiar with those names. Don't risk losing sales as a result.
Provide Options to "Add to Favourites" or "Save for Later" to Accommodate Distractions
When shopping on a mobile, your app users could physically be anywhere - at home, at work, on public transport. As such, they're very easily distracted. The television, work colleagues and fellow commuters, are all examples of everyday, real-world distractions you have to contend with, when trying to get your app users to focus on the task of browsing and purchasing. Not only that, but time is also against you. Your users are all busy and hard-working individuals - time to relax, is often a luxury.
One way to combat distraction and lack of free time, is to make it as convenient as possible for your users to pick up the app from where they last left off, before they were distracted. "Add to Favourite" and "Save for Later" options work in your favour here. They present the user an opportunity to bookmark a product of interest, they want to revisit when they've got more time do so. Rather than have to waste time, trudging through everything to find what previously caught their attention (the last time they used the app), they can instead access their favourites or saved items, quickly and easily.
The ability to favourite / save an item, could be as simple as tapping a heart icon. Be sure to provide clear feedback to show what just happened when the icon was interacted with, and equally as important, where the product has been saved to. Previous user testing I've carried out has shown this to be a huge oversight. The design of the icon is equally as important. Do your research and try to stick to common-practice - look at what your competitors are doing and what's deemed to be industry-standard.
Also, it doesn't just have to be limited to the product screen. Why not provide the same functionality on your product list / search results screens?
The only other point worth mentioning here, is not to be surprised if you face resistance from business stakeholders, when suggesting the introduction of such functionality. As surprising as it may sound, some see the prominence of this functionality counter-productive (from a sales and revenue standpoint), as they want users to add to bag and subsequently place their order, there and then. They fear that by allowing the user to bookmark a product, they may never come back to purchase it. Whether or not that's the case, is up for debate - just be prepared to have the discussion.
Only Show Available Sizes - Clearly Highlight "Out of Stock" Sizes
This isn't necessarily a mobile-specific product screen consideration or optimisation technique; however, it's still worth referencing, as it's one of the biggest pet peeves among retail app users, after crashing issues.
In short, don't allow users to add items to the bag that are out of stock. I've seen hundreds, if not thousands of app reviews for retail apps, stating how frustrating an experience they've had, in adding an item to their bag, only to be disappointed to find that it's sold out, upon subsequently viewing their bag.
Worse-still, are those occasions, where a user has added a lot of items to their bag (contributing to a large bag value from a revenue-perspective), only to then view their bag to find out some of their items are sold out. In some extreme cases, users have been so peeved, they've abandoned their order altogether - rubbing further salt into the wound, by stating their desire to shop elsewhere.
One seemingly simple way to overcome the above frustrations, is to be honest about your stock levels. If you've not got an item in stock, make it clear that's the case on the product screen. Disable the size or colour from being selected, providing "Sold Out"-style messaging in support, so that the user knows why they can't select that option. I appreciate it's not always that easy, as not all retailers have real-time stock management systems; however, there are other ways and means of being able to tell when stock is running low.
Again, John Lewis' iPhone app handles this gracefully, clearly distinguishing through design, which sizes are and aren't available to purchase. When viewing sizes in Marks and Spencer's iPhone app, they also clearly indicate where a size is "Sold Out", "Low on Stock" (less than 10 available), and "In Stock" (over 10 available), thereby preventing the likelihood of any disappointment.
It goes without saying, that your stock availability should also be prominently positioned.
Enable the Ability to Cycle Through Products in a Product List / Search Results Screen, Directly from a Product Screen
One of the most common customer journeys I've witnessed users make in retail apps (also backed up by Google Analytics reporting for those apps), is proceeding to a product list / search results screen from the home screen. From there, the user will often go back and forth between product screens and the product list / search results screen they previously arrived from, as many as three or four times (if not more), before adding their first item to the bag.
One way to make this journey a little less painful for the user, would be to allow them to proceed to the next product in the product list / search results screen, directly from the product screen, preventing the need to go back and forth.
To achieve this, Fancy, Zara and PULL&BEAR's iPhone apps, have provided an interaction for the user to swipe across the main product image in a right-to-left fashion. This in turn, loads the product screen for the next product in sequence, based on the ordering of products on the product list / search results screen the user previously arrived here from.
It's a great idea; however, it could potentially cause an element of confusion among users. The reason being, users may be more familiar with the idea of swiping across an image in this manner, to cycle through alternate product shots. Repurposing this interaction to cycle through products, may therefore be somewhat of a surprise.
The way both Zara and PULL&BEAR have got around this, is by adopting a somewhat unique, minimalist approach to their product screen design, utilising a down-to-up directional swipe to cycle through alternate product imagery. It's an approach to product screen design, that's fast gaining interest among other retailers.
Prioritise & Minimise Content on the Product Screen
Overloading users with too much information on the product screen can have an adverse impact on add to bag conversion. On smaller-screen devices, screen real estate comes at a premium, so use it wisely (I know I'm starting to sound like a broken record - but it's important!). You want to provide just enough information to allow the user to make an informed purchasing decision, without bombarding them with too much that they feel overwhelmed, or are unable to find the one piece of information that could sway their purchasing decision in your favour.
I've started to see a new trend where much more of a focus is placed on product imagery - in some cases, namely with Zara, PULL&BEAR and River Island's iPhone apps - 90% of the product screen, is dominated by this.
Whether or not this approach works for everybody is up for contention. It ultimately depends on what your users deem to be most important to them, when shopping using your app. For example, users I've carried out product screen testing with previously, on the whole, have felt that review star ratings don't add value in fashion apps. I recall one user in particular, who suggested that because everybody has different body shapes, reviews can often be quite subjective - what's not right for one, doesn't necessarily mean it's unsuitable for all. She therefore ignores reviews altogether. She said that she pays more attention to them, when shopping for higher-value items, like white goods, furniture, etc. If enough of your users feel of the same opinion, you could argue that review star ratings could therefore be omitted from your product screen (if you're solely a fashion retailer, in this case).
The same goes for the product description. Does it have to be expanded and visible by default? How much value does this add to the shopping experience?
Again, going back to the user testing, I was amazed to see how many individuals quoted product composition (e.g. 89% polyester, 11% elastane) and product care (e.g. Is it machine washable? Can it be ironed? etc.) to be the most important factors, when deciding whether or not to buy that product. Yet, how often do you see this information prominently placed on the product screen of a fashion app?
Don't make any brash, spur of the moment decisions when looking to strip out, or reprioritise components of your product screen. Just remember to user test early, then use that feedback as the basis for refining your product screen wireframes, designs and prototypes, before conducting further testing to clarify the changes you're looking to propose are indeed right for your users.
Other Optimisation Techniques that Apply to both Desktop and Mobile
Provide Alternate Product Imagery Showcasing All Angles of Your Products
Yes, it's pretty much common practice these days, but still worth mentioning. Where possible, always show alternate product imagery that captures all angles of your product. For items of clothing, imagery depicting the front and back of the garment is crucial, particularly for items of clothing, like halter neck tops and dresses, where the styling is likely to differ at the back of the dress, compared to the front.
Non-clothing items, such as televisions, for example, may require additional product imagery showing other angles, such as top-down, or side views, to help the user better understand the physical appearance and shape of the item.
Allow Users to See Clothing Items both On and Off a Model
Whilst model shots are great to help users visualise how an item of clothing may fit, some individuals can be put off, particularly if the models have been made-up or "Photoshopped" to look unnatural. One way to overcome this, is to provide a toggle to show garments "On Model" or "Off Model", on your product list / search results screen. Marks & Spencer's iPhone app is a prime example of how to achieve this.
An alternate approach is to utilise your social channels, asking users to send in photos of themselves, wearing the items available for purchase from your site / app. This can greatly help to improve conversion, as pictures shared by real people of themselves wearing a garment, help to reassure others as to how the clothing will fit on normal people, in real life.
Model shots can be inspirational in helping to set the scene as to where and when you may wear such items of clothing, but be mindful that they're not to everybody's tastes.
Use Product Videos to Drive Conversion
Well-implemented product videos are known to boost conversion rates. For fashion retail specifically, videos help users to gauge a sense of how a garment looks, fits and most importantly moves, when walking. Whilst the first two, can in many respects be achieved through product imagery alone, the latter most certainly can't.
In light of the above information, videos can add great value in highlighting how different types of materials sit and fall on the body, as well as how they move. Take jersey, polyester, cotton and silk, for example, all of which behave differently. It's impossible to demonstrate this through product imagery, and given how important product composition is as a purchasing factor (as outlined earlier in this article), video helps provides this crucial insight.
Default to the User's Preferred Size
One of the most common feature requests that comes out of user testing of fashion retail apps, is the ability to set a preferred size, so that when you go to any product screen, it always defaults to that size.
It's a fantastic idea and one that makes perfect sense. Yes, there may be occasions where you're shopping for others, rather than yourself, but for the most part, likelihood is that you are shopping for yourself. If users are asking for it (which in my experience, they are), then there's every reason to deliver it. It's also a great starting point for those looking to delve deeper into realms of personalisation.
Even the smallest changes to the product screen, can add great value to the overall UX of a native app, which in turn can help drive better conversion rates.
It is extremely important to point out, that not necessarily all of the techniques are "tried and tested" suggestions, which are guaranteed to improve conversion. Low conversion on mobile, is strongly related to the rise of casually engaged users, i.e. burning time by 'windows shopping' without a sense of commitment to fulfil actual needs, as well as, postponing the actual transaction until inputting the required details to checkout, is more convenient. 'Showrooming' can also be a contributing factor to this.
All 15 recommendation are viable options for trialling through controlled A/B and MVT tests, in an effort to gauge a better understanding as to how they may impact your conversion rates. Implementing any combination of the above recommendations, certainly won't do any harm from a usability perspective either.
Whilst these techniques won't work for everybody, many are proven strategies, which have seen success by retailers of all sizes. The only way to truly tell whether they're right for your users, is to ask them first-hand. Like with any change, user testing will help you better understand where to focus your efforts.
Most importantly, be mindful that product screen optimisation techniques used across desktop, don't always translate well when applied directly to mobile. Understand the differences and the opportunities, but most of all, do your research! Rash decision making often bites back.