Buttons prove to be a better shopping experience

By Ilana Davis

Baymard, the most respected UX research company, recently published findings on size selections. Specifically if using drop-downs or buttons when selecting size had an impact on the users experience.

Their findings shed some light on why the use of buttons is always the better option.

Using drop-down selections required more effort (read more clicks) from the customer.

The sizing was essentially hidden within the drop-down menu causing an extra click or two. This forced customers to click the drop-down, then their preferred size, and then wait for the selection to load to determine if the size is in stock or not.

In Baymard’s research, when the size was out of stock, customers expressed frustration and felt that their time had been wasted.

Many customers also overlooked the drop-down options altogether, attempting to add-to-cart before making a selection.

This is especially problematic when product options aren’t expected.

For example, we all expect to choose a size for apparel such as shoes, but choices aren’t always expected when considering a backpack. After all a backpack is a backpack is a backpack right?

Backpacks can come in kid or adult sizes and you can buy a purse sized backpack. The options are plenty!

On most Shopify stores, there isn’t a default option to “select a size”. Instead, the default is the first variant. Making it easy for a customer to buy the wrong size without realizing they had an option in the first place.

Some themes, such as those from Out of the Sandbox, allow you to turn on buttons for variant selections. In other themes, this may need custom code.

One added step I usually recommend as part of the Website Rescues, is to make the selection even more obvious by clearly displaying what is not in stock. A crucial piece to removing friction from the buying process.

Using this example from the Among Us Shopify store, I greyed out sizes that are not available. I also added a border around the variant that is selected. Making it easy at a glance to see what is or is not available without adding more clicks and what will be added to their cart.

Among Us screenshot of the product options for color and size. Variant that is selected shows a border around the button. Variants that are out of stock are greyed out.

Baymard also noticed that this isn’t just for variant selections. They found similar findings on drop-down menus at checkout and while filtering products on the collection page.

If you haven’t given button selections a try, I encourage you test this out on your Shopify site. Choosing buttons over drop-down options could mean reduced abandoned carts and fewer returns.

JSON-LD for SEO

Get more organic search traffic from Google without having to fight for better rankings by utilizing search enhancements called Rich Results.

Linking Llama

Link discontinued products to their best substitute. Keep discontinued products published on your website and continue to benefit from traffic to these pages.