Web Design Tutorial: How To Lose Online Customers

I'd like to share with you a recent experience I had while attempting to join an organization. I think these experiences serve well as a model for how not to do e-commerce.

I received a special membership offer from the IEEE Computer Society. Included in the offer was a subscription to IT Professional and a "Free 2007 Memory Bonus USB 2.0 compatible memory stick pre-loaded with top downloads from recent 2007 issues of IT Professional." The offer, with an expiration date of 12/31/2007, looked good so I decided to join.

Firing up my browser (Firefox 2), I went to the URL identified in the offer: www.computer.org/promos/1007tsta

Immediately my browser was autoforwarded to another page that contained absolutely no information about the membership offer but instead told me that I had to create a web account in order to proceed. This page is shown in Figure 1.

Mistake 1: Lack of Positive Feedback
There is nothing that links the page I have been sent to with the special offer that I am responding to. This is a logical disconnect. A well designed process would have insured that there was information giving me positive feedback that I was indeed in the right place.

Assuming that I am in the right place, I go ahead and create a web account. Not to let the cat out of the bag but I had previously created a IEEE web account on my previous attempt to join IEEE via this offer. That process took several pages to complete. The last page in that process told me that the process failed with errors. Not being the trusting type, I clicked on the "Log In" link and entered my username and password. They were accepted and I was logged in. How about that!

Prior to this second attempt at joining, I had cleared out my cache and closed/reopened my browser to insure that I was starting from a clean slate. I now provided my username and password and clicked the "Log In" button. Figure 2 shows the page that loaded.

I finally have a message stating that "Membership has been added to your Shopping Cart." This is good. But wait. Looking at the cart box to the right I am told that "Your cart is empty." Evidentially membership has NOT been added to my shopping cart. It was at this point during my first attempt that I called the IEEE and got a representative to assist. More about that experience later.

Looking back in the main paragraph of Figure 2 , my first thought is that "View Cart" and "Proceed to Checkout" are unstyled links. Clicking on them shows that I am wrong. On second thought maybe they are meant to be instructions telling me to click on the "View Cart" button. Just one problem, there is no "View Cart" button on the page. There is a "My Cart" button though so I click there to see what happens.
Mistake 2: Make sure your instructions are correct
If you are going to provide instructions on how to process an order, make sure that your instructions are accurate. Your customer is depending on your guidance to process their order.
After clicking the "My Cart" button, I arrive at Figure 3. The first thing that catches my eye is the text message telling me to "Open the package folder to view discount amounts." Okay what package folder? I don't see anything labeled package folder. So now what do I do. At least I do have a confirmation that my cart is empty.
Mistake 3: Provide only relevant information
I assume that under certain circumstances the page I am viewing does have a package folder present. However in this case there is not one - making the instructions telling me to open it irrelevant and confusing. Given that the shopping cart is database driven, it is a simple matter to eliminate non-relevant information.

Well I am trying to join (at this point I doubt that even God knows what happened to the special offer I'm supposed to be getting) so I'll click the "Join IEEE" button which takes me to the page shown in Figure 4.

Now what? I guess I'll click on the first and bolded Computer Society and IEEE Membership text link. This takes me to the page shown in Figure 5. Deja Vu. This new page looks identical to the page I was just on. Okay I will not click that link again.

Mistake 4: Make sure that your links are meaningful.
If you place links on your page, especially links that are emphasized, make sure that they provide true functionality to your customer and not just lead them in circles.

Okay. This time I'll click the "Join the IEEE Computer Society" text link in the right sidebar. (Didn't I already click a join button?) I now find myself at the page shown in Figure 6. Obviously I should click the "Join Online" button. (Isn't this the 3rd time I've clicked a join button?)

Mistake 5: Your form should not be more than one click away from the relevant button/link.
At this point I have clicked "join" multiple times and as far as I can tell am no closer to arriving at the actual form for joining. The longer the trail of links and pages from the start of the path to the end of the road, the more likely it is that your customer will abandon the process.

I now find myself at the page shown in Figure 7 which is a page full of instructions telling me that this is a two part process with yet more links labeled "join". I wonder if any of them will actually take me to a form so that I can join. However, my patience has expired and I abandon my quest to give the IEEE $155 for the privilege of becoming a member. I wonder how things are over at the ACM (Association for Computing Machinery)?

As I stated earlier this was actually the second time I went through the join process. The first time out of frustration I called up the IEEE and had one of their representatives on the phone while I tried to join. I actually did get the membership to show up in my cart by reloading the initial offer page and clicking the My Cart tab. I was encouraged to proceed at this point because the membership charge showing was for $50, instead of the $113 as stated in the flyer I held in my hand. The subscription charge of $42 for IT Professional was showing correctly. The IEEE representative assured me that it really was $113 and that the $113 amount would show up after I had supplied my credit card information as the last step of the check out process. I took issue with this as standard business practice is to tell people up front what the true billing amount is. However I'm going to give IEEE the benefit of the doubt and assume that the representative did not know what she was talking about.

I forged ahead driven by the prospect of getting a half-price membership. Arriving at the personal data page where I would fill in my credit card and postal address, I was frustrated by the fact that every time I pressed the tab key to advance to the next field, the page would reload.
Mistake 6: Don't force a page reload every time someone uses the tab key to advance from one field to the next.
Because the tab key is far easier for your customer to use vs forcing them to remove their hands from the keyboard and advance by repositioning the mouse and clicking.
Mistake 7: Don't force customers to reenter data they've already provided.
IEEE had my address information because the first step of the process forced the customer to create a web account. Given that the cart is database driven and given that the process already knows who the customer is, retrieve the data from the database instead of forcing the customer to reenter it.

I resort to using my mouse to move from one field to the next. Finally I arrive at the last page of the check out process only to discover that my membership ship-to address and billing address is some company in Largo Florida - but they do have my credit card info right. The IEEE representative is clueless as to why this is. I go back to the previous page and confirm that my personal information is correct. I again press the button to go to the check out page and yes, the form still thinks I'm some company in Florida. At this point I hang up on the IEEE representative, kill my session and clean my cache. It's only then that the idea of turning this experience into an article hits me. So I close and reopen my browser and begin the process again - as documented above. Foolishly, if it had worked the second time I probably would have joined.

Now let's contrast my experience with attempting to join the IEEE with joining the National Space Society. Head over to the National Space Society home page. It's not a very pretty looking site from a graphic design stand point - not nearly as attractive as the IEEE web site. Now click the text link labeled "Join" in the left side bar. It takes you straight to a membership form. Wow, everything I need to do is there on one single page and it only took me one click to get there. Also I can tab from field to field without the page reloading every single time. And there at the bottom is a Submit Information button. I click it and get a confirm page thanking me for joining. It can't get any simpler than that.

The moral of the story is that computer.org lost out to nss.org on the form processing front because NSS made it so simple that even I could do it. Perhaps that's a benefit of having a web site created by volunteers. By way of public disclosure, I am a member of the NSS and was just (Oct 2007) made chairman of the newly formed NSS Web Oversight Committee. The task of our committee of volunteers is to redesign the NSS web site to make it more graphically appealing and to improve its usability.

As a business, your number one job is to keep the customer happy! Make sure that the processes that you establish for your customers to follow are clear, simple, and able to handle exceptions and you will make money.

Return to the Web Design section index.