8 ms·

Always Use “Buttons” for Size Selection

118 points by oedmarap 6y ago

CarVac 6y ago
Using dropdowns instead of radio buttons is a huge pet peeve of mine. Dropdowns are only appropriate if the quantity of choices is large and the user already knows what the choices are, and then you should be able to type your selection in. This would be things like birth year, country, and state/province. Otherwise you add extra clicks, extra scrolling, and visual search of a brand-new element that can't be evaluated ahead of time.
- david422 6y ago
  I think you've summed it up nicely when dropdowns should be used vs buttons.
- weinzierl 6y ago
  > Dropdowns are only appropriate if the quantity of choices is large and the user already knows what the choices are, and then you should be able to type your selection in. Large, but not too large. You might think this is a silly objection and no one can get that one wrong but I actually have an example: I once worked for a company with a six digit number of employees and they introduced a new ticket system for company wide support. This was some years ago and also the transition from a dedicated desktop software to a browser based web UI. Someone had the idea to make the ticket number selection a drop down, which looked nice in testing and a few hours after production roll out, but the fun ended quickly - with thousands of tickets it was completely unusable within a day.
  - CGamesPlay 6y ago
    Concur (an enterprise expense tracking app) used to require you enter the city of the expense you were tracking. It provided you with an alphabetical list of every city they knew about in a dropdown. Haven't used the software in the better part of a decade, so hopefully it's gotten better.
- kevincox 6y ago
  It really bugs me when they use drop downs for numbers. We have a "number" type entry. Use that.
  - arielserafini 6y ago
    there are issues with input type="number". https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/ https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-des...
  - vntok 6y ago
    No, do not use that input type. Please have a deep read of sibling commenter's link. Its numerous flaws make input type=number completely inaccessible and therefore almost useless to the very kind of users who would normally benefit the most from simpler & more specialized inputs.
- klyrs 6y ago
  Mobile interfaces are the worst. "Enter your birthday" but the year is a "dropdown list" that you need to scroll from 2021 all the way down to however old you are.
jhunter1016 6y ago
Pretty good research on the same topic from this firm a few years ago: https://baymard.com/blog/drop-down-usability https://baymard.com/blog/drop-down-usability
- specialist 6y ago
  Nicely spotted. I appreciate that the Baymard article also includes mobile UI. This problem is made much worse by the iOS Picker component. Yes, Pickers are especially bad for web site forms. And, it's turrible for native app forms too. So many times I've been confused by scrolling pickers. When iOS was new, it seemed novel and clever. Yay. And I'm super grateful for the experimentation. But it just didn't work out. It should just be removed. https://developer.apple.com/design/human-interface-guidelines/ios/controls/pickers/ https://developer.apple.com/design/human-interface-guideline... Pickers could maybe be rescued by making them always overlay on top, instead of the current weird inlay at the bottom of the screen.
bux93 6y ago
I'm very unlikely to buy a size that won't fit me or my immediate family members. But somehow, no clothing shop seems to allow you to set up a couple of profiles (women's clothing size M, men's clothing size L) and filter the entire catalogue by default. I'm reminded of the highstreet, where I've only found one shop that sorts clothes on the rack based on size. I suppose this is to encourage browsing and inquiring if your size is 'in the back', but it's excrutiatingly inefficient.
- arkitaip 6y ago
  Of course they know that would be the most same option for customers but when vanity metrics and crash management practices take priority, customer satisfaction usually suffers.
- CharlesW 6y ago
  > But somehow, no clothing shop seems to allow you to set up a couple of profiles (women's clothing size M, men's clothing size L) and filter the entire catalogue by default. DXL (a big and tall retailer) allows you to create a "size profile" and then turn on "Shop by your size". Zappos does something similar in a different way, allowing you to turn on an option to auto-apply size filtering for subsequent searches ("turn on auto-apply for men's size(s): 14, 15, 14.5").
- Garvey 6y ago
  Yoox.com has exactly this iirc, allows you to set sizes for for shoes, trousers and shirts etc I believe.
FriedrichN 6y ago
This is assuming that whatever you're selling the customer only wants one size, which would be the case for clothing but not for all things. One case would be lengths of cables or different weights of barbell plates, there the customer would want to buy several of different sizes. In that case all sizes should be visible with inputs for the desired quantities.
rjmunro 6y ago
Sizes in online clothing shops should be global persistent settings. If I am shoe size 10, no part of the site should ever show me anything that isn't available in that size. You could use checkboxes to enable searching for more than one size at the same time, e.g. it might be useful for searching for clothes for my kids, or if I know that I can usually fit more than one size because I'm on the border between 2.
- ojagodzinski 6y ago
  There is something like https://www.esize.me/ https://www.esize.me/ where You scan your feet in one shop, upload scan to them and use it on different e-shops like http://eobuwie.pl/ http://eobuwie.pl/. Poland-specific but resolution to Your problem is there ;) There should be open-sourced service where you can pair your email address + PIN with collection of sizes.
dukeofdoom 6y ago
I tried buying a jacket online. Was a little confused when I pressed a L button and it did not register. Took me a while that they sold out of that size. Not that I think about it, not really sure how to best handle that UI situation.
- SamBam 6y ago
  In the design suggested by the article (and also used in places like Amazon) the L button should have been visibly disabled. I think this is pretty clear to most people that it means that size is not available. It sounds like the issue you encountered was that the styling of the option didn't make it clear that it was disabled.
ShockedUnicorn 6y ago
Why does the site need access to my VR headset? https://i.imgur.com/Tg5G6Ma.png https://i.imgur.com/Tg5G6Ma.png
- TonyTrapp 6y ago
  Sounds like browser fingerprinting for ad profiles
- kwhitefoot 6y ago
  Site works for me in Firefox with uBlock Origin active and blocking Javascript and remote fonts, doesn't ask for access to anything.
  - beervirus 6y ago
    This is the only way to browse the modern web.
- Farbklex 6y ago
  It's because they use Vimeo to host the videos and use the embedded player there. Apparently Vimeo can be played inside the VR headset? I am not sure but I get this message everytime I open any website with an embedded Vimeo player.
- LeonenTheDK 6y ago
  I've been seeing a tonne of VR permission requests lately, and always on the most unassuming sites. Never seems like there's actually any VR content available. Heck, I haven't even had my VR headset plugged in since Christmas. Does the browser cache that it existed, know there's drivers or some such on your system, or would it be asking regardless?
systemvoltage 6y ago
Just allow me to filter your entire stock list by size. No one does this. "OMG, this shirt is awesome" followed by "Damn it, it's out of stock", after opening it and has M (Medium) greyed out. Disappointment pattern, I call it.
- LeanderK 6y ago
  it's possible in germanys zalando. I always do this.
- ch4s3 6y ago
  Off the top of my head three are a few places that do this: REI, Norse Projects, End Clothing, Mr. Porter, adidas, and a few others. It should be more common though. I wonder if it used to be harder to know at search time if you were OOS on a particular UPC.
- karaterobot 6y ago
  I'm always astonished by how it's 2021 and Amazon doesn't know my shoe size. Rather, they must know it, they just refuse to use it to help me find shoes.
- genericlogic 6y ago
  This is not an uncommon feature. The word I have used for this is 'facets' (unsure if its correct or not). Look at Gap.com for an example. For example click on "Men > Shop All Styles" then click whatever 'facet' you want on the left. Of note I was part of the team that helped build this feature over 10 years ago.
  - systemvoltage 6y ago
    That's awesome, kudos to you! I just have a memory of shitty Shopify templates that small clothes manufacturers use. I think its pretty uncommon on small merchants.
  - wiml 6y ago
    In some markets this is called "parametric search".
ehutch79 6y ago
I thought buttons were only ever supposed to be used for actions, and it was ux mistake to use them instead of radio selection or dropdown?
- wiml 6y ago
  Semantically, I think the buttons this article talks about are radio-buttons (if exclusive) or checkboxes (if not).
- fbrchps 6y ago
  Are these buttons not for the action of "select this size"?
aasasd 6y ago
> However, some sites have a default preselected size for products — for example, a 39 x 27 inch poster size selected by default — which enables users to add a product to the cart without reviewing and selecting the size option at all on the product page. During our eye-tracking study, we observed that several users at AllPosters never even looked at the size drop-down, instead going with whatever size was the default. Sorta have to question now whether such usability studies show real behavior of people. Because I can't conceive of someone buying a poster and never thinking whether it would fit in the space on the wall. At least if the person isn't drunk.
- Geeflow 6y ago
  I wouldn't be much surprised. The amount of things people do _not_ notice is staggering. When I do usability tests there's almost always something that doesn't get noticed although I thought it obvious and/or important. Personal anecdote: I managed to buy paper for my printer and only noticed upon arrival that it was the wrong size. The product photo looked right to be. I did not bother to check the details - or even the product title. ¯\_(ツ)_/¯ Also, regarding "if the person isn't drunk": There's a great short talk called "the user is drunk" which makes one much more sympathetic to such seemingly unexplainable comprehension fails that sometimes drive product designers mad: https://www.youtube.com/watch?v=r2CbbBLVaPk&feature=emb_title https://www.youtube.com/watch?v=r2CbbBLVaPk&feature=emb_titl...
CivBase 6y ago
All of the "bad" examples shown have common issues that are ignored by this article. They use inconsistent styles for their fields (particularly when mixing buttons and dropdowns). They also do not group all fields together as one form. Instead, the size field is presented in some other part of the page, making it difficult for users to navigate through the form. Meanwhile, the "good" examples all use consistent styles for the fields and group all fields together in the same part of the page. Dropdowns might be part of the problem, but considering the examples given in this article, I think that problem is being significantly overstated. I would caution against forming any general opinions about dropdowns from just this article.
thitcanh 6y ago
Dropdowns/selects/menus are the standard way to chicken out of designing proper UIs. Unless you have dozens of choices, you can probably do better than a dropdown.

118 points by oedmarap 6y ago

Using dropdowns instead of radio buttons is a huge pet peeve of mine. Dropdowns are only appropriate if the quantity of choices is large and the user already knows what the choices are, and then you should be able to type your selection in. This would be things like birth year, country, and state/province. Otherwise you add extra clicks, extra scrolling, and visual search of a brand-new element that can't be evaluated ahead of time.

david422 6y ago
I think you've summed it up nicely when dropdowns should be used vs buttons.
weinzierl 6y ago
> Dropdowns are only appropriate if the quantity of choices is large and the user already knows what the choices are, and then you should be able to type your selection in. Large, but not too large. You might think this is a silly objection and no one can get that one wrong but I actually have an example: I once worked for a company with a six digit number of employees and they introduced a new ticket system for company wide support. This was some years ago and also the transition from a dedicated desktop software to a browser based web UI. Someone had the idea to make the ticket number selection a drop down, which looked nice in testing and a few hours after production roll out, but the fun ended quickly - with thousands of tickets it was completely unusable within a day.
- CGamesPlay 6y ago
  Concur (an enterprise expense tracking app) used to require you enter the city of the expense you were tracking. It provided you with an alphabetical list of every city they knew about in a dropdown. Haven't used the software in the better part of a decade, so hopefully it's gotten better.
kevincox 6y ago
It really bugs me when they use drop downs for numbers. We have a "number" type entry. Use that.
- arielserafini 6y ago
  there are issues with input type="number". https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/ https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-des...
- vntok 6y ago
  No, do not use that input type. Please have a deep read of sibling commenter's link. Its numerous flaws make input type=number completely inaccessible and therefore almost useless to the very kind of users who would normally benefit the most from simpler & more specialized inputs.
klyrs 6y ago
Mobile interfaces are the worst. "Enter your birthday" but the year is a "dropdown list" that you need to scroll from 2021 all the way down to however old you are.

jhunter1016 6y ago

Pretty good research on the same topic from this firm a few years ago: https://baymard.com/blog/drop-down-usability https://baymard.com/blog/drop-down-usability

specialist 6y ago
Nicely spotted. I appreciate that the Baymard article also includes mobile UI. This problem is made much worse by the iOS Picker component. Yes, Pickers are especially bad for web site forms. And, it's turrible for native app forms too. So many times I've been confused by scrolling pickers. When iOS was new, it seemed novel and clever. Yay. And I'm super grateful for the experimentation. But it just didn't work out. It should just be removed. https://developer.apple.com/design/human-interface-guidelines/ios/controls/pickers/ https://developer.apple.com/design/human-interface-guideline... Pickers could maybe be rescued by making them always overlay on top, instead of the current weird inlay at the bottom of the screen.

bux93 6y ago

I'm very unlikely to buy a size that won't fit me or my immediate family members. But somehow, no clothing shop seems to allow you to set up a couple of profiles (women's clothing size M, men's clothing size L) and filter the entire catalogue by default. I'm reminded of the highstreet, where I've only found one shop that sorts clothes on the rack based on size. I suppose this is to encourage browsing and inquiring if your size is 'in the back', but it's excrutiatingly inefficient.

arkitaip 6y ago
Of course they know that would be the most same option for customers but when vanity metrics and crash management practices take priority, customer satisfaction usually suffers.
CharlesW 6y ago
> But somehow, no clothing shop seems to allow you to set up a couple of profiles (women's clothing size M, men's clothing size L) and filter the entire catalogue by default. DXL (a big and tall retailer) allows you to create a "size profile" and then turn on "Shop by your size". Zappos does something similar in a different way, allowing you to turn on an option to auto-apply size filtering for subsequent searches ("turn on auto-apply for men's size(s): 14, 15, 14.5").
Garvey 6y ago
Yoox.com has exactly this iirc, allows you to set sizes for for shoes, trousers and shirts etc I believe.

FriedrichN 6y ago

This is assuming that whatever you're selling the customer only wants one size, which would be the case for clothing but not for all things. One case would be lengths of cables or different weights of barbell plates, there the customer would want to buy several of different sizes. In that case all sizes should be visible with inputs for the desired quantities.

rjmunro 6y ago

Sizes in online clothing shops should be global persistent settings. If I am shoe size 10, no part of the site should ever show me anything that isn't available in that size. You could use checkboxes to enable searching for more than one size at the same time, e.g. it might be useful for searching for clothes for my kids, or if I know that I can usually fit more than one size because I'm on the border between 2.

ojagodzinski 6y ago
There is something like https://www.esize.me/ https://www.esize.me/ where You scan your feet in one shop, upload scan to them and use it on different e-shops like http://eobuwie.pl/ http://eobuwie.pl/. Poland-specific but resolution to Your problem is there ;) There should be open-sourced service where you can pair your email address + PIN with collection of sizes.

dukeofdoom 6y ago

I tried buying a jacket online. Was a little confused when I pressed a L button and it did not register. Took me a while that they sold out of that size. Not that I think about it, not really sure how to best handle that UI situation.

SamBam 6y ago
In the design suggested by the article (and also used in places like Amazon) the L button should have been visibly disabled. I think this is pretty clear to most people that it means that size is not available. It sounds like the issue you encountered was that the styling of the option didn't make it clear that it was disabled.

ShockedUnicorn 6y ago

Why does the site need access to my VR headset? https://i.imgur.com/Tg5G6Ma.png https://i.imgur.com/Tg5G6Ma.png

TonyTrapp 6y ago
Sounds like browser fingerprinting for ad profiles
kwhitefoot 6y ago
Site works for me in Firefox with uBlock Origin active and blocking Javascript and remote fonts, doesn't ask for access to anything.
- beervirus 6y ago
  This is the only way to browse the modern web.
Farbklex 6y ago
It's because they use Vimeo to host the videos and use the embedded player there. Apparently Vimeo can be played inside the VR headset? I am not sure but I get this message everytime I open any website with an embedded Vimeo player.
LeonenTheDK 6y ago
I've been seeing a tonne of VR permission requests lately, and always on the most unassuming sites. Never seems like there's actually any VR content available. Heck, I haven't even had my VR headset plugged in since Christmas. Does the browser cache that it existed, know there's drivers or some such on your system, or would it be asking regardless?

systemvoltage 6y ago

Just allow me to filter your entire stock list by size. No one does this. "OMG, this shirt is awesome" followed by "Damn it, it's out of stock", after opening it and has M (Medium) greyed out. Disappointment pattern, I call it.

LeanderK 6y ago
it's possible in germanys zalando. I always do this.
ch4s3 6y ago
Off the top of my head three are a few places that do this: REI, Norse Projects, End Clothing, Mr. Porter, adidas, and a few others. It should be more common though. I wonder if it used to be harder to know at search time if you were OOS on a particular UPC.
karaterobot 6y ago
I'm always astonished by how it's 2021 and Amazon doesn't know my shoe size. Rather, they must know it, they just refuse to use it to help me find shoes.
genericlogic 6y ago
This is not an uncommon feature. The word I have used for this is 'facets' (unsure if its correct or not). Look at Gap.com for an example. For example click on "Men > Shop All Styles" then click whatever 'facet' you want on the left. Of note I was part of the team that helped build this feature over 10 years ago.
- systemvoltage 6y ago
  That's awesome, kudos to you! I just have a memory of shitty Shopify templates that small clothes manufacturers use. I think its pretty uncommon on small merchants.
- wiml 6y ago
  In some markets this is called "parametric search".

ehutch79 6y ago

I thought buttons were only ever supposed to be used for actions, and it was ux mistake to use them instead of radio selection or dropdown?

wiml 6y ago
Semantically, I think the buttons this article talks about are radio-buttons (if exclusive) or checkboxes (if not).
fbrchps 6y ago
Are these buttons not for the action of "select this size"?

aasasd 6y ago

> However, some sites have a default preselected size for products — for example, a 39 x 27 inch poster size selected by default — which enables users to add a product to the cart without reviewing and selecting the size option at all on the product page. During our eye-tracking study, we observed that several users at AllPosters never even looked at the size drop-down, instead going with whatever size was the default. Sorta have to question now whether such usability studies show real behavior of people. Because I can't conceive of someone buying a poster and never thinking whether it would fit in the space on the wall. At least if the person isn't drunk.

Geeflow 6y ago
I wouldn't be much surprised. The amount of things people do _not_ notice is staggering. When I do usability tests there's almost always something that doesn't get noticed although I thought it obvious and/or important. Personal anecdote: I managed to buy paper for my printer and only noticed upon arrival that it was the wrong size. The product photo looked right to be. I did not bother to check the details - or even the product title. ¯\_(ツ)_/¯ Also, regarding "if the person isn't drunk": There's a great short talk called "the user is drunk" which makes one much more sympathetic to such seemingly unexplainable comprehension fails that sometimes drive product designers mad: https://www.youtube.com/watch?v=r2CbbBLVaPk&feature=emb_title https://www.youtube.com/watch?v=r2CbbBLVaPk&feature=emb_titl...

CivBase 6y ago

All of the "bad" examples shown have common issues that are ignored by this article. They use inconsistent styles for their fields (particularly when mixing buttons and dropdowns). They also do not group all fields together as one form. Instead, the size field is presented in some other part of the page, making it difficult for users to navigate through the form. Meanwhile, the "good" examples all use consistent styles for the fields and group all fields together in the same part of the page. Dropdowns might be part of the problem, but considering the examples given in this article, I think that problem is being significantly overstated. I would caution against forming any general opinions about dropdowns from just this article.

thitcanh 6y ago

Dropdowns/selects/menus are the standard way to chicken out of designing proper UIs. Unless you have dozens of choices, you can probably do better than a dropdown.