...
- Undated - UserSnap - The evolution of buttons in web design
- Undated - Vizlly - Where to Position Your Book Now Button to Boost Clicks
- 2011.07.07 - UX Movement - Visual Weight of Primary and Secondary Action Buttons
- 2012.05.07 - UX Matters - 7 Basic Best Practices for Buttons
- 2012.06.12 - CSS Tricks - Crafting Minimal Circular 3D Buttons with CSS
- 2013.02.13 - TutsPlus - Principles for Successful Button Design
- 2014.01.07 - CSS Tricks - When To Use The Button Element
- 2014.11.10 - WebDesign.org - Ghost Buttons - The Most Anticipated Web Design Trend for 2015
- 2015.03.08 - Nielsen Norman Group - Beyond Blue Links: Making Clickable Elements Recognizable
- 2015.07.09 - UX Movement - How Button Placement Conventions Reinforce User Habits
- 2015.07.17 - DesignModo - The Ultimate UX Design of the Perfect CTA Button
- 2015.08.24 - Web Designer Depot - The UX Case Against the Home Button
- Summary:
- It makes it easier for users to navigate (they have to look at one less option).
- Users can easily navigate the average website without it.
- It has become standard to make the company’s logo clickable.
- Summary:
- 2015.10.19 - Adobe - The Evolution of Buttons in UX Design
- 2016.11.02 - Smashing Magazine - The Golden Rules Of Bottom Navigation Design
- 2016.11.09 - Smashing Magazine - How To Design Better Buttons
- Summary
- Make buttons look like buttons.
- Shape
- The safest shape is square or square with rounded corners.
- Maintain consistency of shape throughout your interface controls.
- Shadows and highlights
- A subtle shadow serves as a clue to the user that the element is interactive.
- Shape
- Clearly label buttons.
- Each button in your UI should have a label or icon.
- Make sure the user will understand from the label what the button does.
- Prefer context-specific labels like "Create Account" over context-agnostic labels like "Submit".
- Use action verbs (e.g. "Create").
- The label should state what the outcome will be after pressing the button.
- Put buttons where users can find them.
- Applying consistent design that follows user expectations saves people time.
- If you’re designing a native app, you should follow platform GUI guidelines when choosing a proper location and order for buttons.
- Within the boundaries of best-practice guidelines, use testing to determine the best locations for buttons.
- Make it easy for users to interact with buttons.
- Ensure the buttons are large enough for people to interact with.
- Touch: 10mm x 10mm is a good minimum size. (Source: MIT Touch Lab)
- Mouse: button measurements can be slightly reduced (from 10mmx10mm). (Source: MIT Touch Lab)
- Ensure you have enough padding between clickable elements to avoid mis-clicks.
- Provide visual indications of the button's different states (disabled, normal, focused, pressed)
- Visually highlight the most important buttons.
- Ensure the design puts emphasis on the primary or most prominent action.
- Use color and contrast to keep user focus on the action.
- Place the button in prominent locations where users are most likely to notice it.
- Secondary actions should have weaker visual weight.
- Explanation: Reducing the visual prominence of secondary actions minimizes the risk for potential errors, and further directs people toward a successful outcome.
- Examples: options like ‘Cancel’ or ‘Go Back’.
- Ensure the design puts emphasis on the primary or most prominent action.
- Make buttons look like buttons.
- Summary
- 2016.12.03 - 1st Web Designer - How to Use Ghost Buttons Effectively
- 2017.05.29 - ElegantThemes - Button Design Guide: How to Design Buttons that Convert
...