Nadja Vol Ochs
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.
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:
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.
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 http://www.expedia.com and http://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.
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 http://www.15seconds.com and http://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).
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 http://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:
(No explanatory text with graphic)
To add the item to my basket, the following would be much more effective:
Add to basket
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 http://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, http://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.
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.
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.
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.
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 http://www.bn.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)%>">
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.
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" (http://msdn.microsoft.com/workshop/essentials/forstarters/starts092598.asp).
Information in this document, including URL and other Internet web site references, is subject to change without notice. The entire risk of the use or the results of the use of this resource kit remains with the user. This resource kit is not supported and is provided as is without warranty of any kind, either express or implied. The example companies, organizations, products, people and events depicted herein are fictitious. No association with any real company, organization, product, person or event is intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Microsoft Corporation.
Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property.
© 1999-2000 Microsoft Corporation. All rights reserved.
Microsoft, Windows and Windows NT are either registered trademarks or trademarks of Microsoft Corporation in the U.S.A. and/or other countries/regions.
The names of actual companies and products mentioned herein may be the trademarks of their respective owners.