2011-02-16_1233“As a person with autism, it is easy for me to understand how animals think because my thinking processes are like an animal’s” – Temple Grandin

Because Temple Grandin is spooked by the same things animals are spooked by, she’s ideally suited for optimizing environments and handling systems for them. For her, great design is all about eliminating anything that will cause anxiety or doubt in the minds of the animals.

I often think of Web Optimization in the same terms.  As a semi-luddite working in the technology field, I find myself spooked by the same things normal customers are spooked by. Things that are intuitive to tech nerds and coders are distinctively NOT intuitive to me.  And this makes me really, really good at optimizing Websites for normal folk.

So with apologies to Krug, my central tenant is “Don’t Make Me Doubt!”

  • Eliminate my doubts by letting me know what each action, click, form, button will do before I’m asked to take that action.
  • Don’t just answer my explicit questions, ensure you also address my unarticulated concerns.
  • If you want me to click it, make it look clickable. Let me know what the button will do.  Make it explicit and unambiguous.
  • And yes, words matter when it comes to usability – not just the freakin’ button color!

In other words, design your Website so that there’s never any room for doubt.

Crutchfield Goons It up – Here’s Why…

And that brings me to a recent shopping experience with Crutchfield.  Now, Crutchfield does a lot of things right, including some rather rigorous optimization and split testing. But I really think they got at least part of this check-out process wrong. Here’s what happened…

I clicked the buy/add to cart button for a new LCD TV, and was shown this screen:

Accessories_1297881437678

Now, first of all, great job on trying to sell me on accessories I might need for my new TV. Nice cross-sell.  But, um, lousy job on execution and design — you’re spooking your customers, Crutchfield!  Here’s why:

1) The green box around the TV and the button makes that part of the screen look like a banner add, which almost made me scroll right past the darn thing because I’ve been trained to ignore banner ads.

2) When I do scroll down, I’m presented with a bunch of wall mounts and a button that says: “add selected items to cart,” but I don’t see my TV as part of the add items, and I wonder whether or not the TV has been added to cart.

3) I scroll back up and read a statement that the TV Has been added to cart, but I’m then presented with the option to “Skip This Step” — but I don’t want to skip adding the TV to my cart.  Grrr!

4) After a moment’s thought and a glance up at my cart icon I realize that the button and the statement are NOT associated with one another, even though they are grouped together by that darn green box, causing me to assume that they were somehow connected. Once I realize that, it becomes clear that the “step” I’m being offered to skip is the cross-sell opportunity and not the already accomplished step of adding my TV to my cart.

Think of this as a combined design/copywriting screw-up, where the design miscommunicated the association between the message and the button, and the copy on the button helped foster that miscommunication by communicating a salesman’s point of view rather than a buyer’s point of view.  See in the minds of salesmen, cross selling is a “step” in the sales process, but in the minds of buyers, there is no logical connection between buying something and being cross-sold. It may be a reminder or opportunity, but it’s not a “step.”

5) What exactly is the difference between a wall mount and a low profile wall mount? You’d think it refers to how close to the wall the TV mounts.  But then what does “super slim” mean?  Wouldn’t a super slim wall mount BE low profile?  Why don’t they have pictures?  Well, I guess I could click on the item, but… don’t want to be taken away from this page, especially if I’m not totally sure the TV has been added to my cart and will follow me.

As it turns out, clicking on the link doesn’t take me away from the page – it just pops up a picture of the product, but really, I had no freakin’ way of knowing that, so I neither clicked the link, nor did I bother selecting a wall mount.  Nor in fact, did I end up buying anything.

How Would YOU Fix It?

Ok, so now that I’ve given you all the ways that my semi-luddite mind was spooked by this ungainly design/copywriting combination, it’s YOUR turn to tell me how you’d fix it:

  • What changes would you test first?
  • What’s perhaps the ideal fix, and what represents the most easily implemented fix that’ll still get the job done?
  • How much will you rely on design and how much on copy?
  • Descriptions are great, but hyperlinks to mock-ups are even better.  Use yFrog or something.

2011-02-16_1226I’ll have Bryan and Jeffrey Eisenberg judge the designs and we’ll pronounce a winner with some cool, to-be-determined award.

Give it your best shot in the comments!

P.S. Yes, dear reader, design and copy have to work together for best results.  Each influences the other.  In fact, Jeffrey Eisenberg and I will be teaching a newly revised version of Persuasive Online Copywriting in order to address exactly these challenges – how design and copy work together; how video and copy work together; how Social Media and content marketing and micro-copy work together.  It’s a hands on workshop and it’s in Austin on April 30th and 31st.  You should come!

Comments

  1. BryanEisenberg on 02.16.2011

    Can I take a crack at answering this? Can I get the prize? :-)

  2. Jeff on 02.16.2011

    As a judge, I’m guessing you’d have to recuse yourself from entering the contest, Bryan – but it would be great to publish YOUR solution as a follow-up post when we announce the winners!

    – Jeff

  3. Mike Stickney on 02.16.2011

    First off, I agree with all your comments, and thought them when I saw the screenshot (before reading your comments).

    The quick fixes:
    1. Lose the green rule around the item you added.
    2. Tweak copy to say something like “You may need these accessories for your item” – I’m not a copywriter, but something along those lines.
    3. Move the “Skip this step” button either next to the copy referenced above, or next to the “Wall Mount” header section.
    4. Change “Skip this step” to say something like “No thanks”, or “Proceed to checkout”
    5. Add links for each accessory that says “More Info” (or something along those lines)
    6. Change the “Select” column header to “Add” or “Add to Cart”
    7. Change “Add selected items to Cart” button to say “Continue” or “Proceed to checkout” or something along those lines.

    As always, different copy/layout treatments could be tested, but I think the banner/button green box at the at the top is the biggest anxiety trigger and definitely needs to be addressed top priority.

    – Mike

  4. Geno Prussakov on 02.16.2011

    Jeff, I’m not a CRO guy, but just wanted to quickly chime in to compliment you on the great idea to crowdsource this.

    BTW, the version of CommentLuv you’re using (v276) seems to be no loner supported. You may want to update the plugin.

  5. Jeff on 02.16.2011

    Geno,

    Thanks. I am a version behind! Will update as soon as possible.

    – Jeff

  6. Kevin McCaffrey on 02.16.2011

    Here’s my quick redesign:

    http://yfrog.com/h07orp

    I’ve tried to simplify it down and add more clear instructions to the buttons/links.

    Here’s a few things I’d change for starters

    1. As Mike said above I’d lose the green box
    2. Instead of “Now be sure to get everything you need”, I have “Do you need a Wall Mount Bracket?”
    3. Instead of “Skip this step”, I have “No Thanks” as an answer to the question which is a hyperlink to the next step.
    4. I’ve added “What is a wall mount bracket? (opens in new window)” that could pop up a video to see how a bracket and TV fit together
    5. I’ve removed the large Wall mount bracket image (can test having this in or out)
    6. I’ve added images for each product. Hover over and the image is enlarged.
    7. I’ve added “See More Wall Mount Brackets” instead of “See More” to make it a bit clearer
    8. I’ve changed the “Add to Cart” button to “Add Selected Wall Mount Bracket to Cart”. Instead of this I might remove this single button and have an “Add to Cart” in place of checkbox. If there was more than 1 TV, I’d also have a texbox for number of units.
    9. Not in image but I might add a (?) icon beside the Model description to explain the features/benefits of low-profile.
    10. “Scrath & Dent” doesn’t make much sense in Stock Status column. Again, add a (?) icon or lose it.

    Plenty to test here too.

    – Kevin

  7. Mark on 02.16.2011

    Ah, the McDonald’s approach,

    to which we in Australia usually reply, “If I wanted F$%^ing fries with that I would have asked for F%^&ing fries.”

    So, does Crutchfield really want to sell you a television or are they trying to do something else?

    If they do want to sell you a TV, then lose all the Add On’s, a bird in the hand and all that.

    But that might be too much for over zealous marketers to bear.

    So if they are going to stick with the add ons, then first up make the section smaller. As you’ve rightly pointed out this section dominates the page and leaves the customer wondering where his order went.

    Next I’d change the colour scheme, I mean dino poo green and orange, really.

    I’d get rid of the Skip this step button as that is totally confusing. Replace it with Continue Purchase or something.

    I’d also lose the orange arrow pointing to the Add Ons as this again places the dominant focus on the add ons and not the intended purpose.

    Change the language to “You May also like” or :Customers who bought this also bought…”

    I’d also add some breadcrumbs so that customers know where in the checkout process they are.

  8. Jeff on 02.17.2011

    Mark & Kevin,

    Great stuff so far, guys. Thanks for participating.

    – Jeff

  9. Todd Cabell on 02.17.2011

    Just wanted to thank you having this discussion and for the great feedback. This is definitely a page that could use some improvement. Please keep the ideas coming. We’re listening, and we will certainly look to make improvements based on the feedback here.

    As a small way of showing our appreciation, we will send the winner chosen by Bryan and Jeffrey Eisenberg a $75 Crutchfield gift card.

    Thanks again.

    Todd Cabell
    Sr. Manager Web Strategy
    Crutchfield

  10. UX Guy on 02.17.2011

    This approach brings their learning content into the shopping path in a more natural way. First and foremost, the customer needs to know that the item has been added to the cart and that they can either go to their cart or continue shopping. Although this example is text-heavy, the idea here is to provide the customer with the right amount of information that is pertinent to making a purchase decision, allowing the customer to explore the options on their own (the up-sell part that could link to filtered results for their specific item), and to provide a link to further reading if the customer chooses to dive deeper.

    http://yfrog.com/f/hs5iqp/

    The other approach, as Mark suggested above, would be to simply get out of the way. If a customer adds something to their cart, don’t stop them and make them think. I am particularly fond of persistent carts that let the user decide when it’s time to go to the cart. Up-sell and accessorize on the actual product page.

  11. Friday PPC News Roundup – 14 Links & Lots of Ad Text Edition on 02.18.2011

    […] the subject of conversion optimization Jeff Sexton throws down an interesting conversion challenge judged by CRO gurus Bryan and Jeffrey Eisenberg, the folks at Ion Interactive have a handy list of […]

  12. Jeff on 02.18.2011

    UX Guy,

    Love your mock-up! My only concern is that “view my cart” isn’t as synonymous with “checkout” as you might guess. Some people might look for a checkout button. Other than that, what a great design! Thanks for submitting it.

    – Jeff

  13. UX Guy on 02.18.2011

    Hey Jeff. Agree completely. I think changing that call to action to “checkout” would make it more apparent. I also agree with Mark about getting out of the way.

  14. Alex on 02.21.2011

    There is so much I like about Crutchfield, but agree that this page can be optimized.

    http://yfrog.com/f/h7klo2p/

    Here are a few things I would test:

    Breadcrumbs: To address the issue of a use not knowing a product was added and where they are in the process, a breadcrumb trail can be added to the user know that product section has taken place, and they are now in the process of evaluating accessories

    Confirm Message: The text that confirms the addition of the TV is formatted as a sentence, rather than just blatantly stating “Added to Cart” in big bold letters and then showing product name and a brief description

    Button Treatments: All of the purchase/continue controls have been green buttons thus far, so that should be continued through the purchase path. Also using the two orange buttons in the baseline may create confusion without a hierarchy.

    Copy: I wanted to establish a few things (1) that these are recommended (2) reassurance that these are curated so that only the top rated products are being shown (i.e. no research needs to be done by the user to take them off task) and (3) there are incentives such as discounts, free shipping, and that everything will arrive with the TV.

    Accessories: Not sure why only TV mounts are shown, but casting a wider net for the top 3 accessories should drive AOV. Short of a Dell configurator process, it is hard to pull off. However, a slider control can be used for multiple categories and products.

    Checkboxes vs. Buttons: I debated using the checkboxes for the accessories control understanding that it addresses when multiple accessories are sold. I’d first look at metrics of products per order and see, if a multi-select is an exception or the rule. That being said, the green buttons add an eye flow element to draw attention down the page.

    This is a lot of fun so will try to find some time to put together a couple more options around modal upsells (launching a layer of the confirm & upsells direction on the product page) as well as a configuration flow.

  15. Brian Killian on 02.23.2011

    First, I would de-bannerfy the shopping cart message (lose the green border and the confusing button). Instead of a message stating that a TV has been added to your cart, I would simply use that screen real estate to show the contents of your cart.

    Your cart: Sony LCD TV Quantity: 1 Price: $1000.00

    Second, I would make smaller buttons for adding additional items to the cart and place them inline with each row showing the products. It would just be an additional column.

    The large orange button that is currently for adding more items to the cart I would turn into some kind of “No Thanks. Just Proceed to Checkout” type of button.

    These are the biggest changes I would make to make things less confusing.

    Something else to consider would be subtracting some of the choices. You could just ask the customer if they would like to add a wall mount with their TV. Yes or No? If yes, load new product page for wall mounts.

Leave a Reply




CommentLuv badge

This blog is kept spam free by WP-SpamFree.