Hamburgers Will Be The New Homepages

While news site homepages may not get much attention from the audience, they still get a lot of attention from the publisher, especially from the editorial team. This means the homepage often carries a certain amount of value that’s lost on the 90% of users who never make it to the homepage.

One example on the editorial side is the top stories section of the homepage, which functions as a sort of realtime record of whatever stories Editorial thinks are most important at the moment—and it’s something most users never see.

We can fix it by surfacing these stories on the article page and an easy way to do that is simply sourcing the next-up stories directly from the homepage.

This is just an example. The broader theme is about capturing homepage value (editorial or otherwise) and migrating it over to the article page.

Homepage Peek

Along these lines I’ve been trying out a design pattern that repurposes the navigation to function as a sort of homepage preview. It uses the familiar hamburger menu icon but before I explain it there’s one thing I want to call out about the traditional drawer-based hamburger menu navigation.

This technique is mainly concerned with solving a real estate problem. News sites often have expansive navigations, with many sections and topics, and there’s just no way to fit everything once you get down to smaller screens. So tucking it away in the little drawer solves it and it works well enough because hardly anyone uses the navigation on news sites anyway.

The point is that it doesn’t alter the underlying model, it just moves the navigation links from one spot of the screen to another.

The pattern I’m proposing, while visually similar, is a little different in that it does try to expand the purpose of the menu.

First the visual layer, where again it uses the same hamburger icon but instead of the drawer it triggers a fullscreen overlay.

The overlay contains the usual navigation options but it uses the extra canvas to display some other things that are not normally associated with navigation: featured stories, newsletter sign-up, membership promotion, search, social, etc. These additional elements have a purpose: they add up to something like a preview of the homepage, or rather, a preview of the brand.

The fullscreen treatment adds a certain visual effect but I should stress that this isn’t the motivation—we’re not just filling up the screen with huge-text navigation options. The overlay just provides the necessary screen space.

Another reason for the fullscreen overlay is to establish the menu interaction as a different mode (in the true sense of modal interfaces). This is part of an effort to move away from the notion of “navigating” a destination site and towards a notion of app states. Right now the distinction may seem subtle or even contrived, but if you look at where the industry is headed, with app integrations and things like Instant Articles and AMP, publishers will need a way to express their brand that doesn’t rely on a user clicking around their site.

Lastly, I’ll point out that this has the same basic objective as Apple’s Peek (and Pop) gesture, which lets you preview something without exiting the current context. And on the web, where simply clicking a link can unleash a shitstorm of ads and pop-ups, this has even greater value.

Addendum

Wrapping up this post I realized that this idea is a continuation of something I wrote about 2 years ago in a post called Interacting with Logos, which was itself a continuation of another post I’d written 2 years before that. It’s interesting (at least for me) to see the dots connecting unconsciously over a span of 4 years.