Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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 ?

share|improve this question
    
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 Haigh Jan 30 at 17:11
add comment

8 Answers 8

up vote 5 down vote accepted

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:

enter image description here

This product only has 3 sizes, so radio buttons or visibly selectable fields are the best options here.

enter image description 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.

share|improve this answer
    
Dropdown menus hide vital information. As a rule of thumb if you can show vital information in a clear way, do so. –  Stewart Dean Feb 10 at 10:57
add comment

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)

share|improve this answer
    
agree with everything here –  Dave Haigh Jan 30 at 13:10
    
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. –  Stewart Dean Jan 30 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? –  Jybz Jan 30 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. –  Jayfang Jan 31 at 0:09
add comment

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.

share|improve this answer
add comment

You can use a Rich Radio Button:

enter image description here

Sample of "L" size selection:

enter image description here

This is completely different approach (forget it if you're a classic guy):

enter image description here

Not so minimal final touch:

enter image description here

share|improve this answer
1  
The 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 –  Dave Haigh Jan 30 at 13:06
2  
i'm confused... –  Dave Haigh Jan 30 at 13:12
4  
This is too gimmicky and creates a smaller hit area for small then large - making large look more important. –  Stewart Dean Jan 30 at 13:22
2  
Agree with @CodeMaverick, but I wont give an upvote before you fix the "only color for selected circle" –  Bluewater Jan 30 at 13:35
2  
Due the comments I fixed the design, hope is ok now... –  Kilian Jan 30 at 14:15
show 13 more comments

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.

share|improve this answer
    
confused as to why this has been marked down. can the downvoter please comment –  Dave Haigh Jan 30 at 13:28
add comment

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.

share|improve this answer
    
Do you have any examples of this type of box? Thanks. –  Jybz Jan 30 at 13:53
    
Yes - see johnlewis.com/… for example. Go to most sites like John Lewis or ASOS and go through to the product page. –  Stewart Dean Jan 31 at 15:15
add comment

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).
share|improve this answer
    
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 –  Jybz Jan 30 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. –  Dave Haigh Jan 30 at 14:00
    
Oh, thanks for this detail. I did not know. –  Jybz Jan 30 at 14:04
    
@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. Jan 30 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? –  Jybz Jan 30 at 14:21
show 2 more comments

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:

nothing selected

small selected

If you aren't concerned with the availability of the product a drop-down may be more appropriate.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.