 | ||
|
| ||
| ||
|
| ||
February 15, 1999
The following article was originally published in the Site Builder Network Magazine "Site Lights" column. (Now MSDN Online Voices "Design Discussion" column.)
Posted February 15, 1999 To be archived March 15, 1999
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 users from making a successful purchase. Ask questions, such as the following:
The e-commerce home page must make a strong first impression. This is where users are grounded to your company and persuaded to start shopping. It is first and foremost important to provide branding for your store. Next, it is important to provide a clear visual definition of your store's categories or departments. This can be accomplished with 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 consider not providing any advertisements on the 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.barnesandnoble.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 buy tickets for a honeymoon in Tahiti, I'm certainly going to be interested in purchasing a book on the South Pacific. Be smart about the advertising you put on the home page; don't leave it up to random ad banner display.
Once 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.
Looking for a way to build a 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 the 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 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, read Professional Site Server 3.0 Personalization and Membership by Rob Howard.
If you need to include long instructions on how to use the site or make a purchase, it is time to redesign! To complete a quick purchase, a user needs minimal-to-no instructions. Most users will not read long instructions, and May turn away in confusion.
The http://www.urbandecay.com/ Web site employs a unique interface to portray the image and statement it makes with its products. I love 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 to click on graphics such as this:
To add the item to the basket, this 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 http://www.etoys.com/ site 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.
barnesandnoble.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 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 photographs of individual products. Process the photos in three sizes: thumbnail, medium, and large. A thumbnail photo 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 photograph.
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 or add 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 are used for text into 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 as the background. Or vice versa: The larger image is scaled down with the image height and width attributes 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. 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 traditionally would go, 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 table 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)%>">
Provide a shopping basket or a place for users to collect items before checking out. Never make the 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 item-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 you are shopping. Perhaps when items in your wish list go on sale, the site can notify you.
Nadja Vol Ochs is the design consultant in Microsoft's Developer Relations Group.
Photo Credit: Russell Illig/PhotoDisc; Neil Beer/PhotoDisc
Did you find this material useful? Gripes? Compliments? Suggestions for other articles? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top