Who’s behind this site?

This ecommerce blog is lovingly brought to you by Linda Bustos and Jason Billingsley of Elastic Path Software: The ecommerce software that helps retailers sell more and work less.

Need advice? Contact Us or Visit Elastic Path »

Get New Posts Delivered to You
Dangerous Marketing Ahead:
How to Break Bad Habits and
Survive a Deep Recession

Currently browsing posts related to: website-usability

International Ecommerce Usability Tips

The beauty of an ecommerce website is that you have the potential to sell products to people around the world, even from your own basement. But many online retailers expect to make international sales yet are not doing all they should to help convert international shoppers. Here are a few ideas to help make the online shopping experience smooth for your international customers.

These tips apply to “international” websites — websites that are based in one country but accommodate orders from other countries — as opposed to localized websites which may be a country-specific subdomain, have a country-specific domain extension (Yourstore.co.uk) or have their own domain (YourstoreUK.com). Localized websites have their own complexities which will be covered in a follow up post.

1. Have an International Shipping page

Sure, you could have it buried in an FAQ section, in the Help area or some other hard-to-find place, but why not make it easy for users to find by making it its own link visible from every page on the site? (The footer menu is a great, conventional location). Backcountry.com hides its international information in the “Help” section which is generally associated with technical site help rather than customer service info. And Provantage.com has an impressive international shipping page, but you can’t find it through their Shipping footer link. Instead, it’s hidden behind an inappropriately labelled site map page labelled “Index” (doesn’t Index usually mean home?) and then under an equally inappropriate sub-category called “Doing Business.”

Continue Reading:
International Ecommerce Usability Tips »

Small Etailer Packs Big Usability Features

I love it when the “little guy” does something that I haven’t even seen on some of the larger sites I cite as examples here on the Get Elastic Ecommerce Blog. I recently bought a few items from C28, a Christian-lifestyle-clothing shop in California and noticed they were doing a couple of cool things I’d never seen before.

Even when scoping out sites for personal purchases, my usability consultant’s hat is always on. (It’s like those people who take film studies and can never watch a movie the same.) So I was really impressed by this virtual unknown offering features like “Email Me if My Size is Re-stocked” and “Email Me Before This Item Sells Out.” I even went to the search engine to see if I could find another site with this features (after trying a variety of word combinations) and so far haven’t found any. If you’ve seen another store doing something similar, please comment.

Continue Reading:
Small Etailer Packs Big Usability Features »

107 Add to Cart Buttons of the Top Online Retailers

Add to Cart buttons – they may be small, but no online retail store can do without them. These little, rectangular, sometimes colorful clickables connect the product to the shopping cart and are an extension of your branding. It’s important to put some thought into what your “Add to Cart” icon looks like in your shopping cart.

We’ve collected over 100 Add to Cart buttons from the top online retailers of 2006 to give you some design inspiration. And we’ve summarized some usability guidelines that you can apply to your own Add to Cart button. Ok, there are actually 111 shopping cart icons, but 107 just looked cooler.

1-800-Contacts 1-800-PetMeds 1-800-Flowers
AbeBooks Abercrombie Fitch Alibris
Amazon.com American Eagle Apple
Art Avon Barnes and Noble
BassPro Bath and Body Works Bed Bath and Beyond
Best Buy Blair Bloomingdales
Blue Nile Buy Cabelas
Cafe Press CDW Chadwicks
Circuit City Coldwater Creek Comp-U-Plus
CompUSA Costco Crate and Barrel
Crutchfield CVS dELiAs
Dell Disney Shopping Domestications
Drs Foster and Smith Drugstore eBags
eCost Eddie Bauer eTronics
Follet Footlocker FTD
Furniture GAP Gateway
Harry and David Hickory farms Hallmark
Home Click Home Depot HP
I Buy Digital JC Penney J Crew
JC Whitney Lands End J Jill
Lillian Vernon Liz Claiborne Linens n Things
LL Bean Lowes Macys
MLB Musicians Friend New Egg
Nieman Marcus Nordstrom Northern Tool
Office Depot Office Max Omaha Steaks
Oriental Trading Company Overstock Palm
PC Connection PC Mall Peapod
PetSmart Pro Flowers QVC
Radio Shack Ralph Lauren REI
Ritz Camera Scholastic SAKS
Schwans Sears Sephora
Shop NBC Smart Bargains Sony Style
Sportsmans Guide Staples Spiegel
Talbots Target The Sharper Image
Tiger Direct Toys R Us Urban Outfitters
Victorias Secret Walmart VistaPrint
Walgreens Williams Sonoma Zappos

And now for some stats, because percentages make it cooler.

Button Text     Button Graphics  
Add to Cart 58.0%   None 48.2%
Add to Bag 9.8%   Arrows 17.9%
Add to Shopping Bag 9.8%   Cart 14.3%
Add to Basket 6.3%   Shopping Bag 7.1%
Add to Shopping Cart 4.5%   Plus Sign 5.4%
Buy 2.7%   Combo 4.5%
Buy Now 1.8%   Unique 1.8%
Add Item(s) to Cart 1.8%      
Add Item(s) to Bag 0.9%      
Add to My Bag 0.9%      
Add to My Brown Bag 0.9%      
Add to My Shopping Cart 0.9%      
Order Now 0.9%      

How the Add To Cart Button Can Reinforce Your Branding

At first the “Add to Cart” button may seem like a minor detail, but it has the potential to create an emotional connection with your brand. Your choice of shape, color, font and button text all affect that connection.

Urban Outfitters’ felt pen lettering echoes the brand’s edgy, street persona (it may however be at the expense of findability as it does nothing to stand out on the screen). Northerntool’s plus sign icon resembles a screwdriver head. Petsmart’s little red doggie ball is fun, playful and instantly recognizable. Bloomingdale’s signature “big brown bag” icon captures its cachet. And Polo’s timeless, deep navy blue button brings harmony between its online and offline identity.

Button text is also of great importance. “Add to Shopping Bag” sounds more appropriate for high end department stores than “Add to Cart,” which is more believable for a WalMart or Target. “Order Now” may work for long time catalog brands now accommodating online orders. In the UK, “Add to Basket” is more prevalent terminology.

Button Design and Usability

Button Text

Web copywriting emphasizes scannabliity — perhaps the golden rule of web copywriting is don’t use 5 words when three will do. How much more should this rule apply to a small button? Nevertheless, we found 15% of the top etailers going long. Harry and David’s “Add To My Shopping Cart” — though personal — is a mouthful.

“Buy Now” may be a stronger call to action than “Add to Cart”, but may subtly suggest the user is finished shopping or is making a commitment to purchase without time to review the order. The beauty of “Add to Cart” is that it is non-committal and assumes the user is still looking around. And if you’re a good e-salesperson, you’re showing suggested products and a “continue shopping” link from view cart page (or you are using an in-line cart with Ajax’y goodness).

Text Formatting

General web usability guidelines recommend sans-serif fonts with high contrast color selection (high-contrast white on black or dark blue rather than low-contrast like Chadwick’s blue-on-blue).

All-caps are generally discouraged in web copywriting. Mixed case is the easiest to read, although all lower case is also easy. We found 45% of “Add to Cart” buttons using all-capitals. Walgreen’s slaps white all-caps text on a light colored, tiny button with a gradient and an icon, forcing some users to squint.

Button Placement

If you offer helpful features on your product pages like wishlists, enlarged photos, color switching, alternate product views, email to friend, size chart, view cart or check out buttons, make sure the “Add to Cart” button is obvious, bright and prominent in comparison. Less important functions can be lighter colored buttons or simple text links.

Stacking Text

Stacking text is not a good idea for links or navigation buttons, and the same goes for “Add to Cart” buttons. Users have come to expect some form of rectangular shape, and when quickly scanning a page, it may take longer to distinguish button from decoration, and even become frustrating. No need to reinvent the wheel, stick to the convention.

What if You Use A Button From a Template?

Even if you don’t use a custom designed “Add to Cart” button for your shopping cart, choose a button that complements your site’s theme (complements does not infer it must be the the exact same color). And make sure you pick one design and stick with it. Ecommerce thrives on trust, and random buttons erodes customer confidence.

What do you think is the best button in the collection? What about elsewhere on the web?

Leveraging New Marketing Tools with Shel Holtz - Get Elastic #36

Shel Holtz joins the conversation to discuss the ways new marketing and communication tools can assist retailers collaborate with customers - resulting in better experiences and increased sales.

Along with host DaveO, they discuss blogging for business, reasons for podcasting, what’s up with Second Life, ways to engage audiences with Twitter and Ustream.tv and the low-down on Social Media Releases plus Shel wisely advises strategic action before diving in.

MP3 File

crayonville in Second Life
(crayonville in Second Life)

Shel is frequent flier, professional speaker and prolific writer as well as VP of New Marketing at crayon (a new marketing company). He joined us from Toronto where is presenting at Visa’s Ecommerce Summit. Thanks to Chris Clarke at Thornley Fallis Communications for the hookup. Thanks to Derek K. Miller (Penmachine.com) for music track “That’s No Dream.”

Topical Annotations

A Shel of my Former Self - Shel’s Holtz’s personal blog

Holtz Communications + Technology - Shel’s professional services

Road Weary - Shel’s Travel frustration blog

crayon - a new marketing company - Shel’s daily toil

The American Family Whirlpool podcast

Linden Labs’ Second Life

Darren Barefoot’s GetaFirstLife project

GetaFirstLife.com

Get a First Life - Second Life Insider

Technorati tag:

crayon in Second Life

Twitter

Twitter - Wikipedia

twittervision

Ustream.tv

Social Media Release

Chris Heuer’s Idea Engine

Microformats

Social Media Club

Social Media Club is being organized for the purpose of sharing best practices, establishing ethics and standards, and for promoting media literacy. This is the beginning of a global conversation about building an organization and a community where the many diverse groups of people who care about social media can come together to discover, connect, share and learn.

Sample Social Press Release (Coca-cola Virtual Thirst campaign by crayola)

Copywriting for better online retail SEO

DM News published an article titled ‘Copywriting for better online retail SEO‘ by Elastic Path’s VP Marketing (and search enthusiast) Jason Billingsley in their March 30 2007 online edition.

Anyone who has chatted with Jason at a trade show or other event quickly learns that he is passionate about search engine optimization and enhancing usability to increase conversions. Show him your site and, after a quick and calculated look, he’ll rattle off a dozen tips and tricks which will increase your site visibility resulting in more (cheap) organic hits allowing you to reduce spend on (often expensive) Pay Per Click ads while maintaining or increasing your traffic levels.

No, Google is not too worried ;-), but your competition will be worried if you study Jason’s tips and follow them.

Anyhow, the article hands out a big concept which is basically a new way of looking at something you are already doing for your site - writing words. The gist of Jason persuasive case is ‘write how your customers search.’

People search similarly to how they speak. The content created should match closely to the content sought and, therefore, will rank toward the top of the search engine results page.

I find watching people use search engines remarkable due to the words they use to search - more often than not, casual phrases and conversational snippets are the norm rather than one-off, specific word strings like found in a products’ technical specifications.

Jason sets up an example of this:

For example, a typical description of a sheet set may read as follows: ‘100 percent cotton, 300-thread count, cross-woven machine washable.’ However, the product will be much more findable, and will rank higher in organic searches, if the name and description contained the same language searchers are using.

The shopper would respond much better to this: ‘These winter white soft bedsheets will whisk you off to a comfortable dreamland every night. No other luxury bedding will make your bedroom as regal as the Queen Collection’s 300-thread count, 100 percent cotton sheet set. The only trouble with a luxurious, warm and comfortable set of sheets like this is having to get out of your dream bed each morning.’

As you see, these words are more persuasive and contain sets of phrases shoppers are actually looking for: white soft bedsheets, luxury bedding, cotton sheet set, comfortable set of sheets, dream bed.

So when writing your descriptions, commit the time and energy to doing it right. Think ti through and write a little story for each product. This seems like a lot of work and it is. Writing isn’t necessarily easy and writing well takes practice and well, … time.

As such, seek advice from experienced writers (freelance if needed) and absolutely talk to people outside of your vertical universe. Talk to your nieces, grandmothers and neighbors to find out how they talk about your type of goods (ergo: a ‘couch’ to one person is a ’sofa’ to another and a ‘chesterfield’ to someone else). Make sure to get out of your company echo chamber where everyone uses and understands the same industry jargon and parlance. By doing so, you’ll find fresh insight into the ways customers search for what you have. By doing so, you’ll attract more qualified buyers, more cheaply.

Make more + Spend less = Great Success! Start by reading Jason’s tips.

Hybrid user experience designer/developer - A myth or reality?

I am currently in San Francisco at the Web 2.0 Expo. The first session I attended was on the New Hybrid Designer. Some well known panelists were on stage including Kelly Goto. They essentially chatted about how the typical ‘web designer’ is no longer just a designer, but must also have a command of development as well - okay maybe not command, but they should be versed and know what a variable, loop and array is. The one nugget I grabbed from this session is particularly relevant to Elastic Path…

We have recently been on the hunt for a User Experience Designer (the job is now filled). We had a high bar as we desired a workflow and experience/front end coding/visual experience person. Quite a lofty expectation. Like in any project, you can usually only have 2 out of the 3. The panel discussed not pigeon holing employees into vertical roles, but educating and enabling cross functionality.

The most successful hybrid designers/developers are often the knowledge seeking ones. They subscribe to both design and programming feeds. Often send emails to other staff about new things they have found or have developed. They are rare, and we need to start molding more of them within our organizations in order to become more agile. Agility seemed to be a key factor in the shift to a hybrid designer.

The last thing that was quite relevant was regarding workflow. The old way was to start with a sitemap. A very “book” centric approach. The new way is to start with user intent. This is a huge shift in thinking for a user experience designer on the web. Users enter a workflow from so many different ways nowadays. The system should be more open and less linear.

Ecommerce Usability vs Airport Usability

After a “too close” connection in Montreal I sat on the plane wondering how poor airport usability actually is. Those thoughts quickly turned to ecommerce usability and how poor online stores often are as well. The following chart is surprisingly accurate on how both these environments stack up to the paces users put them through.

Airports Online Stores
you never know how much time you have shoppers are often pressed for time or distracted away from the task at hand
you rarely know exactly where to go shoppers get lost trying to find products because of poor navigation or ineffective search functionality
you rarely know what information is going to be requested (and why are they asking so many questions) shoppers get asked to fill in information like fax number or company name when it is not relevant
the words used to direct you are very unintuitive wording is never consistent across ecommerce sites
every sign is the same shape and color each button is identical, none more important than the other
when you need help, it takes forever to locate a map or actual person contact info is often buried deep with the site or no phone number is available
the balance between security and privacy is almost impossible security is too tight for some and too loose for others
if too many people are traveling at the same time, it seems to take forever websites tends to slow down during peak times or special promotions
every time you go to the same airport, it seems like it has changed constant redesigns make it difficult to re-find items or tasks
the check-in process takes way too many steps the check-out process takes way too many steps
you never know if and when your baggage is going to arrive you never know when your order will arrive
it is especially frustrating if you are an international traveler shopping from out of country can be very frustrating

Do you have any other examples of how these two environments are similar?

Ecommerce Fraud Prevention vs Ecommerce Usability

How far should an online store go to prevent ecommerce fraud? What if sniffing out fraudulent behavior actually reduced legitimate conversions? Where is the balance? This topic has again been inspired by my own online shopping experiences, and again with booking travel.

I always start with Kayak to find the lowest fares (I prefer flying with Air Canada as their loyalty program Aeroplan is one of our customers), but I go with another airline if it a significant price delta exists. In this case, I was booking tickets to eTail in Palm Springs and Orbitz had the best deal via Alaska Air.

I selected my flights, found my hotel, entered all travelers information, and entered credit card info - I was committed to the purchase. Upon submitting my order an error occurred - address verification kicked in and indicated my credit card address was faulty and therefore, the transaction would not proceed - please call customer service. I tried the transaction with a number of permutations of my address (ok, every permutation because I detest waiting on hold for customer service). Still no go, so I fold and call their support line. Hold for 5 minutes. Talk for 5 minutes. Get transferred. Hold for 10 minutes. Talk for 5 minutes. Result - call the credit card company. Grrr. I use this corporate card daily, it is legit.

The gist, when an online retail company is so stringent with it’s ecommerce fraud prevention that actual customers do not wish to complete orders or orders take over an hour to complete, it is a bad thing. A very bad thing. Where is the balance between fraud prevention and usability?

Ecommerce Site Testing - The Power of Observation

Observing users is one of the most under-rated means of improving site usability. Today’s eCommerce managers often rely too heavily on technology to help them make decisions. Faceless A/B and multi-variant testing is used to incrementally increase performance of key areas of the ecommerce store such as product pages and checkout procedures. Though valuable tools, they are only as useful as the deployed functionality.

A very simplified scenario.

Curtis, an online retailer marketing manager, decides that the product pages do not have a high enough conversion rate. In keeping with the mantra “test ’til best”, he wants to see if the ‘Add to Cart’ button is the culprit. Perhaps the color of the button has an effect? A simple A/B split test on two colors is done: green vs blue. In this instance they convert at approximately the same rate. Next, he plays-off blue vs yellow, then orange, then purple, etc. Conversion rates remain somewhat consistent across the board. What could be causing the poor conversion rate?

Mel, a competing online retailer, has the same concern, but she takes a different approach. A simple 30 minute observation of 8 different users given $200 dollars of virtual cash to buy anything they want from the store. 4 out of the 8 users found the product they wanted to buy but were distracted by other things on the page - too much merchandising (up-sells, cross-sells, others bought these items, bundle discounts, warranty), in-store inventory lookup, add to wishlist, add to registry, etc. These users simply wanted to add an item to the cart and they verbally expressed frustration because the page had so many choices. Testing the color of the button would never have reveled this.

Why is this on my mind today?

I am in the process of planning a wedding and honeymoon, so my fiance Amy and I are doing a LOT of online research and shopping. I love observing how she tackles tasks and what she likes and dislikes about the online shopping experience.

While looking for flights, cruises, etc. we have been using a number of sites: Airlines, online comparison engines, and even Google (yes, you can look up flights directly in Google - type Vancouver to New York, the result page gives you input fields to enter dates - cool).

Google flight finder

Amy has settled on Kayak.com as her travel website of choice. While seeking out airfares, she was thrilled by the auto-complete on the airport input fields. She started to type v-a-n-c and automatically Vancouver (YVR) was show as an option for the input field (by setting YVR as our home aiport, it is defaulted for future visits as well).

Kayak auto-complete

Compare this to other sites where it is often a game of hide-and-seek when looking up airport codes - enter the ‘From’ city, new screen with airport code options, select option, click ok, go back to previous screen where all date information has been magically erased and wash-rinse-repeat on the ‘To’ airport - frustrating and time wasting.

This simple bit of Ajax functionality has made Amy loyal to Kayak for all her travel lookups - a case of usability being the primary cause of loyalty. People want ease of use and intuitive behavior.

The next time you want to improve your online store (which should be always), watch people, listen to what they say, observe their facial expressions. By seeing what makes them smile or grin could save you tons of time on faceless testing.

Online stores and communication during the shopping cart checkout process

Waiting in line for a popular ride at Disneyland is inevitable. In order to keep patrons content (after all, it is supposed to be the happiest place on Earth) Disney uses expectation management techniques to make the time pass in a digestible manner (or people can buy the Disney Queue Line Survival Guidebook). Estimated wait times are posted at strategic points in the line queue, but the actual wait time is shorter than indicated; characters interact with people in line and it has the same effect as watching a movie on a plane, time just seems to go faster – expectation management. What does this have to do with ecommerce? LOTS.

While attempting to purchase over $1,500 worth of software today from Adobe, I experienced a tragic case of expectation mismanagement. I was about to launch into a project with an immediate timeframe and needed current versions of a few applications. I fire up Adobe.com and quite easily located and added the products I needed to my cart. I started the checkout process and was very pleased to be using a one page checkout system (though done using Flash, it has similar functionality to the AJAX shopping cart checkout, Elastic Path One Page, that we offer). I updated my account info right in the checkout process (beautiful feature), entered my credit card info, and went to confirm the purchase.

We are a Canadian company and as such can claim GST (Good and Services Tax) paid against GST charged. Because the tax line in the shopping cart did not indicate the type of tax being charged, I hesitated to confirm my purchase. I called someone internally to double check if it was worth the hassle to save the almost $100 if it was in fact a US tax. Because tax exempt purchases can only be done via the Adobe call center, I abandoned the checkout and called.

I was on hold for 10-15 minutes (it was probably 5 but it always seems longer when you are frustrated with something). I gave the agent my personal info so my account could be located. We went ahead and queued up the two pieces of software I wanted, and then found out the tax being charged was in fact GST, fantastic, just what I wanted to know. So I figured we’d just complete the purchase via the phone while we were on the line.

I told the agent I wanted the downloadable version because I had a project I had to work on immediately and I couldn’t wait for the shippable software version with printed manuals. He understood and told me I would have to go back online to complete a new order because he could not fulfill a downloadable software purchase. GRRRR.

Back to the web where I re-entered my credit card info and confirmed my order, happy to finally be downloading the software I needed immediately. But wait…the order receipt page indicates that my order is pending approval and may take a full business day. I could have walked to the local Best Buy, plopped down my credit card, and been back in my desk chair in half the time as this purchase took.

5 hours later my order got approved. Okay, not as bad as waiting the full day, but I was not happy. In fact, I wrote this post while waiting for the order pending to flip to order approved. If it weren’t for the nice RIA checkout, it may have been a lot longer post.

What do you you think they could have done to make this a more pleasant experience?

Two things:

  1. Post the type of tax being charged and the tax rate, not just ‘tax’.
  2. Indicated in the cart that I have chosen downloadable software and that it may take the full business day for approval before I can access my purchase (maybe even tell me why).

Managing online shopper’s expectations is somewhat an art, as I have come to learn. I may be a fickle purchaser, but see how such a small usability and communication hiccup can disrupt the user experience and overall satisfaction with a purchase. Adobe is fortunate their products are better than their processes.

Next Page »