Buttons
Last updated: September 8, 2015 at 18:52 pm

Buttons are a core interaction element, providing visual affordance for clickability and drawing the user towards taking certain actions and following a particular navigation path.


Visual example of the element:


What problem does this element or pattern solve?
Consistently formatted buttons will make clickability obvious, draw a user's eye towards itself, and compel the user to click in order to take specific action or trigger a specific interaction. A button is not a link to further information the way a text link is; a button is a doorway to the next destination on a specified pathway. As such, buttons need to stand out from page content and be welcoming to the user.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • All background and text color combinations for your primary, secondary and tertiary buttons. Remember to check for WCAG compliance.
  • Define the behaviors for buttons: Will you have hover state color changes, etc. Again, be sure to address responsive variations for mobile devices.
  • The size and shape of buttons. Are button widths fixed or are they based on the text within? Are buttons with two lines of copy permitted? Is there minimum spacing on either side of the button’s text? Will they have square or rounded corners, gradients, or shadows?
  • Define all type treatments within your buttons: Font weight, text case, alignment, sizes, etc.
  • Specify the minimum and recommended space surrounding buttons.
  • Will your buttons contain icons as shown in the example here? If so, cover the rules for icon selection and display.
  • Do not forget to define disabled button colors and behaviors and any rules for suppressing buttons.
  • Cover any unique situations, such as different button treatments for advertisements, marketing message, alerts, or errors.

Note: Buttons could arguably be moved to the “Forms” area. However, many of your readers may consider buttons such a core element that they will look to this are first for button definitions.

Sample Content

  • Button Width: Text Width + 12px on each side
  • Button Height: 44px
  • Button Text Font: Typefacename Bold
  • Button Text Size: 14pt

COLORS

  • Button BG: YourCompany Blue
  • Button Text: White
  • Button BG On Click: YourCompany Dark Blue
  • Button Text On Click: YourCompany Light Gray
  • Disabled Button BG: YourCompany Light Gray
  • Disabled Button Text: YourCompany Medium Gray


Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Apple’s iOS design guidelines recommend a size of at least 44 points x 44 points for buttons here.

This element or pattern may also be known as:
toggles, graphic links
Related elements within this Style Framework:


Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

6 Comments

  1. Good morning! I was reading an article on button design which said that on sites using flat design, conversion improves if buttons are a slightly different shape than any other object on the screen. Since our buttons are currently rectangles, have we run any recent user tests to see if rounding the corners slightly will help users quickly identify these areas as buttons? Thanks for any input you can provide.

  2. Just wanted to give you an update. We were able to run an AB test which compared buttons which compared our current square buttons with buttons with a 5px border radius. The slightly rounded corners resulted in a 7% increase in clickthroughs. We are planning a second test to compare 5px radius edges with much rounder edges (12px or so) to determine if that makes identification even faster. We will keep you updated.

    The test results for the most recent test are located at [insert URL here]

  3. CHANGE NOTICE: Based on recent test results, we have decided our Button Standards should be updated to specify 5px rounded corners for all buttons.

    Details: A recent AB test showed that clickthrough rates increased 7% when button corners were changed from square to slightly rounded. Based on this result, we ran a second AB test comparing 5px rounded corners with 12px rounded corners. The second test showed the 12px rounded corners had a lower click rate than the 5px. As a result we are changing the standard to reflect the highest clickthrough rates as shown by testing.

    Next steps: Each of the owners will communicate this change to our respective teams. Style Framework has already been updated so this change will be incorporated into work in progress. Development will work with QA to ensure this change is tested throughly before existing pages are updated. Target date to push this change live into production will be May 1, 2015. For more details on development rollout, please contact the development owner shown above.

    The full report on the test, and our analysis of the numbers, can be found at [insert URL] here.

Leave a Reply