Thursday, 14 June 2012

A web designer walks into a pub and the bartender asks “Why the long pages?”

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

This is the story of why we used long pages in a recent project. Our client was ToyotaEurope and the project was a structural redesign of their main web site which is used as a template across over 30 markets across Europe and the middle east.  We have worked with Toyota over many years and through many iterations of the site. But this project entailed the largest and most detailed period of research and evaluation of user behaviour and usage of the existing site. It also entailed research into user goals and desires of an automotive site and into related aspects of user psychology and behavioral economics.

The idea was to a take a fresh look at how to design an automotive site, but with the constraint of retaining the existing visual design and reuse of existing content. Of course there were other business requirements but these do not related to this story. One of the things you notice when looking at automotive sites is the homogeneous nature of their designs. At the time if one looked at  home pages it was hard to tell them apart. Things have changed slightly but the norm is still a main focus window 3 or four sub promotions all presented above the fold.  The home page is a front door and serves the primary purpose of presenting the latest promotion or model launch and little else.

As you move into the sites the designs offered some variability but the navigation and structure of conent follows similar group think rules. From our user testing of the existing Toyota site we discovered some key insights, the two that were the most influential were what we called anchoring and the emotional rational mix.  Firstly anchoring.

As designers or owners of a site we occupy a rare position. We know what is available within the site. We have a “god’s eye” view of the site and its offerings. End user’s behavior often seems odd and illogical. Often in user testing we wonder why the users’ miss whole sections or fail to notice, or know that there are tools and functions which would help the user. The poor end user has a very limited view of the site and has to interpret the clues afforded by the navigation, the 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 information architecture only goes so far to map out the site. It does so in terms of content not usually in terms of functionality, or 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 as 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 user’s initial reaction to the page are critical. Users need to know where they are, what’s on offer and what they can achieve there. But in addition users need to know that there are other options available on the site which will meet their needs. This foraging and dropping anchor were key behaviors we needed to address.

The second major challenge was the need to bind the emotional and rational content within the site into a more cohesive whole. The traditional model is to engage the user with emotional content, image and video galleries, and then allow access to more detailed and rational content, specs and equipment,  either through a layers content approach or via sections and sub sections. This emotive/rational mix fits with Don Normans three forms of design – visceral, behavioral and reflective. Where the images are aimed at inducing a visceral reaction and the specs and equipment meets the behavioral requirement. 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 it is often highly influenced by the emotional response to the car.

Anchoring behavior 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 behavior 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. Secondly 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 etc. These silos of content were one of the main causes of anchoring and of splitting the rational and emotional content.

By removing the sub sections we placed all the content on a single long page. A page made 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 and 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 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. Blogs, news sites and social media sites were changing users experiences. They were becoming more used to scrolling and encountering lengthy and long content items.

We also looked to other sectors for examples of long pages. The best advocate we could find was Amazon. Each product has a single page. In the case of the Kindle, its products page at the time was 17244 pixels long. So 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 7400 pixels. The actual pages in the final sites were often well short of this length.

So our rational 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. Simple answer is yes. While 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 was 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 previously.

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. But the fundamental rational for long pages still remain at the core of the design and have influenced how we approach the design of other sites, most notably the new Lexus GB site.

Examples of the Toyota site: Toyota Spain, Toyota Germany In the German site the market elected to go with a more traditional primary navigation with 6 subsections.

Enhanced by Zemanta

No comments:

Post a Comment