Product Design Reference: Web Touch button Design principles

When we design the details of each product, we must consider the application environment of the product, for example, Touch button and the General button looks the same, but because of the different use of the environment, we have to grasp the difference, the following is the summary of the touch button four design principles, where the main idea is the same as the general button design, The difference is also the characteristics of some touch buttons, but also the difference in design.

Principle 1

Use verbs to describe what a button is for.
Users may be confused and increase the cost of learning if they are not described directly by verbs. So "OK" and "Cancel" are not the best choice, and "Yes" and "No" are worse.

Principle 2

Focus the text on the first 12 characters
(Note: 12 characters are English, may be three or four words for Chinese). People always scan text when they are reading, so you can compare these two words:

"Are you going to turn off the machine and confirm?" ”
"Shutdown?" said the fan. ”

But which sentence do you read more quickly?

Principle 3

The text of the button should be placed on the button itself, not on the side.
Research shows that most touch screen users touch the bottom half of the button, so we also suggest that the text be raised in a vertical position so that the user presses the button while the text is not easily obscured by the finger.

Principle 4

Reduce duplication.
If the same text repeats in a group of buttons , put the buttons in a group and use a title to simplify the text. Or, in some cases, you can remove these duplicate text directly. This helps your users quickly locate the action that he needs to take.




In fact, we cannot apply these four points forever, but we can use them flexibly in the design of the interface.