Principles for Successful Button Design
http://webdesign.tutsplus.com/articles/design-theory/principles-for-successful-button-design/
http://dribbble.com/ormeski/tags/button
1. Matching Brand
It’s important that your buttons match their contextual style. This
could mean fitting in with a color palette, graphical style or taking a
lead from some form of brand guidelines or logo. Perhaps there are some
prominent shapes, textures or design styles that you can pick up on.
Maybe a logo has a circular aspect to it and you could pick up on this
in your buttons or other potential calls to action.
If an interface predominately uses flat color then perhaps big shiny
Apple-like buttons aren’t the way to go. If you can, take the
opportunity to experiment with extending the brand through to the
interface by using appropriate shapes, effects, coloring or other forms
of embellishment.
2. Matching Contextual Style
Following on from above, stop for a moment before opening the ‘UI
Elements PSD’. It’s easy to reach for grads, shadows, bevels etc. but
take a moment to think whether it’s the right choice not just to match a
brand but also the interface in which the buttons sit and whether they
need to feel overly ‘buttony’.
Buttons may need to feel particularly button-like within an app and
on mobile, for example, but with websites maybe there’s room to do
something a little different with your buttons or calls to action.
3. Ensure Buttons Have Enough Contrast
With so many interface designs being inspired by Apple OS styling,
particularly in a lot of the UI Element PSD’s out there, buttons can get
a little lost amongst other elements being used in the UI, diluting
their potentially important power. Try using color, size, whitespace or
typography to ensure your buttons have the visual weight they need to
stand out from the rest of the interface.
4. Consider Rounded or Shapely Buttons
Following on from the above, if there are lots of other rounded
corner UI elements in your design, consider using circular ended
buttons or perhaps some other change in shape. This could give you an
extra bit of contrast that ensures your important calls to action have
the prominence they may need.
5. De-emphasise Secondary UI Elements
If you’re striving for an OS inspired style or you’re working with a
predesigned elements PSD then it’s likely your UI elements will
predominantly be rounded corner rectangular in shape. Consider reducing
the level of embellishment on elements that can afford to feel less
‘buttony’.
For example, bespoke select menus, segmented controls, custom menu
triggers might all be the same rounder corner shapes but using less
shadow, border, bevel, gradient or other effects can help to reduce
their richness and in turn promote button styles.
6. Color Match Strokes/Borders
Most buttons we see out there have some form of border or stroke on
them. Loosely speaking, if your button is darker than the background on
which it sits use a dark stroke of the general button color. If the
reverse is true then go for a stroke that’s a darker shade of the
background color. If you stick with the former and use it on a darker
background I find it can make the button edges a little ‘dirty’. Using
the latter can also help make your button really pop. I consider this to
be a general design principle when dealing with strokes/borders in web
design.
7. Be Careful With Blurred Shadows
Over the years I’ve always sworn by my ‘Shadow Law’. The ‘Shadow Law’
states that drop shadows work best when an element is lighter than its
background. If an element is darker than its background then drop
shadows should be used very subtly. Similar to color matching strokes
and borders, I very much consider this to be a general design principle
that applies to all UI elements.
8. Subtle Iconography Can Give Affordances
As well as being another small detail that can further differentiate
your buttons from similar UI elements, the use of simple iconic elements
such as arrows can give some sense of action and a small affordance as
to what happens when a user clicks.
For example, an arrow pointing right after the text on a button maybe
gives the user some sense of moving on or leaving the page. An arrow
pointing down might suggest that some content will be progressively
disclosed below, or perhaps some kind of menu will open.
9. Consider Primary, Secondary and Tertiary Styles
If you’re designing an interface where there are consistently lots of
actions and functionality on display it may be important to establish
some visual language with your buttons by establishing primary,
secondary, tertiary and potentially more styles.
Consider reserving the strongest and boldest color for your primary
buttons and using progressively less strength or saturation as you
reduce importance. As well as color and shade, consider reducing size,
whitespace, text size and level of embellishment to further reduce the
visual weight of buttons that aren’t primary.
10. Always Make Feedback States
This is a no brainer really, but is often something considered toward
the end of the design process. Always work through the core states
required for your buttons to ensure they provide the user with
sufficient feedback in their context. Users will likely have a mental
model of how a button works in the real world as they use it through its
various states. Some simple CSS tweaks with shadows, border and
gradients and the like can give the user some simple feedback and a
touch of eye candy!
Conclusion
As designers you’ll all have your own process you go through. I’ll
bet a lot of the time that can involve moving your head back from the
screen, tilting it slightly, squinting and saying ‘Yeah that’s about
right!’. That’s part of the fun of designing of course and talented
designers tend to get it right doing just that, but I think it’s always
good to run a bit of internal commentary, interrogating and reasoning
over the design decisions you’re making.
There’s no harm in re-using or leaning on pre-designed styles and UI
elements, they can obviously save a lot of time. It may even be the case
that someone has pixel-perfectly crafted exactly what you were looking
for and is offering it for free. However, I don’t think there’s any harm
in having a deeper understanding of the design process and craft behind
what you’re creating and informing your design decisions going forward.
