This note is about using buttons on an user interface.

Make call-to-action buttons as bold as you can get away with. Use white space if you can't use colors without breaking the outlook.

Avoid having too many buttons on a single view. User should not see more than 7 buttons at once.

Buttons should primarily execute a single action e.g. vote, like, save, download. Avoid using buttons as plain links if there is no action related e.g. button that links to download page is good as it is associated with action "download".

Size of a button depends on the usage context, prioritization and placement. Buttons on mobile interfaces should always be at least 44px x 44px. If the button action is mission critical, make the button bigger or a different color. If user usually approaches the button from left or right, make it wider. If user usually approaches the button from top or bottom, make it higher.

If user has multiple actions to choose e.g. buttons, separate them with extra whitespace to prevent miss clicks.

+----------+    +-----------+
|          |    |           |
|   Save   |    |   Delete  |
|          |    |           |
+----------+    +-----------+

Make sure your primary action is the most visible one e.g. color save with green, but do not color delete with red as it is not primary user action.

+**********+    +-----------+
*          *    |           |
*   Save   *    |   Delete  |
*          *    |           |
+**********+    +-----------+

Consider making your dangerous or rarely desired actions less visible e.g. add delete as a smaller link.

+**********+
*          *
*   Save   *      [Delete]
*          *      --------
+**********+

Consider how people perceive colors you use. Human have strong association between color and behaviour. Use right colors to enforce mental image and direct user behavior.

Grey = General actions.
*OPPOSITE COLOR TO LAYOUT* = Highlight for neutral actions
Green = Highlight positive actions.
Yellow = Highlight dangerous or potentially negative actions.
Red = Caution should be taken with action or highlight negative actions.

Make sure button text is readable. Contrast between the button color and the button text color should be good so it can be read easily. Thumb rule is that if you change the button color, you should also tweak the text color to keep it in balance.

Tool Groups

Tool group is a set of elements that are used to invoke actions. Like a row of buttons or right-click context menu in Windows/OS X.

+------++------++--------+
| Send || Edit || Delete |
+------++------++--------+

Most used tool groups:

• Always-Visible Tool Group: Place visible tools directly in the content.
• Hover-Reveal Tool Group: Show tool group on mouse hover but in the content.
• Toggle-Reveal Tool Group: Use a switch to toggle on/off a tool group or multiple tool groups.
• Multi-Level Tool Group: Progressively reveal more tools based on user interaction. Usually implemented as menu with submenus.
• Secondary Menus: Show a secondary set of tools over the content. Dropdowns and muttons (menu + button) are most used secondary menus on the web. Buttons with small caret to open secondary menu with variations of the action.

Keep tool group close to the context. Keep actions as close to the activation point as possible.

Tools should look like buttons, not links. If the action invokes a page refresh or you intentionally want to make it less visible, it might be shown as a link.

All buttons should have a text label. To reduce visual noise, you may use hover tooltip if the button has an understandable icon.

Reduce the amount of clicks to do all the important actions. There was a huge shift in activity on Digg when they introduced one-click likes in November 2005. Once they added Ajax, activity went through the roof.

Always show tool group if the acting is more important than presentation. But keep visual clutter to a minimum by keeping the number of visual items to a minimum.

Secondary actions can be shown after hovering the element. Showing the items on hover decreases the visual noise in the interface. The actions may even be important, but making the content clear and readable is a higher priority.

Avoid mystery meat tool groups. Mystery Meat is a common anti-pattern that occurs when you have to hover over an item to understand how to use it.

Revealing tool groups shouldn't change positioning of other elements. When an additional tool group is revealed, make sure that all parts of the page remain stable. Avoid any element shifting even by a few pixels. User is directed away from what is really happening.

Revealing tools should never lock the user. Allow user to ignore the shown tool groups and continue doing what they were doing. Keeps interaction light.

Radial menus are uncommon but efficient. Radial menus leverage muscle memory to make secondary menus feel more lightweight. No need to scan through a list of actions to select the one you want, you just think "it's the button on left". Radial menus are pretty rare pattern in the web though and can contain limited number of items, around 8 tops.

Avoid replacing the default right click menu on the web. Browsers have their own right click menu and replacing it will be confusing to majority of users.

All clickable targets should be at least 44px x 44px. Then they are also easy to tap on touch devices.

Sources

• Designing Web Interfaces, Bill Scott, Theresa Neil