Why the long page?

Long pages are something of a current design trend with websites. They are increasingly being used, but any search of rationales or motivation for long pages is hard to find.

Long pages are something of a current design trend with websites. They are increasingly being used, but any search of rationales or motivation for long pages is hard to find.

This is the story of why we used long pages in a recent project for our client Toyota Europe, a structural redesign of its main website that is used as a template in more than 30 markets across Europe and the Middle East. We have worked with Toyota over many years and through many iterations of the site, the most recent of which involved the largest and most detailed period of research and evaluation of user behaviour and usage of the existing site. Research was also carried out into users’ goals and desires, specifically relating to the use of an automotive site, and into related aspects of user psychology and behavioural economics.

The idea was to a take a fresh look at how to design an automotive site, with the constraint of retaining the existing visual design and the reuse of existing content. Of course there were other business requirements, but they do not relate to this story.

From user testing of the existing site we discovered some key insights, the two most influential being what we called anchoring and the emotional rational mix. Firstly anchoring.

Anchoring

As designers or owners of a site, we occupy a rare position – we know what is available within it. We have a ‘God’s eye’ view of the site and its offerings. End-users’ behaviour often seems odd and illogical and we regularly wonder in user testing why they miss whole sections or fail to notice that there are tools and functions that would help them. The poor end–users have a very limited view of the site and must interpret the clues afforded by the navigation, links and images. They have to infer the site’s potential content and build mental models of what is on offer. You might say that this is what information architecture is all about, but that only goes so far to map out the site. It does so in terms of content but not usually in terms of functionality, nor in terms of the uses of functions.

This results in users relying on what they have already found. We saw users foraging and dropping anchor on specific sections of the site. They did not explore widely as they found sufficient information within the few areas they knew, even when there were much better sources of information or more applicable tools in other sections.

This is similar to the behaviour of hunter-gatherer tribes or foraging animals. On finding a source of nourishment they will continue feeding from that area because it requires less effort than expending energy in the search for other potential sources of food, even when there may be richer sources available. Only once the level of nourishment falls below a critical level will they move on and seek another area. Users were behaving in a similar way. If we think of information as nourishment, then they would use tools and sections of the site that they had previously found to provide some nourishment, even when the areas or tools were not best suited to the task.

It was clear that signposting and the users’ initial reaction to the page are critical. Users need to know where they are, what’s on offer and what they can achieve there. In addition, they need to know that there are other options available on the site that will meet their needs. These foraging and dropping anchor insights were key behaviours we needed to address.

Emotional rational

The second major challenge was the need to bind the emotional and rational content within the site into a more cohesive package. The traditional model is to engage the user with emotional content, image and video galleries, and then allow access to more detailed, rational content, specs and equipment, either through a layered content approach or via sections and sub-sections. This emotive/rational mix fits with Don Norman's three forms of design – visceral, behavioural and reflective, where the images are aimed at inducing a visceral reaction and the specs and equipment meet the behavioural requirements. The reflective is met through the nature of delivery and the brand values associated with the product.

However, when we think of a car, we flip-flop between the emotional and the rational. During the purchase process the two sides are very closely related and the final decision, while we like to think is a predominantly rational action, is often highly influenced by the emotional response to the car.

Anchoring behaviour showed that many users would get stuck in either the rational or the emotional content and not get the complete picture of the car. They would seek out the specs and stay there. Some of this behaviour reflected where the user was in the buying process, or the task that was set. But for many they would tend to keep returning to a type of content and miss whole other sections.

To resolve these problems, we made two fundamental changes. We simplified the main navigation to have just two sections – car and everything else. We knew that the huge bulk of the users came to find out information about cars and so we made this the primary focus of the navigation. Second, we removed sub-sections from the car pages. In the past, each car was given what was termed a car chapter, which included the usual sub-sections of gallery, specs, equipment, grades and so on. These silos of content were one of the main causes of anchoring and of splitting the rational and emotional content.

No navigation

By removing the sub-sections, we placed all the content on a single long page made up of content components. In the design process we tested many iterations of this approach and looked at using a navigation structure to link to sections within the long page. We looked at locking navigation to the top of the page as well as other approaches. In the end, we opted for no navigation within the long page, primarily because we believed that such an approach may cause users to just jump to the components and continue to miss other content.

At the time, early summer in 2010, the notion of a single long page was unheard of in automotive sites. For years the mantra has been to try and keep everything above the fold. However, this changed when blogs, news sites and social media sites began to change users’ experiences and they became used to scrolling and encountering lengthy and long content items.

We also looked to other sectors for examples of long pages and the best advocate we could find was Amazon. Each product has a single page. In the case of the Kindle, the product page at the time was 17,244 pixels long. Amazon clearly did not have a problem with using long pages to sell its best selling product. The length of our proposed longest page came in at a mere 7,400 pixels, however, the actual pages in the final sites were often well short of this length.

So our rationale for long pages was to break down the silos of content and to try and ensure users are exposed to a blended mix of emotional and rational content.

The question is, did it work? The simple answer is yes. Whilst not all people scroll all the way down the long pages, 46% of users see the majority of the content. In the past, the typical user only saw 18% of the content of the car chapter. Did we remove anchoring? Yes and no. Users still hone in on the areas of the page they have used in the past, even when other components may be better suited to their task, but the number who did this is far smaller than on previous versions of the site.

The structure and design of the site templates are undergoing an ongoing process of testing and improvement and we are looking to continually improve aspects of the site. The fundamental rational for long pages still remains at the core of the design and has influenced how we approach the design of other sites.

Examples of the Toyota site can be found at: www.toyota.se and www.toyota.de. As you will see the template can be amended for individual markets, with the German site opting for a more traditional primary navigation model with six sub-sections.