Buttons are one of the most important components in the product interface. They are very important both as user diversion and as action trigger. How to do the best button design, is the designer needs to constantly explore the problem, control every detail to make each component more delicate.
This article summarizes 20 button design problems to avoid, hope that these design details and thinking to help you avoid the problem perfectly, do the best button design.
Button design strong and weak performance
Yiliusheji.com suggests that in the whole product design, we should distinguish the button design according to the priority of information transmission, and the design expression should have strong and weak differences. Button design can be through the size, fill, stroke, hue, saturation and other differences to carry out strong and weak differences, different strong and weak differences show the level of the button: action trigger, major, minor, auxiliary, disabled and so on.
Rounded corners should be set reasonably
For the button frame, we usually use full rounded corners and small rounded corners, so as to appear stable atmosphere. And the big rounded button is not unavailable, but relatively few, will appear that the button is not square and not round, design performance is not mature enough.
Full roundness is equal to half of the height of the button, while small roundness is usually controlled within 1/4 h (a quarter of the height) (for personal reference only, not absolute value).
Use the opposite color relationship for the projection Settings
When setting a projection on a button with a color palette, it is also possible to select a color palette (such as black), just for better visual effect and sensory experience. We can also try to determine the color of the projection based on the color of the button itself to get a cleaner, cleaner look.
The use of projection is not excessive
Although the use of a projection can make the buttons more layered, it should be used with caution depending on the situation. For example, for some light-colored buttons, the projection may reduce the recognition of the button, making the button color environment not clean and refreshing.
Give the button text a little breath
Button text and border design to reserve a certain amount of white space, do not do “reluctant” design, make the button feel very crowded. If you can’t control it, analyze the negative space of some buttons to get some experience and see if there is a proportional relationship between text size and negative space. Finding this ratio and applying it to your button design may make your design look more mature.
Button design doesn’t make the user think
Buttons are there to guide the user, not to confuse them. Button design should not make the user think about what it is and whether it can be clicked. It should be clear and concise. If your button style is too different from the “standard”, it will confuse users and affect the user experience.
Consistency of style expression
When design elements are standardized, the cost of understanding user operations is minimal, and consistency is thus one of the most powerful usability principles. When we design buttons, we should pay attention to the consistency of style expression, such as: button shape, color definition, style characteristics, etc., which will make our design usability stronger.
Arrow application is not character input
Some designers who are just beginning their careers will be lazy about typing the characters directly to form the desired arrows inside the button, which naturally makes the expression a little rough. The arrow should be designed as an icon, and the thickness of the arrow should be close to the thickness of the text strokes, so as to show more detail and attitude.
The design of buttons has clear priorities
Only through information contrast can the primary and secondary be formed. Button design needs to be differentiated in style to achieve visual cues of hierarchy. The main button should be different from the secondary and auxiliary ones to maximize the visual effect of the main button and better guide users to operate according to the set track.
Button design should not be misunderstood
Throughout the design specification of the project, it is necessary to avoid misjudgment of non-button state content by users. After determining the style characteristics of the button, do not use its style characteristics or similar style characteristics in other scenarios, this will lead to false perception of the user and thus useless operation.
Button text should be concise and comprehensive
When thinking about button text, try to reduce the number of characters and words, the content is concise and comprehensive, as long as it can accurately convey information recognition. Sometimes text is not necessary, the information that ICONS can convey can be considered less text, perhaps to make the interface feel more breathing.
Do not wrap button text Settings
Single lines of text are more readable, and line breaks reduce readability. When we design buttons, make sure that the text is displayed on one line, and keep the text concise if there is not enough space.
Special scenarios should be flexible
The use of bottom buttons is not fixed and needs to be flexible for different models or specific scenarios. For example, iPhone X and other models need to reserve the home controller position at the bottom, so the transition between the top, middle and bottom should be considered in the design of buttons, so as to bring better sensory experience to users.
Button size should be easy to click
Buttons need to be easy for the user to click on, and if the user fails to click or hits the surrounding element, it will bring a user unfriendly experience. If there is a button with text, as long as the text size is not smaller than the limit, usually the realized button interaction hot zone will meet the click requirements.
If the button is a pure icon, in addition to the size of the button needs to be controlled properly, the interactive hot area should also meet the requirements of the click area.
Buttons in the same plate have the same size
In the design of buttons in the same plate, we can reflect the hierarchy through the strength of the button, do not let the size of the button is different, so that the visual balance will be affected.
Buttons are designed with text Max in mind
Even a designer with a slight attention to detail will not make text longer than the width of the button, which is a very obvious mistake. However, it is common for button text to become very long, and too many modifiers are used to express the meaning of a few words. When thinking about the button text, set a maximum value according to the best visual effect, do not let it play without limit, which will make the final visual effect greatly reduced, and even affect the user’s sensory experience.
Keep buttons readable
Buttons need to be designed for adaptability in different environments, ensuring that users can see them at a glance. Now many products are adapted to the dark theme mode, button color matching can not only consider the use of white or light background, need to consider the adaptation of most of the background. Always maintain a high contrast and readability between buttons and backgrounds when making color selections.
Button to text is reasonable
The setting of button text should be combined with the identification and accuracy of information transmission. Although the design of pure ICONS is simple and generous, it should be considered whether the graphics can accurately express their meanings, so as to avoid misunderstanding or wrong cognition of users. Therefore, the text of the button needs to be judged according to the meaning of the copy. If the meaning of the button can be determined without auxiliary explanation, the more concise design expression effect will be better.
Correct button color selection
Color is the most intuitive embodiment in design. Different colors will convey different personalities and bring users cognitive differences. And button color selection is not random play, need to combine the brand color and auxiliary color to make a judgment.
Generally, the unified standard is to use brand color as the color of most buttons. When some buttons need differentiation, they will choose the auxiliary color to express. Red or orange is mostly for action stimulation, which is not suitable for abuse when non-brand color is used. Light gray or low saturation color will be unavailable, disabled, invalid and other attributes, need to be selected as appropriate.
Button location combined with user experience
Depending on the operating system, the buttons that guide the user to a choice should be placed on the left or right. For example, Windows system tends to put the confirm button on the left, while Apple system chooses to put it on the right. The user’s habit of using the system will affect the fitness of his behavior. However, on mobile terminals, individuals tend to place the button to guide users to make a choice on the right side, which is more convenient for users to click (except for special groups).
Sometimes, in order to prevent the user from misoperating, we will put the confirm button on the left, and let the user confirm again by helping the design. Therefore, on the one hand, we should combine the habits of the operating system, on the other hand, we should also combine the habits of the user, and put the button in the most appropriate position for the user to operate.
conclusion
As a designer, we can design a better solution only by thinking deeply and summarizing every tiny element. There are a lot of things to explore behind the design of a small button. This article summarizes 20 experiences for everyone, and I believe there are more details worth combing, looking forward to more design partners to explore.