December 02, 2003

Design Critique - The Top 10 List at Yahoo! Shopping

I love what Yahoo! has done with redesign of the shopping section that went live a couple of months ago. The shopping homepage now is much more simpler and makes more sense than it did a year ago. It even looks better, something that we don't expect from Yahoo!.

Perhaps the most interesting development there is a new search filtering feature launched last month. Dubbed as SmartSort1, it helps users refine their results by a number of criteria offered in a range of choices - you can choose, for example, how important is brand, price, compact size or battery life to refine results for cellphones, right there on the fly.

It's still raw and underdeveloped but something that has a lot of potential. In the long term, it doesn't need to be a stand-alone feature. Folks at Yahoo! should be thinking of ways to integrate it with the main offering. I faced some problems2 with it but overall I find it promising because it attempts to simplify a part of the shopping process that's most critical to the user: decision making in product selection.

Top 10 or Only 10?

A few days ago Yahoo! allotted major screen real estate on their shopping homepage to a rectangular box that announces their Top 10 Lists, Gift Ideas and recently added Exclusives3. Top ten anything usually brings a lot of traffic. This is particularly helpful for users clueless about what to buy for their loved ones, as they get a better starting point than simple, unhelpful category links. This at least seems to be the rationale behind it.

I was baffled as I could not find a link to the main Toys and Baby category.

But there are some design issues with the Top 10 pages that limit their usefulness. On the Toys Top 10 for example, I was baffled as I could not find a link to the main Toys and Baby category. I still don't know why the page doesn't explicitly link to the main category Sure, most people will go to one of the products featured in the top ten. But what about those who don't want any games and gizmos for their kids.

What then? In all likelihood, they will either go back to the homepage or leave the site altogether for an Amazon or an E-bay. Only the most persistent will find the link hidden at the bottom of the page, grouped with a number of other similar links [the area marked D in the picture]. Or the one at the top right corner [A] equally inconspicuous inside a confusing navigation bar that tells me I’m in the Flowers and Gifts section! I was left wondering about what Plants or Roses have to do with this page.

One of the advantages Yahoo! has over other specialty online retailers is its large selection. Yet it doesn't seem interested to flaunt that. Shopping users are discerning buyers, they want to look around and figure out the best deal before they make the decision. If hiding category links is intentional, I don't understand the purpose it would serve.

I mistook the links in the left navigation for parent and child category links but they are links to other top ten lists.

When I reached the Toys Top 10 for the first time, I mistook the links in the left navigation [B] for parent and child category links. But they turn out to be links to other top ten lists. Why they aren't marked as such, I haven't a clue. I couldn't find the link to the Toys category until I was about to leave. Other users many not stick around for so long.

Redesigning the Top 10 page

Not responding to the needs of even a small percentage of users may turn out to be very costly.

I decided to write about the Top 10 list because it is a very important page. The Top 10 category is linked even from Yahoo!'s homepage that gets hundreds of millions of page views every day. The shopping season is in its full swing now and not responding to the needs of even a small percentage of users may turn out to be very costly. Consider this example:

One would think that making a site Netscape Version 4.7 compliant isn't important because only a negligible percentage of users use that browser. Well, one can afford that on a smaller site. Yahoo! cannot. Yahoo! works perfectly even on that archaic browser where most sites fail because not addressing needs of that 0.1% of the audience would mean about 57 Million less page views every month4 or over half a billion less page views in a year.

The top 10 page ignores the needs of certain users... there is an obvious need to redesign the page.

The top 10 page ignores the needs of certain users - those that arrive on the page and do not feel compelled by any of the product and wish to browse other similar products from the same category. As I explained above, the category pages are not clearly accessible from the top 10 page. Thus there is an obvious need to redesign the page to address those requirements.

The clear task here is to make the page open ended [from almost close ended as it currently is] by making the category link and other related links prominently accessible. I sat down to write this review on a Sunday afternoon but it stretched over to the next two days as I got engrossed in it. Finally did a quick redesign, see the changes below. [View both original and redesigned versions side-by-side].

A. Top navigation bar now shows category of the featured product, toys in this case. There's no reason for it to highlight the confusing Flowers and Gifts category.

B. Currently it isn't clear that links in left navigation lead to Top 10 pages and not main category pages. I've added a title at the top and changed the labels of the links to clearly reflect that.

C. Each listed product now has a link leading to the product sub category. For example under #3 Sony Playstation 2, is a link labelled as "more video games."

D. The description of how the list was compiled was featured at the end of the list. I trimmed it, gave it a title and moved it to the bottom of left navigation.

E. We can safely assume that almost all users will read through the entire list. It is only those who aren't satisfied with these products will look for the main category link. Therefore the most obvious place to put the category link and other related links for such users is at the end of the list. This is the most relevant part of the redesign.

What to measure

An advantage of working with a high traffic website like Yahoo! is that you can get instant feedback - through user metrics - on changes made in the interface. Another is that there's usually tremendous scope for optimising usability of the interface through measurement and iteration. Even the smallest design tweak carries the potential to lead to significant dollar savings.

These are not "fatal flaws" in the interface...but there would still be a small but significant percentage of users who will fail. Redesign can easily lead to savings of thousands of dollars.

I'm sure if the one analyses user metrics on the Top 10 page, it'll be difficult to find anything out of ordinary. The conversion rate may still reflect the usual figure. Admittedly, these are not "fatal flaws" in the interface. Most people will manage find their way through. But there would still be a small but significant percentage of users who will fail to locate the category link when needed, abandoning the page in favour of another website.

Therefore, redesigning the page to remove that "little" mistake can easily lead to savings of thousands of dollars if not hundreds of thousands due to the high traffic that Yahoo must be getting at this time. There are a number of ways in which the returns of the redesign can be measured. Two key metrics if measured before and after the redesign can easily validate the return on investment in it:
  1. Conversion rate of all users arriving at the Top 10 page in the beginning of their session [after two or three clicks at the most]. This should increase after the redesign.

  2. Average number of pages viewed after reaching the top 10 page. Again, there should be an increase.

In addition, one can also analyse the number of unique users abandoning the site after arriving on the page [should reduce] and unique users who click on the category links [should increase].


Shopping is an area where Yahoo! has a definite edge against Google. It represents an opportunity for Yahoo! to radically innovate in this area so that it doesn't squander away the advantage. I'm sure Google is working on improving its own shopping search as I write.

The redesign I propose is only a little fix. A damage control exercise. It may not be the most optimal design even though it's a big improvement from the current one. It's certainly not how I would go about it if I were to design it from the scratch. But it is the best bet within the present constraints.


1: The original inspiration behind the SearchSort feature seems to be this camera finder Flash tool that helps a user find the best camera based on the importance assigned to the given criteria. However, an important feature of this tool that I believe isn't carried over to SmartSort is the visualisation of filtering process which is a major contributor to giving the user a sense of control over the whole process.

2. I approached the tool with enthusiasm but In a search for that ideal digital camera, I found that I could not arrive at a perfect equation between the given choices. I think it was because I wasn't really sure of the importance I should give to each criterion in relation to the other. Maybe there's no perfect relationship between the choices. I found that by tweaking the limits I surprised myself. The lack of semblance of control didn't help either. Finally, I discovered that there was another qualifying criteria [aesthetics] that was more important to me than the choices I was given to make. Are these only problems waiting to be solved?

UPDATE, 04-Dec: Rahul made a comment on the SmartSort feature that I’ll address here since the commenting feature allows for only 1000 characters at a time [It's a free add-on from another site as Blogger does not support comments.]. Rahul makes three points, each of which are valid. I’ll address them beginning from the last one.

> Default state should be “important” instead of “not important.”

My take on it is that the slider should be in the middle but the text should not describe that level because inevitably it cannot reflect each user’s priority. For some that feature may be important while for others may not. If it doesn’t reflect what the user wants, he may have the same reaction you did. The purpose that this description serves is that it informs the new user that he can slide it around to select the desired preference level even though the same message is clearly reflected though that unmistakable animation. So I suggest that instead of showing the description [like important or not important] in the default state, it should instead say something like “Please move the slider to your preference” while keeping the slider in the middle.

> Scale should show 1-10 instead of “important,” “not important.”

I’m not so sure but it should to be kept in mind, there may be some truth in it. Perhaps the underlying point here is that users feel a lack of control over what happens when you move those sliders. I raised this point too. Visualization of the results [as in that Camera Finder tool] would help give more control to users.

> Rahul said: “why would someone buy a camera where he knows before hand that he is compromising on parameters like (Resolution, Optical Zoom). He might compromise on the Size, Brand the Price.”

The underlying point here the most important one. It’s this: the customer is not always aware of the negotiation of compromises vs. gains in a buying decision.

An ordinary user may compromise on resolution, optical zoom perhaps because price is more important to him while someone else, say an amateur photographer might want a higher resolution and is willing to spend a comparatively higher price. Our priorities clearly vary but everyone makes compromises during a buying decision. They're just not aware of them. It doesn’t happen subconsciously of course, we know what we’re getting and what we’re not. But this process is not so transparent that we can comfortably assign values to each comromise and gain [as Yahoo! might want] in the buying decision. No one goes to a store knowing exactly how important each of these features are to him and how he might compromise on one to elevate another.

I also pointed out that aesthetics was more important to me than all the features listed. Now, it wouldn’t have been so difficult if it was _less_ important because then I would just decide on the given features [assuming for a moment, I know what I want] and select the best looking camera from the results. But since it comes before price, resolution etc, I must constantly expand the -– what I think to be –- the limits of the other given parameters so that I don’t miss out a good looking piece.

Decision making during product selection could be a very complex process for some products. One of the things that’s clear to me is that it radically differs from product to product. And as long as there exist a challenge, a problem in product selection, decision making presents itself as an opportunity. It remains to be seen if someone can satisfactorily address this opportunity or not. Yahoo! SmartSort is an attempt but it has a long way to go.

3. The rectangular box takes about 12% of the screen area [not including browser controls] above the fold in 800x600 resolution. This space alternates between "Top 10 lists," "Gift Ideas" and now "Yahoo! Exclusives" on different visits. As an aside, the images do not render correctly on NN4 while the rest of the site works almost perfectly.

4. Calculated from 1.9 billion page views per day as reported for the month of March 2003 in this Yahoo FAQ.

Related Links

News story: Shopping Season 2003 Begins, Driven by Toy Shopping
See the current Toys Top 10 page on Yahoo!
Froogle, the "product search" service by Google: Homepage | About Froogle

0 Comments so far      

Post a Comment

<< Blog Home