On mobile, it's vital that publishers maximize the exposure and discoverability of the vast amount of content they produce. A challenge all publishers face is how to show users that more content is available and provide them with the easiest and most persuasive way possible to explore it. 

Marfeel's smartphone mosaic header equips customers with multiple elements that not only promote content discovery, but also consolidate brand recognition. 

On smartphone, the sections mosaic header is always visible when users access a publisher's section mosaic, however, it is also displayed when an article details is accessed through a deeplink with specific behavior to increase recirculation and brand recognition.

At the mosaic header's foundation is the publisher's prominent logo to promote brand awareness, in addition to the added elements that have evolved over time that encourage navigation and increased engagement.

Navigation methods used in the past

In the quest to maximize session time through content exploration, Marfeel has experimented with several methods of mobile navigation features. 

Tabs

Tabs were utilized however their wide-spread use was a challenge as they rely on a publication having less than 5 sections, which is rarely the case. To address multiple sections, Marfeel implemented a 'more' option that displayed the remaining section mosaics that could be navigated to when tapped.

The sections displayed before the 'more' tab depended on and adapted to the detected screen width. However it wasn't an ideal solution that promoted the depth of content a publication offers. Navigation options were still slightly shrouded in a 'more' menu. 

Drop-down menus

Drop-down menus were also considered that served two functions - they provided the section title for the page a user was browsing and cues that the menu provided further navigation options. But this still didn't fulfill Marfeel's goal of really promoting all the content a publication offers and spurring the user to explore the material available to them.

Lateral (hamburger) menu and scrollable sections indicator

The lateral menu is often criticized as not being sufficient when it's the main navigation option because even though it's a typical UI element, its discoverability and usage is very limited. 

To address this low-discoverability, Marfeel adds the main sections to the sections indicator. This multi-dimensional approach of employing both the sections indicator and lateral menu maximize content discovery. 

To access the lateral menu, a user must tap the hamburger menu in the header.

The sections indicator features scrollable navigation that provides users with direct access to all the sections of a publication. To maximize recirculation, it's designed with visual cues that indicate that the header is scrollable and encourage the user to explore and uncover all the sections and content in the mobile site.

One of the most prominent visual cues utilized is cutting off the name of the last section in the header to show that the header is both interactive and contains more content. 


The header, lateral menu, and sections indicator is the same for both tablet and smartphones.

For a comprehensive summary of all the state of the art options Marfeel has experimented with over the years and some insight into each, click here. 

Deeplinking

When an article is accessed through a deeplink, the sections mosaic header is displayed to reinforce a publisher's brand and encourage content exploration.

As the user scrolls through the article becoming more engaged with content, the sections indicator fades away and is replaced with swipe bullets to maximize viewability for a rich reading experience, while maintaining the publisher's prominent logo.

As soon as the user scrolls back up the page, the effect is reversed, snapping the sections indicator back into place, presenting the added navigation options to promote further engagement. 


For more information, see the Collapsable UI article.

Last extraction timestamp

A publisher can also customize the header of their Marfeel mobile for smartphones to include a timestamp that indicates when content was last updated from their desktop site.