I read this article in my Google Reader feeds from UX Matters, called “7 Basic Best Practices for Buttons,” and immediately got to work applying some changes based on this article to a recent client site, LoyLewis.com:
Old buttons on LoyLewis.com
New buttons on LoyLewis.com
In less than an hour I’d improved the experience of shopping on this site and made these important buttons easier to recognize and use! The tips I used were:
- Make buttons “look buttony—with a bit of shading on their surface or around their edges to make them stand out from the background and look clickable.” I had failed to do this before, relying on the border and background-color to make the button stand out as a link but without any shading.
- “Make the most important button look like it’s the most important one.” I had both buttons on the Shopping Cart page styled the same, so that the “Update cart” and “Checkout” buttons looked equally important. Now the Checkout button gets a bold blue background color while the Update Cart button remains a neutral cool grey.
These changes were made infinitely quicker since I became familiar with Twitter Bootstrap‘s styles. The buttons are clean and gorgeous, so I simply implemented them with a few tweaks (including pumping up the font size – 13px is freaking tiny) and voila! Magically improved buttons.
Tags: articles, buttons, ux