E-Commerce Web page design rules

Source: Internet
Author: User
Keywords should navigate if

Web page design rules for E-commerce sites can also be applied to many non-commercial sites. Summarize the experience of Web page construction, Web design should follow the following five rules: The page is easy to read, easy to browse, easy to find, style layout consistent, the page fast download. In other words, your site should make your target customers easy to use. In order for your site to be appreciated by your target customers and can be licensed by the Site Directory editor, you must follow all these rules. The advantage of these rules is that they can be applied not only to your site directory submissions, but also to your target customers.

Rule one: page readable

Maybe your target users are using completely different computers, monitors, network connections, and browsers. In fact, no one knows exactly how a potential consumer can look at your site, they may use a laptop, may use a dial-up connection or a high-speed connection, and may use an Apple computer, so the site designer needs to provide as many platforms, browsers, and network speeds as possible. Therefore, as a general rule, before you submit your site to the main site directory, each item in the Web page needs to be legible and readable on both the main browser and the two computers. The following is a list of details about the readability of the page:

(1) Your site designer should not set the font size of your text too small or too large. If the site is designed specifically for visually impaired customers, the font size of the document should be adjusted accordingly.

(2) All the text in the picture should be legible and readable. The high contrast color, and the choice of typeface and typeface are very important for the readability of the picture.

(3) The color of the text is also very important, do not make the color of the background dilute the visual effects of the text, generally speaking, the dark text in a light-colored background is preferred.

(4) for easy or fast reading can be the content of the Web site design, and even two columns than a full page of visual effects much better.

(5) The use of words to be correct and appropriate, a grammatical confusion, the spelling of the Web site is not popular. For E-commerce sites also have to take into account motivational and attractive language.

(6) Animation should not move too fast, which will make your target customers can not read. If your target user has to cycle through three or more times to capture all the information, the animation is moving too fast.

(7) When your site design or redesign is in the template stage, try to use different browsers, different platforms, different network connection view. Note that IE6.0, IE7.0, and Firefox differ in their display of web pages, and note that widescreen notebooks and narrow screens, as well as the difference in resolution, are adaptive.

(8) The search HTML document must be readable and legible when the picture is open and the picture is closed. This means using contrasting colors when making HTML documents, background pictures, and text in pictures.

(9) Site designers should not use the background that makes your document blurry or the colors that make it difficult to read.

Rule number two: easy to navigate

"Easy browsing" means that your target customers will know where they are when they visit the site at any time. If they get lost, they should be able to look at the site map, help section, site search, or from any page to the homepage. This will let the viewer know where they are, where they want to go, and where they have been.

The Site Directory editor usually takes into account your target customers. If a professional Site Directory editor, usually an experienced network user, encounters a lot of difficulties when browsing your site, your target client will likely encounter the same problem when browsing your site. Clear navigation, clear direction, easy to use. Because people are accustomed to reading from left to right, from top to bottom, so the main navigation bar should be placed on the left side of the page, for a longer page, it is necessary to set a simple navigation at the bottom (as long as two is enough: the home page and the top of the page). After you've identified a pattern that you're satisfied with, it's best to apply this pattern to every page of the same site, so that the viewer knows how to find information.

The color of your text link should be familiar to your target customers. Blue underlined text usually marks a link that has not yet been accessed; purple or maroon underlined text usually marks a link that has already been visited. Use hypertext links or picture links to enable people to move or rewind freely on the site, rather than having them always use the forward or backward buttons on their browsers. The color of the linked text is best used by conventional (not accessible to blue, clicked in purple or maroon); The alt identifier in all pictures indicates the name or explanation of the picture, so that those users who are unwilling to load the picture automatically can understand the meaning of the picture; On each page, the previous page "next page" "Home" Back to subdirectories.

All of your hyperlinks should be clear to your target customers. Images such as browse buttons or file tabs should be clearly marked for easy reading. As the first rule of site design says, your site designer should choose the colors, backgrounds, textures, and special effects of your site's images to make it clear and readable for major browsers, computer screens, and platforms. Many site designers prefer not to underline text hyperlinks. If the site you are designing is for an experienced network user, the design technique will be fine as long as the hyperlink text is unique. However, if your target audience doesn't have a lot of network experience, it's best to underline the hypertext link below.

Rule three: Easy to find

The unique products, services, and information provided by the website should easily be found after your target user logs on to the site. In general, your target customers don't want to look around for information when they log on to your home page, and people want to browse through pages that directly contain the information they are looking for. If they cannot go directly to those pages that contain specific information, they are often reluctant to use seven or eight clicks to find information. If they have to click more than once, they may lose heart and then leave your site.

When your target customers find the page that contains the information they are looking for, they need to see the information "above the fold" or at the top of the screen. Even if people can't immediately see your product or service at the top of the screen, the search content they need to know is on that particular page. Because people don't necessarily scroll the pages to make sure that the information they're searching for is available on this page.

A frequently asked question (FAQs) Web page is an example of a site designer who has failed to make good use of the "above folded" strategy. For example, you put 10 questions on your FAQs Web page, and the information your target users are looking for is the answer to question 6. If you have a problem with an answer, it may be that 6 is not on the top need to pull down, which is easy to ignore, if you put the problem together, and then provide hyperlinks to jump to the answer, so that users can be at the first glance to find the content. All your FAQs pages should be arranged in such a format. This strategy is advantageous not only for those end customers, but also for the search engine friendly layout.

The top or tail should be related to the content, such as: "About Us" page or region, "contact Us" page or area, "address" page or area. The most likely place for potential consumers to find your contact information and your company's correct spelling check is the "About Us" page, so even if you provide contact information elsewhere, it's a good idea to put that information in the "About Us" section. In particular, when you put your contact information at the tail, many end users will not scroll to the bottom of the page they see to find information.

Rule four: Style layout consistent

The style and layout of the site should be consistent. Layout means the placement, navigation, picture, and white space on your site. This is where you place your text, your pictures, and your browsing content, the "real property" on your screen. The consistency of the layout design can help your target customers when they visit your site and make him feel comfortable doing business with you. Design means taking advantage of the special effects of your pictures, fonts, and styles, and the colors of your site. In the site design process, there are many aspects are duplicated. Each page in the web has the same font, style, and color that is used in the body text, hyperlinks, and headings.

If your site displays photos of the products you provide, the size of the photos should be small. Horizontal photos should be exactly the same size, and the vertical picture should be exactly the same size. If you use shadow effects in product photos, you should use shadow effects in all product photos. Pictures and text should not be randomly or arbitrarily placed on a Web page. Each item on the Web page should be visually linked to other items. Related items, such as the dominant navigation bar and the secondary navigation bar, should be put together so that they are considered to be clustered rather than unrelated items.

The visual contrast of the two navigation bars shows how they relate to each other visually. For example, the main navigation bar will be displayed in a special color at the top of the page, while the secondary nav bar will be different colors set on the left side of the screen, these color settings and the main navigation bar with good. The color of the dominant navigation bar button in the part of the site that the end customer is visiting will change. When the end user clicks the link, the secondary navigation bar of the dominant navigation bar, or the child navigation bar opens. The text in the child navigation bar repeats the text in the main navigation bar, further indicating that the navigation button on the left is a subset of the leading bar.

The control slice shows the Web page that the end customer is visiting. The main title shows the page the end user is visiting, and the subtitle emphasizes the main features of this part of the site. The pointed tip on the subtitle subtly prompts them to be hyperlinks.

The text links at the bottom of the page correspond to the leading navigation bar buttons, which indicate which pages the target customer has visited. The color of the hyperlink is similar to the default color of the browser, because it does not believe that the target customer is as proficient as the network as people who often work on the network. If the target customers get lost, or if they need to adjust their location, the page-switching picture can be linked to the home page and site map. This setting on the navigation bar is the same on every page.

Rule five: Page quick download

As we all know, page download speed is a key factor in the site's retention of visitors. If you can't open a Web page for 5 seconds, the average person will be impatient. Page fast download to ensure that customers can access the site as quickly as possible. We live in a high tempo era, no one is willing to wait, the Internet is no exception. Although the Internet speed has been a qualitative leap than a few years ago, but in fact the technical progress is faster, also can not catch up with people's request. So don't try to challenge your visitor's patience.

Why a Web page takes a long time to download, because you must first download some attachments, such as flash, programs, pictures shockwave or special effects, and so on. If you want to "glare" your site, suggest a maximum of one or two special effects, those dazzling pictures and icons will often distract visitors to the content of the site's attention, if the download speed of these pictures more slowly, it is likely that visitors can not wait for them to completely open the patience. Use more of the above content of the Web page is generally video class or game class pages, most of the pages do not belong to the "video game" category, so it is best to narrow your pages, especially the home page download time.

You should always remind yourself that the homepage of the website is like a billboard. When driving through a billboard, there is no time to read the detailed instructions above, it is impossible to appreciate the complexity of the design, advertising signs from the front of the flash, must be a moment to impress people. Online visitors are also "flashing through" to ensure that your home page is simple and fast, giving up all the data that significantly slows down the homepage.

The main way to keep the page download speed is to make the page simple, only the most important information on the home page, try to avoid the use of too large pictures, should avoid automatically downloading music or other multimedia files. This requires that the home page should not be larger than KB. Here are some of the principles that usually reduce your download time:

(1) Use Flash animations as little as possible: use animations only when the most important part of your site attracts attention. Even if you want to use animation, the amount of data in the animation is as small as possible.

(2) Follow the simple rules: you want your customers to notice the products, services, and information you provide on your site, rather than the exquisite design of your site.

(3) Product photos using small pictures, known as "thumbnails": in your product page, many small pictures of the gallery to download more than the whole picture faster. After your target customers are interested, give them a chance to see the big picture.

(4) To download faster, always create a separate, unique small picture from a large picture: All images should be resized in the image software, not in the HTML language.

(5) Use the same picture on multiple pages of your site as much as possible: the consistency of using pictures can improve the continuity of your presentation. For example, putting your logo on every page of your site is good for browsing and branding, and it can also help your target audience understand who they've been visiting. The logo image needs to be downloaded only once, because it will be stored in the browser's cache memory. When a visitor is browsing around your site, new pictures from each page need to be downloaded.

Download time is important not just to your target customers, but also to the visibility of search engines. When a search engine spider applies a Web page to your server, if the download time is too long, or if your server is unable to quickly submit the Web page to the spider, the search engine may not be adding the page to the index.

Understanding the diversity of consumers in the target audience is different from the download time that different consumers can tolerate. If you are an image design site or an online gaming site, your consumers are likely to wait for the download of your Web page to experience your creative resources. However, if you are selling machine parts to a busy manufacturer, the easy access to valuable information should be your primary concern.

These guidelines are interrelated and it is important to understand this. For example, if your home page is ranked first in a key search engine for your target keyword, people click on the link to visit your site. If your site designer puts a lot of pictures, animations, and text on your home page, causing the download to slow down, most people don't want to wait for the download. Therefore, if your site designer does not take into account the download time or other design rules, then the search engine to occupy a very good position is so wasted.

This digest has been published since the "Network Marketing-network business Success".

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.