The following is a guest post from Armando Roggio, a web developer, a marketer, the Contributing Editor of Practical eCommerce and a serial entrepreneur with many micro-businesses.

The leading web standards body, the World Wide Web Consortium (W3C) recently announced new content accessibility guidelines (WCAG 2.0) to help make the Internet easier for blind, deaf or otherwise disabled web-surfers to access and use. Such visitors require aids such as screen readers to follow content.

Not only is adhering to web accessibility standards ethically and morally the right thing to do, there are 2 other pragmatic reasons to abide by WCAG 2.0:

Two Pragmatic Reasons to Design for Accessibility

1. Get More (Loyal) Customers.

According to the American Foundation for the Blind, there are at least 1.5 million Americans with some vision loss who use the Internet. Ecommerce merchants that make their websites easy to access, use, and shop will find a significant and loyal customer base. Add to this group the deaf/hard-of-hearing community and having an accessible online store can add up to a lot of business.

2. Avoid Legal Challenges

In September, multi-channel retailer Target was ordered to pay $6 million to settle a legal challenge from the National Federation of the Blind. The suit marked a few scary new trends in Internet law—websites as public places and the application of disabilities acts to the Internet. None of this would have been necessary if Target had proactively coded their site for accessibility.

Three Quick Accessibility Tips

1. Add a “Content” link at the top of the page.

When a screen reader translates your page for a visually impaired visitor, it is helpful if the first thing it sees is navigation, not an ALT attribute (a piece of HTML code that describes your image using keywords) for your logo. On the sites I design, I include a brief bit of navigation that points a disabled visitor to the site’s content or important category pages. I don’t necessary want that navigation to interrupt the page design, so I use CSS to position it off screen. Sighted visitors never see it, but it’s the first thing screen readers find.

2. Remove time limits.

It can be a lot harder for a disable visitor to complete a task like filling out a form. Too many websites have applications that “time out” and make it really hard for disabled users. Removing time limits on shopping carts, for example, is a big help.

3. Offer extended audio descriptions with video content.

If you are using video on your site, be sure to include an alternate version of the video with audio descriptions. There are several ways to achieve the effect technically and it will include deaf and hard-of-hearing visitors.

Check out Practical Ecommerce for more tips on web accessibility.

If you’re not familiar with Steve Krug’s web usability classic Don’t Make Me Think, it’s an entertaining and informative introduction to web site optimization. Though its screenshots and examples are quickly looking “old school” - its principles still stand. I “think” any web design and ecommerce professional should give it a read, and then give their own websites the “don’t make me think” test.

Today I’m going to apply the concepts from Don’t Make Me Think to The Source - a chain of electronics retail shops we used to call Radio Shack here in Canada, until it was acquired by Circuit City. I’m a fan of Circuit City’s web design and marketing, and have praised them many times before on this blog which is why I had high expectations from The Source’s web presence. But I found myself “thinking” very hard on this site.

This post is not intended to slam the design, but to point out areas that could be improved based on generally accepted design and usability principles.

(If you want to play along, you can click on the image to enlarge and see if you can predict which 10 issues I’m going to address in this post).

Continue Reading:
Home Page Design: Applying The Dont Make Me Think Test »

Say what?

Marketing Experiments has found the highest performing ecommerce sites address customer motivation, and most visitors are either “hunters” or “browsers”:

1. Hunters already know what they want. They want to find the product quickly and easily. Usable site search, navigation menus and filters are essential to convert hunters.
2. Browsers may be contemplating a purchase, or just “window shopping.” Your goal is to get them to click deeper to products with enticing offers like top rated, best sellers, sale items and new arrivals.

I’d like to add a third category: “howsers.” (Hunter-browsers, not underage doctors.) Howsers are customers that are ready to buy from a certain category but they’re not sure what they want/need from that category. This type of customer is the best of both worlds - closer to conversion (needs stuff ASAP) and more open to suggestive selling and cross-sells. Examples would be someone who’s looking for gifts for an 8 year old boy or redecorating a living room.

Let’s take the example of someone planning a family camping trip next month, but has little to no equipment — like a family of four that has waited 10 years until the youngest rug-rat was old enough to rough it for a week in the woods. (Think personas!)

Example: Sports & Outdoors Retailers and Doogie Howser

Let’s call this fictional family the Howsers, and assume daddy Doogie’s in charge of kitting out the clan for camping. A typical Doogie:

• May have little or no knowledge of camping, or it’s been a while

• Wants to create a memory
• Doesn’t want to get “caught without” - wants to ensure he grabs everything necessary for survival and safety in the bush (and doesn’t want to get blamed for forgetting!)
• Is willing to buy multiple products to ensure a) beautiful memories and b) survival without suffering
• Appreciates product guides and suggestive selling
• Is willing to invest in gear for next summer, and the summer after that…

Our second assumption is that Doogie begins his quest for gear on a sports and outdoors retailer’s home page. The first objective of the home page is to guide Mr. Howser to the virtual camping department and to assure him this is the right online shop to do business with today.

Do typical outdoor gear retailers do this effectively?

OutdoorGB.com

• The only slightly relevant links to camping gear are in the cluttered top sellers menu on the left (highlighting mine).

• There is a camping category, but it’s hidden behind the Outdoor menu. Have trouble spotting that tab? It’s second from the left.
• You must click the Outdoor tab (if you predict camping gear is found behind the veil) to see subcategories, there’s no preview with a dropdown or AJAX flyout menu (example of that is coming up…)

Cabelas

• Cabelas has a link, but it doesn’t stand out against other categories.

• Count the competing calls to action: shop the sale of over 2,000 unspecified items, shop the bargain bin (probably winter stock), find a store location, get a Visa, buy a boat, get a gun, request a catalog, pick up in store, find an outdoor adventure…
• The menu link and the search box are the only options to find camping products. Customers who look closely will get to their destination, but this is not optimal usability/design.

Altrec

• Camping Equipment is a featured link, indicating Altrec believes a significant number of site visitors are interested in that category right now.

• Behind the Gear button, camping subcategories can be found, though the menu is very long and even has its own scroll bar.
• There is nothing in the body of the page that speaks to our case-persona, Doogie Howser.

Backcountry

• Camp / Hike is placed at the top of the Gear menu on the left (we can assume this changes with the season).

• For customers who tend to scan text, an image of a tent and a list of camping subcategories helps the visitor hone in on subcategories, and see that Backcountry carries a range of products. This helps reassure the customer of convenience of shopping from one store (save time, effort and perhaps shipping). Backcountry has placed this list above the fold.

REI

• REI makes “Camping & Hiking” the first link in its horizontal navigation menu, and links from the left menu.

• There are a couple references to camping in the body.
• Below: Using a hover menu, you can see the full range of camping subcategories without clicking. It’s nicely organized into Gear, Electronics, Kitchen and Safety - REI likely has everything Doogie needs and he can find it easily.

Cotswold

• Camping & Festivals appears first in left hand navigation, and there are links in body copy to camping products.

• Featured Item and Offer of the Month are camping-related.

• When you click on the Camping & Festivals link, you get a submenu with options that may appeal to our persona: Camping Starter Packs, 3 & 4 Person Tents and The Family Unit. You can tell Cotswold has thought through customer segments and purchase scenarios.

• The starter packs are a great example of product bundling. Remove the paradox of choice and provide expert advice / service at the same time.
• The “Family Unit” section includes products that are not necessarily camping gear but are relevant cross sells, like kites.

I didn’t see anything compelling on these home pages, but I did spot a good example on L.L. Bean’s camping category page. “Our Best Selection of Family Tents Ever” gives purpose to the image and a persuasive message to check out the tents.

I’m not arguing that outdoor gear sites have to cater to campers this month. Rather, if campers are an attractive and profitable segment at this time of year, most of these home pages leave opportunities on the table. Checking out a handful of competitors (wearing the “hat” of your persona) can give you ideas on how to adjust your site for maximum promotions - what to redesign or what to test.

Of course, if you can predict what people are looking for when customers land on your home page you can deliver more relevant offers. Sitebrand’s personalization suite allows you to serve up different home page and landing page messaging based on referral keywords from search engines.

How do you identify attractive customer segments / product categories?

1. Historical sales data, especially seasonal trends.

2. Google Trends keyword search data:

You can research different product categories like climbing gear, fishing gear, hiking gear and camping gear; or even synonyms for keywords like camping equipment, camping gear, camping tents and camping supplies.

The beauty of Google Trends is you can further segment by geography:

You may discover that UK residents are 12 times more likely to use the term “equipment” than “gear.” Make sure your category labels and marketing messages use the most common terms for each market you serve. You may even apply this to your SEO, PPC and email subject lines.

3. Web analytics keyword and conversion data. (Don’t miss our upcoming webinar with Analytics legend Avinash Kaushik July 17th.)

Once you select your focus, you need to brainstorm purchase scenarios where a customer might buy a range of your products all at the same time (cha-ching), especially for seasonal product. Then make sure your home page speaks to this customer, and the rest of your site (categorization, navigation, merchandising, searchandising et cetera) supports the sales process. You may even want to do some usability testing as well.

After realizing I’ve never covered privacy policies here in much depth, I thought it would make a decent blog topic. I sat down to brainstorm a list of what would make for privacy policy usability. What I usually do is go hunting for examples from a variety of online retailers to illustrate the best-practices.

To my surprise, after checking out a handful of sites, I found one e-tailer that covered all the bases - eToys.

Privacy Policy Links

Link from footer - Linking to privacy policies from the footer menu is a convention, meaning enough sites do it this way and it’s likely that a customer will look there first when they want to access the privacy policy. Some sites hide the policy behind “Customer Service” or “FAQ” links, but that reduces the chances customers will find it quickly, if at all.

Link from anywhere you ask for registration - (create account, email sign up etc) to reduce friction and increase opt-ins.

Email Signup:

Account Creation:

You may also want to read: Registration Usability - Permission Email Dos and Donts

Checkout - eToys maintains a footer menu throughout the checkout process along with other important policies.

Privacy Policy Copy

FAQ style bookmark links - Most privacy policies are ridiculously long. Bookmark links give the reader an overview of what you’re talkin’ ’bout, and the ability to jump directly to what they want to know.

Show trust badges and seals prominently - If you’ve paid for these seals to boost trust and conversions, why not leverage them on your privacy page too?

Bold headlines and sub-headlines - Nice and easy to scan.

Plain English, mixed case - THERES NOTHING WORSE THAN 459 LINES OF LEGALESE, IN ALL CAPS. IT HAPPENS. IT SHOULDN’T. LIGHT GRAY TEXT SUCKS TOO.

Visitor surveys - Sometimes websites will invite visitors to complete a satisfaction survey, like 4Q. It’s a good idea to add a link to the privacy policy in the pop-up window or a few sentences of how you respect their privacy. No eToys example for this one.

Got any other tips for privacy policy usability? Please leave a comment.

Nofollow Attributes

Another tip is to add “nofollow” attributes to Privacy Policy links to improve your SEO. If this is all Geek to you, check out a post from that discusses Page Rank sculpting.

D-I-Y Privacy Policies

The Privacy Policy Generator is a great tool for DIY’ers. It asks you to check off what kinds of information you collect, how you use cookies and so on.

Hope this helps you out with your privacy policy usability.

It excites me to know end to praise a usability innovation from an online retailer that is NOT Amazon. Hooray!

I noticed a filtered navigation design on Overstock that is really interesting. It combines search with filtered navigation - here’s what I mean:

Say you’re checking out the “Rings” category. You’re presented with a number of ways to narrow your results: Category, Metal, Size, Price and Stone.

But if you’re looking for say, a cocktail ring - this could include a variety of gemstones and metals, could be at any number of price points and would depend on what size you are looking for. Rather than looking at ALL items in the “Rings” category, you can hone in on just the cocktail rings by searching for “cocktail.”

Continue Reading:
Browsing Usability: Overstock Blows Amazon Away »

We talk about Amazon often here on Get Elastic, because you’ll always find some innovation, design or usability improvement to blog about there.

Amazon sometimes attracts more reviews than customers want to read. So Amazon provides tools to filter reviews by star rating and displays the “most helpful” positive and negative review as determined by Amazon’s community.

Plus, you can also search reviews by keyword.

Which is helpful, because you don’t want to buy a product that sucks unless it’s a vacuum or a Flowbee.

American Eagle Outfitters recently AJAX-ed up its web design including its navigation menu. What’s different about AE’s flyout menu that’s different from Office Max’ and Eddie Bauer’s navigation redesign is that it actually merchandises within the flyout. Here’s what I mean:

When you roll over a section in the horizontal menu, a sub-menu appears with some featured items. In the example above, you see one featured Clearance item from each category: men’s, women’s and aerie.

This technique allows you to show more content without a click. Clicking away from a page means another click if you want to go back. But flyouts give the user a faster peek at what’s behind the menu buttons. And if you accidentally roll over a menu item, you may be enticed by that 50% off offer you otherwise would not be aware of.

The downsides of AJAX-y menus are they cover up content, can be finicky and require steady mouse control to operate properly. Or worse, they can appear when you don’t expect them too when you mouse a bit too close to the hot-spot. Not everyone will find this a usability improvement.

I noticed when you click on the Clearance button you get different featured items. I think it would be better to keep the same items as in the flyout, because a customer may click out of habit, and wonder where that green camisole disappeared to. You want to minimize the “whoa, what happened?” factor, especially when you’re introducing Web 2.0 coolness that may involve a learning curve. (Even for technosavvy Millennials like the AE customer. It just might be mom or grandma picking out a gift).

Text in the red box doesn’t need to change after you click on Clearance. If a customer clicks on Clearance, he/she understands it’s the clearance section, you don’t have to restate the obvious. When it comes to online copy - less is more.

All-in-all, it’s a pretty neat idea. What do you think about merchandising within navigation? Love it? Hate it?

PS: If you’re interested in merchandising tips and trends, be sure to sign up today for our upcoming webinar: Effective Online Merchandising: What Sells?

You’ve added your item to your cart, but you’re not finished shopping. So, you look for the “Continue Shopping” link to thrust you back to…to what? The product page? The category page? The home page?

Most sites don’t give you a clue where you’ll end up. GrokDotCom mentioned this in Grok’s Biggest Gripes about the ecommerce experience, and an informal survey of the author’s contemporaries revealed 100% of them found this irritating.

I’ve observed a number of different ways to handle “Continue Shopping” navigation in my online shopping escapades. I decided to check out 100 of the top internet retailers and round up the methods used and the frequency of each. The following is a rundown on “Continue Shopping” options, frequency and examples for your inspiration, curiosity and comments.

AJAX Pop-Up - 19%

Love or hate Web 2.0, 17 out of 100 retailers use an AJAX popup to indicate an item has been added to the cart. Though this is nice and convenient to keep the shopper on the product page, it can be hard for inexperienced online shoppers to notice what’s happened. Some sites are more obvious than others.

Patagonia and Moosejaw Mountaineering use a roll-out notice in the top right of the product page. You must click to close this box, but both retailers place the close button in the same place, with the same icon. This is Moosejaw’s:

Can you figure out how to close this window?

Continue Reading:
Continue Shopping Means What? »

I had the pleasure of reading Web Design for ROI: Turning Browsers into Buyers & Prospects into Leads last weekend. Lance Loveday and Sandra Niehaus of Closed Loop Marketing have done a fine job in tuning 22 years of combined experience into a reader-friendly, visually stimulating guide to web usability and design.

Even if you’ve read books like Steve Krug’s “Don’t Make Me think” or Jakob Nielsen’s “Prioritizing Web Usability,” you’ll glean some good information from WD4ROI. Because web design and usability is constantly evolving, it’s nice to see current examples and screen shots. Like these books, WD4ROI doesn’t offer step-by-step design checklists or claim any absolute rules, but gives you guidelines with rationale that you can apply to your own site where it makes sense.

What To Expect

The first part of the book covers “The Big Picture” - determining site goals, web analytics concepts and metrics. If you’re seasoned in web analytics and business strategy you probably want to skim these chapters and dive right into the detailed chapters on:

• Landing Pages

• Home Pages
• Category Pages
• Detail Pages
• Forms (sample chapter)
• Checkout Process

I was quite impressed with the examples and screen shots provided, along with results of their own before and after testing on client redesign projects.

Click to enlarge.

This Book Is Useful For:

• Online retailers / managers who are involved in approving budget allocation - you’ll see why investing in more traffic is far less profitable than investing in conversion optimization.

• Marketing strategists who are continually testing and tweaking websites to maximize conversion rates - you’ll find inspiration on what to test next.
• Web designers and developers - it’s important to understand how design and programming decisions affect actual user experience and client success. When you can pull together these concepts for your client, you’re all the more valuable.

You can order the book from Amazon , subscribe to the book’s blog, the book’s home page, the authors’ home page or the authors’ blog.

I came across a website (that will remain nameless) while searching for a good tasting Swiss-water decaf coffee. (Does one exist? Please advise in the comments!) I noticed on the product page that it had perhaps the world’s tiniest Buy button.

They Say Bigger Is Better

Many conversion optimization cheerleaders who suggest larger buttons convert better, and some tests show even different colors can perform better. Marketing Sherpa credits cart button design as one of 7 tweaks that helped Newegg.com boost online sales by 30%.

#7. Bigger, flashier cart button

“It used to be just a cart with a little arrow. It wasn’t big enough. People’s eyes weren’t going there, so we made it big, bold and very exciting to look at,” said Stuart (Wallock, Marketing Director of NewEgg.com). The team a/b tested several different cart icons before picking the winner, so go check it out.

Continue Reading:
Call To Action Buttons - Does Size Matter? »