I'm redesigning my filters and product page of an online apparel store. Do you think I should display all sizes and use radio button or using a drop down menu to select the size ?
Use drop down if you have more than 5-6 sizes, to reduce clutter.
If you have up 5 options then radio button's present complete visibility, some good examples of best practice attached:
This product only has 3 sizes, so radio buttons or visibly selectable fields are the best options here.
But with an item such as shirts, with a number of neck size options a dropdown logically makes more sense. A good pieces from NNGroup explaining the benefits and pitfalls of dropdowns.
Those two controls give notably different hints to the user:
- check-boxes indicate the multiple sizes are allowed in a filter simultaneously
- the "scroll-down menu" (drop down list) makes it clear that only one size is allowed in the filter at a time
BTW if you have only a few few options, and want only one size in the filter at a time, radio button UI is a valid option. Advantage over drop down list is higher visibility of all options, and single click/tap operation. (BTW personally I find users don't like most radio button widgets)
Radio buttons are (generally) more convenient to use than dropdown menus.
The advantage of radio buttons is two-fold: they let the user see all options at once and only require one click from the user.
Dropdown menus not only hide their options, they require at least two clicks to use (ie, one to show the options and one to select an option). Sometimes the user has to click on a scrollbar and drag it.
It's true that most dropdowns allow skipping to options by 'focus typing', but doing so is still more effort than selecting from a set of radio buttons. Dropdowns are only useful when their sets of options are predictable to the user, like US states.
The best design is a vertical, smallest-first list of standard radio buttons. I would recommend against non-conventional styling because there's the chance that a user might not recognize your radio buttons.
Use radio buttons or a drop down if only one size can be selected at a time.
The benefit of radio buttons is that you can see all available options at once, and also see your currently selected option in context with the others. This could also be a downside if you don't want to clutter/confuse your ui with options that aren't selected and therefore irrelevant to the users order.
A drop down has vice versa benefits and advantages.
The standard way is to use boxes representing different sizes. The user clicks on the box, either on a product page or in the faceted navigation to select the size.
The advantage of using the box approach is that you can also indicate availability of sizes using the colours of the boxes, putting a cross/stripe through sizes not available
Avoid drop downs / checkboxes if you can. Drop boxes should be avoided where possible as they hid options. The user has to do something to see what options are available, these are best used when space is really really tight (like on a mobile phone). Check boxes are looking increasingly dated and best for multiple options really, not single options. Radio buttons are even more dated not very touch friendly.
This is one of the cases where I would prefer a drop down over radio buttons or similar solutions.
A drop down has the advantage of saving screen space and the disadvantage of hiding information. The user is not able to see all the options at a glance and compare them easily in order to take a decision.
But in the case of clothing sizes, the user doesn't need such an overview. He already knows what values to expect in the dropdown. She knows which she will select before opening the dropdown. So showing all sizes at once doesn't add value. The sizes have a natural order, and are usually a short list of ~10 values, so there is no need for a long search for the right one within the dropdown list.
Potential problems with a dropdown:
- the user cannot see the range of available sizes. If they vary a lot between items, you might want to show it somewhere else, such as "Available in sizes 38-46" or "Available in both normal and long sizes".
- the user can't see which sizes are currently out of stock. If your storage is small and you frequently go out of stock in some sizes, you might consider a radiobutton-like option.
- some clothing has precise sizes with more than one dimension, so the list would get too long to be a dropdown. For example, jeans are sized by waist/length combinations and bras by underbust/cup combinations. Use a two-dimensional table of checkboxes (or other-styled controls functioning like checkboxes) to display such items. They are also especially likely to suffer from the problem mentioned in the first point, because a manufacturer frequently doesn't produce all combinations (e.g. one bra model may be available from 70A to 100C, another one from 80C to 120K, and sometimes producers will even go diagonally in a table, so you can get a 70A bra but the D cups start at 75).
If your apparel store has limited quantities of items (the get it now before they're gone approach) I would suggest a radio style button that lists the quantity or at least availability. http://www.unitedpixelworkers.com/ does this well:
If you aren't concerned with the availability of the product a drop-down may be more appropriate.
This is a case of picking the option based on the data given. Affordances play a key factor here. Regardless of choice (unless there are way to many options that ultimately will make the decision on which route to take for you.) the users who do a lot of online shopping will recognize and understand the flow of making a purchase. We should not disregard the user's experience with similar interactions. The rest is preference, with the goal of making it easy to scan and identify what is needed to make a decision. In this case, if you have less then 5 options, why not a box with appropriate treatment when selected, or a checkbox. If you choose to have a dropdown, as long as you appropriately label your input elements, you should be good to go. Just make sure you are evaluating these metrics to make sure that the decision is not impacting conversion. If it is, well, that is what we do. We test and re-iterate to make sure we are understanding our users.