Use this Chartbeat Heads Up Display hack to improve mobile user experience

Readers are clearly consuming content on the move — Chartbeat has found that nearly 60% of reader engagement comes from mobile. Yet, our research suggests that the mobile user experience still lags behind desktop, severely affecting the ability to turn mobile readers into subscribers. A better mobile user experience today allows readers to move deeper into your site, and improves the likelihood they’ll come back tomorrow. 

Use our Heads Up Display and this Developer Tools hack to see how your desktop and mobile experiences compare in real time. Then you’ll be able to identify small improvements to your content curation that will engage more readers no matter the device.


Have you downloaded the Chartbeat mobile app for iOS and Android? Get it here.


Heads Up: Display readers’ mobile user experience

Quick note: For this example we’re using Google Chrome, but we’ve found that developer tools are fairly consistent across browsers. 

Step 1: Load the Heads Up Display on the page where you want to reflect a mobile experience.

Tip: Not sure how to install the Heads Up Display? Use the link above and click on the image below to check out our quick installation video.

mobile UX on HUD

Step 2: Open the Google Chrome menu at the top-right of your browser window (currently a white arrow in a red circle), then select More Tools > Developer Tools.

Step 3: Toggle device on the toolbar (typically defaults to “Responsive”) and select the device that you want reflected (e.g., Galaxy X5, iPhone X) as shown below.

Step 4: Pivot on Mobile in the Heads Up Display dock to use the scroll depth indicator. The scroll depth indicator helps identify opportunities to strategically place links and recommend other stories in places readers tend to fall off. 

Quick note: to expand the bars along the left, click on the scroll depth indicator.

Recirculation benefits from better mobile UX

See where a majority of your readers are dropping off by using the scroll depth indicator. The bars on the left side of the screen give you a real-time view of where readers drop off. Click on the indicator to activate the scroll depth bars down the left side and look for the big bars — they mean that more people are dropping off at that specific point. 

scroll depth indicator mobile web

This is a perfect place to link to your other content. Even better, it ensures that even if they exit one of your mobile pages, they’ll leave for more of your content.

Takeaway: Improve mobile UX across content

Editors and reporters put a great deal of resources into the homepage. Yet, content curation should go beyond desktop experiences. 

There’s little risk in conducting small experiments with content placement that can see a major uptick in mobile readers and ease the friction that prevents engaged mobile readers from becoming loyal subscribers.

For even more on our mobile tools, head to our website.


More in Product