Component: Buttons

To ensure users can quickly identify buttons and understand their importance, focus on the visual design:

• Make Buttons Look Like Buttons: Users expect buttons to look clickable. Avoid making buttons resemble other elements like links or decorative graphics. Stick to established UI patterns where buttons have a distinct look with clear boundaries, a solid background color, and a shape that is easily recognizable.

• Differentiate Primary and Secondary Actions: Primary buttons represent the most important action (e.g., "Submit," "Send") and should have the strongest visual weight through color, size, or style. Secondary actions (e.g., "Cancel," "Close") should be less prominent. This visual hierarchy helps users quickly determine the main action they should take.

• Use Disabled Buttons When Necessary: Disabled buttons indicate actions that are currently unavailable but can be performed under certain conditions. This approach can help users understand that an option exists and provide guidance on how to enable it, improving the overall user experience.

The location of buttons plays a vital role in ensuring users can find and interact with them easily:

• Small Screens or Dialog Boxes: Place the primary action button at the bottom right. This placement aligns with typical reading and scanning patterns, allowing users to find the most important action quickly.

• Full-Page Designs: For larger screens or when forms span a significant part of the page, position the primary button directly below the content that requires user interaction. This placement is where users' attention naturally flows after completing an action, like filling out a form.

• Limit to One Primary Action: To avoid overwhelming users, ensure there is only one primary action per screen. This helps users focus on the task at hand and reduces confusion over which action is most important.

The language used on buttons should be clear, concise, and action-oriented to help users understand what will happen next:

• Use Clear and Direct Action Words: Be specific about what each button will do. Instead of generic terms like "OK" or "Yes," use verbs that clearly define the action, such as "Save," "Delete," "Publish," or "Add to Cart." This helps users feel confident in their selections.

• Avoid Ambiguous Terms: Words like “Delete” or “Remove” can have different implications. Ensure the wording clearly conveys the exact outcome to avoid confusion. For example, "Delete Permanently" is clearer than just "Delete."

• Reflect Context in Button Text: Use task-specific words that reflect the context of the action. If the user is adding an item to a cart, the button should say "Add to Cart." If the user is submitting a form, it should say "Submit Form."

• Align with Platform Conventions: For actions like "OK" and "Cancel," consider user reading patterns and the most common platform for your audience. You may also A/B test to determine which order works best.

Destructive actions (such as deleting files or accounts) require special consideration to prevent accidental data loss or unwanted actions:

• Increase Decision Friction: Destructive actions should not be too easy to perform. Use smaller dialog boxes with clear, bold text to highlight the action’s consequences.

• Provide Recovery Options: If possible, offer an “Undo” option after a destructive action. This not only reduces anxiety but also provides a safety net for users who may have clicked by mistake.

• Use Strong Visual Cues: Make destructive actions stand out using color (like red) to warn users of the potential consequences and explicit wording. Ensure the button label clearly describes the action (e.g., “Delete Permanently” rather than just “Delete”).