EBizInsider

Archives for the ‘Programming’ Category

In this month’s article, I will discuss more tips to avoid Checkout abandonment. I also encourage you to join the eBizInsider forums which contain a wealth of knowledge.

Let’s split the checkout process into two distinct steps. The first step is a shopping cart page where the consumer adds products to the cart. The second step is the rest of the checkout process including the shipping and billing page, order review and confirmation. The largest percentage of abandonment occurs on the shopping cart page. There are steps you can take and things to avoid during this checkout step to make the experience easy for your customers and profitable for you.

Single Page vs. Multi Page Checkout

Single Page checkout is most likely two or more pages in total, one page displays your cart and all the other checkout information, including shipping and billing information on this single page, and the second page would be the confirmation page. Some checkouts allow customers to review the content before submitting their order. Multi-page checkout includes a cart, checkout pages and a confirmation page. Each option offers benefits and drawbacks depending on your store.

Single page:

• Single page is truly not a single page checkout but most likely two pages minimum including the confirmation page. It is now possible to display everything on one page without reloading the entire page.

• Single page checkout has been gaining popularity because it reduces the number of steps for customers to complete an order.

• Customers who frequently shop online may benefit from the speed of a one page checkout.

• One page checkout makes for a longer page which leads to excessive scrolling. This can cause shoppers to miss fields required to checkout and lead to an unpleasant shopping experience.

• If there is no easy access provided for your customer to get back in the store and shop for more products, single page checkouts might decrease the overall size of your order.

Multi-page:

• Multi-page checkout is a more traditional and familiar checkout model for most customers. If multi-page checkout is not designed properly, it leads to customer confusion and abandonment. Ideal multi-page checkout should not be any more than 4 steps starting from the shopping cart to the confirmation page.

• Here is an ideal flow for multi-page checkout

• Shopping Cart > Shipping and Billing > Order Review [Optional] > Confirmation Page

• It’s easier for customers to have Shipping and Billing combined on one page. Let your customer choose the shipping and billing address to be the same so they do not have to re-type the same information during checkout.

• Order review helps build customer confidence. It allows customers to review information before submitting their order. This allows a comfort level, especially in the case of large orders. Not including an order review takes a step off the checkout process but can lead to increased cancellations if the customer expected a review page to be shown before confirmation. Decide which works best for your website.

My advice is to skip the cart page altogether and let customers add a product to the cart from the category or product page and view all cart related information on these pages. This feature is called, variously, Mini Cart, Persistent Cart or Floating Cart. This feature reduces a step in the checkout and improves the shopping experience. This feature also keeps customers on their current page and allows them to surf and add more products in their shopping cart. When they decide to check out they will be sent directly to the Shipping and Billing page, skipping the shopping cart page altogether. The primary goal is to improve the customer experience, but it also leads to larger orders because of the seamless shopping experience. Research shows it lowers abandonment by as much as 20%.

Account Registration

I have seen websites asking for account registration before I have decided to check out or see the shipping costs. This is a big turn-off for customers. This step should always be optional. Customers will not mind registering on your website once they trust you. When asking customers to register clearly, display how registration will benefit them and they’ll be less hesitant.

Offering your customer a reason to register generates customer information and repeat business, which statistics show convert at higher rates. To review:

• Registration should always be optional

• Show your customer benefits of registering, not limited to an easy way to check out

• Register customers after the purchase unobtrusively and without detouring the customer from check out

You might wonder why, if the big sites do this, that I suggest not doing it. Sadly, if you can’t compete with the big guys at eye-level, then you can’t afford to apply their standards. They have the benefit of
brand recognition.

Secure Pages and Warnings

Security-conscious buyers may amount to 30% of total users on your website. Always test your checkout pages to make sure they’re using secure channels to transmit data and there are no errors or warnings displayed in your checkout. Customers who see security warnings often become lost customers. When you install third party tracking scripts, always install the secure version of the scripts on your checkout pages. You can also display secure icons on the checkout pages that will add customer confidence.

Error Handling

Customers often make mistakes while filling out checkout pages and the difference between successful conversion and abandonment could be as simple as how you handle the errors. Display in a polite and clear way what customers missed and help them complete the checkout. Below are some approaches:

• Highlight the fields that were incorrect or missed by changing the background color of the incorrect fields to point your customer in the proper direction

• Hide or gray out the fields that were entered correctly, or display only the fields that were missed or incorrect

• Display error messages for specific fields missed instead of generic messages

Checkout Page Design

One of the main reasons for checkout abandonment was because customers found the Checkout process to be too confusing. Checkout pages should be clean and easy to understand, leading your customer a step closer to checkout by avoiding clutter on the page. Remove unnecessary navigation from the checkout page to block an exit path, but provide all the required links to your policies and contact information in case the customer needs to review it before purchase.

Checkout pages should be designed so customers can see where they are in the checkout process. A progress indicator should always be visible, like the image below. You know where you are and how many steps until you’re finished.

Another area that checkout design should emphasize is buttons on the page. You should have the button designed so that button to the next step of the checkout is more emphasized than the one that will take you back out of checkout. Here is a an example of the two buttons on the checkout page. Notice the “Cancel” button is darker and grayed out while the “Submit Order” button is bolder and red colored so that your eyes get drawn toward the “Submit Order” button rather than the “Cancel” button. You can even experiment by making the “Cancel” button smaller and light.

Shipping Methods and Payment Options

Providing different methods of payment like Credit Cards, PayPal, Bill Me Later, etc. will give your customers the freedom to choose the payment methods, which in return would increase conversion. Likewise, providing a variety of shipping methods for your customer to choose from will help them choose the method best suited for their needs.

Real-time Credit Card Verification

Credit cards should be verified in real-time, not after the sale is completed. If you verify manually and there is a problem, you take the chance of turning off the customer and losing the sale.

User Opinion

Ask family and friends to shop on your website and provide their opinions of the checkout process. Was it easy, or were there stages where they had to rethink before taking the next step? Based on the feedback, you can tweak it.

Conclusion

Tweaking and customizing your checkout process to meet customer expectations should be continuous. With newer tools and technology there are always new ways to provide your customer with a seamless shopping experience.

Combat the Clutter and Debunk the Junk!

It’s been months since your New Year’s Resolutions. Are you one of millions who resolved to get more organized? Any progress? Relax: Spring Cleaning time is here!

In e-commerce lingo, Spring Cleaning means clearing the clutter from your website. We’ll review common problems and solutions. Best of all – no nasty chemicals, latex gloves or trash bags!

1. Can Users Understand Your Navigation?
Half of website visitors will use the search box to find a product. The other half will use navigation. Those who point and click while shopping could get frustrated if your navigation is difficult to follow. Examine your left hand navigation menu. Are there too many categories? When visitors click on a category page, are they taken to one subsection page and then another? If visitors have to click on more than one or two links to get to the item page they want, you risk losing them.

To Clean This Up:
Condense your main categories. For example, if you are selling computers, your menu should say “Desktop,” “Laptops,” “Accessories,” and other parent categories rather than, “Dell Laptops,” “Gateway Laptops,” “HP Laptops” in the main navigation. Keep your main categories within your menu and use features like Cascading Menus or Expanding Navigation to make finding the section pages easier. An easier shopping experience leads to better conversions, higher orders and more repeat business.

2. How Long Are Your Item Pages?
On too many websites the item pages go on and on… while this information is helpful and relevant, it can be messy. Users may get tired of scrolling to get the information they need. Big blocks of text often hide pertinent information. Big selling points could be missed and a sale could be lost. If your item pages require lots of scrolling, organize them better.

To Clean This Up:
The Tabbed Product Display can make a huge difference on your item page. With the Tabbed Product Display, you can nestle the pertinent information in an organized manner. The visitor can click on each tab to find what he or she wants and then click on the next tab for more information. Only one tab is showed at a time. This is valuable in vertical industries like electronics where there may be numerous specs, instructions, etc. Examples of tab titles could be Description, Directions, Ingredients, Care Instructions, Warranty Information, Sizing Chart, Specs, etc. You can also put downloadable specs or product reviews within a tab or sell corresponding accessories.

3. Are there too many Featured Items on Your Homepage?
The Featured Items section on some websites contains dozens of items to scroll through–on the homepage! While featuring items on the homepage are a call to action, half of internet shoppers use the search box and the other half use navigation. Few scroll through your homepage to make a purchase. A crowded homepage is not only distracting, but defeats the purpose of making certain items appear special.

To Clean This Up:
Simply limit the number of item IDs displayed on your homepage. Solid Cactus offers a simple feature called Randomly Displayed Best Sellers that will do this for you.

4. Are You TOO Animated?
In e-commerce, there are places for flash and animation, however too much of it is distracting. You want people to land on your site and know exactly where to go and what to do to get to that “add to cart” button. If the homepage is cluttered with flashing banners and graphics going down the entire right hand column (we see this a lot!), your visitors will become distracted, if not annoyed. You have less than ten seconds to make a first impression. Limit the flashy graphics.

To Clean This Up:
Consider a Randomly Displayed Graphic option. You can still show special offers such as free shipping, money back guarantee, etc. Simply reserve one spot on your site and have the messages rotate. Incorporate some of these store-wide benefits into your header to keep it top of mind and on every page.

Clear the clutter from your website and your visitors will thank you the best possible way—by becoming customers.

When Google launched Google Apps in August 2006, it was a revolutionary solution for small business. Apps ties together document management, calendaring and e-mail powered by Google’s powerful Gmail system, yet the information Google provides is fairly sparse. Here’s how to integrate your Google Apps to improve productivity.

Choosing an Apps Package
Google offers standard and premium versions of their apps package. The premium version costs $50 per year per user and each user has 25Gb of storage (versus 6Gb). The package allows conference room and resource scheduling, dual delivery (in case you have another mail server), allows you to migrate your current e-mail into Gmail and connects your current enterprise network with Google Apps via a special API. You can also turn off the adwords showing up on your e-mail accounts if you use the premium version. If you’re currently using standard Yahoo! Mail, Hotmail, etc. and have only a few users on your account, start with the standard package and upgrade later.

Domain Integration
Integrating your Google Apps into your domain is simple. Create a CNAME record in your domain or upload a text file to the root of your domain. For website operators who don’t have access to upload files to their root directory (such as on the Yahoo! Store platform), use the control panel’s advanced settings on the site’s domain. This stops unscrupulous competitors from sending e-mail on your behalf.

Account Setup and E-mail
First, set up an administrator account (like admin@ystore.com). Use this to create other accounts and/or designate other administrators. Set up accounts for each e-mail user and also set up e-mail aliases and lists.

Use an alias if the same user may receive several different e-mails. If Joe is going to receive e-mail for sales and customer service then you might create an account for joe@ystore.com and add aliases for sales@ystore.com and service@ystore.com).

If you have an e-mail address where multiple people must receive messages, use lists. You can also have non-domain e-mails on each list. BE CAREFUL whom you put on lists, because messages sent to e-mail lists on your account are not moderated. I wouldn’t, for example, create a list for dropshippers@ystore.com. If spammers learn that, you’ll be responsible for all your drop shippers getting spam. Not good. (FYI: The “premium” edition integrates Postini’s customizable junk mail filtering system.)

Google Documents Feature
Google Apps integrates Google Docs pretty flawlessly. You can create documents, spreadsheets and presentations and share them within your domain and outside. You also can create files in Microsoft Word, Excel, or Powerpoint and easily convert them to share on Docs. You can set files to be read-only or changeable by other users. Docs will create a changelog, so you can go back in time and show revisions by others. Great for collaboration.

Google Calendar
Google Apps Calendaring feature allows you to manage your time online, as well as coordinate meetings and events with team members. You can schedule a meeting and see the availability of others. Calendar will also notify you of upcoming appointments by sending reminders to your mobile phone via SMS/Text Message.

Integrating with Software
E-mail: Google Apps e-mail incorporates with most e-mail programs (like Outlook and Thunderbird) via an IMAP or a POP3 connection.
Docs: With Google Docs, it is not directly possible to sync, but DocSyncer (https://www.docsyncer.com/) will do that job nicely. It’s free (for now).
Calendar: With Google Calendar, you can use GSyncIt (http://www.daveswebsite.com/software/gsync/) to connect your Outlook and Google Calendar. You can also use gCalSync (http://www.gcalsync.com/) to sync your PDA/Mobile phone’s calendar.

Summing Up
Google Apps may or may not be for you. If you are using a large enterprise network, the seamless integration of servers for e-mail, documents, and scheduling may be better. However, it will cost you a couple thousand dollars to install and maintain and be limited to your network. It will also take maintenance time and requires intermediate server administration skills. Google Apps takes a bit of getting used to and doesn’t have as many bells and whistles, but the price is extremely competitive.

Google Apps can be accessed using almost any Internet-enabled computer, using any modern operating system, anywhere, including many web-enabled PDAs.

---

By: John W. Dawe johnd@ebizinsider.com

Why should you use heading tags and what exactly are they for? — Heading Tags have been around since the very beginning of HTML. Their semantic value has always been present, but only recently did it become an important device for driving website traffic and assisting website navigation.

What Are Heading Tags — Heading Tags are valid HTML code that help structurally organize your website content into meaningful sections. There are currently only six levels of Headings: H1 through H6. H1 is used for the primary headline of the article within a section or page. H6 is merely a sub-section about 5 levels beneath the main headline of the article. It is important to note that Heading Tags should never be used as design devices. Often Website Browser makers will make the H1 tag gargantuan and bold to assert the headline�s importance. The true value of the H1 tag is in its default meaning. The presentation of the H1 tag is only beneficial during the design phase and in relation to the overall design layout.

Recently, Heading Tags have become a navigational device that facilitates website browsing. Modern Website Browsers, accessibility-focused Website Browsers and Online Screen Readers are built to recognize Heading Tags as meaningful headlines and allow the site visitor to quickly skim over each heading on a long page in order to find the article they seek.

Perhaps most important, Heading Tags have quickly become a crucial Search Engine Optimization device. Search Engines have always been focused on delivering the most relevant content to their users. A search engine has no way of determining the most relevant article or content when comparing similar text from one article to the next. When the Search Engine is able to compare a succinct �overview� of that article, that is the headline, the relevance becomes clear. By stating the headline of an article, Search Engines are able to narrow down search results and offer your site�s contents to the appropriate visitor.

How to Use Heading Tags — There are many opinions on the proper use of headings on a website. You can review books, websites, and blogs and still not be 100% sure of the correct use of Heading Tags. That is primarily because their proper use is quickly summarized by the World Wide Web Consortium (www.w3c.org) as such: �A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.� Reference: http://www.w3.org/TR/html401/struct/global.html#h-7.5.5.

This explanation of a Heading Tag is purposefully simple so that developers and content managers have flexibility when organizing their content.

One way of using Heading Tags is to think of them in the context of newspaper design.

Newspapers usually draw attention to a story with an easily understandable headline. This headline would be your H1 tag. The page of the newspaper may have sub-sections under the main story to help support the main story. These would be your H2-H6 tags. Here�s where it gets a bit more complicated. Newspapers will very rarely feature only one article on the front page. There will often be auxiliary articles of lesser importance (but still attention-worthy) on the front page. This is done in order to use as much available page space as possible. The main headline for these lesser articles would still technically be H1 tags. Remember that the Heading Tags are about meaning and not presentation. The presentation is an added layer that occurs later in the content delivery process.

One Heading Per Page or Multiple? — Obviously, the web is not bound by the same limitations as a printed newspaper. Why would anyone cram so many articles onto a homepage when additional pages are readily available and better yet, free? If you have 3 separate articles and one of them has sub-sections, it would seem obvious that using 3 H1 tags and one H2 beneath it would be acceptable. Ask 3 �experts� and you might hear 3 different opinions on the �proper� use of Heading Tags for this scenario. The �best practice� and �standard� of Heading Tags use is in the eye of the user. We�ll leave it at this: your content should dictate your use of Heading Tags. Until a standard is in place that strictly defines the proper method of organizing your content, your website�s success will have the final say in what is the best practice.

Should Headings Be Used for Navigation? — It�s a new source of debate: should you use Heading Tags for your Navigation bar? Logically, A Table of Contents or Navigation area could be seen as sections but how exactly would the navigation section relate to the overall article? Technically it wouldn�t. A larger concern is that if you structure your pages with the navigation area as a section, with a heading, you would most likely want to hide the heading from view on your website. This tactic of �cloaking� text onscreen could be seen as a black-hat SEO technique and you could be penalized for it. There is currently no right or wrong answer, but I would lean away from assigning Navigation as a section with a heading.

What Not to Do! — Jumping back and forth with what you can do but might not want to do can be maddening. It is significantly easier to tell you how not to use an H1 tag.

You may be tempted to us the H1 tags throughout your website in order to fool a search engine into associating keywords from your body copy. This means that you are dumping in every keyword you know in an attempt to get a better page rank for your product. Never, I repeat never do this. You will eventually be caught and your page rank or possibly site rank will suffer. Remember, headings should be tied to stories or sections beneath them. If you need to emphasize a keyword, use the “em” tag for emphasis or “strong” for more emphasis.

Don�t skip around. This isn�t an unbreakable rule but there is no point in moving from an H1 tag to an H3 tag. The point of Heading Tags is their meaning. If you only have one headline and one subheading on your page, your second tag really should be H2.

Don�t use Heading Tags to make your page text large/small/bold. Heading tags are all about structure and meaning, not aesthetics.

Don�t embed HTML Headings within other HTML Headings. The proper use of an H1-H6 tag, per the W3C specification is to have text or �inline� elements within the tag. This means no paragraphs “p”, block quotes “blockquote”, block containers “div”, or other block level elements.

Don�t place your company name and/or logo in the H1 tag. This is a common mistake when using Heading Tags. If your homepage is focused mainly on your company name and tagline, using an H1 could be acceptable. It all comes down to what you are trying to say to your visitors. Imagine a newspaper with a headline that only reads �NEW YORK TIMES September 5th, 2007.� You see the point.

Where Do We Go From Here? — The Web is ever-growing and the Standards that code purists and Search Engines cling to are changing. It�s no exaggeration to say that by the time you read this, a �better� method for organizing and using Heading Tags will be in hot debate. The one constant is the purpose behind the Heading Tags. By using Heading Tags you are guaranteeing that your articles and content will be organized and readily understood by web technologies today and probably tomorrow as well.

---

Goodies — Read more about the standards driving the web today at this link. W3C Spec This handy tool will show you if your site is well structured and offers a formatted outline view of the content!this link.