Web page button Interaction Design: Position and grouping of buttons

Web page Production WEBJX article introduction: button position and grouping in Web site interaction design.

Button grouping

The grouping of buttons allows an interface to become self-describing. In a complex layout, a well-organized set of buttons is chosen, and because it is obvious, it can quickly tell the user what features are available.

Several buttons are put together because they may accomplish similar functions. We can see the example itunes main window, Four Corners placed a group of buttons, the interface between the song also has a lot of action points. With the scroll bar, the interface has only 14 buttons. It does have a lot of features, but because of the combination of visual and linguistic ingenuity, it does not give users a messy feeling.

The development of "Ali assistant" visual norms when the use of visual similarity classification, if this group of buttons are the same size, then it looks like a whole, the appropriate size and alignment can help a group of buttons to form a larger combination of graphics.

Grouped according to the function of the button, the design to color, size to distinguish, for the integrity of the page, texture we are consistent. Use a short, well-defined verb or verb phrase as a label, and do not use advanced jargon if the user does not need it. The button for the next page, for example, the first button and the size of level two buttons are consistent, as long as the color to distinguish (the entire page in the Orange button at most appear). The Red box section below is the button in the form list

Position of the button

1. Visual flow

The visual flow of a user's browsing page is usually an arc from the top left to the lower right, and we can see that the usual browser operations are on the right, turning off the zoom bar, and so on. Consistent with visual flow in general, we would arrange the button to the right of the same object, or below, but the bottom of the complex interface element is generally the user's "blind spot." We will affect the entire page or dialog box button, confirm the cancellation of the next page to save such a button set on the right side of the pop-up box is very good extensibility, the left side can add Help button, so as to help the functional area division.

If the buttons have their own small icons, similar to those used in the form, in the list, you can place them on a toolbar or a strip of similar toolbars, usually at the top of the page.

2. Spatial memory

"I swear, this button was here a minute ago!" "Users often recall where they are and find them again, rather than their names," he said. Many of the software's interfaces are to set the button of the dialog box to a predetermined location, in part because of their spatial memory (space Memory) dependencies.

The problem of user habits, when the user to a certain type of operation to form a habit, greatly improve his efficiency, but if we design the habit of adjusting, he must immediately think about the tool once, increase the cost of use. For example, Amoy Bao when the shopping cart page, Taobao operation is about the structure, although there are 4 buttons but very consistent with our memories, the left optional delete convenient and quick. The orange button on the right is consistent with the green "checkout" button when it is the same, the difference being that when the "continue shopping" button style is narrowed, it increases the user's judgment cost. and Taobao handles very well here, the size of the style is very uniform. When the desirable place is to add a "move into the collection" of the text chain, personal feel very practical, but the subsequent operation of the "move into the collection" of the merchandise does not appear in the shopping cart. The effect should be better if you change it to "add to the collection" or keep it in your shopping cart.