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:
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
- 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.