# Best practice to select multiple two-dimensional options

I have some ideas how the selection of clothing sizes in an online shop should work, but that’s a question for another day, today is about bra sizes.

There are several systems out there internationally. For the sake of argument let’s limit this to the major European one which has underbust sizes with step increments of 5 (from 65 or so) and strictly alphabetic one-letter cup sizes. All other systems work basically the same, i.e. they pair a number and a letter (possibly repeated).

Numbers and letters grow together, but not in a simple linear fashion. That means, 65G is unlikely and so is 110A.

The next best fitting sizes for a woman with measured, say, 75C breasts is neither of 75B, 75D, 70C and 80C, but should be 70D and 80B. That means, decrease one value, increase the other and vice versa.

If you want to filter a list of bras on a shopping site, what’s the best approach to select the nominal size and the two adjoining ones?

## Multiple select widgets

• Two separate multiple-selects, which would give all the right and wrong sizes mentioned above.
Underbust: 65, 70, 75, 80, 85
Cup: A, B, C, D, E
• Long list of multi-select checkboxes
• sorted by circumference first: … 70D, 70E, 75A, 75B, 75C, 75D, 75E, 75F, 80A, 80B
• sorted by cup first: … B80, B85, B90, C65, C70, C75, C80, C85, C90, C95, D70, D75, …
• ## Table of multi-selects

`70A 70B 70C``70D`
`75A 75B`` 75C``75D 75E`

## ` ``80B``80C 80D 80E`

`70A 75A`
`70B 75B``80B`
`70C` `75C` `80C`
`70D`_`  75D 80D`
`  75E 80E`

## Single select widget

Include a switch for “include next best fits”/“loose matching”.

• Long list of single-select radios
• sorted by circumference first … 70D, 70E, 75A, 75B, 75C, 75D, 75E, 75F, 80A, 80B
• sorted by cup first … B80, B85, B90, C65, C70, C75, C80, C85, C90, C95, D70, D75, …
• Table as above
• Text input with auto-detect, e.g.: `75 C`(EU) ≈ `C75`(JP) ≈ `III C` (IT) ≈ `34C` (US/UK) …
• ## Hierarchical drop-down

`70`
`75 ▸ 75A 75B``75C``75D 75E`
`80`

## ` ▼`

`▲`
`B`
`C ▸ 70C``75C``80C`
`D`
`▼`
• New two-dimensional selection widget (especially for swipe gestures)
`  ▲`
`◂ 75C ▸`
`  ▼`

How much does the best way depend on the position of the filter control, e.g. sidebar or topbar next to search results or part of dedicated search page?

PS: I don’t need this for an actual project, I just started to wonder about it when I recently went shopping with my girlfriend.

Despite appearances, navigating long lists of alpha-numerical data seems an unrealistic scenario for bra shopping.

Women generally know their bra size, and unless they're shopping for outlying sizes e.g. very large, their investigation is more likely to be primarily driven by style (type), color, and price.

Once they've homed in on a product, the sizes, often a relatively small list of numbers because not all bra types come in all sizes for practical reasons, are simply listed.

Regarding your actual question, however, I think there's too much emphasis on selectors. Why not make the starting point a search input? User inputs what they know to be their size, and is returned a list of results that "closely match". e.g. they search for 75C, and get returned 75C, 70D, and 80C.

There is a UI/UX problem somewhere in your question, but delivering in the context of this unrealistic scenario makes it difficult to answer properly.

• Sorry if my wording wasn’t clear enough, but I didn‘t (primarily) mean the size selection on the product page, but filter options in product search, like Find > Women > Lingerie > Bras. Commented Nov 16, 2014 at 21:35
• Even if you’re a 75C (or your significant other is), a size that is available for most bras, you still might want to filter products for size, e.g. when browsing the “Clearance Sale” section with only select sizes available. It’s a frustrating UX, finding a product you like that’s not or no longer for sale in your size. Doing a bit of research, I found that shops are doing it quite differently: some don’t offer size filters at all or only in narrowed categories; fields for girth and cup may be combined or separated and possibly selected concurrently, yet others support personal size profiles. Commented Nov 17, 2014 at 13:16