Galleries: The Hardest Working Pages on Your Site

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:

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

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:

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.

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.

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.

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.