Site Server - Easy to Buy E-Commerce Site Design Tips

  • Article

August 1999 

By Nadja Vol Ochs 

Introduction

The most important thing to remember when designing an electronic commerce site is to make it easy for your customers to make a purchase. I'm in the midst of designing an e-commerce site as I write this article, and I've learned several tips that will help you succeed in e-commerce site design.

Tip 1: Make It Easy to Buy

This tip may seem vague and ambiguous, but it truly is the most important recommendation. Put yourself in your customer's shoes and test your designs. Isolate issues that might block your users from making a successful purchase. Ask yourself questions, such as the following:

  • How many pages and clicks does it takes to make a purchase?

  • How much information do users have to fill out initially, versus when they make a second-time purchase? 

  • Can a quick purchase be made directly from the home page? 

  • Does the site provide clear instructions on how to store selected items before completing a transaction? 

  • How well does the site communicate with the user? 

  • Does the site acknowledge the users' actions and provide clear, concise feedback as users progress through the purchasing process? 

  • Can users collect multiple items before checking out?

Tip 2: Make a Strong First Impression

Your e-commerce home page must make a strong first impression. This is where users are grounded to your company and are persuaded to start shopping. It is extremely important to provide branding for your store. Next, it is important to provide a clear visual definition of your store's categories or departments. You can accomplish this through the use of tabs or within the navigation bar.

A search feature must also be prominent near the company branding or at the top and bottom of almost all pages. Consider promoting special sale products on the home page to encourage spontaneous purchases. Provide abstracts with links to stories about your products to provide educational information and added appeal.

Tip 3: Minimize Distractions: Advertising Isn't Always Necessary

You may want consider not providing other company's advertisements on your home page or in other places throughout the purchase process. Remember that the goal of your home page is to encourage shopping and purchasing. You don't want to deter or lose users by having them click on another company's advertisement.

If you want to advertise, feature your own products in a way that they can be added to the user's shopping basket. Ideally, those products would be tied into the personal information you have about the user, so a user would be more likely to purchase them—and they might be seen as an advantage to shopping at your site.

Keep the user focused on what your company offers—unless you have a complementary relationship with the other company. Recently, I noticed that https://www.expedia.com/default.asp and https://www.bn.com/ have a link to each other's storefronts from their respective home pages. This is a nice cross-partner advertisement strategy that encourages complementary commerce scenarios. For example, if I were to buy tickets for a honeymoon in Tahiti, I'd certainly be interested in purchasing a book on the South Pacific. Be smart about the advertising you put on your home page; don't leave it up to a random ad banner display.

Once your users have filled their baskets with goods and have clicked to check out, it is important to minimize distractions. Remove extraneous buttons and navigation elements that deter the user from completing the checkout process.

Tip 4: Make It Personal

Are you looking for a way to build strong rapport with your shoppers? Provide personalization for the user, after the user registers as a shopper or member. Use this information to provide a personalized greeting to your home page or various department pages.

Welcome Nadja, enjoy your shopping experience.

Provide a private place that requires a password where each user can check on their own past orders, order status, wish lists, gift certificates, and so forth.

I could not find design information on personalization. For more development information on personalization, visit https://www.15seconds.com/default.htm and https://www.siteserver.com/ . To get an in-depth understanding of personalization for Microsoft Site Server 3.0 Commerce Edition, read Site Server 3.0 Personalization and Membership by Rob Howard (ISBN 1861001940).

Tip 5: Avoid Long Instructions

If you need to include long instructions on how to use your site or about how to make a purchase, it is time to redesign! To complete a quick purchase, a user needs minimal instructions. Most users will not read long instructions, and may turn away in confusion.

The Web site at https://www.urbandecay.com/ employs a unique interface to portray the image and statement it makes with its products. I especially like this site, and found only one design recommendation for it. Webmasters might consider removing the lengthy instructions for how to add items to the basket. When I first used the site, I didn't read the directions—nor was it obvious that I was supposed to click on graphics such as this:

 

To add the item to my basket, the following would be much more effective:

 

Add to basket 

Tip 6: Provide Visual Clues to the User's Location

For stores that have multiple departments, it is important to create a sense of varying location. This can be accomplished by changing colors on the navigation bar or the background page, and by providing different titles with text or graphics.

The Web site https://www.etoys.com does a great job at providing visual color clues for each department. Notice the navigation bar colors and the background page color change for each department. This is a simple visual trick that can be added to a standard Web layout to encourage continuity and yet differentiate the departments of a site.

The following, https://www.bn.com , has a successful site for purchasing books, software, and magazines. Notice that this design places the departments at the top of the page. I recommend that they make more of a visual difference between these departments. Currently, only the title graphics change, and each department looks too much like the others.

Tip 7: Show Off Products

If at all possible, provide images of individual products. Process the images in three sizes: thumbnail, medium, and large. A thumbnail image is best used in a list of several products. At the individual product level, provide a medium size image, and the ability to click to view the enlarged version of the product. The larger view is not necessary, but worth considering if your product has details that are not reflected in the medium or thumbnail image.

The more details you can provide about the product the better. If you have a long page about the product, be sure to provide the option to purchase it or add it to your basket or cart from both the top and the bottom of the informational text.

Tip 8: Light on the Graphics

One way to keep each page light is to change all graphics that represent text into actual HTML text. Another consideration is to reduce the individual product-images file size. Most product images are continuous-tone photographs. Therefore, the product photographs should be saved as 24-bit JPEG. When saving JPEG files, experiment with the quality levels. For example, the low-quality setting in Photoshop will decrease the file size—and visually, the quality may be satisfactory.

A rule of thumb followed by one e-commerce site is to keep each page to a maximum size of 35K-50K. Another tip is to reuse the same graphics on different pages to save additional download time, encourage continuity, and increase aesthetics. For example, you might use a small thumbnail image to give a feel for a department on one page, and then on the department page, the same graphic is enlarged to the size of the background. Or vice versa: The larger image is scaled down to create a thumbnail image.

Tip 9: Encourage Spontaneous Purchases

This can be accomplished in various ways. If a product is mentioned on the home page, place product images and details, the sale price, and a direct link to purchase the item on your home page. In a news or feature article, include direct links to purchase products discussed within the article. Or on the side column, where advertisements for other companies would traditionally appear, create intimate, focused advertisements for your products, with a direct links to purchase the items from the advertisement.

Tip 10: Alternate Background Colors in Long Lists

One good visual trick to make a long tables of items easier to read is to alternate a light color background for each row or item. You can see an example of this if you search on an author's name at barnesandnoble.com. The search results return in alternate item background colors of gray and white. This technique may be scripted as an array in an Active Server Pages (ASP) file:

<% colr = array ("#FFFFFF","#CCCCCC") %>

The array is then called from the table cell:

<TD BGCOLOR="<%=colr(x)%>">

Tip 11: Allow Users to Collect Items

Provide a shopping basket or a place for your users to collect items before checking out. Never make your user fill out the lengthy payment, shipping, and other forms more than once in a transaction! At the product level, provide a link to check out and a link to add that product to the shopping cart while continuing to shop.

One storage feature that is currently becoming popular is called a wish list. This feature is similar to a shopping cart, but it does not provide purchasing features. Think of it as a place to store items as your customers are shopping. Perhaps when wish list items go on sale, your site can notify your customers.

More Tips

Read Mary Haggard's For $tarters columns on electronic commerce sites, including her usability article entitled, "Sure, You Built It—but They Have to Use It" ( https://msdn.microsoft.com/workshop/essentials/forstarters/starts092598.asp ).