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: Web Design

The Importance of Web Accessibility for Ecommerce

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.

Should You Have a Mobile Version of Your Ecommerce Website?

A Get Elastic reader asked us this question recently:

Do you think Google search results will ever return different results based on the device (PC or smart phone) that the person is using? i.e - if a person is using an iPhone, and searched for widgets, will widget websites written for smart phones do better in the results list?

If a person was to rewrite their website to make it smart phone friendly, do you think the best approach is to:

1. Use device detection (detect whether the user is on a PC or mobile phone) and display the same URL’s differently (EX -site1.com/page1.html)
2. Use a sub-domain of the original website ( EX - mobi.site1.com/page1.html )
3. Use new URL’s on the same website (EX - site1.com/page2.html
4. Create a brand new website (EX - site2.com/page1.html

How do you think these scenarios will affect SEO?

This is a multi-faceted question, so let’s answer it step-by-step:

Do Search Engines Deliver Different Results to Mobile Phones?

Yes. There is a separate algorithm (at least with Google) for mobile search:

Google has a patent that describes how a mobile algorithm could show results based on the users location, the time of day and their previous history. For example if you opened up Google at lunchtime it would display a list of phone numbers for your favourite local pubs before you even had to search for anything.

Opening up Google in the same location at midnight would bring up a list of local taxi firms and pizza shops, again without you having to search for anything.

Mobile algorithms are going to become more and more behavioural based as Google extracts more data from our mobile search habits. The key to ranking well in these algorithms is going to be very similar to the current online methods of ranking in Google Local.

- Patrick Altoft, Branded3 and Blogstorm.co.uk

Do Search Engines Favor .mobi Sites over .com?

No, Google displays a mix of results (mobile versions and regular versions) through mobile search. In the past you could switch between its mobile-site-only index and blended results, but apparently this ended in 2007.

As mentioned, Google Mobile Search has its own algorithm which is rumored to favor local searches (based on wi-fi location, GPS and cell ID location) and current content (right-now searches like news and local business listings vs. Wikipedia entries, for example). It may also involve mobile search user-behavior data (click through rates and time on site) to determine relevance (bounces due to poor user experience, for example).

What’s the Best Approach to Optimizing Your Site for Mobile?

“Is .mobi dead?” was a hot topic at Search Engine Strategies San Jose this summer, and thanks to livebloggers like Bruce Clay’s Lisa Barone and Search Engine Roundtable’s Carolyn Shelby, we have online summaries of Cindy Krum of Blue Moon Works‘ 4 alternatives for marketers confused about how to approach the mobile Internet.

To recap, here are the pros and cons of each option:

1. Do Nothing (Transcoding)

Always an option, and a good choice if your site already renders well on mobile phones. Test your site using the “Big 3″ engines - Google, Yahoo and MSN, and on different smartphones (older phones vs. newer phones, etc). “If it’s reasonably legible, it’s probably not worth the extra effort.” You can 301 (permanent) redirect your .mobi domain (if you have one) in this case.

Pros: Faster and cheaper.
Cons: Transcoding only works when your site is accessed through search. If someone clicks on a link through email, for example, the user experience may not be as good. Plus, URLs get messed up by transcoding so it’s harder for users to bookmark your URLs and you won’t get backlink credit.

2. Create Mobile-Only Pages

Design mobile-specific that are narrower, have less functionality, simpler navigation and smaller images. Redirect visitors to the mobile version based on device detection. Requires a subdomain like m.site.com or site.mobi.

Pros: Simply update code that already exists.
Cons: Your homepage needs to “work” on mobile browsers anyway, and an extra click is required to access your mobile version. It’s also double the maintenance - an update on your .com requires an update on your m.site.com or site.mobi (whatever you’re using).

3. Create a Mobile/Traditional Hybrid

Use your existing content, but create a CSS version for mobile (or multiple CSS designs for different mobile browsers).

Pros: Simply add another style sheet. No duplicate content problem because it’s just rendered differently as the browser pulls the sheet automatically.
Cons: No guarantee the browser will pull the right style sheet. And lots of work if you’re not already using CSS.

4. Use Dynamic Mobile Pages

Combine your content database with user agent (desktop vs. mobile) detection to transcode the site on-the-fly. You can target devices based on make, model and operating system.

Pros: Best option if you want to offer the best user experience and leverage your SEO efforts.
Cons: Expensive, requires custom coding. Also a short term solution since you need to re-do it with every new software release and new make/models of devices. More difficult to implement.

What Are the Implications for SEO?

Whenever you have duplicate content (a .com version and a .mobi copy, for example) you risk splitting your back links which can affect your SEO. (Plus you have to maintain and promote 2 sites). If you opt to ditch your .mobi version, make sure you do a 301 redirect from .mobi to your regular domain so you combine back link credit.

There are also no tools to check your mobile rankings, so from an SEO reporting standpoint, there’s a lot of gruntwork to keep track of it (not that I think this really matters).

Because Google exhibits no preference for a mobile version vs. a transcoded version, your decision needs to be made based upon how it currently renders on various mobile devices, the monetary and human resources you have today and in the future, and the importance of mobile to your business right now.

Final Things to Think About

I asked some SEO friends what their preference is, and here’s what they have to say:

Personally, I’d use device detection to display the same URLs differently on smart phones. Most people using smart phones will still use Google, Yahoo, or MSN search - not mobile search engines! This means the most relevant pages of a web site will be found, not those most appropriate for the device. So, even if you create new pages, sub-domains, or even sites for different devices, those aren’t likely to be the pages found in the search results … the existing site pages are –relevance over device type.

Longer term as Google continues to incorporate user behavior patterns into the reordering of search results, it will begin to consider the source of the search as well (ie. mobile device or desktop). Pages showing more favorable user behavior stats in response to search queries on mobile devices will begin to rank better for future searches from mobile devices. This of course means, device detection becomes much more important yet! SEOs will then have to worry a great deal more about managing devise specific user behavior, and not just user behavior in general.

- Jeff Quipp, Search Engine People

The number of websites out there that have a true mobile version of their websites is completely
insignificant. If Google or any search engine, were to start giving that small handful of sites a boost it would damage their relevancy.

If you are dead set on moving forward with a mobile version of your website, give you users the option to go back to the standard version of your website if they choose to. Most mobile websites are stripped down and lack features of the regular site. My iPhone will render your regular site so let me go there if I want.

- Todd Friesen, Range Online Media

Also consider that the most common use of the mobile web is email. When you send retail email offers, there’s a good chance your recipients are receiving them through their mobile devices. Having a link to a mobile version of your email creative and your online store may be effective, since once a message is opened, if it’s not bookmarked or marked as unread - it may be forgotten (unless it’s really remarkable).

Another consideration is what is the primary reason customers access your site? If you’re a pureplay online-only retailer, you might want to design your mobile site like Amazon - with a search box front and center. If you’re Target, it may be more helpful to link to a store locator or flyer.

To learn more about mobile commerce for retailers, do catch our on-demand webinar with Bill Mirabito of B2C Partners: Holiday Wish List for Mobile Commerce.

Do Hacker Safe / McAfee Secure Badges Increase Sales?

The answer is yes - for many sites. But the question is does it increase sales for your business?

The only way you’ll know for sure is to either perform an A/B split test or to implement it and compare sales reports before and after. The caveat to the latter method is you never really know if the sales and conversion uptick is simply seasonal - but an A/B test, if performed properly, will let you know for sure.

Inspired by Bryan Eisenberg’s Always Be Testing: Complete Guide to Google Website Optimizer, a Get Elastic reader began testing the McAfee seal:

Here’s what our reader reports:

The results of the split test are monitored by McAfee. Over 100,000 visitors have participated in the survey and 50% of the visitors see the image, 50% do not. After 3.5 weeks, the sales analysis summary shows an increase attributed to the certification of 4 – 6 % (it fluctuates daily).

After reading “Always be testing”, I set up bi-weekly meetings with our web team to select and implement split tests to optimize our sites for conversion. Next on the list is removing our order summary information from the checkout process until the order review page.

Joann.com reported a similar lift in sales (5.5%) from using the Hacker Safe seal (now acquired by McAfee) last fall as reported by Internet Retailer.

We’d love to hear your testing stories - with McAfee Secure or other tests. Did it lift conversion rate? Sales? Repeat orders? You can remain anonymous if you like, but please drop a comment on this post!

Webinar Recap: I Know I Should Be Testing, But…

Thanks to all who signed up and attended today’s webinar I Know I Should Be Testing, But… with Bryan Eisenberg. We did have some technical difficulties with capturing audio, but Bryan graciously agreed to re-record the webinar and you can find the replay here and even download the mp4 file to replay on your iPod or similar device. So big thanks and a hoorah for Bryan!

About our guest speaker: Bryan Eisenberg is a founder of Future Now and an Internet marketing veteran - a ClickZ columnist for 8 years (bit more bio information in that link), blogger for GrokDotCom and author of several books including Always be Testing: Complete Guide to Google Website Optimizer. (PS, the 5 lucky winners of Bryan’s book will appear in our RSS/email footer for all out subscribers).

Without further ado, let’s jump into the summary of the original webinar, including the question and answer period…

No More Excuses!

Great experiences aren’t accidents: why we test

“…a computer can tell you down to the last dime what you’ve sold. But it can never tell you how much you could have sold.” - Sam Walton, founder of Wal-Mart

76.7% of retailers are not testing - how come?

  • We’re too busy dealing with urgent, we forget the important.
  • There’s a HiPPO in the room (will explain below)
  • IT/technology constraints, lack of human resources
  • Just plain don’t know where to start!

About the HiPPO: You may understand the value of testing, but are challenged in getting buy-in because there’s a HiPPO in the room - the “highest paid person in the organization.” Hippos are the biggest barrier to testing, according to Bryan, and sometimes you need to take initiative and show the results of testing in order to get more support for it.

All the barriers revolve around 3 key drivers:

TOOLS - Besides Google Website Optimizer (free) there are enterprise tools like Omniture Test and Target and Optimost. GWO may not be as robust as paid tools, but at least no one has the excuse they can’t afford a testing tool.
PEOPLE - Like analytics, your tool is about 10% and the rest is people and process. You should have designated people working on testing so it doesn’t fall by the wayside when the “urgent” pops up.
PROCESS - You can have the hands to do the work, but without a process for determining what to test, how and how to measure success and actually implement the improvements, you’ve essentially got monkeys with typewriters.

Challenges

According to a 2006 JupiterResearch/ERI Executive Survey of decision makers in companies currently using A/B or multivariate testing, the biggest testing challenges include (in order of importance):

  • Demonstrating ROI
  • Creating test elements
  • Modifying pages for testing
  • Establishing test scenarios
  • Using test interface
  • Prioritizing initiatives
  • Understanding results
  • Acting on test results
  • Segmenting/targeting test participants

Example of Tests

You can test any “section” on your website, here’s an example of 3 different headlines and 3 different images:

Amazon is famous for testing anything and everything, including cart buttons:

Just for kicks, here’s a screenshot of Amazon from the late 90’s:

Bryan’s got more details on his blog about the hidden secrets of the Amazon shopping cart. He also explains why retailers shouldn’t just copy Amazon in our recent interview.

2 common mistakes

Bryan advises against any “slicing and dicing.” Don’t take a page and start testing every element on the page concurrently - it will drain your resources and the test duration will go on forever. Start with a headline, start with a cart button. Get some small wins and then test more.

Another mistake is to do testing, but not implement any changes. Commit to continuous improvement - plan, measure and improve. Take data, and make changes!

Process

Process for improvement:

1. Who are we trying to persuade?
2. What action do we want them to take?
3. What action to THEY want to take? (Not always identical to the action you want them to take!)

Step 1 - Focus on Your Customer’s Experience

Use these questions as your blueprint for testing:

  • How many different types of profiles will you have that would participate in this campaign?
  • How do they buy?
  • Are they Logical or Emotional?
  • Are they Methodical, Spontaneous, Humanistic, Competitive (4 buying modalities)
  • Where are they in the buying cycle?

Develop rich personas based on the 4 buying modalities - for more information on “persuasion architecture,” personas and buying modalities, check out Bryan’s book Waiting for Your Cat to Bark? and our webinar on the subject (video / text recap).

Step 2 - Define the Test/Experiment

  • What Action do we want them to take?
  • What page will we test?
  • Where do we judge success?

Step 3 – Do the Creative

  • Create the pages, PPC ads, emails, or advertisements (online and off) that drive your prospects to your landing pages.
  • Do have the correct messages for each type of profile and their motivation? You will likely need more than one.
  • Do you have the correct message for each stage of their buying cycle? Are they early in the buying process, in the middle, or are they ready to buy?

Check out an example of how Competitve/Spontaneous buyers “see” a page (left) vs. Methodical/Humanistic buyers (right):

Typical behavior from a competitive/spontaneous user – only reads the top part of the communication and typically has shorter fixations. While methodical and humanistic users are more likley to read to the bottom of the communication and make longer fixations.

They read search results differently, too - guess which is which:

More eye-tracking / buyer mode goodness over at GrokDotCom: Eyetracking, Heatmaps and Gaze Plots, Oh My!

Opportunity Cost of NOT Testing

A great example is one of Bryan’s clients, Overstock (maybe you’ve heard of them?) who had a 92% bounce rate on this page:

The problem on this page was the “Kids Titles for Learning and Fun” banner. People thought they were searching only kids’ titles. Changing that banner led to a 33% reduction in abandonment rate, 5% revenue lift overall, not just for DVDs and $25 Million — that’s $68,000 per day. (You might want to show this to the HiPPO in your company!)

What to Test?

What to Test First… If You Have Buy In

  • Your Top 5 High Bounce Rate Pages
  • Your Top 5 High Exit Rate Pages
  • Your Top 5 Lowest Time Spent Pages
  • Your Top 5 key pages (i.e., checkout, cart, registration, top product)

What to Test First… If You Don’t Have Buy In

  • Pick a few PPC terms and landing pages
  • Work on an email campaign
  • Work where the BPUs aren’t

Hierarchy of Optimization

Start with function - make sure your site does what you need it to do. Make sure it’s accessible - the site’s not down, you don’t hit 404’s when you omit the www etc. This includes accessibility for the visually impaired. Then look at your usability (not to be confused with conversion) which may involve observing people physically navigating your site and performing various tasks. This is all pre-testing stuff.

Begin testing at the Intuitive stage - what can you do to reduce friction in the buying process? Then explore the Persuasive - do people understand what they are buying?

Setting Up Your Test

1. Create a Descriptive Name

  • Point of Action Assurance Test on Lead Form
  • Identify if this is site wide test or for a campaign

2. Define Your Goal

  • I want to increase conversion…
  • How will you measure this? What are the KPI?

3. How Will You Achieve your Goal?

  • What are you testing?
  • What are the variables?
  • What are the variations?

4. Define the Control

  • What is your prediction/hypothesis?
  • What are you basing that on?

5. Let the Test Rip

6. Measure & Analyze!

  • What did we improve or not?
  • What did we learn?
  • What do we do next?
  • What do we do next?

Sample Test Setup - Trust Element

Test Name: Confidence Building: Point of Action by Lead Form
Goal: I want to increase conversion by measuring total conversion rate of leads.
Does adding language about our privacy policy and response time improve lead form conversion?
Control: The control form is our current form (A).
Prediction: I predict the form with the detailed point of action assurance will convert best (B).

Simple Tests to Get Started

  • Headlines
  • Calls to Action
  • Re-order Content
  • Simple Graphics
  • Confidence Building Language

Improving Product Descriptions

Bryan and Future Now conducted a Retail Customer Experience Survey last year, and found 62% of top retail sites had only a brief blurb for a product description, and only 11% had exceptional product copy. Yet, a study by Allurent reports 67% of consumers who visited an online store intending to make a purchase left because the retailer did not provide enough product information.

The E-tailing Group found in it’s study:

  • 77% of online shoppers 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

Got your attention?

Most people abandon because of lack of information to buy. But you can use customer reviews to dramatically improve product descriptions (GrokDotCom’s Holly Buchanan wrote about this, and so did we) and conversion. Amazon reviews and Buzzillions are great places to mine for this gold. Here are some tips:

  • Look for products with low look to book ratios & 3 -4.5 star reviews
  • Pull the “trigger words” from each review
  • Plot them as Logical or Emotional
  • Modify your product descriptions based on the results

And you can plot them on a chart like this if you like:

Here’s an example for a Kenneth Cole watch. Old product description:

Here’s revamped copy, taking in the sentiments of actual people from customer reviews:

Kenneth Cole Women’s Stainless Steel Watch

  • This unusual double chain bracelet band and watch is an instant attention getter
  • Kenneth Cole design features hypnotic mother-of-pearl face and is pleasing to look at
  • The high polish silver hands compliment the shimmery dial
  • No worries while washing hands, because this watch is water resistant to 30 meters
  • Simple to adjust the size…no jeweler needed
  • Secure and elegant jewelry clasp
  • Case is a slim 9mm and only 18 mm wide
  • Bracelet dimensions: 13mm wide & 7.75 inches long

(If you’re using Amazon, be sure to check out Pluribo and read our post on using Amazon Betsellers for keyword research).

More Conversion Tips

  • Show pre-checkout shipping calculations (to reduce cart abandonment by people “just checking”)
  • Use fewer checkout steps (test)
  • Show assurances during checkout process (test)

59% do not provide shipping cost early in the checkout process and 35% have a checkout process with more than 4 steps.
41% do not provide assurances during the checkout process.

Here’s a post about checkout process split-testing.

Influencing Your Organization

Step 1 - Get the Math Right

If 100,000 people visit your website, and 3% of people convert into a desired outcome - that’s 3,000 total conversions, right? If you say your test improved conversion by 1% - does that mean you know have 3,030 conversions or 4,000?

Make sure everyone understands what a lift means. Talk the language, you had a 25% increase in business if it was an increase in overall conversion rate from 3% to 4%, rather than 3% to 3.03%. That’s a BIG difference!

Step 2 - Take Control of the Visit

100,000 visits
x 3% CR
3000 orders

If you increase traffic (invest more in PPC, for example), without optimizing for better conversion, a 33% increase in visits only produces 990 more orders. If you increase conversion rate by 33%, with only 100,000 visitors, you make 1,000 more orders - and this benefit is permanent - where buying more traffic is a one time deal, and you have to continually buy more traffic.

Think about this:

1. You can’t always control the amount of visits, but you can control what you present to the visitors.
2. What would it cost you to double traffic (if possible) versus doubling conversion rate?

Step 3 - Demonstrate It!

Questions and Answers

Many ecommerce sites use dynamically generated pages? How do you test database driven sites?

Google Website Optimizer works as long as Javascript tags for the test are showing up in browser. It will produce the variables you input to the tool, not what is coming out of your database. More details in the book.

What is the minimum traffic you need to conduct an accurate test?

Keep variations small and look for something that has at least 100 actions per week - if not orders, make it add-to-carts. If you have no traffic it’s hard to do less than that.

If something is out of stock, should you remove the product or announce something is out of stock?

Bryan shares a story about a Sony camera that he loves. Recently at a conference he was sitting with a bunch of people discussing how great this (older) model of camera was. They did a product search on Sony’s website and 3-4 other websites, no one had the camera listed. All the rest were out of stock. Since no product pages exist, you can’t even write a review, and you certainly can’t buy what you can’t find! Bryan suggests rather a retailer should revise the page, explain that the model is out of stock and show options for a similar model. Even tell people that the new model retains the speed (or whatever the features that made the previous one a customer favorite) and is available and in stock now.

I wrote about this topic last month, how to use 301 redirects to preserve your link juice and SEO benefits of an existing product page. Jason brings up a good point that there’s a problem with redirecting visitors because you lose the “scent trail” - you don’t want to send people to a 190 model when they were expecting a 180. You never want to pull a bait and switch or cause user frustration. I’ll keep my eyes out for good examples of retailers who keep pages up for a future post.

Is it better to use a long landing page or multi-step process?

There’s no universal answer, it depends on who you are marketing to and what you do. Though Bryan is a fan of breaking up pages — it’s hard to find exactly what you’re looking for on a long page — you can also break it up badly too.

How do you build credibility for a new site or new brand? Without product reviews, what is the number one way of building credibility?

Have an About Us page to start, and “be real.” People know they are not on Walmart.com. Communicate where you excel in service, quality, unique products, clarity, great experience, better content than everyone else, et cetera. Keep testing and you’ll get better results. Don’t forget phone numbers and addresses, live chat, AIM — transparent / visible contact information.

What are ramifications of SEO and testing, is it a form of cloaking?

It’s not, really. Sure, you could use it for the wrong reasons — you must be careful of what you’re doing, you’re not trying to bait and switch. But from the SEO perspective, when a spider comes, it will spider your “control” page, it has no ramifications to SEO otherwise. If you have a radical improvement as a result of your testing and you implement it, you will have to modify your control which may affect your SEO.

Is there ever a reason you would have a successful test, then go back and retrace your steps and perform the identical test - perhaps at a later date, if customers change, economic conditions, seasonality, technology et cetera?

Yes, Amazon is constantly playing with order and formatting of text and product descriptions, for example. If something causes a significant lift in conversion, it makes sense you want to continue testing the same thing - perhaps in slightly different ways. Don’t retest for small improvements - 3% change, for example. But 15%, 20% or more, it’s worth further experimentation.

Next Webinar, Sign Up Today!

We’re excited to have Bill Mirabito, Founder and Principal Analyst of B2C Partners in the house Thursday, October 23 at 9am PST / 12pm EST for Holiday Wish List for Mobile Commerce

Space is limited, so sign up today!

Dont Dress Up Calls-To-Action Like Google Adsense!

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

Home Page Design: Applying The Dont Make Me Think Test

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 »

Product Photography: How To Achieve The Ghost Mannequin Effect

A conversation emerged out of the comments on last week’s post Can Product Images Improve Conversion? Showing Products in Context about how to achieve a “ghost” mannequin effect like these examples, where the body is filled out, you can see through the V-line but the mannequin is invisible.

invisible mannequin

As the post explained, showing products “in context” can be more persuasive than flat images - models and mannequins give customers an idea of how a garment fits a real person. I recently researched how to achieve the invisible mannequin look and found answers like:

Make a mannequin out of a very open wire mesh, and then edit the mesh out in post. You could even paint the mesh with green or something like that and chroma-key it out.

Make a mannequin out of a thin, cheap material (perhaps even wire mesh again) and put the garment on it, and position the camera. Then, start cutting away the mannequin in all the places where it’s visible to the camera, even with the shirt over it. You’d end up cutting off it’s left arm, part of it’s left ’shoulder blade’ and some stuff around the neck.

-djlemma, from Flickr discussion

and

Looking at a few of the examples I reckon the mannequin is being chopped out. Looking at some of the tops you can see no back to the item even if there is a lower front if you see what I mean.

An ideal solution could be to get a mannequin and a background with a strong colour. Take the photo then in Photoshop make a clear layer below the image layer so you have a transparent background. On the photo layer click the Select main menu item and choose “Color range” and click the mannequin colour on the photo. It should select just this colour, use the sensitivity slider to get the best selection and the just cut it out. Do the same with the background. It is not the quickest but compared to hand tracing each item and mannequin area it would potentially save a lot of time.

-MickeyFinn, from Freelance UK Forums

I noticed a couple photographers left comments on our post, so I tossed out the question, what’s the best way to achieve the ghost mannequin look? Anna Yeaman, professional photographer who specializes in product photography for apparel and accessories shared the following:

Two years ago I tried plastic and wireframe mannequins to achieve the “ghost” effect but I was not happy with the results. Also this limits the types of mannequin you can use.

I sometimes combine two images in Photoshop if its just a small part of the label I’m after.

I never found a simple way to do this in-camera, I decided that there must be custom made mannequins out there but could never find them. I considered taking a saw to one of my own and cutting out the chest area!

I’m going to renew my efforts and contact some websites using this effect. I will let you know how it goes. Most of my clients are after the Bluefly.com look and don’t mind the mannequin.

One thing I do a lot is take a photo on a mannequin, in Photoshop I edit out parts of the mannequin that are showing (around the hem, arms ect). You end up with an item with shape and form without a mannequin showing, but you cannot see through to the back…We take multiple angle shots and close ups of every item instead.

I have a hook that I hang bags off, then I edit it out later in Photoshop. For earrings I use clear fishing wire (craft shop), the earrings hang perfectly and the wire is invisible. I also use a clear plastic board for studs (I drilled a small hole) and clip ons (clip onto the bottom).

In a follow-up comment:

I contacted a bunch of product photographers to find out how they achieved the “ghost” effect.

John Gibbens of, G2 Catalog Design sent me this reply,

“We either shoot two images and piece together or we use an inexpensive plastic mannequin supported from below (for shirt/jacket images) whose neck is cut down below the open neckline. We then keep a couple different lengths of removable arms to fill sleeves - long arms with hands cut off for long-sleeve items and shorter arms for short sleeve garments.”

So we can conclude that the invisible mannequin look, though very slick, takes a bit of pre and post production effort. Another alternative would be to shoot a flat image and mannequin shot, so customers can still see the product on a form and see through the V-line. Works for Net-A-Porter…

Can Product Images Improve Conversion? Showing Products in Context

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.

How Top Retailers Show Product Images

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.”

Webinar Recap: Ecommerce Innovations

Ecommerce InnovationThis 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 »

Next Page »