How many times have you accidentally pressed the wrong button? In too many cases, it seems that site users might not understand the action they are required to perform. A state of uncertainty can cause the user to slow down, hesitate and maybe, accidentally, make a wrong move that may harm the mission.
There are three kinds of activities that can be performed by pressing a button:
A positive action: performing changes, sending or adding data.
A neutral action: either not changing anything or taking the user back to the previous screen.
A negative action: erasing data, formatting or blocking.
Usually, one screen will feature the following buttons. Our goal is to differentiate between the buttons in order to assist the user in completing his mission successfully. A differentiation can be performed using different colors or text. Color is an important feature in the user interface, not only as an aesthetic tool but also as an effective tool for instructing users. The text assists in understanding the essence of the activity, specifically by handicapped users.
A clear contrast between the colors of the different buttons is an efficient method to direct users to clicking on the correct button. In order to receive a maximal contrast, it is recommended to design the positive action button featuring a calm color, such as blue, purple or green. The color tends to retreat to the background, and the white lettering stands out and catches the user's eye.
A button with a neutral or negative action located near a positive action button should remain uncolored, so as to prevent the user from confusing the buttons. Instead, leave only the outline so the button fades into the background. This way, the buttons won't "compete" for the user's attention. In other cases, it is recommended to color the negative action button with a "warm" color (such as red, yellow and orange) in order to highlight the danger in accidentally pressing this button. The user will surely think twice before pressing. If the activity the user must perform consists of choosing between a neutral action and a negative one, a distinct color contrast should be applied.
A neutral action button will never be presented alone. It will always be appear either next to a positive or negative button. Therefore, a bold outline will suffice in order to differentiate between the neutral and positive/negative buttons.
Note: do not color the outline of the button gray and/or color the text brightly. Users might mistakenly think this button defunct or inactive.
コメント