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 ?
-
what I suggest is that you look to some very popular and constantly updated apparel sites for inspiration. You will find out what controls are most commonly used and therefore most commonly recognised controls for users.– Dave HaighCommented Jan 30, 2014 at 17:11
-
Agreeing with @DaveHaigh. Best is when users don't have to learn a new method of doing this. Do it the way people already know how to.– Ken MohnkernCommented Nov 27, 2018 at 19:35
Add a comment
|
9 Answers
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.
-
Dropdown menus hide vital information. As a rule of thumb if you can show vital information in a clear way, do so. Commented Feb 10, 2014 at 10:57
You can use a Rich Radio Button:
Sample of "L" size selection:
This is completely different approach (forget it if you're a classic guy):
Not so minimal final touch:
-
1The second option could be considered to be an XL selection, or even a selection of small, medium AND large. as if ordering all 3 sizes Commented Jan 30, 2014 at 13:06
-
2
-
6This is too gimmicky and creates a smaller hit area for small then large - making large look more important. Commented Jan 30, 2014 at 13:22
-
2Agree with @CodeMaverick, but I wont give an upvote before you fix the "only color for selected circle" Commented Jan 30, 2014 at 13:35
-
2
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)
-
-
I agree about the radio button widget, and most default widgets! Check boxes and drop downs are overused, see my answer for more on this. Commented Jan 30, 2014 at 13:21
-
I meant radio button instead of checkboxex. Thanks. My issue with radio buttons is that my customer will have to do one more to see sizes?– JybzCommented Jan 30, 2014 at 14:05
-
The "Rich Radio Button" widget from @Kilian is lovely. When to filter is a good question in itself. In a filter for apparel, I would start with all apparel designs shown, but not repeat an item in a list for each size. When a size filter is selected this would hide the items not available in the specified size.– Jason A.Commented Jan 31, 2014 at 0:09
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.
answered Jan 30, 2014 at 13:07
-
confused as to why this has been marked down. can the downvoter please comment Commented Jan 30, 2014 at 13:28
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.
-
-
Yes - see johnlewis.com/… for example. Go to most sites like John Lewis or ASOS and go through to the product page. Commented Jan 31, 2014 at 15:15
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).
-
What I like in check-boxes is that sizes are all visible at first sight and it does not need another click to view all sizes– JybzCommented Jan 30, 2014 at 13:56
-
@Jybz don't get checkboxes confused with radio buttons. Checkboxes allow multiple selections, whereas radio buttons allow only one selection at a time. Commented Jan 30, 2014 at 14:00
-
-
@Jybz my whole point is that, with clothes sizes, there is no need to view them all. There are a few standardized schemas for clothing sizes and the user knows the content of the dropdown by heart without the need to click on it. A user knows she wears M, she doesn't need to click on the dropdown to see that you are offering her a choice between S/M/L/XL, unlike a choice by color where the user wants to see at a glance if the dress is produced in green. If your availability is very variable, this is another matter which I already addressed.– Rumi P.Commented Jan 30, 2014 at 14:05
-
Thanks @RumiP. for your answer. I understand your point. My customer doesn't NEED to view all sizes but don't you think it is more user-friendly and bring a better UX to display them all with radio buttons?– JybzCommented Jan 30, 2014 at 14:21
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.
