Surprising HeatData Patterns in Mobile Web Design
At HeatData we have explored mobile user behavior a lot. Patterns have emerged in various types of products that should inform how we design mobile web properties. Specifically, we have found that on mobile sites such as Pandora, Pinterest, and the NHL some user behaviors are holding back higher conversion rates and expected interactions.
We found that interstitial pages promoting downloads can be deterring downloads with their designs. We found that users tend to interact with certain ‘hot’ areas of mobile web pages given context and form factor, and calls-to-action can be optimized around this behavior. Additionally, we found that the ever popular mobile carousels can sometimes be less engaging than many people think they are.
Pandora: Make Interstitial Pages Attractive But Not Distracting
Above is the page that Pandora shows visitors to its mobile website. Many companies have this interstitial page prior to allowing you into their mobile site, promoting their native apps. The advent of smart app banners may reduce the need for these, but right now, these app download interstitials are prevalent.
What was fascinating with Pandora.com on the iPhone was what users didn’t engage with: the main 'Download Now' call-to-action (CTA).
People tapped and swiped all over the attractive smartphone images, but barely touched the 'Download Now' button. Yet those images were not click targets.
Those images did not launch a download. But without HeatData, no event tracker or other analytics suite would have suggested making those images a click target that also launched a download, toning down the imagery, or other changes as a course of action. With such a change that aligned with user behavior, Pandora’s mobile website could increase its key metric: downloads.
Pinterest: Focus Your Most Valuable Actions in Areas People Naturally Engage With
Mobile is huge for Pinterest. By the end of 2012, Pinterest was up 1,698% in mobile app usage (next highest growth was Twitter +134%) and a whopping 4,225% on the mobile web'.
So we were interested to see what would happen if we collected HeatData on Pinterest’s mobile website. What we found was that Pinterest has successfully positioned its most important call to action where people are taking other relevant but not captured actions.
In other words, 'Repin' is the most important action (generates a better engagement loop for less cost to the user than Commenting or Liking). People are scrolling, tapping, and zooming around 'Repin' more than anywhere else on the page. The behavior continues in those areas even when 'Repin' is not present. It makes sense to place the most important action near where this other activity is naturally happening at a high rate.
Admittedly, we cannot tease out correlation and causation here. It’s possible that people would take non-'Repin' actions around 'Repin' regardless of position, so it wouldn't matter where it was placed. It’s also possible that Pinterest knew that people tend to take to actions on the side that corresponds to their handedness and just optimized for the dominant handedness (about 90% of people are right-handed).
However, now we have empirical data to support this design. Moreover, for developers and designers who don’t have the numbers or research that Pinterest has, this remains an important lesson: figure out where your users are naturally looking and acting, and consider putting important actions nearby.
NHL: Separating The Carousel and The Carousel’s Indicator Can Decrease Engagement with The Carousel
In the case of the NHL mobile site, we were interested to see if people really engaged with the carousel / slideshow in the main content area. It doesn’t trigger any unique events or page loads, so HeatData was really the only tool for the job. If people don’t interact with it much, it may be worth considering a different layout. This content takes up nearly half of the screen for smartphones, so it’s important to understand.
Based on the HeatData that we collected, it appears as if the text content was actually engaged with far more than the carousel. And when the slideshow was in fact engaged with, it was around its text components (e.g. 'Wind Breakers'). Notice how the progress indicator for the carousel was hardly touched. While it’s rare for people to actually touch it anyway, we can only speculate that either the content in the carousel doesn’t require physical interaction, was unengaging, or people couldn’t tell it was a slideshow that could be interacted with.
Ideally we would run an A/B test where there were overlaid arrows on the carousel or some other indicator that the main element was indeed a carousel that a visitor could interact with. Our test would be looking to see if we could move top level metrics like engagement as well as local metrics like the number of times people interact with the carousel itself. This is the only way we could actually test whether people sufficiently understand the carousel or not.
So where does this land us? It would be a mistake to blindly generalize what we learn from Pandora, Pinterest, and the NHL to every other mobile site out there.
However, by using HeatData, we discovered that prioritizing CTAs against the rest of the design, leveraging your users natural behaviors to improve conversion, and exploring assumptions around common mobile designs are useful patterns.
What about your mobile site, can you learn from these leading products?