Web design: Add Shopping cart button design and usability

The "Add to Cart" button is very small, but every online shopping site is inseparable from it. The text on the button is usually directly displayed on the rectangular button control, sometimes the colorful clickable elements will link the product and shopping cart, and extend the effectiveness of the brand. So in the design of the shopping cart button, it is important to put some of your ideas into the product you are designing.

We have collected more than 100 "Add cart" buttons from each of the top online retail sites since 2006, and these buttons will give you some design inspiration. In addition, we have summarized some of the usability guidelines for the "add Shopping cart" design for the designers reference. Well, it's actually 111 buttons, and 107 of them look cooler.

(Translator Note: Here omitted the picture of these buttons, the original is not a whole picture, post over the workload is too large, does not affect the meaning of the article does not influence the understanding, interested readers can go to the original view. ）

Here are some statistics, and the percentages look more intuitive.

Button text:

Add Shopping Cart 58%

Add Backpack 9.8%

Add to Shopping bag 9.8%

Add to Shopping basket 6.3%

Add to consumer shopping cart 4.5%

Buy 2.7%

Buy Now 1.8%

Add the item to the shopping cart 1.8%

Add Product to Backpack 0.9%

Add to my Backpack 0.9%

Join my bento Box 0.9%.

Join my consumer shopping cart 0.9%

Book Now 0.9%

Button picture

No 48.2%

Arrow 17.9%

Shopping Cart 14.3%

Consumer Backpack 7.1%

Add Symbol 5.4%

Combination 4.5%

Unique design 1.8%

How to enhance your brand by adding a shopping cart button

First, the "Add To Cart" button appears to be a small detail, but it contains a potential emotional connection between the user and the brand. The button style, color, and button text you choose will affect the outcome of this emotional connection.

The Urban Outfitters's handwriting button matches its avantgarde and street style (which may compromise the button's accessibility because it does not help make the button stand out on the screen). The NorthernTool notation (plus sign) icon resembles a screwdriver head. The small red orb of PetSmart is interesting and lively and can be recognized instantly. Bloomingdale's "Big Brown Bag" icon illustrates the prestige of its brand. The Polo's timeless dark navy blue button brings harmony to both the line and the offline brand logo.

Button text is also very important. The "Add to shopping bag" relative to the "add to cart" sounds like a better fit for high-end department stores, which may be more suitable for Walmart or target. "Book now" is consistent with the catalog promotion brand, but it is now suitable for online ordering. In the UK, "adding a shopping basket" is a more common term.

Design and usability of buttons

Button text

Website copywriter emphasizes high animations (scannabliity), the Golden rule of website copywriting is: Use as few words as possible (don ' t uses 5 words when three'll do). How does this rule apply to such a small button? However, we found that 15% of the button text is relatively long. Harry and David's "Join my consumer shopping cart" is more personal and colloquial.

"Buy Now" is more powerful than the "add in cart" expression, but it's probably more about advising users to do the shopping or make a purchase commitment than to check the order again. The beauty of the "add to the cart" is that there is no coercion and assumes that users will continue to look around. If you are a good e-commerce salesman, you are showing the recommended purchases and a "Welcome to continue shopping" link (or you are using an embedded shopping cart implemented in Ajax).

Text Style

A general web Usability Design Guide recommends using a Sans-serif font with a high color contrast (high contrast white or white background or dark blue, rather than a blue blue word like Chadwick low contrast).

All uppercase fonts are not recommended in the Web copy. Case-by-case mixing is more useful for reading, and all lowercase is equally readable. We found that the 45% "Add Shopping cart" button uses all caps. Walgreen's white all uppercase text, contained in a curved button with a small icon, is designed to attract the attention of some users.

Placement layout of buttons

If you have some useful features on your product page, such as Favorites (wishlists), enlarged images, color conversion, other optional product previews, sending to friends, viewing cart or checkout buttons, and so on, make sure the "Add cart" button remains eye-catching, bright and contrasting. Minor function buttons need to be weakened in color or simplified on text.

Text Overlay (Translator Note: text is displayed in two lines)

Text overlay is not a good idea for links and navigation button design. Also, it is not suitable for the "Add Shopping cart" button. The user expects to see some form of rectangular button so that it can quickly peek at the text page. Text overlay takes users more time to identify buttons, and may even create confusion for users. We don't need to reinvent the wheel, just stick to the simple and convenient way.

How do I use a button template?

Even if you do not customize a "Add to Cart" button for the shopping cart feature, you also need to select a button that matches the theme of the site (does not mean that it must be exactly the same color). Make sure you select a design and continue to use it. The flourishing of e-commerce by credit-driven, non-stop Change button will damage the user's trust in you.