In the first article in this series: The IAP Merchandising Playbook, Part 1 we provided a simple checklist for ‘Captivating’ Special Offer Merchandising:
In this article, we’ll take a closer look at one particular item in our checklist: #5 ‘Effective Visual Hierarchy.’
What is Visual Hierarchy?
When viewing a collection of distinct visual elements, our eyes naturally gravitate to large, bold, high-contrast, or animated elements first, and to small, lower-contrast elements last.
By being more deliberate in how we structure information, we can guide the user’s experience and streamline their purchase decision.
As an exercise, look at the offer below, imagining yourself as a player seeing it for the first time. Where do your eyes go first? In what order do you 1) see items, and 2) actually process the information they convey?
Above: from Might and Magic RPG: In what order does your eye perceive and process elements on this screen? Why?
There is no right answer of course, but for me the visual journey goes something like the above.
The large, bright hero image attracts my attention first (a good thing!). From here, my eye is drawn to nearby high-contrast elements: “Limited!” and “This pack can only be purchased once every 14 days!” which, to me, are not highly relevant to my immediate purchase decision. A time-limit would be more meaningful.
Next, my eyes land on the green call-to-action button: “Purchase: $14.99,” briefly before jumping to the very high-contrast ‘tap X to close’ button to the upper right, which seems to dare me to close the popup before considering further information.
If the goal is to help me make a purchase decision quickly with minimal effort, the information here isn’t organized optimally.
Let’s redesign it!
Redesigning for Visual Hierarchy
As a rule of thumb, I recommend arranging visual hierarchy into a maximum of three ‘tiers.’
Above, we have created an information hierarchy with three distinct tiers through deliberate use of contrast and size. Each tier in the hierarchy has a corresponding text size: 1) Header, 2) Body and 3) Fine Print.
Our intent is to help the user consume information in the following order:
Tier 1: HEADERS: Hero image, product title, purchase button. We want players to see these first.
Tier 2: BODY: Key product value propositions: “Get these daily in your inbox!,” “Limited!,” resource icons and quantities. We expect that nearly all players will read and process this information before making a purchase decision.
Tier 3: FINE PRINT: Additional information that is optional and not critical-path in the purchase decision for most users. For this offer, fine print includes text labels for each resource (if icons alone don’t do the trick), the ‘more info’ button and the x / close button. These elements are here if needed, but definitely don’t need to attract attention.
Above: Generally, the items deserving ‘Tier-1’ treatment are hero image, product title and purchase Button.
Above: ‘Tier-2’ elements generally include 1–2 Value Statement(s), resource icons and quantities.
Above: ‘Tier-3’ is for non-critical supporting information (i.e. fine print) and the close button. The information is there in case players need it, but most won’t. Regarding the close button, most players reflexively know where to find it, so it needn’t attract attention.
Let’s use this clear definition of ‘Effective Visual Hierarchy’ to evaluate some more offers, both good and bad!
Do this!
In addition to meeting all of our key criteria, this offer from Dirt Bike Unchained is a particularly good example of a deliberate, three-tiered visual hierarchy. Most importantly, Tier-1 / Header size is reserved for our most important three elements: the (large) hero image, product title and purchase button, and all other elements take a back seat at Tiers 2–3.
Above: The most prominent elements here are hero image, title and purchase button / price.
Above: In this offer, Tier-2 sizing is used for the ‘10X Value’ label, and offer expiration timer.
Above: In this offer, Tier-3 sizing is used for the Value Statement, and bundle components. While I would usually put components at Tier-2, it works in this case because this ‘bit of everything’ offer is aimed at new players, who are likely to consider the ‘10X Value!’ statement more immediately relevant than the specific quantities of resources included.
Don’t do this!
The in-store offers shown above are crisp, colorful and relatively uncluttered. But, because they lack large, compelling hero images, it becomes very difficult to create effective visual hierarchy.
Because the hero images (the gift-wrapped boxes, at left) are small, the bundle components must grow to fill the remaining space. Their size and contrast here arguably elevate them to ‘header’ treatment alongside the title, purchase button and hero image. The large slash-through price ($15.99) is also given header treatment, and the bright, fully-saturated colors used for the large offer containers and title banners give these non-informational elements more visual weight than warranted.
Putting all of this together, we have 8–9 distinct, ‘loud’ visual elements all competing for attention at the same (top) level in the visual hierarchy.
My eye doesn’t know where to go, and I feel a subtle but significant pressure to escape this screen! Now where’s that close button…
Do this!
While imperfect, each of the offers in the above example ( AFK heroes) gets a pass for our key criteria. The large, aspirational and animated hero images do their job well.
Let’s focus on the visual hierarchy and get specific with potential improvements. I would de-emphasize the background image on the right half of each offer to help the component icons read more clearly.
If I’m being picky, the expiration time needs more margin on the left, and font sizes could change to emphasize price, discount % and quantity, and to de-emphasize expiration time and purchase limit.
Don’t do this!
The in-store offers from Langunis come close, but fall short for two reasons: 1) the hero images are too small, AND identical for all offers (tsk. tsk.), and 2) visual hierarchy:
The offer contents at left are given too much visual prominence, and so they overpower the hero image or purchase button. Again, with all elements shouting for attention at similar volume, my eye doesn’t know where to go first, and I’m tempted to close the store to avoid investing more effort.
The examples thus far have all been offers in the scrollable store list. Let’s look at some modal popup offers!
Special Offers: Modal Popups
Review: a modal popup
