Best practice to select multiple two-dimensional options

Question

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 70C70D
75A 75B 75C75D 75E

   80B80C 80D 80E

  70A 75A
70B 75B80B
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 75B75C75D 75E
80

   ▼

  ▲
B
C ▸ 70C75C80C
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.

Answer 1

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.

German Example | US Example

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.