Styling Interactive Elements (Part1: Buttons and Like)

People should be able to consistently tell what’s actionable, simply by looking at the interface, without having to sweep the screen with their mouse to discover what’s interactive* (the more effort a UI requires, the less use it will get).
There are various best practices:
  • The Shape Technique: Shape can indicate to us whether something is a button or not.Rectangles are the safest choice, but other shapes can work too — particularly when coupled with strong signifiers of clickability.
  • The Border Radius Technique: A button’s border radius can change-up its “personality”.From no border radius being more serious to fully-rounded corners being more playful — choose a “personality” that matches the vibe of the brand/digital product.
  • The Fill (and Color) Technique:To convey differences / hierarchy, we use structural changes.When it comes time to stylistically differentiate buttons to visually convey their position in the hierarchy, we do not rely on just different colors to communicate those differences. Instead, we use structural things like fills (e.g. solid vs. hollow-fill), strokes (e.g. outline vs. no outline), and sizes (e.g. micro to jumbo).
    An example:
    • Primary actions are solid fill buttons.
    • Secondary actions are line buttons.
    • Tertiary actions are borderless buttons.
  • The Shadow (and Elevation) Technique:Shadows convey elevation.Therefore they are another technique we can use to signify that something can be interacted with. Whether that’s a button, card, panel, accordion bar, or anything that needs to show that it’s elevated from the page background or stacked over something.
  • The Competition Technique: Similar-styled elements become competition.We want our CTAs (Calls To Action) to stand out clear as day. But it’s difficult to visually pick out clickable elements when similar-looking elements compete with them.
    • Restyle or remove anything that’s visually competing with CTAs(like form elements, a busy background image, rectangle shapes nearby, or even other buttons).
    • Aim to have only one primary button per page or distinct area.
  • The Proximity Technique: When UI elements are in too close of proximity they can suffocate each other, none will stand out, and interactive elements will be difficult to interact with.
    • Breathability:Use lots of white space, perhaps more than you would normally be inclined to.This allows our interactive elements to stand out, gives them breathing room, and provides them enough space between each other so people don’t select a neighboring interactive element on accident.
    • Relation:Group related items.This way their relation is clear. Just not too close, because even within families there needs to be breathing room between everyone.
    • Touch targets:Make touch targets large enough to be easily selectable.Each touch target needs to be big enough for anyone to easily select it and not accidentally select neighboring interactive elements.
  • Label Capitalization Technique:The type of capitalization used for labels can convey different tones of voice.Sentence case is the safest choice because it’s friendly, conversational, and the easiest to read, but when in doubt test it out with users (real or representative).
  • Reserve Button Signifiers for Buttons Only: Whichever combination of signifiers you decide to use for your buttons, links, and other interactive elements, just remember:reserve that combo of signifiers for those interactive elements. Non-interactive elements should not get to use them.Also avoid using classic, well-known button signifiers (e.g. rectangle shapes) for non-clickable elements even if you’re not using them in your designs.
  • Consistency, Similarity, and Distinctness: Aim for consistency, but do so while keeping the users in mind, not the other pages of the product (or another product).If you need to sacrifice consistency to aid clarity or usability, then do so.