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.
No comments:
Post a Comment