We’ve all heard of “banner blindness” - the phenomenon of completely ignoring anything that resembles an ad when surfing the website.

Image Source: Jakob Nielsen

For this reason you want to avoid sticking important links and calls to action in the right hand sidebar. You especially want to avoid colors and fonts that resemble typical paid search ads.

Home page

Product page

Silkfair product page

Same goes for navigation menus:

There are instances where even Internet Retailer 500 retailers really display Adsense on product pages:

I strongly believe reputable retailers should completely avoid paid search ads on their sites. But what’s worse, on Chapters Indigo, you can’t even distinguish the ads from the recently viewed products from the cross-sells because they use the exact same colors and fonts.

Further Reading

Yes, there is solid research to back this argument up. Thank you, Mr. Jakob Nielsen:

Banner Blindness: Old and New Findings

Fancy Formatting, Fancy Words = Looks Like a Promotion = Ignored

According to a Future Now client, images can lift conversion rates by 147% by showing products “in context.”

Yesterday we looked at examples of image zoom and alternate views, which can help customers experience the product better than one small view. A good photographer plus AJAX or Flash technology like Scene 7 or Magic Zoom can achieve this.

But online retailers can go a step further and use photos that show products in use, or “in context.”

This can reduce a shopper’s fears, uncertainties and doubts about a purchase like “how does this look on a person?” or “how large is this in real life?.” Images can also “sell” by triggering an emotion, showing the quality or versatility of an item or illustrating a products features and benefits.

Here are some effective and creative ways online retailers are showing products in context:

Show Items in Use

Delia’s shows this hoodie lying flat and on a model. Showing clothing on people gives the customer a better idea of the style of the garment. Is a hoodie fitted like yoga wear or loose like a track suit? Is it a cropped style or long? Seeing an item on a person will also resonate with a certain kind of customer (like “humanstic” shoppers). Showing the flat alternative makes it easy to show different colors without having to dress the model each time.

You could argue that model shots may be less effective than showing the garment in isolation - the model’s face, the other clothing she wears or the background might detract from the product itself. Using a white mannequin, you can show the way the item looks on while keeping the focus on the item only.

Using a plus-size mannequin is very effective for plus-size clothing, as Fashion Bug does on the right.

An interesting conversion test would be to compare white-background against outdoor images, especially for clothing and brands associated with sporty/outdoor lifestyle like Cabelas:

American Apparel uses an outdoor, lifestyle shot here. The description says the pants are great for lounging, working out and sleeping. Showing the model walking a dog and sitting by the pool in the images communicates even more uses. Plus, it’s raw and more true-to-life than a polished studio shot. The pants are being worn by “a person like me.”

This example from American Apparel connects on an emotional level while showing off the garment on kids of different ages, ethnic backgrounds and wearing different colors.

Ease Suitability Fears

HerRoom.com is a lingerie shop that developed its “Try it Under” feature in house. Customers can overlay virtual shirt styles like v-necks over top of the product image to make sure straps and things don’t show through.

ArtSelect.com lets you preview your print with your paint.

You can even email the image in an e-card - great for interior decorators who need approval from clients.

Ease Sizing Fears

ArtSelect lets you eyeball how large the piece is compared to a 5′4 woman.

BabyCenter shows the relative size of a diaper bag, and throws in a very happy mommy with baby to appeal to the humanistic shopper.

Again, mannequins do the trick also:

Coach uses a bag sizer tool. Choose your height and see the bag on the shoulder and in hand.

Prevent Disappointment, Build Trust & Minimize Returns

These are some pretty radical earrings, they’re not for everyone. A simple photo of the earrings alone could be deceiving - the customer could assume they are much smaller than they really are. If you offer free return shipping, well…

Blue Nile uses a ruler:

Read more on how to reduce size and color fears.

Illustrate Benefits

Spanx uses before and after shots to prove its product is indispensable.

Apple shows its laptop case with laptop inside - plus all the other stuff you can cram in there.

BabyCenter brags how versatile its stool is - both mommy and little one can make good use of it.

Product information is also “in-context.” 40 GB and 80 GB means nothing to me, but I can understand the difference between 20,000 and 40,000 songs.

PS: Notice the call to action buttons match the available colors? This is also a nice example of side-by-side upselling - it’s clear for only $100 more you get double the storage.

Going the Extra Mile

Video “product tours” can be great for some items. MLB.com lets you watch a video of its dancing mascots and sample its music.

Other products lend themselves to try-before-you-buy, such as free carpet, blind and cloth samples so the customer can see the exact color and texture.

You can make your product images sell for you by thinking through the best ways to show how your products are incredible or solve a customer’s problems. It’s not just your product description’s job! Maximize both product descriptions and images and you’ll up the persuasion factor and conversion rates too.

We’ve all heard Confucius’ famed quote “a picture is worth 1,000 words” at least 1,000 times.

Online, pictures are worth more than words, they’re worth dollars. But how many dollars depends on how effectively product images *speak* to customers. We’re talkin’ details. Just like textual product descriptions describe a product in detail, enlarged images and alternate views better describe your products. And many products cannot be fully described with words.

According to a 2007 survey of online shoppers by the E-Tailing Group:

• 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

Future Now did its own customer experience study and found 24% of online shops do not allow customers to enlarge images, and 63% don’t offer multiple image views. I decided to do some research myself, cruising the Internet Retailer 500 List looking for examples of how online retailers are showing off their goods:

Images in Action

A simple way to enlarge images is to have a link “click to enlarge” that opens up a pop-up with the thumbnail image blown up. The next level up is to offer alternative images in the pop-up with the ability to change the image with a click or mouseover.

A bit more advanced is using a Javascript or Flash tool like Magic Toolbox
or Adobe’s Scene 7. Magic Toolbox’ Magic Zoom lets you hover over any area of a product image without a pop-up or click (stay on the product page). There may be other products that also do this, but I’m only aware of this one.

This example from Danskin shows how you can view the front or back of this product in any of its 4 colors:

Scene 7 is typically launched in a popup window with the option to click a plus or minus button to enlarge, then click and drag the image around the window to look at specific detail. Or, use the magnifier to blow up one portion:

I found Scene 7 was fussy to use, and on some sites would load a blank window. Not to mention the time to load. I do prefer the Magic Toolbox product, as a web user.

Sliders

Altrec uses a slider for image zoom which you can control by clicking and dragging left and right from the enlarge pop-up. You can then click and drag the big image to move it around within the window.

The Adidas Store does the same thing right on the product page (no pop-up. less clicking required).

OnlineShoes.com is like Adidas, but includes alternate views which really help describe the product. You can view them all without pop-ups.

I’m not sure the magnifying glass is a good icon here - that’s more associated with a search box than image magnification.

Quick Look

A handful of retailers like Gap’s brands use a Quick Look preview from the category page, with full product information. If you want an even larger view you can click to a popup with color switching and view switching.

Huge Category Zoom

Bidz.com explodes images on the category page with a rollover - the biggest previews I’ve ever seen.

Large Default Images on Product Pages

Moosejaw uses a large image on its product pages with detailed information in tabs. Just rollover alternative views for instant enlargement.

TiesNecktie.com uses large product images too. Ties are one type of product that really only need one view, so this is usable, effective and inexpensive.

Retailer Creativity

By showing front and back views on one image, Causal Male saves clicking between 2 images on the product page, and also gives more product information from one thumbnail on the category page. This is great for shoppers in “competitive” buying mode who want information fast, fast, fast. Plus, it never covers up the call-to-action.

Uncommon Goods’ approach is uncommon, but good (I know it’s cheesy but I couldn’t resist). For certain products, the image is shown in a landscape banner with zoom and move controls right there on the page.

Neiman Marcus and Venus Swimwear use floating images in the sidebar that follow you down as you scroll down the page.

Horny Toad lets you select size scaling on the category page:

ACLens offers a .pdf print-out of the actual size of its frames:

J.Crew allows enlargement and multiple color / angle views for cross-sells as well:

full cross-sell set and enlarge them and color switch them on the same page

What do you think about the call to action? Too long? Cute the first time but annoying when used on every product?

So these are some examples of providing slick product views in usable and creative ways. But how can you up the persuasion factor and tell a story with your product images? Tune in tomorrow for tips and examples on how to show products “in context.”

This month’s webinar with Jason Billingsley covered various areas packed with examples from real online retailers. You can catch the ecommerce innovation webinar on-demand. Or, you can flip through some of the examples, see the live sites and catch up on related blog posts you may have missed.

Next Webinar
3 Things to Die For: Web Analytics Unleashed with Avinash Kaushik
Thursday, July 17th @ 9am PST
Sign up to win one of 5 signed copies of Avinash’s book Web Analytics: An Hour a Day

Purpose of this Webinar

Innovations are not necessarily “sexy” — but they don’t have to be. This webinar is really to get you
thinking about the possibilities, whether you’re a small player or a multi-million dollar e-tailer. Innovation may exist in another segment / industry that can be applied to your business. And it doesn’t have to be a visual innovation - processes like customer service, fulfillment and order management can also have a profitable impact.

Video

Martin + Osa Shop-By-Outfit

• Great to see items in context

• Cross-selling entire outfits
• Works for women who like to see how it looks “on”
• Works for men who want to “get in and get out” and not waste time on browsing and outfit building
• Helps the fashionably clueless
• Blog post: Martin + Osa Launches Shop-By-Outfit + Video

Knicker Picker

• See items “in context” (on humans)

• Select size of model
• See how sports product moves when the model jogs, show how supportive the item is - selling based on the function of a product

Continue Reading:
Webinar Recap: Ecommerce Innovations »

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.

When a customer lands on a 404 Not Found page, he or she is caught off guard - confused at best and downright frustrated and ready to shop somewhere else at worst. A 404 page is a customer service touchpoint. It’s an opportunity to be helpful, show a business’ personality and even merchandise. Do you treat your 404 page like a landing page?

When checking out how top online retailers do 404 pages, I found many simply redirect users to the home page, which is a perfectly fine way of handling things. For those of you who do use 404 Not Found pages, here are some examples from fellow retailers — the good, the bad and the funny.

404 Page Examples and Tips

1. Have a page

If you don’t automatically redirect, there’s nothing worse than landing people on a generic screen like this:

When you remove all navigation it’s like teleporting a customer out of your store and dropping them into the parking lot blindfolded. This happened on many top retailer sites I tested. What a shame.

2. Don’t blame the user first

I saw lots of cold messages like this that seem to blame the user for typing in the wrong URL. But 404 messages rarely come from type-in errors, they’re usually broken links from external sites or the site itself because the root URL must match the actual URL. Customers rarely type in deep link URLs manually.

Gap’s approach is to assume its own fault first, a humbler approach:

But WetSeal goes a bit too far with “we’re working on this page.” Don’t imply your site is unfinished, it’s not professional. And don’t expect customers to try again later - like when, 3 months from now?

eToys also leads with “you probably screwed up” (paraphrase), and adds if it was a broken link it was “probably from another site ‘cuz we never mess up” (again, paraphrase).

3. Keep it short and sweet

Boden is known for being a personable company, but its 404 page reads like a novel.

4. Add a search box

Golfsmith uses a search box as a call to action to encourage customers to keep shopping on the site and find what they were originally looking for.

But instructions on how to search like “enter a few words into the box” is unnecessary.

5. Remove calls-to-action that don’t make sense

Zappos is king of customer service, but a customer probably doesn’t want to submit a video testimonial for finding a broken link.

I’m surprised Zappos, as helpful as they are, doesn’t chime in with a live help prompt.

6. Think like a customer

If you mention customer service, make sure you link to the customer service page. Don’t make customers have to search it out themselves.

List your hours of customer service (telephone) or an estimated email response time so customers can judge whether it’s worth it to contact you or not.

7. Merchandise

Bravo to Busted Tees for showing product on the 404 page, and linking to the catalog. If a link was from an external site (in other words, the customer may not be familiar with the product offering) this can be a compelling reason to stick around and check out the merch.

8. Be funny

I knew Urban Outfitters would do something edgy, but don’t do this unless it’s consistent with your brand’s culture and target market’s expectations of you.

9. Provide multiple links back into the site

Northern Tool combines humor and usability, offering the most logical actions as links - go back one step, start from scratch, browse categories or talk to someone.

10. Use product finders

I Want One of Those combines humor with search and a useful product finder.

11. Don’t yell or try to sound smart

This is funny, but not because Burberry has a sense of humor - rather it’s yelling big fancy words!

Going the Extra Mile

If something’s broken on your site, why not reward your customers for giving you a heads up? We’re busy people, and may not bother to contact customer service to let you know but an incentive could help you fix a problem that may be costing you far more than $5 in lost revenue. Plus, you could turn a comparison shopper into a buyer - now that person will hunt for something to buy to use the discount or at least visit you at a later date. If you sell higher ticket items, consider sending a higher value gift card to make it worth it.

And do thank people when they take the time to alert you of broken links. I do this often and haven’t been thanked, not that I expect thanks, but an acknowledgment that a link has been fixed, at the very least, would let me know my voice was heard.

Most Creative 404 Pages

This is one of the coolest “Results Not Found” page I’ve ever seen. You really have to see it to believe it - it has an interactive, microsite feel.

http://www.bluedaniel.com/404.shtml

Smashing Magazine has also collected some entertaining 404 pages worth checking out.

Our VP of Innovation, Jason Billingsley has a key eye for new ecommerce trends and will be presenting a full hour’s worth of innovations in a webinar 9 Ecommerce Innovations: What’s Now & What’s Next. It’s happening June 19th so mark your calendars.

Jason tipped me off about a new website launched in April for Martin + Osa, a spin-off of American Eagle Outfitters, that has built a full-motion video merchandising area called “Shop by Outfit.”

M+O stylists have put outfits together that customers can buy all at once, and the outfits are shown on real models that move around as you view the page. You can zoom in by rolling over an image, and the model does a 360 degree spin so you get a feel for what the outfit looks like (well, on the perfect model anyway).

If you click to refine your outfit results to just “Moonlight,” “Seashore” or “Sunshine,” (which I don’t see serving much purpose), the girls whose outfits don’t fit your criteria gingerly walk out of the scene.

Shopping by outfit can save a shopper time as traditionally, one would need to navigate to different categories and add items individually. And by choosing from pre-selected sets, the fashionably clueless get some ideas of how to dress.

Shoppers can also build their own outfits using “Layer Your Own Look,” which turns traditional site navigation on its head - essentially you can shop multiple categories without leaving a page, and see how items “work” together. Looks can be saved for a future visit or added to the shopping bag for checkout.

More and more fashion retailers are adding some form of “shop by look” merchandising. Other stores include Rampage, Lacoste and Arden B (a quick search for “shop by look” in Google gives you more examples). When you click on a look, you see all the items listed individually on the same page, so you can check off the items you want. The problem with this is you navigate away from the look unless you’re savvy enough to open a new tab or window to hold your place. Martin + Osa smartly uses AJAX to show detail without navigating away from the page:

Product details can be viewed by switching tabs. The tabs may be too subtle here to notice, but it does help pack more information in a smaller space.

M+O also provides detailed product images that show extreme close-up views of fabrics, pockets and other item details.

For most online merchants, this type of rich media investment simply is too expensive to implement. But as more and more large retailers add video and Flash applications to their e-stores, customers are going to become more spoiled and will expect to see 360 degree product views, products in context (clothing on people) and very detailed product images. This is reasonably easy to implement for any retailer using static images. Though this is also not cheap, it’s far less expensive than what M+O has done.

It’s also important for any retailer who does use a “shop by look” approach to allow customers to see cross-sell detail information without clicking away from the look page.

A side note: as I mentioned in my interview with Rich Page, American Eagle has one of my favorite navigation menus in terms of design, placement and usability. I’m happy to see Martin + Osa doing the same.

The holiday shopping season is now in full swing, and while there’s still plenty of time for online shoppers to receive their orders by Christmas (or Hanukkah or Kwanzaa), not receiving an order on time is a concern for consumers. Great online stores ease the fears by providing holiday shipping cutoff dates and making this information easy to find on home pages and product pages. Let’s take a look at some examples:

Bed Bath and Beyond

Tagline: “Holiday Shipping Cutoff Dates”

Bed Bath and Beyond dedicates some central home page real estate to its holiday shipping information:

And it’s not limited to just Christmas, either:

Continue Reading:
Holiday Shipping Cutoff Dates Make Good Ecommerce Usability »

I discovered an interesting UK Shopping 2.0 site called the Imagini Gift Finder. It’s kind of like social wishlisting meets Myers-Briggs — you work through a series of “questions” and you get results based on your answers. But the twist is, you choose from a set of images what appeals to you most. The system uses your choices to determine your “Visual DNA” and present you with relevant gifts.

You can get suggestions for your own gifts and build a wishlist that you can send to your friends *hint.* Or, you can invite a “Valentine” to take the quiz and build a wishlist for you so you don’t have to obsess over whether your honey likes a burger with or without a bun.

Here are just a few of the questions and images. If you don’t like any of the pictures, you can click on a gray box to skip.

Continue Reading:
Imagini Helps You Find Gifts Using Visual DNA »

Following up on previous posts about permission marketing and welcome emails for ecommerce websites, I’d like to share my personal experience registering for 87 accounts with the top online retailers and offer some tips for registration form design.

Your site may have several forms that ask for personal information - for email subscriptions, creating an account, entering billing information, requesting help, general contact, creating a wishlist or order tracking. It’s important to note that in my test I was taking initiative to sign up for an account by clicking “Register” or “My Account”. I did not reach these forms in the middle of a checkout process (required registration).

Popular Form Fields and Frequency

1. Password - 100%

Obviously this is a requirement for all sites, but 100% required users to invent their own passwords rather than sending computer-generated temporary passwords (which are terribly annoying). But Dell and Nieman Marcus failed to mention clearly that their passwords require at least one number until you fail at your first password attempt.

2. Repeat Password Field - 89%

Though it takes a small amount of extra time, this is recommended because it’s easy to make errors when you only see **** as you type. How frustrating for customers when they cannot log in because the password they *thought* they entered is wrong.

Continue Reading:
Registration Usability - 87 Registration Forms Tested »