Menu

Beta — We’re reformatting our articles to work with the new site, but this is one hasn’t been done yet; it may contain formatting issues. No need to report this. We’re working on it.

Galleries: The Hardest Working Pages on Your Site

by Jared M. Spool
on August 12, 2008

[Editor’s note: This article was originally published November, 30, 2005]

Sony Ericsson wants you to choose one of their mobile phones. They’ve got
17 lovely models to choose from. Perhaps you want the T237? That one seems
nice. Or the T630? Or maybe, the K700i?

What’s the difference, you ask? Unfortunately, they won’t tell you until after
you’ve chosen the one you want. Only then will Sony Ericsson inform you about
your chosen model’s features are.

Seriously, just pick a model from this list, then we can move along with our
exercise. Do you want a W600, a W520a, a W800, a J300a, a T290a, a S710a, a
S700i, a K500i, a K700i, a Z500a, a P910a, a T237, a T637, a P900, a T630,
a T226, a T616, or that perennial favorite, the T610?

What do you mean you can’t decide? I’ve given you all the information that
the designers of SonyEricsson.com give every user who comes to their site to
view the phones. To discover which phone they want to buy, the users get to
choose from this list:

 SonyEricsson Cellphone Gallery Text

To be fair, their designers do provide a second version of the list, this
time with pictures. Is this any better?

SonyEricsson Cellphone Gallery

Now you know which phone to choose, right? The T630 looks pretty slick. I
bet it has all the features you want, right?

The designers at Sony Ericsson worked hard to create a gallery of all the
available phones so users could choose one. However, they left out a critical
component: the information that those users will need to make their choice.
Unless the user is already intimately familiar with the phone they want, supplying
model names and pictures isn’t going to help.

The Gallery Page

The galleries — the list of links to content — are your site’s hardest working
pages. They are the final page that separates those users who find the content
they are seeking from the users who won’t. A well-designed gallery page will
drive users to success every time. A poorly-designed site will only serve to
drive users away.

Sony Ericsson’s designers aren’t the only ones who struggle with providing
a gallery that can help users choose their desired mobile phone. The designers
at Motorola, a competitor, did practically the same thing with their gallery
page:

Motorola Cellphone Gallery

Besides indicating those few phones that have available "downloads",
this list doesn’t give any more information for choosing than the Sony Ericsson
site. It’s unlikely a user will pick the phone of their dreams from this list.

The Downsides of Pogosticking

When a gallery doesn’t contain the necessary information for the user to decide,
they have to resort to ‘pogosticking’. Named after the children’s bouncing
toy, pogosticking is when the user jumps up and down in the hierarchy of the
site, hoping they’ll eventually hit the content they desire.

Our analysis of user tests shows that pogosticking rarely results in the users
finding what they are looking for. In our studies of e-commerce sites, for
example, 66% of all purchases happened without any pogosticking at all — the
users purchased the first selection they chose from the gallery two-thirds
of the time. And when users did pogostick, the more they did so, the less they
purchased.

We’ve found this extends to non-e-commerce sites as well: our studies show
that users who don’t pogostick find their target content 55% of the time, where
as those who do pogostick end up only succeeding 11% of the time.

Preventing Pogosticking

While users trying to choose a new phone might have trouble with the design
of the Motorola gallery, users trying to find available accessories for their
current phone may not. If they know the model number or recognize the phone
from the provided images, they’ll make the right choice every time. (Fortunately,
Motorola produces visually distinct phones. At least, most of the time — the
V170 and V173 being an exception.)

Pogosticking depends heavily on what the users currently know and what they
are trying to accomplish. In the case of finding accessories, the users know
the phone model and they know they want to see what accessories are available.
It is likely the Motorola gallery will work in this specific case.

But, in the case of identifying the next phone the user will purchase, they
don’t know the phone model and the little information they may know (such as
that they desire a phone with large, easy to press buttons or an email capability)
isn’t communicated in the gallery. Therefore, any users trying to accomplish
this task will be forced into pogosticking to complete it.

Order is Important

Look again at the Motorola gallery of phones. Can you guess which phones the
folks at Motorola would like you check out first? Right now, they are really
marketing the RAZR and ROKR phones exceptionally hard, spending millions in
advertising and awareness campaigns.

However, you wouldn’t know it from this list. They’ve arranged the phones
in alphabetical order, which is the equivalent of random order from the user’s
perspective. The user is going to start in the top left and move through the
list in an orderly fashion, not reaching these critical products until they’ve
made it to the third row. It’s really left to chance that the users will discover
the unique features of these phones.

We’ve noticed that users expect the most important items to always be listed
first in the gallery. They often don’t even realize a list is alphabetical.
If the first few items aren’t of interest, they often assume the rest will
be even less interesting.

Designing to Help Users Choose

Buying a home is a complex process. Applying for a mortgage, especially if
you’ve never done it before can be a confusing world of jargon and terms, all
foreign.

Many banking sites handle mortgages just like Citibank.com. Citibank’s gallery
page has a simple section called "What You Get" which states, without
fanfare, that "Fixed Rate", "Adjustable Rate Mortgages",
and "FHA/VA Mortgages" are available, giving links to each of those.

Citibank Mortgages

That probably works well if you know which you want. What about the home-buyer
that is facing these terms for the first time? How do they decide? It seems
Citibank’s designers assumed they’d pogostick through the two choices to figure
it out.

Bank of America’s Mortgage gallery isn’t much better. Again, just three links
("Fixed-rate mortgages", "Adjustable-rate mortgages", and
the ominous "Mortgage Programs") that users need to pogostick between
to understand the differences.

Bank of America Mortgages

Interestingly, another bank, Wells Fargo, has taken a slightly different approach
to their gallery of mortgage options. While they offer the same content, their
galleries (and there are multiple versions, depending which path you take through
the site) makes it easier for users to decide. The galleries provide copy like "Gives
all qualified buyers the opportunity of putting only 3% down on a primary residence
and taking advantage of flexible qualifying guidelines. (No income limits)" to
help users decide which link to click on.

Wells Fargo Mortgages

Of course, just supplying a lot of text isn’t helpful. It has to be the right text
to help users understand which link is the one they are going to want.

Making Galleries Work Well

Galleries are very important to user success, yet we are only now beginning
to understand what they need to work well. Designing to eliminate pogosticking
is still a new concept for many folks and that is reflected in many of the
designs we see today. Understanding how order and layout of the links affect
the user’s behavior is critical. As time goes on, we suspect we’ll see many
novel design approaches that help users choose where to go next, all with greater
and greater success.

Want to Hear More Insights from Jared Spool on Gallery Pages?

Check out Jared’s popular UIE Virtual Seminar, Galleries: The Hardest Working Pages on Your Site. Jared has updated this popular seminar with new examples and findings from our latest research. It’s something you don’t want to miss. Click here for more details.

Share Your Thoughts with Us

Have you done something special with your gallery pages? How have users responded? We’d love to hear what you’ve been doing. Leave a
comment on the UIE Brain Sparks Blog

About the Author

Jared M. Spool is the founder of User Interface Engineering. He spends his time working with the research teams at the company and helps clients understand how to solve their design problems. You can follow Jared on Twitter at @jmspool.