eCommerce Website Design

eCommerce websites have their own unique character that is designed to lead the visitor to one simple task – make an online purchase.  A web designer needs to consider a variety of online selling principles while designing an eCommerce website.  In this article we will try to take a look at some of the major design aspects that you must have in an eCommerce website.

Many of you are probably already asking why eCommerce website design is different from any other website design.  They all need to be attractive,
well organized and use the right colors that fits the website spirit and so on. Your instincts are good.  However a close look at some successful eCommerce websites will reveal the conceptual differences that are typical in a successful eCommerce website.

An eCommerce website needs to follow certain selling principles:

• Give the user a pleasant experience during his online shopping.
• Make certain you provide sufficient information on who owns the website and why they should be trusted.
• The website must be easy to use. If it isn’t, the visitor will go to your competitor.

Those principles are not new.  We all know those basics from our day to day experiences in the mall, shopping center and every other market place that is waiting for us to open up our wallets.  The big challenge for a web designer is how to translate those conventional marketing techniques to the virtual world of the internet.  I’m sure you’ve all noticed that in most supermarkets the bread stand is placed at the far end of the building, yet you can smell the fresh bread at the entrance (sometimes they even use a special air duct to carry the smells).  That has been done deliberately.  Marketers use our sense of smell to draw us through the store where we are exposed to all sorts of tempting goodies as we go to get our loaf of bread.

How do you draw an imaginary path in a web page?  A path designed to lead the visitor to do what you want him to do…make an online purchase.  Unlike the supermarket our website has no smell.  In a website the distance from one point to the other is pretty much the same, so the exit is always right there.  In a website you can try to order the “shelf” in the way you think will best expose the visitor to many of your products, but there is always a chance that he will find a short cut to another page that can also be the way off your site.

As can be see, although putting your products on the web is much easier then renting space and opening a supermarket.  However, selling your products on the web can be difficult.

A good eCommerce website design will lead the visitor to the right page in one click or two at the most.  Sometime web designers will use techniques that would never be considered for non-eCommerce websites.  Everyone has seen at least one sales letter website.  On these web pages the only link is to the order form. Sales letters are not the most typical eCommerce website because they usually sell only one product.  That allows the web designer the ability to exaggerate the one click principle and make it an advantage.  All the facts about the product have been presented to the user is a smart way while every few lines he has the option to click on the order form.  If he is not yet convinced he will have the option to continue to read more facts and testimonials about the products.  Believe it or not, those sales letter websites are actually selling.

“What about online shops?”  Online shops have to deal with more then one product.  Of course, the greater number of products increases the complexity of the website.  Sophisticated eCommerce websites use a variety of personalization technologies in an effort to determine the best selection of products to offer to the visitor.  Personalization technologies are a major part of advanced eCommerce websites.  However this topic is beyond the scope of this article. The cleverness of an eCommerce website’s personalization technology has a major influence on its design.  The first to use such technology was Amazon.com who decided to push their client’s books to a visitor based on that visitor’s past orders combined with the statistics they had collected on all visitors used to predict what someone looking at a specific book might also be interested in reading.  Today the goal is to try to predict what to offer the user on his first visit as well.

An eCommerce web design is also about the layout.  One important aspect is where the user’s eyes look first when accessing a web page.  Lots of research has been done on this topic.  Most research showed that the middle left side area will attract the most attention followed by the center of the page.  By using these techniques web designers try to draw the “walking path” for the visitor’s eye, much like what was done at the supermarket.  An experienced eCommerce web designer will know how to create designs to meets those demands.

If you are about to open an eCommerce website or you are already own one, make sure you understand the web design principles for online selling.  Consider consulting with an experienced website designer preferably someone who has experience with eCommerce websites.

Good luck with your sales.

Source:
Warren Baker
http://articles.webdesigners123.com/ecommerce-website-design.php

Advertisement

Web Design Guidelines

The goal of most web designers is to create an attractive, easily accessible and functional website that will convince the visitor to do something.  Creating such a website requires good graphic design, easy and intuitive site navigation, logical site layout and good web copy.  The following suggestions are general web design guidelines.

Web Content

You want the visitor to see you as a knowledgeable information source and/or a reputable business.  Poor grammar and spelling will immediately reduce your credibility.  Remember that people use the internet to find information.  Whether you are selling your own product or recommending someone else’s products, you must first provide valuable information to the visitor or they will click away and find a website that gives them what they what they want.

Cross Browser Compatibility

There are at least a hundred different browsers in use. You must design your website to work properly in the most widely used browsers.  To do that you may not be able to use all of the really great special effects that are available because they may not be supported in most browsers.

Even though most web browsers are free, people do not necessary bother to upgrade to the latest versions.  The average surfer may not know how to upgrade their browser or have the attitude, “If it works, don’t fix it.”  Remember your visitor may have a PC, a MAC, a Linux box, a PDA or a cell phone and they all use different browsers.

Good web design requires your web pages to work in Microsoft Internet Explorer, Netscape, Firefox, Opera and Safari at a minimum.  Validating your HTML code will help but the final test is to view your website in different browsers running on different platforms.

Graphics and Photos

Web surfers are impatient and studies show that most people will click away if a webpage takes longer than 10 seconds to load.  Always optimize your photos and other graphic files to have as small a size as possible without sacrificing picture quality.

Always use the height and width attributes on the picture so the rest of the page can load while the graphic files is downloading.  Use the ALT HTML tag so people with graphics turned off and those using hand held devices know what the picture is supposed to be.

Background Colors

If you use anything other than white behind text, be sure to specify link colors otherwise the user’s browser defaults will determine what color the links are which can make them unreadable.

Multimedia

Multimedia is composed of flash movies, video clips, audio clips and background music.  Always use streaming media because it reduces download time.  Make sure the visitor can stop and start multimedia files or in the case of flash introductions, skip them if they want.  That way people with slow connections or devices that don’t support multimedia can ignore them.

Also, put any important information presented in multimedia in text as well so the visitor has access to that information without using multimedia.  If a plug-in is needed to use the multimedia, always provide a link to it so the user can install it.  Finally, always remember the 10-second rule for site loading when deciding to use multimedia.

Site Navigation

Site navigation should be simple and intuitive. Studies have shown if a visitor cannot access the information they want within three clicks, they will leave the site.  This is called the 3-click rule.  Every area of your website should be reachable within three clicks from anywhere else on the site.  If you use anything other than simple text links, make sure to test your navigation in all the major browsers.

Links

Periodically test all site links to be certain that they are valid.  Nothing chases a visitor off faster than broken links.  There are several free online services that will periodically check your links.

Frames

Avoid using frames, since they make it difficult to bookmark individual pages on your web site and you want people to bookmark pages so they can come back.

Summary

Good Web design is a combination of common sense and good planning.  Your site should be attractive and easy to use and most importantly provide the user with the information or services they want.

Source:
Warren Baker
http://articles.webdesigners123.com/web_design_guidelines.php

Using Colors On A Website

Choosing the right colors for your website is just as important as selecting graphics and content. This article discusses what factors to consider when selecting your website colors.

Colors have many effects on people. Certain colors can invoke specific emotions in people. Emotional reactions can affect the image of your company in the visitors mind and can have a major effect or your company’s “brand”.

If you doubt color evokes emotion, consider the phrases, “green eyed monster” “seeing red” or “in a black mood”. The green-eyed monster is a reference to jealousy, seeing red means a person is angry and a black mood refers to depression. People do associate colors with specific moods. Scientific texts have proven that different colors can make people happy, sad, relaxed, excited, angry or afraid.

Anything that can evoke those responses in people needs to be looked at carefully when designing your website. Colors tend to be classified as “neutral, “warm” or “cool”. So, let’s take a look at some of them.

Neutral Colors

Whites – Whites stand for purity and cleanliness. In eastern cultures white is the color of death while in western cultures in is the color of marriage and hope.

Grays – Grays exude reliability and conservatism. Shades of gray are one of the most popular colors for business attire.

Browns – Browns stand for the earth, home and family.

Blacks – Blacks tend to signify power, elegance and sophistication. In western cultures also stands for death.

Warm Colors

Reds – Reds are good for attracting attention. That is why they are frequently used in sales letters to emphasize specific points. Red symbolizes, anger, violence, lust, passion and can actually raise people’s blood pressure.

Yellows – Yellow can mean weakness or cowardice as well warmth and happiness.

Oranges – Orange is associated with fall harvesting and Halloween. It can also stimulate a person’s appetite.

Pinks – Pinks usually symbolize innocence, femininity and romance.

Cool Colors

Blue – Blue has a calming effect on people. It exudes intelligence and trust. It is a surprising that many financial and health care institutions use blue themes. Blue can also suppress appetite.

Green – While the green stands for jealousy, greed and inexperience, it also stands for money and wealth.

Purple – Purple tends to symbolize creativity. The darker shades were once reserved for royalty and the lighter shades are usually associated with romance.

Web Safe Colors

Vacuum tubes, LCD and Plasma screens all display colors differently. There are 216 colors that can be displayed on every type of monitor in every web browser and will look almost identical. These 216 are called web safe colors. If consistent color is important, you should only use web safe colors on your websites.

Color Schemes

Color schemes can be composed of a single color, complimentary colors or contrasting colors.

Single Color — Single color schemes uses several different shades and intensities of a single color on a white background. For example, if you want to use a red color scheme, you can use everything from the lightest pink to a red so dark it is almost black.

Complementary Colors – Complementary color schemes use two or more colors that look good together and create a pleasant blend that is appealing to most people. One color may be dominant and the other used to compliment it.

Contrasting Colors – Contrasting color schemes use two or more dominant colors to create an “eye grabbing effect”. For example, using a dark blue page background, a deep red frame around a white background text area with black text is a typical contrasting color scheme.

Web designers need to be careful when using contrasting colors because some combinations tend to “vibrate” such as red text on a blue background and can hurt some people’s eyes, while other combinations are just had to focus on. Other combinations “clash” and are unpleasant to look at.

General Color Guidelines

The following guidelines are suggestions that should make your web pages readable for everyone.

Text should be readable. Obviously black on white is the default choice but others are also good. White or Yellow or other light colors work on black or any other dark color background. But, Yellow, Green or Gray on white does not.

Use colors that are attractive and pleasing to the eye.

Select the colors that portray the image you want to give your visitors.

For consistent colors across different browsers, use web safe colors.

Do not use a normal color intensity images as a background behind text. It makes it difficult to read. If you use an image, use it as a faded watermark.

Colors should be uniform on all your web pages to create a “brand” for your site and let your visitors know they are still on your website.

When you come to designing your website, choose you color scheme just as carefully as you choose your graphics and content. The overall appearance will determine the impression the visitor gets of your company and can mean the difference between success and failure.

Source:
Warren Baker
http://articles.webdesigners123.com/using_colors_on_website.php

Three Ways to Give Your Blog the SEO Treatment

“Sometimes I hear the sound of crickets when I stumble across certain blogs written by small-business owners,” writes Samantha McCormick at the OrangeSoda blog.  “At first glance, the content is good, thorough, and up-to-date, but the page rank is 0 and there are a dozen signs leading me to believe that no one reads this blog.”

To accomplish the goals you set for your blog, you need a steady flow of online traffic.  To help you get it, McCormick offers optimization advice like this:

Include one of your top keywords in the title.  Your post about a “new store in Salem, Massachusetts” would better attract search engine attention, she argues, if you get more specific about the store and less specific about the location—for example, a “new candy store in Boston, Massachusetts.”  Also, don’t assume anyone knows who you are.  “Write each title as if your reader has never heard about your company before,” she advises.

Judiciously incorporate your keyword in the blog post.  If you use a keyword more than two or three times, it will start to seem unnatural.  “Four … is probably the maximum [number] of times you should mention a keyword,” she says.  “Anything over that will look like spam to search engines and to your readers.”

Optimize your images with alt text.  A search engine won’t know you have an image of a chocolate kiss if it sees Img_244.jpg, so change it to chocolate-kiss.jpg.  “Think of alt text as a keyword for your picture,” she explains.

The Point: Choose ’em and use ’em.  Once you start your blog optimization routine, stick to it.  A few choice keywords placed here and there can make all the difference.  “Don’t let that good content go to waste!” says McCormick.

Source: OrangeSoda.