About Get Elastic

Get Elastic is lovingly brought to you by Linda Bustos of Elastic Path Software, a flexible ecommerce framework for enterprises.

We also have a technical blog for Elastic Path users and partners.

Get New Posts Delivered to You
Creating relevant shopping
experiences through targeted
selling

Archive for the 'Usability' Category


Persistent Shopping Carts vs. Perpetual Shopping Carts

What’s the difference between “persistent” and “perpetual” shopping carts?

Persistent Shopping Carts

Persistent shopping carts save a customer’s cart contents across sessions through “persistent cookies.” A cookie is a small text file stored on a user’s computer. The cookie can be set to expire after a few minutes, a number of days or even years unless they are wiped out by the user’s browser or anti-spyware programs, or the user does not accept cookies.

For example, if the customer bookmarks a product on Monday by saving it to cart, and returns on Sunday to purchase, she doesn’t have to locate the product again. This is a nice customer service feature that can save sales. Some users, based on experiences with other sites, might assume your site uses persistent shopping carts, and upon returning to an empty cart, be too frustrated to even bother re-locating the products.

Amazon even reminds you when you added an item:

Amazon has caught me off guard before when I didn’t realize I had old stuff in my cart. I added a bunch of items in one session, didn’t review my order carefully and ended up receiving (and paying for) an extra wireless mouse! Lesson learned.

The decision to set a cookie that will contain information about what a customer has added to cart is made by the retailer - not all retailers use persistent shopping carts.

Perpetual Shopping Carts

Perpetual shopping carts display the number of items in the cart and sub-total as a shopper navigates the site. Marketing Sherpa recently reported that 64% of retailers believe perpetual shopping carts are “very effective” at improving conversion.

Some sites like Altrec use both persistent and shopping carts, which I recommend.

Open Your Eyes to Web Accessibility

Being in a wheelchair, I’m not able to shop in every retail store. Sometimes stores have a few steps outside the door, or have levels only accessible by stairs or escalator. Others have aisles too narrow for my chair, or shelves too high to reach. But I can access any e-store without a problem. It’s not that easy for visually impaired shoppers, illiterate and those who can see but do not have full hand function.

I came across a really eye-opening article in the February 2009 edition of Internet Retailer, (accessible online or as a reprint at Essential Accessibility) titled “Seeing the Light.”

The article describes the available technologies to bring online retail sites up to par for disabled users of all kinds. Visually impaired users can use screen readers like JAWS, Window-Eyes, BrowseAloud and IBM’s Easy Web Browsing. People with limited hand function can use “radar mouse” * that looks like a Doppler radar. When the sweeping line touches something a paralyzed person wants to view, he or she uses a finger or head-activated device to “click.” It can also help customers check out by activating an on-screen keyboard.

* I don’t have permission to use the screen shot of radar mouse on Canadian Tire, but you can view it here.

Accessibility consultants like the SSB Bart Group, TecAccess, Virtual Vision Technologies and Thinkzo can assist with audits, training and JAWS (screen reader software for visually impaired) scripting to bring companies up to code with legal requirements including the Rehabilitation Act and the Americans with Disability Act (ADA).

Retailers can also do their own audits, following WC3 Accessibility guidelines or subscribing to SSB Bart’s software-as-a-service Accessibility Management Platform ($1,000 per month).

For further reading on website accessibility (especially for web developers), check out the SSB Bart blog. Interesting topics include link text and image link accessibility tips, tips for the Adobe product Captivate and lightbox accessibility. (An example of a lightbox is a “Quick View” that pops up over a category page:

Making a retail site accessible can cost between $100,000 and $2 Million dollars (preventing a class action lawsuit such as the one filed against Target - priceless). But it can really make a difference to disabled consumers.

If you’re curious how friendly your website is for disabled users, check out Deque’s accessibility compliance tool.

Mobile Commerce Usability: Forms and Checkout

This is the final installment of a 4 part series on mobile commerce design and usability…

Part 1: Home Pages and Navigation
Part 2: Search and Category Pages
Part 3: Product Pages and Cart Summary
Part 4: Forms and Checkout

This series is based on a review of 10 mobile ecommerce sites: Best Buy, Target, Sephora, Moosejaw (old and new design), Barnes and Noble, Amazon, Sears2Go, Ralph Lauren and Tickets.com. (Links point to mobile versions of each site)

Forms and Checkout Process

As I mentioned in Part 3: Product Pages and Cart Summary, Best Buy, Sephora, Target and Moosejaw’s new site don’t support mobile checkout. Sites mentioned in this post are Barnes and Noble, Amazon, Sears2Go, Moosejaw’s old site and Ralph Lauren.

I typically recommend ecommerce sites to include the following in their checkout processes to maximize conversion:

  • Allow guest checkout option
  • Provide security assurances and trust seals
  • Link to privacy policy
  • Ask for an email address in the first step of checkout
  • Don’t ask for more information than necessary in form fields
  • Mark required fields with an asterisk (*)
  • Allow customer to copy billing and shipping addresses (use tickbox for shipping address “same as billing address”)
  • Provide a telephone number for assistance at each step of checkout
  • Store contents of shopping carts in cookies whenever possible, if customer abandons cart the items will still be there in a new session
  • Use as few steps as possible and show a progress indicator
  • Use personalization/tagging to identify customers with a promo code, and hide the coupon code field from others

When “checking out” mobile checkout processes, I noticed that none of them showed the progress indicator, linked to a privacy policy or had a “click to call customer service” link (perhaps because you can’t talk on your handset and input information at the same time like you can on a computer). I was unable to tests personalization/tagging capabilities.

At least one mobile site followed each of the rest of the best practices:

Guest Checkout Option

Nobody wants to be forced to register before checkout on the Web, how much more on a mobile device!

Barnes and Noble states explicitly that registration is not required, and hints that registration has a benefit — faster checkout next time:

Sears2Go also explains the benefit of registration and allows guest checkout, but puts the guest checkout option first and includes a bold button with the label Guest Checkout. Sears understands customers don’t necessarily read text, and Guest Checkout is self-explanatory.

Showing guest checkout first can improve conversion, as the customer is less likely to assume he/she needs an account or will be forced to create one to proceed. This approach assumes the customer wants the fastest checkout possible, which customers appreciate.

Ralph Lauren combines the sign in page with the first step of checkout (billing and shipping information). This approach can reduce the total number of steps.

Amazon’s simple log in is consistent with its Web checkout. It’s actually a required registration — but it appears so easy it doesn’t feel like a forced reg, your account creates itself as you go through the checkout process.

The downside to customer log in is it relies on email and password combinations which returning shoppers often forget (you have to remember at least your email address to request a password hint). Many simply create a new account - making it harder to reconcile customer information (one loyal customers looks like 5 flaky ones). This is an issue for both online and mobile channels.

Security Assurances

Despite the public’s fear of mobile payment security (as discussed in our Multichannel 2.0 webinar), none of these mobile sites had security assurances except for Amazon’s link “Why using a credit card is safe”

Ask For Email in First Step

The earlier in the checkout process you ask for an email address, the easier it is to follow up with a customer if the cart is abandoned with a triggered recovery email. Though the idea of chasing after a customer for changing his or her mind is controversial, many retailers have managed to save sales this way.

Of course, Amazon’s first step is the email address. The rest ask for an email address after 8-10 required fields on the Billing/Shipping page. Because some folks are paranoid about giving away any contact information, B&N includes “Your email address is required so that we can contact you about your order” and Sears2Go uses “Tell us where to send your confirmation email.” It might help to include a one-liner about your email privacy policy (i.e. you won’t share the address or send promotional emails.) Unfortunately Ralph Lauren has no assurances, and even pre-checks the email list permission box.

Perceived Difficulty of Forms

The longer the form, the more tedious it appears and the less the customer wants to bother with it. But most customers recognize asterisks (*) separate the required fields from the optional, so it’s key to include them.

It’s not a good idea to provide unconventional instructions like *Bold fields are required (which fields are bold below?). Never assume your customer is going to notice.

Allow Quick Copy of Billing Address to Shipping

This is standard for new customers, while returning customers and account holders should be able to select from existing shipping addresses and billing methods, like Amazon:

The only thing that’s confusing on a mobile screen is which button corresponds to which address when you have more than 1 or 2 to choose from. A little triangle marker pointing to the address on each button would help. An incorrect shipping address is a major problem.

A side note: Moosejaw’s old site (the new site has no checkout) had a time-saving feature where you enter your phone number in the first step, and based on your area code your city, state and country are pre-filled in the Billing Address step.

Estimated Arrival Times

I’ve mentioned before it’s a good idea to show actual dates of estimated arrival rather than “X business days.” It requires less thinking for the customer. Of the 4 sites, only Sears2Go provided dates rather than days:

Edit Cart in Process

Many retailers like Amazon remove navigation when a customer enters the checkout process in hopes to keep the customer in the funnel, but this can be a problem if the customer wants to make a last minute edit or add more products to the cart. Barnes and Noble allows cart editing, and Sears2Go allows an escape back Home or to the Shopping Cart summary. Even Amazon has a “Shopping Cart” link in it’s mobile checkout.

Alternative Payments / Pay by Phone

I didn’t notice any alternative payment options like PayPal mobile, but Barnes and Noble interestingly provided a Pay By Phone option. This isn’t a bill-to-phone-bill option (as discussed in the Multichannel 2.0 webinar), rather you can “Call 1-800-843-2665 (1-800-THE-BOOK)” to complete your order. You will be given a confirmation number to cite when you call after you have completed your order (on your phone and by email).

Perhaps some customers perceive this as more secure than entering a credit card over an unsecured mobile network, although placing an order by telephone carries its own security risks. It might also be a headache for Barnes and Noble if customers complete orders and don’t follow through with the phone call authorization.

Final Thoughts

With only a handful of reference sites, this series is not intended to be a best practices guide, rather a collection of recommendations based on observations. Please keep in mind I was viewing these sites with the iPhone and experiences on other devices may vary.

Most usability guidelines for the WWW carry over to Mobile Web, while common usability problems are exacerbated by mobile devices’ smaller screens and keyboards (or lack thereof), flakiness of mobile Internet connections and lack of standards between mobile designs, browsers and operating systems.

My recommendation is to have a mobile friendly site if the mobile channel is part of your retail strategy (whether for transactions or just customer service). When designing for the mobile Web, make sure you check out competitors’ sites in your industry, test your site on many different devices and involve real users in your testing.

I would love to hear your thoughts on your experience on mobile commerce sites, on this blog series or about your own efforts with mobile commerce in the comments.

Mobile Commerce Usability: Product Pages and Cart Summary

This is the third installment of a 4 part series on mobile commerce design and usability:

Part 1: Home Pages and Navigation
Part 2: Search and Category Pages
Part 3: Product Pages and Cart Summary
Part 4: Forms and Checkout

This series is based on a review of 10 mobile ecommerce sites: Best Buy, Target, Sephora, Moosejaw (old and new design), Barnes and Noble, Amazon, Sears2Go, Ralph Lauren and Tickets.com. (Links point to mobile versions of each site)

Product Pages

Though you can access e-stores on any smartphone, product pages on mobile optimized sites are much more usable, as you can see below:

Product Descriptions

While stripping down images and unnecessary navigation on home pages is a good idea on mobile sites, keep in mind the importance of content in the online buying experience:

  • 77% are “very to somewhat” influenced by the quality of content (descriptions, copy, images and tools) when deciding to purchase from an online retailer
  • 79% “rarely or never” purchase a product without complete product information
  • 76% believe content is insufficient to complete research or purchase online “always,” “most often” or “some of the time”
  • When faced with incomplete information, 72% go to a competitor or research further

Source: e-tailing group, 2007

The best online stores provide rich product descriptions, multiple image views, image zoom, review content and even product comparison tools. While it may not be optimal or even possible to include everything from the online store into the mobile site, care should be taken that product information presents the key benefits of the product/brand/make/model.

Above is a product page for an HDTV on Best Buy’s ecommerce store. The same product page on its mobile site:

The Best Buy example is concise, but if the mobile site is to be used for product research, is this enough information to “sell” the product? Will customers understand the jargon of HDMI inputs, aspect ratio and piano key black cabinet?

Customers also want as seamless an experience as possible. If you won their loyalty through a usable and content-rich website, it’s important to meet expectations on mobile devices also.

Be careful that product descriptions don’t display as run-on paragraphs. Moosejaw ditched its squished descriptions (left) in its redesign (right):

The old site suffered from several problems, HYPN OLV probably describes the color - but it’s not obvious what it means. The click-to-call and add to cart buttons were way too close together, too easy to tap the wrong one on a touch-screen. And the Zoom Prod. Image call-to-action at the end of the paragraph doesn’t look like a link. The new site looks and feels more like the regular Moosejaw site, and its descriptions include the quirky Moosejaw personality. The click-to-call link and and multiple images are easier to tap for touch-screen users.

Target takes advantage of bullet points to present an easy to scan snapshot of product specs:

You can even send product details to yourself via text message.

Sears2Go allows you to read an intro to the description and expand for more detail if you wish. This removes the burden for folks that hate to scroll while presenting enough information to satisfy researchers:

Sephora and Sears link to ratings and reviews right at the top of the product page:

Be careful with tables, they often force the user to scroll horizontally and sometimes both horizontally and vertically to view them, like Ralph Lauren on the iPhone:

Moosejaw allows customers to expand and contract reviews, which minimizes scrolling and page load time:

Images

Considering 77% are “very to somewhat” influenced by the quality of content including images and tools, quality imagery should not be skimped on. Target, Ralph Lauren and Sears show large images by default, and Moosejaw offers alternate image views. Obviously, you can expect better conversion with better images.

Calls to Action

Avoid stacking calls to action like “Add to Cart,” “Add to Wishlist” and “Continue Shopping” for touch-screen users. Leave some space between buttons, or place them side by side instead:

Cart Summary

Best Buy, Sephora, Target and Moosejaw don’t support mobile checkout. Of the sites that did, here are some highlights:

Ralph Lauren and Sears both allow cart editing, and Barnes and Noble allows you to move items to a wishlist. Surprisingly, Amazon doesn’t have a cart summary page - it jumps right to a sign-in screen.

Ralph Lauren confirms the item is in stock and highlights that free shipping is honored for mobile purchases. Sears offers shipping or in-store pickup options, but disables store pickup when it’s not available for a product. The best feature is Sears’ security icon on its cart button - as I mentioned in last week’s Multichannel 2.0 webinar, fear of security is a major roadblock to actually completing mobile purchases.

Tickets.com is interesting, its business is unique and one aspect of ticket purchasing is a time limit before the tickets are returned to stock if you don’t complete the purchase. You also rarely see a captcha in an ecommerce checkout, but the ticketing industry is more vulnerable to shady activity than other retailers. Unfortunately this captcha is difficult to decipher.

Next post we’ll cover highlights from the checkout process and forms on mobile commerce sites.

Mobile Commerce Usability: Search and Category Pages

This is the second installment of a 4 part series on mobile commerce design and usability:

Part 1: Home Pages and Navigation
Part 2: Search and Category Pages
Part 3: Product Pages and Cart Summary
Part 4: Forms and Checkout

This series is based on a review of 10 mobile ecommerce sites: Best Buy, Target, Sephora, Moosejaw (old and new design), Barnes and Noble, Amazon, Sears2Go, Ralph Lauren and Tickets.com. (Links point to mobile versions of each site)

Search

Error Handling

As I mentioned in Part 1: Home Pages and Navigation, some sites like Best Buy and Barnes and Noble offer keyword search without a category browse option. If you take this approach, make sure your site search handles typos and synonyms well - it’s even easier to misspell words with tiny keyboards and touch screens than regular computers. Search autocomplete, like the iTunes Store is helpful.

Placement

Many sites show search boxes on every page, like a regular ecommerce Web site.

Search Result and Category Pages

Sort Options

Best Buy numbers its results for easy selection with a keypad, and chooses not to show thumbnail images (faster loading screen). A potential problem is its default results - if there are 200 results and they’re sorted by price, the lower priced accessories may be shown for the first few pages because they’re a keyword match and sorted by price - for example, HDTV cables mixed with HDTVs.

Sears offers more options. You can filter search results further by category, or use sort-by price, ratings, keyword relevance and popularity. This is really helpful:

Because some devices don’t have “Back” buttons, providing a link back to search results is recommended. Unfortunately Sears does not support this.

Minimizing Clicks

Include stock availability (both in-store and online) and price in your category listings, this saves the user clicks and page loads and improve the shopping experience. If you offer in-store pickup, indicate which products are eligible. Sears even includes when products are available from sister-stores:

Amazon has a nice-to-have feature where you can add an item to cart or wishlist right from the category or search result page (on the iPhone, touch the arrow to expand the listing and display the buttons). This saves page loads for “hunters” who know exactly what they want and don’t need to see a description.

What’s Clickable?

Make sure image thumbnails are “clickable.” Moosejaw’s old design was confusing, the only thing clickable was the item title:

Whether or not to show thumbnail images and star ratings in search results is up to you — they decrease page load speed but help customer make a selection from search or category. Best Buy chooses not to show thumbnails, which makes sense for many of its large products which are hard to see in thumbnails anyway. If you don’t show thumbnails, make sure there is enough space between results for touch screen users’ fingers.

Liked this post? Stay tuned for the next installment — Product Pages and Cart Summary. If you haven’t already, consider subscribing to Get Elastic.

Next Page »