Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

5 Universal Principles For Successful eCommerce-Sites

When was the last time you called customer support because you were having problems checking out online? Probably never! Cart abandonment rate is at around 60%, and most of it happens before the user even begins the checkout process. Sometimes, convincing your customers to trust you is your biggest challenge.

There is no “Consumer Trust for Dummies,” but as eCommerce designers, we need to focus on some fundamentals. The following topics may seem as obvious as walking into a seven-foot Wookie, but rest assured you will find plenty of websites with a mouth full of fur.

You may want to take a look at related articles:

1. Paint Your Pictures At Home Link

Make the logo bigger

If your core demographic is women between the ages 35 and 65 who have an annual income of $60,000+, you would treat them different than the 18- to 25-year-old male demographic. First and foremost in e-tail: forcing your visitor to think is a bad idea. When creativity stops being subjective and can be measured by a dollar amount, making sure you’re designing for the customer is a no-brainer.

Years ago, I had an SVP of DotCom tell my team, “You can go home if you want to paint pictures.” And for the rest of the day, I couldn’t wait to get there so that I could make sure the next morning his inbox was full of expletive material illegal in most counties. After calming down, I realized he was right. All along, what he was telling us was simply to design for the customer and not ourselves. This was a challenge for designers working in an eCommerce corporate atmosphere but a very important lesson to learn.

2. Good UX Is Like A Perfect Movie Score Link

give the user an experience

Build brand loyalty to gain patient, forgiving customers for a lifetime. For instance, Apple’s customer loyalty exceeds all other brands with an unusual cult following. Apple lovers forgive the company when it makes mistakes and zealously defend the company’s products and reputation.

How do you make your customers trust you this much? The answer is to give the user an “Experience.” It is not enough simply to make a website usable. The experience you create for the customer has to make them not realize that they are “using” it. It’s a tough concept to grasp, and the recipe changes from website to website, but the right combination of usability, creative design, writing, psychology and metrics and a strong brand will create an experience through which your customers learn to trust you.

Like the perfect score to a film, a good user experience is unobtrusive and transparent to the consumer because “it just works.” The Apple model will not work for everyone, but I often find myself challenged with a W.W.J.D. moment. Ask, “What would Jobs do?” and then look at other websites for inspiration.

3. eCommerce UX Pitfalls To Avoid Link

can't we all just get along

Just because a website is usable, does not mean customers will use it. Usability and user experience are in the same family, but more often than not user experience is the forgotten child. There are key areas in which the two must co-exist. Below are suggestions for some areas where websites should spend as much, if not more time, on the user experience.

Product Detail page Link

The product detail (PD) page is where some retail websites drop the ball. Too much focus is put on the design and usability of the home page, and that effort does not continue through to the rest of the website. More of the user’s time is spent on the product detail page than any other. Here, you need to offer customers all of the information they are looking for but present it in an intelligent way as well.

example of no-click zoom from

A few recent trends on eCommerce websites are “no-click” alternate images and swatches. A user simply has to roll over an image, without clicking, to get immediate feedback. The same approach can be used to zoom in to the image. Other UX options for the PD page are smart fields that let users know they still have to perform a required action before proceeding, without getting a typical error message.

don't forget to select a size

The Checkout Process Link

Much like the PD page, the checkout process is a critical piece that engages the customer on a somewhat intimate level. However, unlike the PD page, where customers want to spend time to make sure they want what they are looking at, the checkout process should have as few steps as possible. Too many steps and the customer feels trapped.

But too quick and they feel like they have lost control. For instance, asking for credit card information too soon will seem out of order and no doubt scare even the most seasoned online shopper into abandoning their cart. Hidden taxes and shipping costs will make them feel like you are trying to take advantage of them.

Security Link

Always making sure your customer knows that your website is secure and that their privacy will never be compromised goes back to the issue of trust. It does not take much effort to display a message telling your customers that they are safe in your hands; a footer link to your privacy policy is not always enough.

Page Weight Link

A page’s weight is determined by its file size, by adding up every image, every line of code and anything that gets loaded when the user first hits the page. Libraries such as Scriptaculous, jQuery, MooTools and even Flash Shared Objects are often forgotten, but they all add to a page’s “weight.”

Some fascinating things are on the horizon for developers related to user experience and page weight. One notable development as of late was the release of Safari 4 Beta, which has support for HTML 5 media tags, CSS animation and CSS effects. As more and more of these features become standard in browsers across the board, we can look forward to offering users a better experience by using features directly in the browser.

4. The Value Of Content And Then SoMe Link

60 percent of all online adults use social media

We cannot talk about user experience without touching on content and social media (SoMe). In order to be profitable, eCommerce retailers need to engage customers with their content and use social media outlets within and outside their own websites.

93% of social media users believe a company should have a presence in social media, according to Cone, while an overwhelming 85% believe a company should not only have a presence in but also interact with its consumers via social media.

  • 60% of all online adults use social media.
  • 85% believe a company should not only have a presence in but also interact with its consumers via social media.
  • 56% of users feel a stronger connection with, and feel better served by, companies when they can interact with them in a social media environment. offers customers the ability to share and bookmark products from the product detail page

When a website such as Facebook, which just turned 5 years old in February, has an active user base of over 175 million people, it is easy to see the unlimited potential to increase your wallet share simply by giving your customers what they want. Some options are:

  • Give your customer the ability to add your website or product detail pages to websites such as Delicious, StumpleUpon, Digg, Twitter and Facebook.
  • Give them the ability to customize their experience on your website. These experiences can range from customizing the home page as they see fit to uploading their image to go beside their product reviews.
  • Create an RSS feed for your website. If your website has a blog or some other content area that changes regularly, give your customers the option to add it to their favorite RSS reader.

satisfaction survey results show consumers are willing to give their opinion

They say, “Content is king,” but if you cannot account for your king’s whereabouts, he needs to be beheaded. Your website’s content is only as relevant as its success. So, test as much as you can. Some tests you can perform to get hard data include:

  • Website and email A/B testing
    Split your promotion views between your customers. 50% see version A, and 50% see version B. You can perform these tests for just about any purpose, but make sure your goals are clear before beginning. Figure out what you are trying to solve, and then move forward with the testing. From changing your website’s navigation to simply testing the style of your promotion’s copy, doing an A/B test will give you the relevant data you need to decide whether to update or remain the same.
  • Polls
    Polls are quick and simple but, depending on your pool of users, can give you mountains of data. To get more people to take your poll, consider giving some kind of incentive to participate. Some polls are fun to take, but if you’re asking, “Which brand of television is better?” and not, “Who’s hotter, Jessica Simpson or Britney Spears?” then you may want to think more carefully about how much the feedback is worth.

5. Using Type And Color To Influence Link

What does that say?

Using color and typography is nothing new to designers. Using them in eCommerce is not much different. When designing for a retail website, your client is the customer. You are trying to convince thousands, tens of thousands, even millions of potential customers to click on your promotion and buy whatever you are selling. Consider the following.

Can It Be Read? Link

Most designers love to play with typography: twisting, shaping and contorting letters and word to obey your every whim, forming a beautiful masterpiece of skill and beauty. However, if your customer is not an artist, chances are they won’t get what you’re doing, and you’ve just lost a sale. Up front and to the point messaging is not always the answer either.

Consider using fun copy as an alternative. For example, if you sell banjos, instead of saying, “Shop New Banjo Supplies,” you could say, “Add More Twang to Your Thang.” As stated earlier with regard to designing for the customer, this depends a lot on what your target demographic is. home page promotion of the new iPod Shuffle shows the impact of clever typography

Can It Be Red? Link

No big surprise, red is the color of choice for error messages. But consider this when thinking about the user experience. What color does use for its error messages? Makes you think, right? Good! By the way, it uses red, too. The point is to consider alternatives. If your company has red in its brand, and the website has a lot of red as well, consider another color. You’re trying to get the user’s attention, so blue text with an alert icon could work just as well.

Consistency in Type: Stylistically and Creatively. Link

Making sure your headers, sub-headings and body copy are consistent across your website is easy. Making sure your website has a well-defined style guide is not. A style guide requires a lot of patience and care and is never complete. A website’s style guide should be a living, breathing document that continues to grow as your company and brand grows.

There is nothing wrong with this. As you find certain styles that perform better than others, find a way to add them to the guide. This document, depending on the complexity of your brand and the size of your website, could potentially be split into two separate documents: a creative style guide and a copy style guide. Each guide serves a different purpose but live together harmoniously.

Inspiration and Sources Link

Designing for the user experience in eCommerce is a multi-faceted puzzle. Some solutions work across the board, and some are specific to your website alone. The good news is that finding the solutions that best fit your particular needs is the most challenging and rewarding work a designer can do. It takes a rare breed to fully appreciate the value of the user experience, and if you are part of it, I hope this article and these resources give you as much pleasure as they have given me.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18

↑ Back to top Tweet itShare on Facebook

Jeffrey David Olson is a Sr. Art Director at ranks in the top 30 of the top 500 Internet retailers, is one of the top 10 trafficked e-commerce websites, and has more than a quarter million unique users every day. Jeff is currently finishing up a complete home page redesign and starting redesigns of the product detail and checkout pages. He is also the author and owner of 30 Minutes of Nonsense, a brand new blog where he writes his personal opinions about professional topics.

  1. 1

    nice, very helpful :) thanks

  2. 2

    I like the illustrations :)

  3. 3

    I like turtles..

  4. 4

    Ok… I couldn’t agree less !! I too have couple of e-commerce sites up and running and Its really surprising how many reputable sites break these simple unspoken rules that users ultimately create and enforce.

    Let me put my rules in brief

    1. Entice the Customer
    2. Your Website Design must Be Usable
    3. Professional Looking and Functional
    4. Do not Go Overboard

    That works fine for me.

    Anyways… nice tips David. Thanks for sharing :)

    DKumar M.

  5. 5

    I appreciate this article. Usability is still the red-headed stepchild of web design. BTW, the RSS feed seems to be busted.

  6. 6

    I don’t get this ‘UX’. What’s it mean :?

  7. 7

    I don’t like this one…
    “…and then look at other websites for inspiration.”
    As long as there are enforceable patents for things like one-click shop, we’re doomed.

  8. 8

    UX means User eXperience. Great article, btw! Very useful!

  9. 9

    Good theory.
    Please write an updated article about available e-commerce systems, it will complete the circle :)

  10. 10

    UX stands for User Experience.

  11. 11

    Nice article, I stumpled across a nice webshop gallery the other day,

  12. 12

    Wade Jackman

    March 23, 2009 3:49 pm

    Excellent article. I also find the less active elements you have on a product details page, the better the shopper responds. Too much going on is easily overwhelming for some demographics.

  13. 13

    Eric Alvarado

    March 23, 2009 3:50 pm

    very well said. imho, it’s always important to let the customer float to you products as opposed to fight to them.

  14. 14

    i like this post!

  15. 15

    Denise Little

    March 23, 2009 4:22 pm

    Well put! Correct-o-mundo!

  16. 16

    Nice work. This is one of the best articles related to developing ecommerce. Reason being the exclusive usage of good quality graphics. Otherwise most of the articles tend to be boring. This one is more descriptive because one look at the pictures tells the entire story. Thanks a lot!
    Fresh India Jobs

  17. 17

    odith adikusuma

    March 23, 2009 5:20 pm

    i hope all those tips can be used for my future business. thanks

  18. 18

    Where to find the little human graphics? Are those from some open source?
    Anyway the articals are rock!!

  19. 19

    Excellent! Thank you for taking the time to write this. I learned a lot.

  20. 20

    A gold star for a well written article!

  21. 21

    You point out the “need” to have a facebook link, but then there isn’t one at the bottom of this article.

    What gives?

  22. 22

    I loved the the human illustrations as well as the article. keep it up guys.

  23. 23

    Good article, but where do you find the picture ? The little “human” like this ???

  24. 24

    Good article.

    As a very experienced e-comsumer I have set my own rules for shopping.
    The most important is about checkout:
    “Never shop where I can’t see the the full price with taxes and shipping before entering any information”

    I don’t want my experience to be like this:
    1. Find the price
    2. Find the calculator
    3. Add tax
    4. Find the page that shows shipping info
    5. Add shipping to the price
    6. Read the fineprint if there are other hidden fees.

  25. 25

    Good to see this post appreciated.

  26. 26

    above all there should be passion to perform

  27. 27

    very nice. thx

  28. 28

    Does anybody know where you can find a good e-commerce template?

  29. 29

    Can you say where did you get all those little 3D models used as clip arts ?

  30. 30

    For all of you who are asking about the 3D people, Here ya go!

  31. 31

    I love the illustrations used in this post!!

  32. 32

    Sweet ! just what i need for my project.

  33. 33

    Great!! It’s a hard process to define at each commerce website. Zappos’ CEO published a great slideshare with some interesting tips

  34. 34

    could you write an article about e-commerce systems and ecommerce templates. BTW, great article :D

  35. 35

    Eric DeLabar

    March 24, 2009 3:27 am

    Some great tips but I feel the “SoMe” tip needs some clarification. Use targeted social media; I know Digg is one of the granddaddies of social news sites but it has very little to do with ladies purses as shown in your example. You integration dollar is better spent on linking to a social site that matters to your customer as opposed to the one that every social marketing article on the web tells you to link to.

    Personally, if I see a Digg link on an e-commerce site the only thing I think is that the owner of that site just paid a l33t-speaking scam artist way too much money to make his site “Web 2.0.”

  36. 36

    Really helpful stuff. Thanks and keep it up with this subject.

  37. 37

    Awesome work!

  38. 38

    Great article in the process of design a new site with a eCom section in it great article

    and please where can we get those wee people would be great for our new site concept.

    Adrian Sweeney

  39. 39

    Erik M Kubitschek

    March 24, 2009 4:41 am

    I am guessing UX means User Experience (in response to earlier comment). The “small talk” part on typography is brilliant, looks great.

  40. 40

    Great Blog.

    The basic rule of shopping is that it should be a experiance, logical in its process and clear in its costs… in otherwords Keep it Simple!!!

    All of your tips would aid the online retailer atain this goal>

  41. 41

    GREAT post!!
    As lead designer for a large eCommerce company, I must say that these are all great and valid points that every web designer should consider.
    Kudos Smashing!

  42. 42

    What “21. Henrik” said is absolute truth! The costumer have to see all tax and fees. I get really disappointed when I have to put my card number to see this after my order is “I-dunno-know-if-I-can-cancel-this-in-the-next-step” button…

  43. 43

    Miriam Ynocencio Cabral

    March 24, 2009 5:49 am

    Great job Jeff. I look forward to working on the PD page and checkout projects with you.

  44. 44

    Tom Bradshaw

    March 24, 2009 6:05 am

    Great timing!!!
    I’m currently building my first e-commerce shop and these are points I will definitely take into account. We use EKM Powershop to do our shops which is good as it is quite user friendly, though equally frustrating with the constant time-outs. Does anybody have any recommendations for good e-commerce software?

  45. 45

    Great post ! Just the one i was looking for….once again,thank you.

  46. 46

    yes thank you for the article. I also agree with some of the other commenters about a follow-up article on e-commerce shopping cart systems. The type of cart you’re running can have a huge influence on your product page and especially your checkout page! I’ve used a few different systems and they all seem to suck in some way (yahoo, shopify, oscommerce, zencart, interspire, on and on.)
    Thanks again!

  47. 47

    consistency in type, one of my favorites, and for some reason very hard to drive home to a client

  48. 48

    Chris Robinson

    March 24, 2009 8:12 am

    nice article, but could have been a little more in depth

  49. 49

    Great article, contains a lot of good advice in there.

    I do want to second what poster 34 -Eric DeLabar pointed out…not all social sites are perceived the same. If I were ordering scientific or medical equipment a link to the company’s “myspace” page might not quite fit….likewise, a new graphic novel might be better supported by facebook or digg, rather than a wikipedia link.

  50. 50

    I’m just busy building my 5th webshop! Very usefull tips. Thanx again :-)

  51. 51


  52. 52

    hi , I loved this post, sort of out of the topice, but can anybody tell me, the pics on this post, you know all those cute little white man, what kind of software can do that , or where to find them?

  53. 53

    Really great, i had to read it again :-)

  54. 54


  55. 55

    Nice article. I recently wrote a blog post about e-commerce sites : Link

  56. 56

    great article/well written…developers should also think about cross selling, up selling and bundle products

  57. 57

    it is a big help for me…

  58. 58


    August 25, 2009 3:47 am

    Thank you guys so much! I’ve really enjoyed this article. So helpful.

  59. 59

    Nice Article for e commerce site

  60. 60

    Good, basic tips. And the illustrations used in this post are great! A pretty website is useless if nobody can use it. It’s important to carefully examine the user experience from start to finish.

  61. 61

    Nice work Jeff, a fine set of principles to do (digital) business by. Just to tack on to principle 5, having a unique tone of voice and writing style will really help you connect with your customers. Just think about your customer demographic, the way you communicate for a skateboard website with a predominately male customer market between the ages of 15- 28 would not be the same as a knitwear e-tailer for the 40s and over.

  62. 62

    i don’t know anything about E-commerce Sites and now at least i got some picture about E-commerce….. But i need some help

  63. 63

    Great done and keep posted. Looking forward to reading more from you.

  64. 64

    Ecommerce software is being constantly improved by our team of qualified Ecommerce professionals. We have carefully gathered together an impressive set of inclusive features in all our packages and we are confident these cannot be found anywhere else at our prices, and with our flexible terms.

  65. 65

    Nice article… Very useful info. Thanks for sharing.. Looking for more and frequent updates…

  66. 66

    very nice article ! love this kind of articles and i’m learning great new things thanks ! what are those white dummie like people things are called?

  67. 67

    Michael Murphy

    March 4, 2010 12:13 pm

    Jeffrey, great article! Nice work. These are all really important points that unfortunately even the experts can forget.

  68. 68

    E-commerce Superstore Builder

    March 10, 2010 11:12 pm

    great and informative article
    One Rule: Think globally but see and treat each user as if he/she is the only one to exist

  69. 69

    Thanks for the tips. Where DOES that link for your “30 Minutes of Nonsense ” go to?????

  70. 70

    regine echano

    June 29, 2011 2:44 am

    A very informative article and has highlighted the major key parts on how to make a sustainable E-commerce business.

  71. 71

    Thanks for such a good article!! Really helpful..

  72. 72

    Nice post Jeff ! Good points raised. All these points makes good sense in usability factors of an ecommerce site. E-commerce site itself would be search engine friendly. Without that, an up-and-coming ecommerce site would have difficulity gaining traffic without spending a fortune on advertising.

  73. 73

    What a great read! I will be sharing this :)


↑ Back to top