Ecommerce for WordPress

Okay, so you are asking yourself, isn’t WordPress a blogging software?

Yes, it is and blogging software is nothing more than a CMS that’s been set up to handle a certain type of website structure. For example online stores or Ecommerce website designs are managed by CMS systems that organize content into catalogues for online shopping carts.

Now you can use any kind of CMS to build a website; it’s a good idea to find something that fits as closely as possible to what you want to do, so there is as little customization as possible.

The thing about WordPress is that its design is simple and flexible.

Most websites have certain things in common.

Most websites have footer, header, navigation, and other things that allows WordPress to pull that data from the same location for each website. Now, your footer may be a totally different size, look and feel from mine but WordPress doesn’t care about that. They just know to put the header somewhere on that page.

So…when a visitor first lands on a WordPress website, WordPress will go and get her directions. Those directions for WordPress come from the template. WordPress reads the direction to lean what she needs to get and where she needs to put it.

Depending on how complicated the website is there could be lots of chunks to find, move and install. All chunks are stored in the database; if the chunk is not stored in the database then direction on where that chunk is stored will be in the database.

Now WordPress assembles all the chunks according to the template’s instructions and you see the results of those instructions in your browser. The best part, is all this happens in a split second.

How it Saves You Time

Many years ago Geeks on Steroids was built in html. It’s all we knew how to use. We had a little over 200 pages and you would have to sit and copy every piece of code onto every page, if you wanted to add a new stat counter onto the site.

With WordPress I can add to one template file and change anything I want on the entire site. By separating the design from the content WordPress makes design changes quick, easy and painless.

The part that I call WordPress or the brain is separated from the files that actually do the assembling and managing. This means that WordPress can be easily update. Software of any kind has to be constantly changing and adapting to the ever changing internet rather it be for adding new features, security or just to make it more efficient. If you had to completely redo your theme every time WordPress needed to be updated it would be a waste of time.

WordPress has three separate parts the brain, the theme, and the content. Each of these can be tweaked, updated, or replaced, independently. And if that isn’t enough you have a fourth separate structure which is plugins.

A lot of small business owners misunderstand the need to build trust with their websites. There are many elements to building trust into an online shopping experience, and more in the checkout than anywhere else in the customer’s journey. Rather it will be the layout, colors or just poor site performance, anything that causes the customer to think you are unreliable will erode trust from the start. During checkout customers need reassurance that their purchase will actually be delivered and their credit card details remain safe.

Suspicion and distrust of the site can be caused by smallest uncertainty or poorly thought-out interaction. Many consumers will leave a site rather than continue a transaction with a company they no longer trust. According to research, nearly half of consumers have terminated and or abandon their shopping cart due to fears about online security and 76% claim identity theft is a major concern for them.

Reassurance throughout the checkout process as well as good site performance, clear navigation and messaging as well as no errors or problems in the checkout process are vital for companies trying to make it online.

A couple years ago I had a guy offer to pay me, to optimize his shopping cart. The idea was, if I could do something to his shopping cart that would increase the amount of money he was making, he would pay me $1000. But if there was no increase in sales, then he didn’t have to pay me anything.

At the time I had some ideas I wanted to test out, so this would give me the opportunity to test those ideas on a high traffic website.  So…I agreed and started doing some testing and implementing some ideas.

The first thing we did was to change the color of the shopping cart button from red to blue. We were then looking at some other changes, when the phone rang, it was the client and he was sending the money. Sales had increased; he was happy and wanted to pay. There was no need to do anything else to the shopping cart. Changing something as simple as the color of the checkout button, making it a little bigger, and giving it a little more shine was all that was needed to cause a significant increase in conversion. Now I made a thousand bucks, just for changing the color of the checkout button, but the client has been making that much every week since the change has been made, from that same change.

He never asked what I did, or how we did it. I took the thousand dollars and was happy about the easy money I made.

Submit buttons play a key role in the entire checkout process. Technically, they submit the information entered in the forms by the customer to the Web server for processing and fulfillment. From a customer experience point of view, this is the call to action that drives the customer towards the checkout completion.

How do we design a good submit button?

Make it big, shiny and make it ask the customer to click it!

More specifically, submit buttons must be;

1. They must standout, visually, from the rest of the page and draw the customer’s attention to them.
2. They must be isolated, no other buttons should be around these buttons nor there any type of clickable link or button around them.
3. They should be visually consistent throughout the checkout, creating a pattern in the customer’s mind, so they know what to look for.

A useful way to check out is to look at the checkout page when it’s blurred. This stops the content of the page from distracting attention away from the visual design.

There remains however, several usability challenges with submit button. The main one being labeling and positioning. While the design of the submit button is one of the few aspects of checkout design where we do not have established best practice, we can highlight bad practices that we should avoid.

I was making a purchase online yesterday and kept getting an error message, that my first name was incorrect. My first name is Luz my middle name is Yaneth but I go by Janeth. I had to use my middle name as my first name because this shopping cart refused to allow me to have a 3 letter first name.

It’s difficult enough trying to make a purchase online without having stupid shopping cart errors popping up all over the place. More so when the errors are unnecessary and downright stupid. For example, I’ve seen shopping cart software give an error because the phone number had spaces in it. I get a big red error message that there is a problem with the phone number, it doesn’t tell me what the problem is but after playing around with it for a couple minutes I have to figure out on my own that the phone number should not have any spaces.

Come on people!

It’s not difficult to remove spaces from a telephone number. Why blame the customer when you didn’t even tell me what you wanted?

But don’t worry, you’re not alone.

I’ve seen spaces being left in the credit card numbers being rejected, spaces in the phone number being rejected, and even phone numbers without a spaces being rejected.

The rules should be to let the customer put their information in the way they want, than use your e-commerce system to show the data the way you want.

If the customer makes an error during checkout it must first be made clear that an error has been detected. Then the location of the error should be highlighted in red on the form. This is to make sure that all aspects of the error is being communicated to the customer.

There should be a warning at the top of the page indicating something is wrong on the form and another message next to the form field containing the era. One or both of these messages should indicate the nature of the era and what needs to be done to rectify it.

I have had so much fun talking about shopping carts that I hate to stop. My last post talked about labels and designs that are able to make your shopping cart look less complicated and more inviting. Of course I am talking about the worst part of buying something online which is filling out the forms, you know with your contact information, whenever you make a purchase online.

There are actually three ways of aligning labels within the form fields. Eye tracking studies, which have been done on customers completing these different layouts, show a big difference in how people react to different forms. Top aligned labels are by far the easiest for customers to complete; this is because they focus on both the label and the form field with a single eye movement. Both right and left aligned labels require eye movement back and forth between the label and the form fields associated with them. However right aligned labels do require fewer such eye movement’s versus the left aligned labels.

So top aligned labels take the least amount of time and effort but that’s not all good news. The gap between the label and the forms field must be noticeably smaller than the gap between the label and the form field above it. As a result, more than twice as much vertical screen space is needed for each form field as would be needed for right aligned built. This causes the form to be longer.

So my conclusion is that short forms with a few form fields should be top aligned labels but longer forms should have right aligned labels.