Why Gap.com Works: Usability Review
Gap Inc. uses the same ecommerce platform for all it’s companies, including the fairly new shoe store Piperlime.com. All of these sites share one inherent usability benefit; it is ridiculously easy to add items to the shopping cart. This is not to say the systems are perfect, but there is a lot to learn. Take two minutes to view the screencast of the Gap.com checkout process and you will see some great features, along with a couple of things that could be done better.
- One, as you can see in the screenshot above, is the selection of sizes and colors. Sizes are displayed as images and any size that is out of stock is greyed out and unavailable for selection.
- The quick view feature is a great way to show the customer more product details without taking them to a different page. The ability to add a product to the shopping cart from the category page is a great asset in creating impulse buys.
- On to some deficient areas, the progress bar on the top of the checkout is poorly designed. If the progress bar is on the top of the page is should run horizontally, only if the bar runs down the left side of the checkout should it be vertical.
- The checkout review page is oddly laid out. Shipping information has the pricing for the order alongside it, while the billing information is below. Grouping billing information together makes more sense.
What do you think about the usability of Gap? Let us know in the comments.
Posted by Chris | January 16, 2007
John January 17th, 2007
I like your first comment in regards to the selection of sizes. It makes sense to list the sizes as opposed to require a user click to trigger the drop-down menu. You can visually scan and determine if the sizes you need are available.
Additionally, the consistent behavior shared across all of Gap’s sites is absolutely great. The learning curve for the user is small, they are familiar with the process and can thus concentrate on shopping and not get distracted with the site. Very smart on their part.
John
eCommerce Cache: Usability Review of Gap.com | Yclick.it January 18th, 2007
[…] Yclick.it - Persuasive Web Design […]
Chris January 18th, 2007
John,
As the web moves forward I expect to see visual cues replace the dropdowns and other selection tools of the past. The only thing holding most sites back is the time and money you must invest to switch away from these methods. Obviously Gap didn’t hold back when designing the platform for their sites.
Andrew G. January 18th, 2007
I agree with John. I noticed similiar functionality with Nordstrom.com when it comes down to color (as is available on many apparel ecommerce sites). The color “swatches” are available right underneath the main image and the customer is not required to click on the “colors” menu to view the available colors.
You can see a sample here - http://shop.nordstrom.com/S/2917317/0~2376777~2374609~6002233~2374666?mediumthumbnail=Y&origin=category&searchtype=&pbo=2374666&P=1
AG
J. Smith January 18th, 2007
Are there any other sites that use the AJAX style previews/carts in the catalog and/or product pages?
Chris January 19th, 2007
Buy.com is always pushing new technologies and they use some Javascript to create an AJAX effect on their product listing pages. You can see an example here http://www.buy.com/cat/jazz_blues/123.html. Rollover a product and you will see the effect.