2011-02-16_1233As a per­son with autism, it is easy for me to under­stand how ani­mals think because my think­ing processes are like an animal’s” — Tem­ple Grandin

Because Tem­ple Grandin is spooked by the same things ani­mals are spooked by, she’s ide­ally suited for opti­miz­ing envi­ron­ments and han­dling sys­tems for them. For her, great design is all about elim­i­nat­ing any­thing that will cause anx­i­ety or doubt in the minds of the animals.

I often think of Web Opti­miza­tion in the same terms.  As a semi-luddite work­ing in the tech­nol­ogy field, I find myself spooked by the same things nor­mal cus­tomers are spooked by. Things that are intu­itive to tech nerds and coders are dis­tinc­tively NOT intu­itive to me.  And this makes me really, really good at opti­miz­ing Web­sites for nor­mal folk.

So with apolo­gies to Krug, my cen­tral ten­ant is “Don’t Make Me Doubt!”

  • Elim­i­nate my doubts by let­ting me know what each action, click, form, but­ton will do before I’m asked to take that action.
  • Don’t just answer my explicit ques­tions, ensure you also address my unar­tic­u­lated con­cerns.
  • If you want me to click it, make it look click­able. Let me know what the but­ton will do.  Make it explicit and unambiguous.
  • And yes, words mat­ter when it comes to usabil­ity — not just the freakin’ but­ton color!

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

Crutch­field Goons It up — Here’s Why…

And that brings me to a recent shop­ping expe­ri­ence with Crutch­field.  Now, Crutch­field does a lot of things right, includ­ing some rather rig­or­ous opti­miza­tion and split test­ing. 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 but­ton for a new LCD TV, and was shown this screen:

Accessories_1297881437678

Now, first of all, great job on try­ing to sell me on acces­sories I might need for my new TV. Nice cross-sell.  But, um, lousy job on exe­cu­tion and design — you’re spook­ing your cus­tomers, Crutch­field!  Here’s why:

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

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

3) I scroll back up and read a state­ment that the TV Has been added to cart, but I’m then pre­sented 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 real­ize that the but­ton and the state­ment are NOT asso­ci­ated with one another, even though they are grouped together by that darn green box, caus­ing me to assume that they were some­how con­nected. Once I real­ize that, it becomes clear that the “step” I’m being offered to skip is the cross-sell oppor­tu­nity and not the already accom­plished step of adding my TV to my cart.

Think of this as a com­bined design/copywriting screw-up, where the design mis­com­mu­ni­cated the asso­ci­a­tion between the mes­sage and the but­ton, and the copy on the but­ton helped fos­ter that mis­com­mu­ni­ca­tion by com­mu­ni­cat­ing a salesman’s point of view rather than a buyer’s point of view.  See in the minds of sales­men, cross sell­ing is a “step” in the sales process, but in the minds of buy­ers, there is no log­i­cal con­nec­tion between buy­ing some­thing and being cross-sold. It may be a reminder or oppor­tu­nity, but it’s not a “step.”

5) What exactly is the dif­fer­ence between a wall mount and a low pro­file 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 pro­file?  Why don’t they have pic­tures?  Well, I guess I could click on the item, but… don’t want to be taken away from this page, espe­cially if I’m not totally sure the TV has been added to my cart and will fol­low me.

As it turns out, click­ing on the link doesn’t take me away from the page — it just pops up a pic­ture of the prod­uct, but really, I had no freakin’ way of know­ing that, so I nei­ther clicked the link, nor did I bother select­ing a wall mount.  Nor in fact, did I end up buy­ing 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 com­bi­na­tion, it’s YOUR turn to tell me how you’d fix it:

  • What changes would you test first?
  • What’s per­haps the ideal fix, and what rep­re­sents the most eas­ily imple­mented fix that’ll still get the job done?
  • How much will you rely on design and how much on copy?
  • Descrip­tions are great, but hyper­links to mock-ups are even bet­ter.  Use yFrog or something.

2011-02-16_1226I’ll have Bryan and Jef­frey Eisen­berg judge the designs and we’ll pro­nounce a win­ner 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 influ­ences the other.  In fact, Jef­frey Eisen­berg and I will be teach­ing a newly revised ver­sion of Per­sua­sive Online Copy­writ­ing in order to address exactly these chal­lenges — how design and copy work together; how video and copy work together; how Social Media and con­tent mar­ket­ing and micro-copy work together.  It’s a hands on work­shop 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 answer­ing this? Can I get the prize? :-)

  2. Jeff on 02.16.2011

    As a judge, I’m guess­ing you’d have to recuse your­self from enter­ing the con­test, Bryan — but it would be great to pub­lish YOUR solu­tion 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 com­ments, and thought them when I saw the screen­shot (before read­ing your comments).

    The quick fixes:
    1. Lose the green rule around the item you added.
    2. Tweak copy to say some­thing like “You may need these acces­sories for your item” – I’m not a copy­writer, but some­thing along those lines.
    3. Move the “Skip this step” but­ton either next to the copy ref­er­enced above, or next to the “Wall Mount” header sec­tion.
    4. Change “Skip this step” to say some­thing like “No thanks”, or “Pro­ceed to check­out“
    5. Add links for each acces­sory that says “More Info” (or some­thing along those lines)
    6. Change the “Select” col­umn header to “Add” or “Add to Cart“
    7. Change “Add selected items to Cart” but­ton to say “Con­tinue” or “Pro­ceed to check­out” or some­thing along those lines.

    As always, dif­fer­ent copy/layout treat­ments could be tested, but I think the banner/button green box at the at the top is the biggest anx­i­ety trig­ger and def­i­nitely 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 com­pli­ment you on the great idea to crowd­source this.

    BTW, the ver­sion of Com­mentLuv you’re using (v276) seems to be no loner sup­ported. You may want to update the plugin.

  5. Jeff on 02.16.2011

    Geno,

    Thanks. I am a ver­sion 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 sim­plify it down and add more clear instruc­tions 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 every­thing 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 ques­tion which is a hyper­link to the next step.
    4. I’ve added “What is a wall mount bracket? (opens in new win­dow)” 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 hav­ing this in or out)
    6. I’ve added images for each prod­uct. Hover over and the image is enlarged.
    7. I’ve added “See More Wall Mount Brack­ets” instead of “See More” to make it a bit clearer
    8. I’ve changed the “Add to Cart” but­ton to “Add Selected Wall Mount Bracket to Cart”. Instead of this I might remove this sin­gle but­ton and have an “Add to Cart” in place of check­box. If there was more than 1 TV, I’d also have a texbox for num­ber of units.
    9. Not in image but I might add a (?) icon beside the Model descrip­tion to explain the features/benefits of low-profile.
    10. “Scrath & Dent” doesn’t make much sense in Stock Sta­tus col­umn. 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 Aus­tralia usu­ally reply, “If I wanted F$%^ing fries with that I would have asked for F%^&ing fries.”

    So, does Crutch­field really want to sell you a tele­vi­sion or are they try­ing to do some­thing 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 zeal­ous mar­keters to bear.

    So if they are going to stick with the add ons, then first up make the sec­tion smaller. As you’ve rightly pointed out this sec­tion dom­i­nates the page and leaves the cus­tomer won­der­ing 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 but­ton as that is totally con­fus­ing. Replace it with Con­tinue Pur­chase or something.

    I’d also lose the orange arrow point­ing to the Add Ons as this again places the dom­i­nant focus on the add ons and not the intended purpose.

    Change the lan­guage to “You May also like” or :Cus­tomers who bought this also bought…”

    I’d also add some bread­crumbs so that cus­tomers know where in the check­out 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 hav­ing this dis­cus­sion and for the great feed­back. This is def­i­nitely a page that could use some improve­ment. Please keep the ideas com­ing. We’re lis­ten­ing, and we will cer­tainly look to make improve­ments based on the feed­back here.

    As a small way of show­ing our appre­ci­a­tion, we will send the win­ner cho­sen by Bryan and Jef­frey Eisen­berg a $75 Crutch­field gift card.

    Thanks again.

    Todd Cabell
    Sr. Man­ager Web Strat­egy
    Crutchfield

  10. UX Guy on 02.17.2011

    This approach brings their learn­ing con­tent into the shop­ping path in a more nat­ural way. First and fore­most, the cus­tomer needs to know that the item has been added to the cart and that they can either go to their cart or con­tinue shop­ping. Although this exam­ple is text-heavy, the idea here is to pro­vide the cus­tomer with the right amount of infor­ma­tion that is per­ti­nent to mak­ing a pur­chase deci­sion, allow­ing the cus­tomer to explore the options on their own (the up-sell part that could link to fil­tered results for their spe­cific item), and to pro­vide a link to fur­ther read­ing if the cus­tomer chooses to dive deeper.

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

    The other approach, as Mark sug­gested above, would be to sim­ply get out of the way. If a cus­tomer adds some­thing to their cart, don’t stop them and make them think. I am par­tic­u­larly fond of per­sis­tent carts that let the user decide when it’s time to go to the cart. Up-sell and acces­sorize on the actual prod­uct page.

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

    […] the sub­ject of con­ver­sion opti­miza­tion Jeff Sex­ton throws down an inter­est­ing con­ver­sion chal­lenge judged by CRO gurus Bryan and Jef­frey Eisen­berg, the folks at Ion Inter­ac­tive have a handy list of […]

  12. Jeff on 02.18.2011

    UX Guy,

    Love your mock-up! My only con­cern is that “view my cart” isn’t as syn­ony­mous with “check­out” as you might guess. Some peo­ple might look for a check­out but­ton. Other than that, what a great design! Thanks for sub­mit­ting it.

    - Jeff

  13. UX Guy on 02.18.2011

    Hey Jeff. Agree com­pletely. I think chang­ing that call to action to “check­out” would make it more appar­ent. I also agree with Mark about get­ting out of the way.

  14. Alex on 02.21.2011

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

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

    Here are a few things I would test:

    Bread­crumbs: To address the issue of a use not know­ing a prod­uct was added and where they are in the process, a bread­crumb trail can be added to the user know that prod­uct sec­tion has taken place, and they are now in the process of eval­u­at­ing accessories

    Con­firm Mes­sage: The text that con­firms the addi­tion of the TV is for­mat­ted as a sen­tence, rather than just bla­tantly stat­ing “Added to Cart” in big bold let­ters and then show­ing prod­uct name and a brief description

    But­ton Treat­ments: All of the purchase/continue con­trols have been green but­tons thus far, so that should be con­tin­ued through the pur­chase path. Also using the two orange but­tons in the base­line may cre­ate con­fu­sion with­out a hierarchy.

    Copy: I wanted to estab­lish a few things (1) that these are rec­om­mended (2) reas­sur­ance that these are curated so that only the top rated prod­ucts are being shown (i.e. no research needs to be done by the user to take them off task) and (3) there are incen­tives such as dis­counts, free ship­ping, and that every­thing will arrive with the TV.

    Acces­sories: Not sure why only TV mounts are shown, but cast­ing a wider net for the top 3 acces­sories should drive AOV. Short of a Dell con­fig­u­ra­tor process, it is hard to pull off. How­ever, a slider con­trol can be used for mul­ti­ple cat­e­gories and products.

    Check­boxes vs. But­tons: I debated using the check­boxes for the acces­sories con­trol under­stand­ing that it addresses when mul­ti­ple acces­sories are sold. I’d first look at met­rics of prod­ucts per order and see, if a multi-select is an excep­tion or the rule. That being said, the green but­tons add an eye flow ele­ment to draw atten­tion down the page.

    This is a lot of fun so will try to find some time to put together a cou­ple more options around modal upsells (launch­ing a layer of the con­firm & upsells direc­tion on the prod­uct page) as well as a con­fig­u­ra­tion flow.

  15. Brian Killian on 02.23.2011

    First, I would de-bannerfy the shop­ping cart mes­sage (lose the green bor­der and the con­fus­ing but­ton). Instead of a mes­sage stat­ing that a TV has been added to your cart, I would sim­ply use that screen real estate to show the con­tents of your cart.

    Your cart: Sony LCD TV Quan­tity: 1 Price: $1000.00

    Sec­ond, I would make smaller but­tons for adding addi­tional items to the cart and place them inline with each row show­ing the prod­ucts. It would just be an addi­tional column.

    The large orange but­ton that is cur­rently for adding more items to the cart I would turn into some kind of “No Thanks. Just Pro­ceed to Check­out” type of button.

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

    Some­thing else to con­sider would be sub­tract­ing some of the choices. You could just ask the cus­tomer if they would like to add a wall mount with their TV. Yes or No? If yes, load new prod­uct page for wall mounts.

Leave a Reply




CommentLuv badge

WP-SpamFree by Pole Position Marketing