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.
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.