Post on 25-Apr-2020
Mobile-friendly hero image research
University of Cambridge
• Dr Sam Waller
• Dr Joy Goodman-Deane
• Mike Bradley
Unilever
• Oli Bradley
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
Helping shoppers “see”
our ice cream tastes awesome
(& find their flavour fast)
before after
3.6%*
lift
*test with Retailer C
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
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.
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