Mobile-friendly hero image research

University of Cambridge

• Dr Sam Waller

• Dr Joy Goodman-Deane

• Mike Bradley

Unilever

• Oli Bradley

Why design images

for mobile?

Oliver Bradley

The first touchpoint

In every person’s pocket

https://www.globalwebindex.net/blog/the-changing-mobile-marketplace

Already in 2016, 91% adults own a smartphone

MOBILE = More Screen Minutes Than TV

125

104

129

96

125

148

147

113

89

132

68

97

77

95

102

97

103

146

161

117

150

175

173

193

169

166

194

215

229

291

0 100 200 300 400 500 600

Japan

Canada

Germany

India

Australia

UK

USA

Brazil

China

Indonesia

Daily Distribution of Screen Minutes, By Country

TV Laptop + PC Mobile (Smartphone + Tablet)

Source:

Mary Meeker

State of the Internet

2015

“BUT MOBILE ISN’T IMPORTANT

because PC purchases

still represent the majority of online shopping transactions…”

But…UK hits the MOBILE tipping point

>50% transactions are now on mobile for eCommerce

Mobile Share of eCommerce Transactions by Country:

Source: Criterio 2016 “State of Mobile Commerce”

3 PILLARS: MOBILE READY HERO IMAGES

PROVEN

SHOPPER

INSIGHT

VISUAL SCIENCE

CLEAR RULES

VISUAL CONSISTENCY

Retailer.com feedback

9

Hero images delivered a significant sales lifts vs. conventional pack shots on all screen sizes in quant studies with 3000 shoppers on Amazon mobile & desktop

Shampoo(mobile)

Shampoo(PC / Desktop)

Hair Spray(mobile)

+14%+8%+4%

Relative increase in product selection vs. Conventional Pack Shot Source: SKIM research Dec 2014

3000 shoppers Quant

No mistakes

choosing the right size

2.6%

lift

A/B

test**A/B split test with Retailer A

Helping shoppers “see”

our ice cream tastes awesome

(& find their flavour fast)

before after

3.6%*

lift

*test with Retailer C

A SIMPLER experience

across all screen sizes

*A/B split test with Retailer D

19.6%

lift

A/B

test*

We open sourced

a category led solution

WHAT are the rules for Hero images &WHY they work better than packshots

Dr Sam Waller

Dr Joy Goodman-Deane

Mike Bradley

University of Cambridge

What 4 Things

Do SHOPPERS

Need to Know

to Successfully

Choose the

Right Product?

10-23 mm

• Intensive Repair or Colour Care?

• What is the brand? maybe

• Is it 400 ML or 250 ML? - NO

• Is it shampoo or conditioner? - NO

- NO

A pack shot is unshoppable on mobile as you can’t work out what you are looking at

• What is the brand?

• Is it shampoo or conditioner?

• Intensive Repair or Colour Care?

• Is it 400 ML or 250 ML?

- YES

- YES

- YES

- YES 10-23 mm

A mobile ready hero image allows all 4 critical bits of shopper information on mobile

What is a mobile ready Hero image?

• Created specifically for online retail to act a the primary image in search / favourites thumbnail results.

• Are designed to work well on all screen sizes that are typical for online retail (16mm on mobile, 23mm on tablet and 48mm on laptop / desktop)

• Allows the online shopper to better recognise BRAND / FORMAT / VARIANT and SIZE in fast vertical scroll which is typical behaviour looking through either search results or favourites on a mobile or tablet

• May be zoomed and/or cropped to deliver better legibility & recognition of brand and variant esp. on portrait packs

• Size (if needed) may be added in the bottom right-hand corner.

• If necessary, the type of product may be added as a stripe on the right-hand side (portrait packs), or as a stripe along

the bottom (landscape packs). Makes better use of space than a conventional packshot – see below

Mobile ready hero image (Cambridge Standard)

Conventional packshot

16 mmMobile

23 mmTablet

48 mmLaptop /Desktop

• Some retailers argue pack shots are fit for purpose for e-commerce, because the text description next of the pack shot provides all the information that cannot be obtained from the photograph. We know from eye tracking that 90% of the page is ignored.

• However the majority of shoppers don’t look at or read the product title (name)on retailers websites or mobile apps to verify the size or format.

• Nearly every shopper we interviewed could tell a story of having accidentally bought a product that was not what they thought it was online (especially on size) because if a pack looks similar to the one they think it is, they don’t bother to check the text to verify.

• People chose to use online grocery for convenience and to “save time”. As a result grocery online shopping is about selecting a large number of products as quickly as they can. When hero images work so that shoppers don’t have to check the text, shopping is faster than it would otherwise be.

What's wrong with pack shots as primary images for eCommerce? Why can’t shoppers read the text to determine the size and type of product?

Eye tracking shows shoppers predominantly look at the images.

0.0%

25.0%

50.0%

75.0%

100.0%

Excl

usi

on

(%

)

0.0%

25.0%

50.0%

75.0%

100.0%Ex

clu

sio

n (

%)

Testing Pack shots vs Mobile Ready Hero Images (23 mm image height)

Model goes out of range above 84.7%

exclusion

Why are hero image rules needed? What rationale should be used to write them?

• Pack shots have the advantage that category standard consistency is achieved by default, because of the physical constraints of products on shelves.

• In removing these constraints with digitally designed images, brand teams could quickly end up in an attention grabbing ‘arms race’, which would cause ‘visual armageddon’ on retailer websites.

• The University of Cambridge, Engineering Design Centre has written these rules based on shopper-centric inclusive design principles (www.inclusivedesigntoolkit.com), aiming to:

• Maximise the visual clarity of the 4 critical messages

• Maximising the speed of product selection within an ‘aisle view’ on desktop and mobile

• Minimise the time required to create hero images for 20,000+ grocery SKUs

• These rules aim to set a grocery.com supplier standard such that 1 image can be supplied to all retailers and displayed on all screen sizes.

These rules were primarily written to help shoppers select products within the aisle view on desktop and mobile.

Decision tree for choosing whether off pack text is going to be needed & where to put it

Q1: Is the pack square-ish?

NO

Q2: Is the format /product type obvious from the pack?

NO

Q3. What’s the aspect ratio of the pack?

PORTRAIT FORMAT NOT OBVIOUS, PORTRAIT PACK =Vertical stripe and size go along the right-hand edge

• Brand teams may choose whether or not they want to add off-pack communications

• If off-pack communications are added, they MUST follow the rules for positioning below:

YESSQUARISH = Use full canvasOff-pack communications are not required and not helpful

LANDSCAPE FORMAT NOT OBVIOUS, LANDSCAPE PACK = Horizontal stripe and size go along the bottom

FORMAT OBVIOUS =Size only (bottom right)

Use generic square lozenge

Except laundry (already established category standard lozenge)

YES

Rationale for the rules for positioning off-pack communications (1 of 4)

Square-ish packs can be turned into hero images that make best use of the available canvas area when there are no off-packcommunications. Off-pack communications are a solution to a problem for tall and thin products.

However, square-ish packs are better without them.

Hero images of squarish packs on Asda.com

Pack shots of same product on Boots.com

Hero images of squarish packs on Asda.com

Pack shots of same product on AmazonFresh

23 mmPacks

23 mmHeros

Rationale for the rules for positioning off-pack communications (2 of 4)

Why can’t brand teams fix their physical packs so that off-pack communications are not needed (like the square packs)? (Ocado point of view)

• Physical packs are designed for in-store shelf racking. This favours tall, thin packs. The manufacturing lines that produce these packs are not going to change any time soon.

• Given a tall thin pack, and a tiny canvas area on a mobile device, it is not possible to fix the graphics to communicate all 4 critical messages.

• Augmenting a photorealistic pack with off-pack comms solves for online shopping in a realistic timeframe.

• A horizontal stripe on a portrait product does not make good use of the available space, which is essential for 16mm images on mobile devices.

• This problem is particularly severe when augmenting pack shots with stripes. Pack shots are already difficult to interpret and horizontal stripes would make this worse.

Rationale for the rules for positioning off-pack communications (3 of 4)

Why can’t all stripes be horizontal. This would be easier to read surely?

Own label kitchen cleaners from the major supermarkets

Mocked up example own label kitchen spray vertical vs horizontalShows that horizontal stripe really removes space that’s criticalCannot read “TESCO”, the unique brand distinction has been lost.45 mm

Tablet

16 mmMobile

16 mmMobile

15 mmbottle

7 mmbottle

Rationale for the Rules for Positioning Off Pack communications (4 of 4)

Why is size bottom right?

This is the only location that is compatible with both portrait and landscape images. Off-pack size information should always be in the same place, and the product image should always precede any off-pack communications.

• Off-pack size information should always be in the same place, and the product image should always precede any off-pack communications.

• Bottom right is the only location that is compatible with both portrait and landscapeimages.

• Mobile ready hero images use the full available canvas area to maximum effect. Retailers should not be overlaying any portion of hero images with anything.

• If brand teams want to communicate size off-pack, this must be bottom right. The layout of the template is designed for category standard consistency and may not be altered by individual brands.

Anatomy of a Mobile Ready Hero Image (for a portrait product where the type of products is not obvious)

• Brand teams may choose whether or not they want to add off-pack communications to improve recognition.

• If off-pack communications are added, the colours MUST follow the rules below.

Except for laundry with an already established category standard size (no. of washes) lozenge

Do hero images also work for Own Label and not been seen before NPD?

Can the pack image be modified?

YES zooming and cropping, YES taking lids off, YES key lines, YES omitting elements. NO graphics breaking edges, NO drop shadows and NO 3D views

Can hero images have border lines

NO – pack shots don’t have borderlines and neither should hero images

Should space be left for retailer-added overlays?

NO - the 4 critical messages can only be communicated at 16mm on a mobile if the full canvas is used

Can any other assets or icons be positioned off-pack (e.g. fair trade)?

YES – if the pack contains multiple things, show a picture of the thing that inside. buy NO OTHER GRAPHICS are allowed off pack.

Can UPPERCASE text be used for the stripe text

NO – capitalised text shouts too loudly and takes longer to read.

Is floating text allowed? (NO - it doesn’t look consistent)

Frequently Asked Questions – General layout

Can the width of the stripe be changed from the template?

NO – it must be category standard consistent

Can the typeface, size and weight be changed from the template?

NO – it must be visually clear and category standard consistent

Can the shape or layout of callouts be changed from the template?

NO, except for laundry with an already established category standard size lozenge

Can off-pack communications have colour gradients/vignettes?

NO – for category standard consistency and visual clarity

Can the centreline of the pack image be positioned anywhere?

NO – must be in the centre of the gap

Do mobile ready hero images work for Own Label / NPD

YES - Adding off-pack communications is especially helpful for lesser-known brands where people might not know the type of product solely from it’s visual identity.

The template for off-pack communications has been designed so it can be quickly added to any pack shot to make things instantly better.

The additional refinements to enhance the pack image are allowable but not mandatory. All of the allowable refinements maintain compatibility with actual pack shots.

Back to contents

Can the pack image be modified from the pack shot? (page 1 of 2)

Back to contents

Can the product be zoomed and cropped? Yes

• Zooming and cropping is allowable but not mandatory.

• However, if you zoom too far, the overall shape of the product is lost.

Can lids and caps be removed? Yes

• But the product cannot be shown twice both with and without the lid.

Can key lines be added to assist recognition of the shape? Yes

• But they should be pale grey RGB(167, 167, 167)

• And 0.6pt thickness on a 23 mm sized image.

• BUT NO use of glows just a keyline.

Can some front of pack details be omitted / resized? Yes

Allowable but not mandatory

Can the pack image be modified from the pack shot? (2 of 2)

Can reflections or drop shadows be added? No

• They add visual noise without helping the shopper and break GS1 & Google rules

Can 3D or 3 quarter rather than front on views be shown? No

This makes it even harder to verify brand

in fast vertical scroll on mobile

Can pack graphics breakout from the edges of the physical pack? NoThis fails Google’s rules and is unnecessarily visually disruptive

Back to contents

Can hero images have border lines ?

NO – pack shots don’t have borderlines and neither should hero images

Back to contents

Should space be left for retailer added overlays / promo flashes?

NO - the 4 critical messages can only be communicated at 16mm on a mobile if the full canvas is used

• Space is very limited (10mm square on some retailers). All the space is needed for the image and callouts for type of product and size.

• As a result, there’s no space available that is consistent across different products.

• The retailers don’t agree on a standard position for the overlays (top-left, top-right and bottom-right are all used by different retailers at different times).

• Retailers need to find other space near the image to drop in promo flashes

• Retailers that infringe brand-owned trademarks by placing promo flashes over them should be cautioned via brand legal teams.

Back to contents

Should space be left for retailers to add their own size lozenges?

NO – they haven’t established their size lozenges and do it badly – what a mess!

Back to contents

Asda store live on 18/1/17 Tesco store live on 19/1/17

The category looks better if everyone has the same lozenge & shoppers already understand it because its on the front of pack

Back to contents

P&G Unilever

Can any other assets or icons be positioned off-pack (e.g. fair trade, freezable)? (1 of 2)

YES – If the product is a pack of things, you can show a picture of the thing that is inside.

However, the Google shopping feed will not harvest any image where the picture of the thing that is inside overlaps the pack. However, overlapping the pack gives the best use of space for a mobile ready image. This is currently under discussion with Google to try and resolve.

Back to contents

Can any other assets or icons be positioned off-pack (e.g. fair trade, freezable)? (2 of 2)

NO – communicating the 4 critical messages on a mobile requires the full canvas. Adding visual disruption does not help the shopper find the right product.

• Given the freedom to do so, brand teams are tempted to seek visual disruption by adding swirls, blobs, marketing claims and manipulating the background.

• The Google shopping feed will not harvest any image that contains off-pack marketing (New, Offer, Cheaper, Sale, 2 for 1, Free, Stronger, Fresher, Save). Hero images are not adverts or banners and they cannot be used to add claims or endorsement lozenges.

• Fair trade, freezable and vegetarian are useful communications for the shopper. However, successfully communicating the 4 critical messages requires using the whole canvas area so there is no space available for anything else. Supplementary information should be presented elsewhere in the retailer app / website.

• Presenting shelflife for perishable products has not yet been resolved. These rules are for non-perishable products only.

Back to contents

Can UPPERCASE text be used for the stripe text?NO – capitalised text shouts too loudly and takes longer to read

• Mixing upper and lowercase text between images looks inconsistent.

• At extremely small sizes, words are clearest in lowercase text. The overall shape of the word gives a clue as to what the word is, even when the individual letters cannot be distinguished.

• In the item descriptions on retailer websites, each word starts with a capital letter. Doing the same for the off-pack text maintains consistency.

• Text in UPPER CASE draws attention. Off-pack text should not be drawing attention, as the focus should be on the image.

• In an ideal scenario the brand, product shape, colours and graphics tell shoppers everything they need to know, and the text is only read for the purpose of confirmation.

Back to contents

Is floating text allowed? NO – it doesn’t look consistent

• The alignment of off-pack text always looks inconsistent, no matter how it is done. The text needs a consistently sized coloured background behind it to aid alignment and provide a visual anchor.

Back to contents

Can the width of the stripe be changed from the template?NO – it must be category standard consistent

Note: The width of a vertical stripe or height of a horizontal stripe is exactly 6 mm in a 23 mm sized image.

Rationale:

• Bigger sizes than this will fail Google’s check that requires 70% of the image (with the pack shot removed) to be white.

• GS1 image rules state the background must be white. Wide stripes would become the background

• Thin stripes aren’t wide enough to fit 2 lines of text in the stripe and a three figure number in the size callout

Can I change the width (just a little bit)? No

• Any changes would grab the eye through shape disruption, and spoil consistency leading retailers to reject your hero image.

Back to contents

Can the typeface, size and weight be changed from the template? NO – it must be visually clear and category standard consistent

Rationale

• Open Sans was designed by Google to be “neutral, yet friendly” and optimised for excellent legibility on web, and mobile interfaces.”

• It’s free and open source so everyone can use it.

• Condensing the font, making it lighter or making it heavier makes it harder to read on mobile devices.

• Retailers demand visual consistency in off-pack communications. They will not accept images where each brand uses their own font for the off-pack communications.

What if the words I want to use don’t fit?

• The stripe is not a place to replicate the full product description.

• Use only the minimal key words that distinguish the type of product.

Back to contents

NOOpenSansLight

NOOpenSansExtra Bold

YESOpenSansBold

NOHelveticaNeue or Brand fonts

NOAdjusted tracking / stretching

Can the shape or layout of callouts be changed from the template?NO, except for laundry with an already established category standard size lozenge

Rationale

• Retailers demand category standard visual consistency in off-pack communications. They will not accept images where each brand uses their own off-pack icons to describe size (or any other information).

• Mobile ready hero images are not suitable for trying to establish new visual icons.

• Brand teams remain free to do whatever they like on-pack

Callouts must be either:

• An existing category standard lozenge that is already established and used on front of packs across the category (e.g Laundry has used a number of washes lozenge on the fronts of physical packs for years before appearing off pack on hero images)

OR

• The solid filled rectangle or square that is provided within the Cambridge template)

Back to contents

Can off-pack communications have colour gradients/vignettes?NO – for category standard consistency and visual clarity

No because

• Retailers demand category standard visual consistency in off-pack communications. They will not accept images where each brand uses their method of applying colour gradients (especially different directions and tonal variations).

• Colour gradients also typically reduce the visual clarity of the text.

Back to contents

Can the centreline of the pack image be positioned anywhere?NO – must be in the centre of the gap

Retailers demand category standard visual consistency in the positioning of the pack images. They will not accept images where brand teams attempt to achieve visual disruption by moving the pack image left or right or swapping round the elements.

Why is the pack image on the left?

• The pack image is the most important piece of information, and should be the first thing that the shopper sees.

Back to contents

FAQ’S on the stripe and the size callout

• What words are allowed in the stripe? (Only the type of product format or size)

• Why does the stripe colour match the variant, Why does the colour of the size callout match the brand, and Why are there 2 different colours? (it helps the shopper discriminate the different products in the aisle view)

• Should the text in the callout stripe be white or black? (White text on a dark coloured background is best practice, use black text only if the variant colour is very pale) High contrast for legibility.

• Why does the text in the stripe read upwards? (text that appears on packs reads upwards)

• Can the stripe touch the product image? (NO – this would fail Google rules, this would also make it messy)

• Can the size units be omitted or capitalised? (NO – for category standard consistency)

What words are allowed in the stripe?Only the type of product or category-standard subcategories

Rationale:

• Google Shopping feed will only allow an off-pack ‘technical text description’ of the type of product.

• Retailers demand category standard visual consistency in off-pack communications. They will not accept images where each brand uses their own language to describe the type of product (e.g. Bodifying shampoo).

• Product variant is usually established through colour and pack artwork. The colour should be used as the background to the stripe in order to help this recognition. It is not necessary and not allowable to include the text of the product variant off-pack.

Back to contents

Allowable words off-pack must meet ALL of the following criteria

• The keyword exists in greater than 5% of the product names on the retailer stores for that category (Exact allowable word lists for each category TBC in follow-up workshop).

• In use by more than one brand in the category.

• Not a trademark. (e.g laundry: Capsules=YES. Colour=YES. Febreze=NO. Pods=NO.)

• Not a description of a colour, flavour or smell.

Why does the stripe colour match the variant, Why does the colour of the size callout match the brand, and Why are there 2 different colours? (it helps the shopper discriminate the different products in the aisle view)

• Colouring the stripe to match the variant helps the shopper. Variants are almost always communicated by colour, (shoppers often don’t remember the name of the variant they like and can only remember the colour) and it’s difficult to have enough real-estate to get that colour through on the front of pack artwork. Using the stripe provides extra space to get the colour across. This is particularly useful on mobile devices.

• Colouring the size to match the brand helps make the images from that brand look like part of the same set.

– It also makes the images more visually pleasing.

– Using multiple colours enhances the separation between the 2 different callouts.

– This is especially true for tall thin bottles (e.g. eye liner) that are thinner than the stripe.

Back to contents

Should the text in the hero callouts be white or black?

Back to contents

• White text on a dark coloured background is best practice, use black/ very dark grey text only if the variant colour is very pale

• Remember mobile ready hero images is about delivering text that is visible at 16mm image size on a mobile

Why does the text in the stripe read upwards?Text that appears on packs reads upwards

• In general, whenever text appears on a pack, it read upwards. In particular, barcodes always read upwards.

• In other fields (graphs, engineering drawings), text generally reads upwards.

• Doing the same for the stripe maintains consistency and makes it easier for the shopper to read.

Back to contents

On bottles,Barcodes and text read upwards

Can the stripe touch the product image?NO – this would fail Google rules

The stripe can be close to the image should not touch it.

Rationale:

• Google’s check will fail any background fill that touches the product.

• However a 0.4mm white keyline is sufficient distance to pass, and achieves a visually similar effect.

Back to contents

Can the size units be rotated, omitted or capitalised? NO – for category standard consistency

Back to contents

• Units should be of a smaller size than the numerals they are next to.

• They may appear side-by-side or underneath the numerals,• L is the standard SI unit for litres. Every other SI unit is

lowercase. ml, g, kg.

Can the size units be rotated? NONumerals never appear in a different orientation to the units in any other communication, hero images are no differentbut not rotated and not omitted.

Can I omit the units? NOUnits must be present next to the numerals for legal reasons.

Can I capitalise the units? NOML does not appear on any pack printed surface anywhere. Technically speaking it means Million litres.

CONCLUSION

RECAP : Decision tree for the position of off-pack communications

Q1: Is the pack square-ish?

NO

Q2: Is the format /product type obvious from the pack?

NO

Q3. What’s the aspect ratio of the pack?

PORTRAIT FORMAT NOT OBVIOUS, PORTRAIT PACK =Vertical stripe and size go along the right-hand edge

• Brand teams may choose whether or not they want to add off-pack communications

• If off-pack communications are added, they MUST follow the rules for positioning below:

YES SQUARISH = Use full canvasOff-pack communications are not required and not helpful

LANDSCAPE FORMAT NOT OBVIOUS, LANDSCAPE PACK = Horizontal stripe and size go along the bottom

FORMAT OBVIOUS =Size only (bottom right)

Use generic square lozenge

Except laundry (already established category standard lozenge)

YES

Summary of proposed rules for Mobile Ready Hero Images

1. Mobile ready hero images use the full canvas. No space is left blank for retailer overlays

2. The decision tree determines the position of off-pack communications

3. The layout and dimensions of the stripe and size lozenge may not be altered

4. The only text allowable in the stripe are keywords that exist in greater than 5% of the product names in the corresponding product category. No variant names and no trademarks.

5. Stripe text only Open Sans, only Sentence Case and only reading upwards

6. Size Icons are only allowed off-pack if they are already established on front of packs across the category.

7. No off-pack iconography (e.g. fairtrade etc), no off-pack visual assets & no off-pack floating text

8. Stripe colour is represent the variant. Size lozenge background colour matches the primary brand colour.

9. Stripes & size icons must not touch or overlap the pack

10. Key lines may be used to help define the edges, BUT no glows, no reflections & no drop shadows