During a recent update to our电子商务用户体验报告系列,我们受到了一些设计改进的鼓舞,同时气馁,看看留下旧问题和一些新的出现。

In comparison to the findings from our previous research into e-commerce, we were happy to seelarger product imagesthat help answer users’ questions, robust reviews that provide context around feedback, and easier application of discount and coupon codes, helping bargain hunters complete purchases.

We saw some new issues as well, including atrend toward hiding or minimizing product descriptions and details。An old problem remains:sites that make it difficult to know when an item is added to the shopping cart。And new, cleanly designed sites emphasize another problem:cluttered and datedCustomer Servicesections of sites

The Good: Bigger Product Images

Whether due toincreasing screen sizes and resolution, more spacious visual designs, or for the benefit of the site experience, sites areembracing large product images

图像的大小已经成长product pages, with more detail visible. We all know that a picture is worth a thousand words and on ecommerce sites, a (good) picture is worth a thousand dollars. In usability testing,用户收集图像的产品详细信息, including details that aren’t covered in the product description. Large images can show more detail, and multiple views offer even more information. Pictures of products in use or in context go a long way to answering customer questions. We’ve seen a user realize that a toaster had big enough slots for bagels and another know that coasters had feet that would protect her wooden furniture, simply by looking at product images.

The increase in image size is not only seen on product pages.Category pages, which often cram as many tiny images of products on one page as possible, are also using larger images. This lets user在购物和比较过程中早期见详细信息, helping users spend their time exploring the right products.

Category page on ColdwaterCreek.com with large product images
Product images are larger on many sites, such as on a category page from Coldwater Creek, allowing shoppers to see more product detail.

While on the topic of images, for good measure we need to reiterate the old finding thatpictures that look like banner ads will be ignored, and thatstock photos hurt more than they help。当我们推荐大,详细的照片时,我们的意思是实际产品的照片(包括在使用中或上下文中的产品照片)。

The Good: More Robust Reviews

评论帮助用户了解更多关于定性ty and use of the product. Reviews can answer questions or address concerns that users have about the product, because they’re written from the perspective of people who needed or wanted, and actually used the product. Offering reviews is helpful, but sites are increasingly taking reviews farther byoffering additional information about the reviewer or by better summarizing the reviews

Many sites are adding details to reviews: relevant details about the person writing the review, such as gender or age, or particular product criteria for evaluation, such as sizing or quality. Sites are recognizing top contributors and letting readers rate the value of the review. They are summarizing keywords and phrases used in positive and negative reviews, or even highlighting quotes from useful or descriptive reviews.

Such additional information, when done well, can help make iteasier for users to get the full benefitof others’ opinions. Reviewer details let users find reviews that are pertinent to their situation or use, and review summaries help users wade through large numbers of reviews to see what common issues or strengths the product has.

OrientalTrading.com reviews with criteria for price and quality
OrientalTrading.com included criteria for price and quality with their reviews, providing alternate ways to rate the products. The most commonly cited positive and negative qualities of the product were summarized at the top of the reviews section.

(For more on the persuasive impact of reviews, see our full-day training course onPersuasion in Web Design。)

The Good: Coupons You Can Use

In the past we have watched users struggle and struggle to use coupon codes and to qualify for discounts on sites. We’re happy to see that some sites are making iteasier than ever for shoppers to apply discounts or even to automatically receive them。If a discount is advertised on a website, automatically apply the discount to users who qualify. If discount or coupon codes are available, make it easy to enter and apply those codes, long before users get to the payment page in the checkout process. Users want to see discounts applied as early in the shopping process as possible.

Though sites may make using discounts difficult in order to increase sales totals, preventing users from being able to use or take advantage of discountserodes trust和may frustrate users to the point that they no longer want to shop on the site. Further, making it easy to qualify for discounts has another advantage: we’ve seen plenty of users decide to spend more money on a site in order to qualify for free shipping.

An Add Coupon Code button in the shopping cart preview on ChildrensPlace.com
The Children's Place allowed users to click a button toAdd Coupon Codein the shopping-cart preview that appeared in the upper right corner of the page. This button led to the shopping cart, where users could enter and apply the discount while shopping, rather than having to wait until the payment page of the checkout process.

The Bad: Smaller and Hidden Product Descriptions

Product descriptions seem to be disappearing上many ecommerce sites. They're located in the far reaches of web pages, away from product images, entirely hidden behind links, and shoved into small boxes. This may be a desktop design change influenced by designing for mobile, as companies try to create concise information for use on large and small screens alike.

While the growth of product images is commendable, it cannot be at the expense of product descriptions. Descriptions can answer questions about use, benefits, care, materials, and measurements. This is not to say that a 1,000 word treatise on a product needs to be visible as soon as the page loads, but users have to be able to quickly and easily find and use the product description when they want to.

Product information on sites can be layered. If space is tight, include a summary or brief description at the top of the page, with a clear link leading to additional detail. Ensure that the summary information is clear and descriptive. Users will dig for details, but they shouldn’t have to hunt to find the product information in the first place.

A 4-line product description on EsteeLauder.com
雅诗兰黛的网站上的产品描述都是crammed into boxes that had space for only 4 narrow lines of text.
A full product description in a small, scrolling window on Estee Lauder's site
Expanding the product description on Estee Lauder's site simply expanded the box containing the description, forcing users to scroll the description to see product details. For mobile users, it may be necessary to defer additional content to a secondary screen, but don't give desktop users even less space to work with than they would have had on an average smartphone.

The Bad: Adding Items to the Cart

Users shouldn't have to guess if an item has been added to the shopping cart. Many sitesfail to give adequate feedbackabout this crucial action.

This is ecommerce 101. Users don't want to scour the page to find out if an item was added, and you certainly don't want them leaving the shopping process to find out if something is in the shopping cart or not. The action needs to be immediately and clearly confirmed.

Feedback can be accomplished in a variety of ways, from taking users to the shopping cart to using an overlay or modal. However, what doesnotwork is adding a single line of text to a page, or updating the quantity of items listed near a shopping cart link or icon. Users overlook these subtle changes.

Subtle design changes that were likely intended to keep shoppers immersed in the shopping experience can instead act as a distraction. If users don't know if an item was added, they may leave the shopping process to check the cart. Others may add the item again. If shoppers don’t realize they’ve done this, they get to the shopping cart and blame the site for the fact that multiple items have been added rather than the one they intended.

The result of adding an item to the cart on Costco.com
Costco added a single line of text (in green, beneath theAdd to Cart按钮)表示将项目添加到购物车中。这太微妙了这个页面的变化。

The Bad: ClutteredCustomer Service

Many ecommerce designs have become more open and airy over time. Until you go to the customer-service area of the site. So many customer-service sections remain the cluttered, cramped, and dreary dungeons of ecommerce sites.

If a customer is going to the customer-service area of your site, he is probably already encountering a problem or struggling with a question. What kind of a sign does it send to your customers when the area of the site where you ask users for their money is clean, fresh, and friendly, and the area where you answer your customers’ questions is cold, dark, and dreary?

As designs change and are updated over time,don’t neglect the customer-service section of the site。如果他们与该网站的其余部分不一致,则过时的设计可能对用户进行麻烦。用户可能想知道策略是否是最新的或怀疑所提供信息的准确性。进一步,微小的类型文本墙壁对于用户阅读和理解的巨大内容越来越难。

A Foot Locker product page
Product pages on Foot Locker’s site used plenty of white space, big images and larger text.
A text-heavy Customer Service section on FootLocker.com
Customer Service pages on Foot Locker’s site looked cramped and crowded by comparison.

Consistent Findings

We began studying ecommerce usability back in 2000, and with each new edition of our电子商务用户体验report series, we see the early guidelines remain solid even when evaluating the newest ecommerce designs. Issues and design solutions that we identified in ourprevious editionspersist today, sometimes in new forms.