Campbell’s  : Tempting menu

A simple recipe entices users to engage with a deep-scrolling index pages.

click to view

The feature

Campbell’s, US-based soups and snack foods producer, has a simple recipe for enticing users to scroll a deep home page and navigate content.

Campbell’s bundles much of its corporate content on discrete microsites including one for its current corporate social responsibility (CSR) report. Launching in a new window, the report site’s initial home page view is focused around a stylised question, ‘What’s in a NAME?’. Below this is a freehand down-pointing arrow alongside a prompt to ‘scroll’. Moving down through the page reveals a succession of headings and short statements (for example, ‘Leadership/Responsibility starts at the top. Hear from our CEO and learn about our Leadership in CSR.’); each has a highlighted link to deeper coverage.

During scrolling the site’s horizontal navigation bar remains fixed at the top of the frame, offering five primary section headings that on mouse-over reveal a second deck of sub-section headings.

The takeaway

Deep scrolling home and overview pages have advanced on the desktop in tandem with the multiplication and uptake of alternative viewing devices, in particular smartphones and tablets, where they are more suited to the unified format and swipe-driven environment. Even then, though, they still present two major challenges to site managers: how to get across key messages along with the scope and nature of content; and how to enable users to move easily to and through content. Campbell’s has come up with workable answers based on familiar conventions.

The engagement issue is particularly neatly tackled by adopting an editorial approach that teases visitors with a question to draw them into a string of content-highlighting responses that form a narrative progression down the page. (This follows naturally from the thematic focus of the site so might not be as appropriate in other contexts.) At the same time the fixed positioning of primary and secondary navigation at the top of the page ensures they remain visible and within reach however deep the scroll, unlike if right- or left-hand menus were used or had been discarded.
First published 22 May, 2014
< Back to Tips