Content Design for business-to-business sites: page design to meet user needs and habits

Article Description: How to do a good job of business-to-business Web page content design to retain users.

For business-to-business Web site design, you may consider the page color, navigation bar, button, title bar design, content design may often be overlooked. But if the content is poorly designed, you may be able to destroy all your designs. For example, how to make content have primary and secondary points, the level of sense, so that content does not look too messy, too much, so that users do not want to continue reading, and quickly leave the site, can not retain users to continue to visit.

As I said in the previous chapters of this study, always remember that the user does not have a clear reading content before the scan instead of reading, in the navigation page, users are happy to scan a sentence of the content, for large areas without focus of content, impatient, we must provide on the Web page both short and have a certain visual focus of content. This focus can attract the attention of the users, so that when they see their favorite content, take further action, click on the link to browse the details, or see more content, let the user stay, if we do not differentiate the focus, it is difficult to let users quickly find the focus of the content he is looking for, especially for new users, the first impression is important.

Understand the user browsing the page when the needs and behavior, in the page design to meet the needs of users and habits, there are those ways to highlight the focus of the content? Commonly used: text bold, text with pictures, text color change, plus guidance, text become big, highlighted part of more than four weeks more blank, add small icons or buttons and other methods, can highlight the focus content. Here's a brief explanation.

1 General standard for the design of headline and highlight content

Visitors come to the site and try to find out what they need. Again, users are not necessarily reading, they are here to do what they want to do, each person's purpose is not necessarily the same, the site to save their time and highlight the quality of content to attract the attention of each user, so that they are more convenient in a few seconds to scan the entire page. Users can only scan and discover what they want in a matter of seconds before they continue to stay on your site for a longer period of time. So for the home page of the Business-to-business Web site, the first level of the homepage and other navigation pages, the focus content is the recommended content title, information classification name, information pictures and several other aspects. There are many ways to make the focus more prominent, as explained in detail below.

(1) Bold text

No matter what content, as long as we will be a small part of the content of bold, will most not bold, then the bold content will be very prominent, this is commonly used to create focus content method. On a page we see a lot of bold text, these bold text will be the focus of a part of the content, the recommended link content title, the main category name and so on often used. This is the main way to create focus content when designing a page.

(2) font size becomes larger

This method is the same as the text, which belongs to the design focus content of the common methods, for the most important content, is usually both bold, and the size of the larger. The same is the recommended link content title, the main category name, etc. often used.

(3) Text change color

General font size, font bold, but also with the change in color at the same time, more prominent, but the change in color will appear in some of the highlights of the content, only to change color, not bold, do not change large fonts.

Figure (69) Alibaba Product List page screenshot

As shown in figure (69), the first product name, is the most important, the user will be by name to see whether they are interested in products, so Ali's designers adopted the most prominent approach, both variable color, and increase the font, but also bold. Company name is the second need to highlight, here only the use of variable color, if it is bold, it will make the page looks very tired, the outstanding content is too much, there is no outstanding. At the same time the title below for the product guidance, the product parameters are expressed, when the visitor through the scan to a product interest, may further look at the product introduction, is scanned to the content of interest after the second step of action, so on the page, to weaken, the designer adopted a gray, as well as the region, the amount of the order is gray. Search out products are very similar, the price of the comparison becomes very important, so the price used by the viewer's eye the most concerned about the color: red. As I said in the previous article, to study the design of E-commerce website, Alibaba is the most important research object.

(4) Text with pictures

In order to highlight a content, we often match a picture, to attract the user's eyeball, of course, sometimes this content itself contains pictures, but more often we will be with an icon, buttons, small pictures, in order to highlight this content, and the surrounding content to distinguish.

(5) Leave blank around

In order to highlight a content, we often use this content to leave the surrounding white, which is also a way to highlight the content, this method is often with bold, font size, change color and so on together.

(6) To add a guide to the content

Plus the method of reading, in addition to allow users to increase the emphasis on the content of more understanding, attract users to click, but also visually let users feel that this content than other information accounted for more space, the habit that this information more important, highlighting this part of the content.

2 general standard for content link design

Site content links to comply with user habits, so that users look like a link, want to click. Link design is also one of the biggest differences between web design and graphic design. General designers can handle the link, but there are still some sites in this area often make mistakes, perhaps readers feel that these errors are too low, but according to some of the bad websites I have seen, they have the following problems in link design.

(1) Important link put on the picture

Most of the site links should use text, especially the content of the link, as far as possible to reduce the link to the picture, not only for search engine optimization disadvantage, and users use more accustomed to point text links.

(2) The mouse on the link when the text color unchanged

Mouse on the link when the text color change is a customary use, almost all mainstream web sites, when the mouse through the link, will change color, the purpose is to let users know more clearly, he is ready to click on the specific content. If the link is displayed without underlining, the mouse must be underlined after it is placed.

(3) The line spacing between link text is too small to look tired

Links and links, to have a certain line spacing, general font size between the 12px-13px, the line spacing between 25-30 pixels, line spacing is too high, too rough, spacing is too low, looks too tired, these must conform to the standard, the usual lines are: 150%.

(4) The background color of the link is very deep

General navigation page link background is white, in order to make it look not tired or beautiful, you can use a light gray background, or a very light other colors as background, background color can not read the link content caused by visual noise, interference with the user's view.

3 website content picture Design general Standard

In the website navigation page, the picture divides into two kinds of situations, as in the "Business-to-business Industry portal Design Research Report", a situation is the picture as a text embellishment, so that the text content more prominent, more readable; the other is the picture is content, product pictures, news pictures, Avatar and so on. The requirements for picture design are not the same for both of these situations.

(1) as a dot or similar button of the small picture

The important thing about this kind of picture is to be exquisite, use the color must conform to the latest design trend, to more use the gradient color, you can refer to many large portal site of small pictures, can be copied directly from the use, or in some special small icon collection site to find, and then modify, you can use.

(2) Product picture, news picture and portrait

In the design, we often involve content pictures, this kind of picture size can not be too large, otherwise it will appear too rough, also can not be too small, too small inconspicuous, the picture around the text, can not only picture, no text description.

(3) Picture clear, not deformation is the most basic requirements, but also necessary

We design the use of all the pictures, icons, must be clear, see a lot of bad design site, the button is distorted, and some of the icons are distorted, the user upload the product pictures are also distorted, this is in the web design is absolutely not allowed to appear. Picture size to conform to the characteristics of the picture itself, such as clothing style pictures, people's head, height must be larger than the width, saw a lot of web design characters, incredibly wide than the height of the length.

4 Navigation page Auxiliary content Design general standard

For example, information navigation page highlights recommended content of the Guide, Product List page product guidance, product parameters, etc., in this study, I have been summarized as ancillary content. These content design should use the gray, the word should be smaller, the spacing is lower, the main is not affect the key content, so that the page looks more layered sense, primary and secondary trenchant. Users are also scanning the entire page, to find important content, and then to read the auxiliary content.

Regarding the content design standard of the Business-to-business website, just mentioned here, in fact this standard, also with the general commercial portal website is similar, but the difference with the enterprise website is very big.