The Continuous News Feed

ESPN has a interesting method of maintaining viewer interest on their site. It uses a mixture of scroll-spy via Intersection Observer API, article length progress bar, and URL updating method via the history.pushState().

via GIPHY

Setting the Stage

As a visitor to ESPN website, you might click to read an article. Depending on the type of article it is, ESPN sends you to a feed that places the article at top. On desktop there is a left side column that has article headlines. Within this column, the current article is highlighted in white with a solid border on the left.

The Interaction

As you read the article and begin scrolling to reveal more text the left side border of the current article block becomes a progress bar. The bar shortens as you advance down the page until it reaches the end of the article. In the right side body area the visitor will see a subsequent article directly underneath the current article. This article will be related – very likely connected by the sport. In the example above the article is about soccer. So the next article is about soccer and will have a good chance of being of interest to you the visitor.

What happens when you scroll further down to begin reading this next article? Not much at first glance. But there is some subtle interactions happening both visually and behind the scenes. First, on the left side column, the original article block becomes grey, indicating that it has been visited and read. Second, in the same column, the next article highlights in white which indicates it is now the current article being viewed. This effect is known as scroll-spy – here is a simple jQuery library for that, and here is an article on how to use the Intersection Observer API if you don’t like jQuery. Third, the next article block receives the same left side border progress bar – here is a tutorial on how one might implement it on their own site. (And here is why you might NOT want to use it). These interactions happen visually, but are discreet so as not to turn your attention away from reading the next article.

Behind the scenes, there is something very cool happening. Immediately upon transition from one article to the next the URL updates in the browser. This benefits ESPN because if a reader wanted to share the story they can just copy-and-paste the URL from the browser. Updating the URL is a Javascript enhancement, see this tutorial for more information.

Distillation of Normal UX

The combined effect of this type of news feed is that is distills the normal experience of navigating a website that publishes numerous articles. Usually the visitor arrives on an article, reads it, then is prompted to click on other articles that might be linked at the footer. ESPN, however, compresses this behavior into a click-free experience. It keeps the visitor immersed in their content rather than diverting their attention to manually interact with the UI.