Design business-to-business website buttons to promote user interaction by standard

I have said that the analysis ability of the designer is far greater than the design technology itself, what is the analysis? The research report thinks that the user behavior analysis is the most proficient in the designer. For a button, whether it is a true button or a pseudo button (the pseudo button is: only indicates that the link is related to the data submission, or is to highlight the link, with a button, called "Pseudo button", the reason is to be the form of a button, the biggest goal is to let users know the point of this button can submit data, Can interact with the site, or click on the future can appear with the site or user interaction of the page appears, then the evaluation of the success of the design criteria become: the need for users are not aware of, would like to point to this button, rather than the button itself how beautiful. Users will think, why do I need this button, this button is important? Because the Chinese do things, are driven by interests, at any time, designers should pay attention to the interests of users.

This section describes the general criteria for designing and using buttons from the color of the button, the size of the button, the shape of the button, the text on the button and the side, and the placement position 5.

1 use high contrast, eye-catching color to highlight the importance of the button

Buttons use high contrast colors and eye-catching colors to highlight the importance of buttons, both of which are often used simultaneously. Most of the time, we use buttons to highlight their importance, only a few times can not highlight its importance, such as as a minor button, intentionally, as shown in figure (13).

Figure (13) Chinese Manufacturing network Search button with a high contrast of the eye-catching yellow button (screenshot: 2011-2-9)

As shown on the right of figure (13), there are two buttons, the color and background color of the right one button is basically the same, the button background color of the left is yellow, and the color of four weeks is completely different, the font color is different, and the font is bold. This means that the button on the left is important, and it's more important than the button's right button, which is actually true when clicked.

2 Use the larger button to highlight the importance of the button

In a Web page, the size of an element relative to its surrounding elements indicates its importance: the larger the element, the more important it is, both text and buttons, because he is more visible, and this importance is determined by the emphasis that the page wants to express.

Figure (14) Alibaba China Station "clothing column" search button is very large (screenshot: 2011-2-9)

Figure (14) for Alibaba China Station "clothing column" Search button, from the figure can be seen, the search button is very large, and the General portal site search box is big. is because Alibaba has done for more than 10 years, has the massive information, and belongs to the comprehensive Business-to-business website, any one user comes to the website, only relies on the direct browsing or the classification browsing, finds oneself needs the information to need the time, moreover is more difficult. So the search becomes very important, as the site operators, but also hope that buyers through search to obtain information, to reflect the value of the site. So we can see Alibaba's search button than the general Business-to-business industry Portal Search button is larger, if it is just opened Business-to-business subdivision of the site, excessive highlighting search, it is wrong, because there is not much information can search, but the site's weaknesses exposed. Design is also related to the actual situation of the site.

Figure (15) Alibaba China Station "product page" Sign guarantee Contract button (screenshot: 2011-2-9)

From the picture (15) of the button can be seen, these excellent site product managers understand that in a page to encourage the buyer to take action, sign the contract, the immediate inquiry, hoping to allow more suppliers to obtain the buyer's information, increase inquiries, more to reach procurement. These buttons are very large, very conspicuous, even from a beautiful point of view, all over, too big, but from a practical point of view, is to make this button to maximize the value, so I think: designers to "create a product" to treat the height of each element of the page design, and not only from the aesthetic point of view, Most of the time beautiful to be "practical" sacrifice.

3 button shape to be regular, prominent, serious, not cartoon, entertainment, too prominent or too not prominent

The previous chapter said: "The frame of the page is more square, the rule", the same reason, the Web page button should be square, regular, can have a bit of rounded corners, but not too big, too big to appear not serious enough, not commercial. As the home page says, the business-to-business site is after all a working professional who is over 20 years of age, and the job should be serious and not entertaining.

The following 6 buttons are the registration button to collect various business-to-business websites and industry websites, and from here you can see that most of the buttons on the Business-to-business Web site are rectangular and have a small rounded corner appropriate. When the two buttons are put together, we have to distinguish between the main action or the secondary action, the last button is intercepted from Alibaba, do better, with color distinguish between the main action and secondary action.

Figure (16) Registration button for each business-to-business integrated website and industry website

Figure (17) is the user registration button intercepted by Alibaba (left) and HC Net (right), can see two Web site designers different levels, obviously to the left of Alibaba to be conspicuous, better than the right, the right is not prominent, similar to the design of many sites have, I think all to modify. The left and right are actually direct use of the system buttons, are not designed as pictures, the difference is, Alibaba's button to increase the CSS style, become more good-looking, more conspicuous. From this detail can be seen, Alibaba's products do a better job.

Figure (17) Alibaba Heicong Registration Submit button Comparison

Figure (18) of the 1th, 2nd button, I think the first too round, obviously too serious, used in the commercial web site is not appropriate, the 2nd button is too prominent, put on the page like a patch, the button can be larger, but can not highlight too much outside. The third login button, too large, purely to make the right and left alignment and use of oversized buttons, this will appear very rough page, these cases are selected from the business-to-business industry website, this report that this design is a failure.

(a) Non-compliant buttons for business-to-business website design

4 to tell the user's expectations or explanations through the text on the button and the side

We design the button to analyze the user's behavior from the angle to do the design, color is eye-catching, but also relatively large, are to attract users more chance to see this button, then see the behavior? The user will still think, why do I have to point this button, what is the advantage to me, or to say that the point will not have any harm, Or perhaps the word on the button does not understand, unfamiliar and do not want to point, as a designer, it is necessary to use the text on the button to tell the user, if you need more words or to add comments, you need to the button above, below or to the right, to guide users to continue to take the next Of course, some people are familiar with the button, such as: login, submit, etc., you do not have to do the superfluous to explain.

The text on the first button of figure (19) is "Register Free", is to dispel the thought that registration will be charged, and not click, from the marketing point of view, is to play a free card, to attract more people to submit their company information, contact, the site has users, content, website sales staff can have more potential customers. The third button on the "Login Now" is to attract members of the quick login, because only after logging in, users can do more operations, such as: Release information, view inquiries, more in-depth understanding of the site, a site every day how many members log in, and how many members of the Register every day, As an important evaluation index of operation. The third button on the right side of the text, is to solve the user may encounter problems, such as when I want to click the login button, I think of it, the password has forgotten, the button next to the link will appear password back. At the same time may not be members, this time to remind users, you can also register for free.

Figure (19) The meaning and hint of the button expression

Figure (20) has 6 buttons, are telling users, what members can do, if you are not a member, do not hesitate, hurry up and act! Just like TV shopping shows you how to buy this product, there are many benefits, a lot of concessions, and now immediately pick up the phone to dial the same number. In these agitating words, as little as possible or without links, save users click on the link to think.

Figure (20) button tells us what we can do

In addition to the button can be added text, you can also add an icon on the button, often can make the button look more exquisite, and small icons can often play a form of the effect. Figure (21) The first row of the 4 buttons are added a small icon, and text together, so that users almost do not think, know the meaning of the button, click on what can be done after the button.

The text on the button should be short, refined, do not add a lot of unnecessary text on the button, will increase the user's thinking time, such as the figure (21) of the 5th button, "click into" 4 words is completely redundant. Typically: a button, combined with other interactive and informational organizations on the page, should be properly assembled into a complete sentence "I click what will happen" and "click into" 4 words is between me and the mouse, without having to appear on the page. The last button is a common player's button, because we are very familiar with the TV remote control is also the button, so the text is superfluous, directly with the shape of the expression, simple and clear. Of course, the mouse can be put up to display text hints, the user experience better, from this point of view, it may be said that the place is too small to use words to express.

Figure (21) button on a small icon, at a glance

The position of the 5 button, whether it is blank or not, is related to the importance of the button.

Button placed in that position, is also very fastidious, put the position is different, its importance is not the same. There is also a blank space around the same time, indicating that the site button is very important.

Figure (22) of the 2 buttons, up and down there are many gaps, such as the 1th, 2nd button, from below and above all have a very high distance, this is the designer intentionally, because if the button from the top and bottom of the distance too close, it is not prominent. will be submerged in the text, appropriate in the surrounding white, is a good way to highlight one.

Figure (22) The space around the button is larger

This section said here, finished, although a small button, but also a lot of knowledge, need management, product managers, designers in the design of the site seriously to try to figure out, only pay attention to product details, can make users have a good experience, to create a successful product.

This article original author: Li Xuejiang, welcome the Exchange guidance consultation.