nicolas leroy

Two UI tidbits at Zappos/Amazon

August 11, 2010

Here are two nice UI elements that I have recently discovered on the Zappos and Amazon websites.

Multiple-image browsing at Zappos

It’s common to see multiple-image browsing on product pages, but it’s pretty rare on search result pages. And it always comes with more UI weight (icon to open the browsing widget, or prev/next icons to browse icons…). Zappos has implemented a very nice solution that adds no extra UI weight: when rolling over the image from left to right, the image changes, and you can discover up to 6 photos per product directly on the search result page! Sure, at first glance, this is not easy to understand: it took me a few seconds to understand how to move the mouse over (top to bottom? squared zones?…); but once you’ve got it, it’s a pleasure to use!

Multiple images browsing at Zappos (Aug'10))

Usage-oriented facets at Amazon

In the CSE world, we often oppose hard goods and soft goods. It’s usually easy to build a product database for hard goods (electronics goods, domestic appliances, cars…), and then let users browse products, click on “compare prices” and land on product pages. But for soft goods (fashion, health & beauty, flower…), the number of references makes it a daunting task and so CSEs usually let users browse offers rather than products. In short, hard goods = easy to structure; soft goods = the mess to organize.

When it comes to facets, most CSEs and retailer sites implement feature-oriented facets and rarely usage-oriented facets… Using the analogy “hard goods / soft goods”, I’m tempted to use the terms “hard facets” for feature-oriented facets and “soft facets” for usage-oriented facets. Does it make sense?

Anyway, Amazon is experimenting with soft facets on its “Women’s denim” category in the US. When landing on the homepage of the category, you can choose “Modern chic”, “Timeless style”, “Everyday casual”, “Fresh & forward” styles. Basically those values act as shortcuts in the navigation (1 option in the soft facets = multiple options in the hard facets selected), and they give a kind of “buying guides embedded into faceted navigation” behavior that I really like.

"women's denim" category at Amazon (Aug'10))

2 commentaires

Benjamin Rezzak
on Aug 16, 2010 / 4pm
This is somehow, what a lot of Product/Marketing people want to do because they have (me included) the feeling that this is natural to users but that's making quite a lot of assumptions for the users themselves :-)

My opinion has changed lately in regards to those 'lifestyle' filters and options, mostly because, what we think is natural for users, make them ask themselves a lot of questions, and lot of questions are usually not good to have a fluid UX aren't they?

Let's take the example of a car, the filters could be "classy", "practical", "posh".
Okay, that's looking very good and looks intuitive but can users tell what's behind? In most cases, they won't, or they will have "their" idea of what's behind.

Let's say you want to buy a car similar to a MINI, the Mini is practical, looks classy, but knowing the price compared to other cars in this category and the image of the brand could have you as a user putting the car in the "posh" facet.
This is where users are starting to make assumptions (as all users think differently, assumptions could be different), but "posh" for you (as a site editor) were expensive coupés... Oops.

Thing is you don't search naturally for Fresh and Forward jeans, waiting to see the results from Amazon on that, it's a tricky point.

on Aug 16, 2010 / 6pm
I understand your point regarding the potential counter-intuitiveness of such "natural" filters... It is the same bias that is found on buying guides or more largely in any editorial work. And that's what need to be clearly explained: those filters are editorial work ; those are some tools to assist the shopper who is not an expert in the category. Also, I see another benefit of those lifestyle filters: they can encourage serendipity in a UI (faceted navigation) that favors relevancy.