It’s all in the Details

I have been working on customizing a shopping cart for a client recently. As part of the process I found myself redoing the buttons that came with the cart. Initially two things prompted this task. The buttons were ugly and didn’t fit the design of the clients’ site.

Now web folk don’t just fire up Photoshop when its time to make new buttons. Well maybe some do but success is in the details. A good button needs to adhere to conventions, in other words be easily recognizable as a button. Nothing frustrates a potential customer more than difficulty during checkout.

So before I redesigned the odious buttons, a task that took me several tries before I was happy, I decided to do some research.

I took screen shots of a number of different online catalog pages I particularly liked  – studied the buttons and layout and color choices. I also found a wonderful article here: 107 Add to Cart Buttons of the Top Online Retailers  that not only shows a wide range of examples from a number of existing and well known sites, but include statistics on terminology used – for instance Add to cart vs. Add to basket. Add to basket is more frequently seen in the UK and who would think that Buy Now suggests the shopper is finished shopping? These points are important to know.

There is almost no area of web design and development where attention to detail isn’t critically important. This is why it’s important to test on different browsers and operating systems (and get feedback from those who have a slightly different set up if you can). Fonts display differently, Colors display differently. CSS behaves differently. Ok, I’ll reword the last one for accuracy. CSS is what it is. Browsers (can) wear it differently. If you’ve ever seen 5 different people wearing the same dress you’ll know what I mean. That said compliance with standards (geek speak for more browsers getting on board so all will render the same) is getting better.

This is why exhaustive testing by end users is important.

It’s why you’ll know a site designed by pixel perfect designers.

It’s in the details