Ecommerce and Entrepreneurship Blog | About | Contact | Store

3 Steps to Designing for Success in eCommerce

Posted on February 19, 2008 by Archives

Recently, our Search and Marketing Manager, Zach, was interviewed for  The interviewer was really kind in saying:
"You have one of the cleanest, nicest looking designed sites I have seen in a long time."
As one of the contributors to the site design, I was a little taken aback at that compliment.  It’s easy to be overly critical of a site you’re a part of, and sometimes you look past what’s really good about it because you’re mostly focused on improvement.

However, as a team we have learned a lot about design since we opened in 2004, and in this post I outline 3 key steps we’ve identified. Specifically, I’m going to talk about the design of intra-site buttons and banners since that’s one of my responsibilities at the Surplus.
It’s common practice to use buttons and banners to help customers navigate within a site. However, eye tracking studies, careful testing, and our own experience show that it’s all too easy for people to completely ignore buttons and banners that are poorly designed.

Eye Tracking Studies 

Every once in a while you come across an article about eye tracking studies – usually telling you stuff you already know. However, if you’re anywhere near as geeky as we are at the Surplus then those articles are usually interesting.
A popular one this year explained a study about the U.S. Census Bureau website. A test was set up, and the goal for participants was to find the current U.S. population on the site. Simple enough, right? What’s interesting (and amusing) is the fact that 86% of the participants failed to find the information on the front page of the site despite the fact that it was right there on the homepage in giant red letters.

Banner Blindness

Now, what can we learn from that? Maybe not a lot. Maybe we can’t learn anything significant from the findings, and you should be very aware of that possibility in regards to any study you come across. However, combined with the results of several other experiments and studies as well as plain common sense, studies have shown that people generally ignore things that resemble ads.

Ok, so people ignore things that resemble ads. What do we do now? Strip our pages of anything resembling an ad? No, but what we need to explore is - what are the exceptions? In which cases are people less likely to ignore a banner or button?

1. Designing for Success: Don’t wear orange socks with your nice suit

If your site is mostly NOT orange, and yet you have a big orange banner that says something like, “Get $10 Off Everything”, you’re probably going to have a LOT of people clicking on it. However, in the end, the value of that banner is temporary and shallow. For two main reasons, it doesn’t create the trust you need.
Firstly, not every button or banner on your site is going to lead to $10 off of something. That’s not what most banners and buttons are for, and you don’t want to create the expectation. You want to create trust with your audience by showing them buttons and banners are valuable ways to navigate the site to find what they’re looking for.
Secondly, it plays into the stereotype that buttons and banners are supposed to be flashy, obnoxious, and over-selling. But what people are really looking for is simplicity, clarity, and value. And in the long run, these are the things that create happy, repeat-customers as opposed to the one-shot sale on an item on which you break even.
For example, one of the banners we had running on was a seasonal banner which you can see here. Our goal with banners is to design them as cleanly as possible, to use colors that match the main site design, and to use plain but elegant text that is easy to read.
The bottom line is that buttons, banners, and promotional text that blend well with a site design are less often ignored and more often used. And importantly, they create value and trust with the audience.

2. Designing for Success: Calls to action and linking relevantly

Since “success” means “happy customers” at the Surplus, all of our buttons and banners must lead our customers to what they’re looking for. Sounds stupidly obvious, right? Not so fast. Browse around some popular eCommerce sites, paying special attention to buttons and banners. You may be surprised to find that banners and buttons often link to pages only loosely related to the information conveyed in the image. In other cases, images aren’t even links (and that’s just plain blasphemous).
At this point, it’s pretty much common knowledge that plain text (versus heavily formatted text or images without text) is what people look to for information. People also respond better to text that is –get this- actually informative, and specifically: instructive.
That’s why text of this nature should be in the form of a call to action, such as: “do this” or “click here” or “click to find out how” or “go here to see this”. What you want to do is make your calls to action as clear as possible, such as:
“Click here to see products with free shipping!”
Further, make the links from your buttons and banners go to relevant pages. In other words, if the image includes the above call to action then it better link to a bunch of products that ship for free. If instead it links to a page about your returns policy, or kittens, or bad poetry, then you should probably be publicly flogged.
Returning to the example of our seasonal banner for Milwaukee Tools -- The copy reads, “Take advantage of our best deals on Milwaukee Tools.” When you click on the banner you are taken to a list-o-products specifically chosen due to their being our best deals on Milwaukee Tools. You see a pattern emerging here Scully?

3. Designing for Success: Track your results and revise appropriately 

The third step for designing for success is testing. All of your refinements mean nothing if you have no indication of how they’ve helped your business.
At the Surplus we use a combination of tracking methods, including Google Analytics and website optimizers. We use this data to gain a better understanding of how our customers want our site designed. And while there are general principles of design that will attract customers in all markets, there are probably things you can learn about your customers that are specific to them.
One piece of advice I can give you is to be smart about how you interpret data. For one thing, you need to analyze data collected over an appropriate period of time. You can’t compare all your previous data with the ONE week of data you’ve collected since making some change.
Lastly, don’t jump to conclusions too fast. Analyze the data as a team (even if it’s just two people). When you have some preliminary conclusions, search around the web and ask people who know. Find out if your conclusions are those anyone else has come to. Then, you’ll be able to make informed revisions based on actual data about how your customers want your site designed.


Some people have such a bad case of banner blindness that you just can’t help them find what they’re looking for. But for those not fully infected, when your calls to action are clear and your links are relevant, you create trust and value. People suddenly know that buttons and banners on your site are actually worth clicking on, and you’ll see conversion rates go up for those links. To further add value to your graphics, keep your site uniform, assume your customers are smart, and don’t wear orange socks with your nice suit. Lastly, use a website optimizer (or some form of tracking) to gather data so you can reassess your design periodically and make small adjusts.

blog comments powered by Disqus