The Washington Post’s new website: print-inspired hierarchy

Without a doubt, perhaps one of the most appealing features of a printed newspaper page is how it can show hierarchy for the content it displays. When an editor and designer work together on establishing the priorities for content, then it is up to how typography, sizing of elements and positioning come together to indicate to the reader which is the most important story, as well as the rank and importance of those that follow.

A well-designed front page, for example, displays a Center of Visual Impact (CVI) that becomes the point of entrance on the page. That was the centerpiece of my own book Contemporary Newspaper Design (Prentice-Hall, 1981), where I wrote:

“The designer controls the way he wants the reader to proceed visually on the page. One of the basic rules of page design is to create instant attraction for the reader. The CVI should generate enough interest or magnetism to command the reader’s attention at a glance.”

This was then validated with our own Poynter EyeTrack research of the 1980s in which the majority of readers’ eyes entered the page through a photo or via a headline that was the largest element on the page.

At-a-glance visual seduction is even more important today, as we must present information across platforms, some of them with quite small screens, where creating hierarchy becomes more challenging.

At The Washington Post

The Washington Post has started rolling out its much anticipated new website, following a series of tests that began in May.

I have taken a look at the new WashingtonPost.com and two things stand out: its clean, minimalist approach and the important and greater role that hierarchy plays. It is as if the WaPo digital team has been inspired by how news are presented in print and decided to salute it through their online edition.

The Post’s classy font, Postoni, helps to situate us in familiar territory from the get go.

Starting on the homepage, fewer stories——only about four— compete for attention at the top. The smaller number of stories immediately conveys that these are the top pick that we should know about at this moment. Readers appreciate curation, which is, after all, a form of hierarchy for content selection.

I wish the size of headlines for these stories varied a bit more than it does. Headline size variation is one of the most effective ways to indicate importance, something on which print editors and designers have always capitalized. In the new wapo.com, there is only a very slight difference between the lead piece and the secondary ones.

The real priority, however, comes in how navigation is presented. The new wapo.com has a traditional horizontal navigational bar at the top: Politics, Sports, Lifestyle, etc. However, what I liked best is the most direct news navigational bar, with specific stories of the day: Donald Trump, Redskins quarterbacks, Pope Francis. ‘Fashion Police’.

Hierarchy also plays a key role as we scroll down the page, with various sections presenting their content there, as in Opinion, More Top Stories, Visual Stories.

The article page, a point we all agree is where many readers land first as they come via a link from social media, is also clean and easy to follow, but with a strong sampling of stories in a column to the right of the text. This is a way the editors and designers are telling the reader: we know you just joined us, so here is some other stories you may be enjoy today.

A conversation with the Post’s Cory Haik and Julia Beizer

I had a mini interview with the Post’s Julia Beizer, Director of Mobile Products, and Cory Haik, Executive Director, Emerging News Products.

Last May, that the Post would be testing two versions of its Web and mobile site created by Team Rainbow. The word serendipity was mentioned as one of the elements that would be new.

Julia: We think serendipity is a key driver in success with engagement. Across the web, news organizations and tech companies alike are trying to dream up ways to move readers through to more pieces of content they might like.

The Post is continually experimenting in this space, through editorial production, technology advances like big-data personalization, etc. Rainbow Web is one of these experiments. We chose to use the lens of serendipity to guide us. What new user experiences could we create to showcase the kind of deliberate serendipity we’ve created for years in print?

So how did the concept of the news bundle play?

Cory: Newsprint is dead, long live newsprint! We fully embrace the bundle; we always have, as the newspaper was the original ‘bundle’ that rolled up on the doorstep each day. This is a product that we think works really well, especially for serendipity. The browsability and scalability that is all, quite frankly, just easy to consume. The web can be the Wild West in terms of navigation and getting a complete reading experience. To be fair, the paper is a product that’s been perfected over a hundred years. So we wanted to take this bundle concept, apply it to the web and create a more complete reading experience for users to easily browse through. And it’s working! Users are staying longer, reading more stories per visit. And we think the way we are programming our content helps people get to interesting stories they may not have otherwise stumbled across. To be sure, it’s an experiment, but it’s one we feel good about and are moving forward in new ways. Our coming focus will be to find ways to bring more of the rich news design we do on the Rainbow suite to more corners of The Washington Post.”

Which of the models have you adopted?

Julia: This was our first A-B test of Rainbow web. We saw pretty quickly that readers preferred peek. Our bounce rate was lower on that version and our time spent was longer. We quickly adopted pinch as our core UX paradigm for Rainbow on mobile web. It’s been effective for us — 14 percent of our page views on mobile Rainbow web come from users tapping on that little sliver of article on the right. That’s cool. It’s engagement we don’t have in other places.

On desktop, we still use a pinch paradigm, but we have iterated on it over the last few months to optimize for larger screen sizes. We tested a navigation paradigm like the attached, pulling in a visually-driven newsletter called First Reads as a navigational element on desktop / tablet web. We expected this would help drive engagement, but we actually saw the opposite. Readers were more likely to browse in pinch view than they were using this rail, so we’ve tucked this content into the hamburger menu.”

It is satisfying to see this new generation of news online editions that are moving forward with a smart salute to those qualities of print that are worth transferring to our digital efforts.

These are also principles of good news design that have served us well and should continue to do so:

1. Establish a clear Center of Visual Impact that becomes the point of entrance into a page or screen.
2. Use photo/headline sizes to guide the reader from the most important to the least important.
3. Provide a clean environment for the eye to roam, avoiding clutter and crowdedness (this is where good internal white space makes a difference!).
4. Prioritize the content according to importance, providing that sense of curation that is key to how we consume information today.

The Washington Post is doing it right. It should serve as a model for those contemplating changes for their online editions.