Talking about the grouping and location of buttons

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 a button in the list of forms.

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, closing | The scroll 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 | cancel | next | Save such a button setting on the right side of the pop-up box has a good extensibility, the left side can add Help buttons, 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, not their names," he said. The interface of many software is to make the button of the dialog box to determine | The cancellation is placed in the predetermined position, in part because of their spatial memory (spatial Memory) dependency.

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 cart.

Source Address: http://www.aliued.cn/?p=2746