I’ve been deeply immersed in Usability these past weeks preparing for the upcoming CV3 User conference, where they’ve graciously asked us to do a session on Effective Page Design. While digging into this concept, I of course enlisted the help of my own in-house e-Commerce retailing guru (see: wife) and conducted what turned out to be a mini usability test of 2 of her most visited shopping sites. Endless.com and Zappos.com. Her answers to my questions were not only insightful, but also confirmed a lot of what I’ve been reading.
Namely that:
- Usability trumps all
- Pretty goes a long way
- Cater to your Hunters and Browsers
- The more information the better
- Listen to your users and adapt
The blow-by-blow of our little UX Showdown is below:
ROUND 1: Homepage Face off
Endless comes out swinging.
From the subdued, monochromatic color scheme to the simple organized layout of the content, Endless makes it easy for the uninitiated Hunter to know what they’re about (Value Proposition) and what incentives they offer (Free shipping ). The reversed type over tan in the main menu might impede legibility for the older Browsers out there, but they make up for that with a repeated navigation in the main focus area. Even though the search bar isn’t top-right, where you’d usually expect it, we’re inclined to forgive that as well since it’s still easy to find and they’ve used that top-right area for additional functionality – a snapshot of the latest additions to your cart and your wishlist (they call it “Save for later”).
Endless’ minimal color palette helps the product shots pop.
Zappos’ Homepage unfortunately exemplifies the “more is less” principle; More stuff = Less focus. I’m evidently not the only one who thinks that Zappos needs a bit of help in the UI design area. A very prominent search bar at the top is a good sign, but there was some confusion with the 3 lines of “popular searches.” We weren’t inclined to take the time to read through to find out if what we’re looking for was in that tag cloud-looking mess, so I’m wondering if that’s just for SEO purposes. Plus there’s another search bar lower down on the page as well, what’s that about?
Zappos’ somewhat cluttered Homepage.
ROUND 2: Category Page Cage Match
Endless Keeps up the attack.
The big differences between our two contenders here again are aesthetics and layout. While both sites have functionally efficient means to filter through their vast inventory, our test subject showered praises on Endless’ choice of putting all the functionality she could want to find her perfect shoe in the left column. The sorting happened on-the-fly as she made her choices, so there was no appearance of leaving that page therefore a sense that she was getting to where she needed to go faster. Plus it just looked cleaner and more inviting.
Endless’ left nav gives the time-sensitive hunter all the tools to sift through the products and get to those gold studded heels as quickly as possible.
Zappos uses dropdown menus but the results aren’t immediate plus certain combinations might turn up zero search results.
ROUND 3: Product Detail Squirmish
Zappos gets some good jabs in, but…
The most interesting comment made about this stage of the buying process was that our test subject would frequently check for products on Zappos.com then once she’d made a buying decision, hunt for the product elsewhere. Why? Zappos gave good info. Especially critical customer ratings and their multi-view close ups of the shoes. So even though the information is cluttered on the page, the sentiment seems to be… “at least they’ve got it,” but their Achilles heel of bad UI design robs them of the conversion at this critical stage of the process.
Zappos’ info rich detail pages make it a good reference but the crowded layout makes it unappealing.
Ahhh, the all important user reviews. With categorizations to boot.
Endless’ easier-on-the-eyes detail page uses the opportunity to do relevant cross-selling as well.
SURPRISE TWIST! Zappos adapts and recovers!
But wait the match isn’t over yet ! If you look carefully on their current site, you’ll see a banner ad for Zeta, Zappos’ new website in waiting and it, from what I’ve seen so far, corrects all the mistakes we saw in their Classic site. Not just the look but the general usability of the site has undergone a complete overhaul.
What are some of the key improvements? Glad you asked:
- Widened page
(now they can fit the whole top nav in 1 line instead of breaking it up into 2) - Cleaned up layout on the Homepage
(white space is your friend) - Easier navigation
(search, alphabetical browsing, dropdown menus and cater to Browsers and Hunters alike) - Added a more sophisticated filtering system on subpages.
(see snapshot below) - Put the alphabetical browsing at the top
(Instead of hiding in the footer) - Easier accessible corporate culture information
(This is one of the things Zappos is known for, why not flaunt it?) - More information about the designers responsible for certain products.
(snapshot below)
Zeta’s new high falutin filtering mirrors Endless’ on-the-fly sorting functionality. Go to the site to see it in action.
Zeta gives the shopper more info on the designers so you feel more engaged.
Assuming that their Live Help is no longer a priority for them (since that’s absent from the new site), I’d say this is a seriously well-thought out redesign, so kudos to the Zappos team. I’m sure there are tweaks and nitpicks here and there that could be improved on, but whenever this new design is officially launched I’d be interested to see what the reaction is from their loyal fans and previously skeptical critics.
The one thing that would still give Endless a slight edge is the way Zappos has treated additional images on their new detail pages. If there’s a choice between simply rolling over thumbnails and having to click to engage a pop-up window, rolling over seems the more convenient option. Endless also gives users the ability to see more detailed views of the product right there on the detail page, again with a simple roll over. That tiny additional layer of convenience means just a little less friction in the buying process.
Endless’ rollover instead of click is a bit easier than clicking to open a pop-up.
To the left, Zeta’s new multi-image closeup. To the right Zappos’ current multi-image closeup. I dunno, I think I prefer the specificity of the icons of the current one to the generic numbered buttons.
CONCLUSION: So who wins in the end?
Well I could be completely cheesy and say “The Consumer” wins since both Endless and now Zappos provide a smooth, very efficient online shopping experience, but that would be so anti-climatic. So for sheer tenacity, listening and learning from their mistakes and providing a good ol’ fashioned come-back story we declare Zeta /Zappos the winner…
for now!
But that’s just our humble opinion. I’m curious about what you might think.
—————————————————–
MORE READING
For another review of Zappos’ current site read Carlos del Rio’s take on it
Here’s another article on Zappos’ Usability from the gurus at Elastic Path
Check out this article on Zappos’ visual search from E Consultancy
Comments