Zappos UX Fix:Grouping Items Improves Usability

One makeover technique to improve usability is grouping like items. Sounds simple, but you’d be surprised how often like items are scattered around a site page. I found this happening on the Zappos item detail page.

I thought the page could be made friendlier with some item grouping, and a little relabeling.

There were three places for grouping improvement:

  • Sharing options
  • Viewing options
  • Item Detail arrangement

Here’s the before:

Circled in orange are “sharing options,” and blue are viewing options.

Before: Sharing Options

Most of the sharing options are on the left side, and a Facebook “like” link is floating in the middle. While the Facebook like is self-explanatory, the options on the left are not. For example:

  • What does the URL in the first field represent? It looks like a shortened link (and that’s what it is), but why not label the field?
  • The “tell a friend” button. I’d like to know how I’m going to tell a friend. Email? Facebook? Other? Again, why not just say what it is? I think it’s a good policy to prepare the user for what a button will do. That way, they won’t spend time wondering. Turns out it’s a link that opens an email window, so why not just say that?
  • The “Share this product” opens up a window with what feels like a thousand links to social media sharing sites. I can’t even get them all in a screen shot.
  • Finally, we have a field labeled “blog about this item.” But in the field is (what I know as) HTML code. Below it says “preview badge.” So actually, this is code to add a badge with the item’s picture and description to your blog.

After: Sharing is Caring Simplified


Here’s what I did:

  • Grouped the options inside their own box, under a cute little green “Sharing is Caring” banner. I think it fits Zappos’ humor, don’t you think?
  • Simplified the sharing options. Let’s face it: most people share on three social media outlets: email, Facebook, and Twitter. So I just added the easily recognizable and seen on most sites these days Facebook, Twitter, and email icons. I haven’t completely gotten rid of the exhaustive sharing options, I just hid them behind the “everything else” button. I’m not entirely happy with that button situation, but it’s better than it was.
  • Moved the Facebook “like” button under the rest.
  • Renamed the cryptic ‘blog about this item” to its actual function, “Create item blog badge.”
  • Added a label to the last field, “Here’s a URL to this item.” Which, if I had my way, I’d remove altogether, as I think we’ve pretty much exhaustively covered all the sharing for this item already.

Viewing Options

Circled in blue on the “before” graphic at the beginning of this post are the viewing options. This wasn’t a big fix. I just happened to notice that buried in the product description section was a link to a “video description” of the item. I thought it belonged up with the other item viewing options under the item picture.
Although it’s not exactly a “viewing option” I moved the “add to my favorites” button here. Just feels better there.

Item Detail Rearrangement

So, those fixes were pretty self-explanatory. Now on to the upper item detail area.
First off, the items are kind of jumbled. My eyes wants to see better alignment.
Also, I noticed was the customer review stars line hanging up there by itself.
In the old Zappos design, I’m pretty sure that customer feedback information was right up at the top, and I liked that.
Zappos customers are great at leaving good fit data (and that has helped me in my shoe ordering many times), so I think that information should be up front and center. Putting the customer reviews section here also allowed me to tuck all the item details together on the right. I may like it tucked up under a drop-down menu, or user-expandable section.
I also put the picture of the item in the middle, where it should be!
In order to get things to fit on the right side, i also had to shorten the “add to shopping cart” button to “add to cart.”
I also enlarged the font on the price.

The final screen

So, ┬áhere’s a screenshot of the completed rearrangement. I think it feels a lot better. On my next rev I would stick the customer feedback under a drop-down menu.
I also think the Product Information section below could also use some editing/shortening. You could call out the heel, shaft and circumference data. But that’s a content thing and this post is just focused on the UX. :)

Posted on October 4, 2011 in Blog, UX-usability

Share the Story

About the Author

Back to Top