Always Use “Buttons” for Size Selection(baymard.com)
baymard.com
Always Use “Buttons” for Size Selection
https://baymard.com/blog/use-buttons-for-size-selection
12 comments
That bugs me less than being able to exclude features that I don't want, especially popular ones. I can not think of a single store that allows me to exclude things using the same set of filters.
For example, let's say I want bluetooth-less headphones. Simply selecting "wired" isn't enough as it will show me headphones that support both wired and wireless capabilities. Sometimes I don't want a feature, even a popular one, and it's extremely tedious to wade through results of stuff I will never want.
For example, let's say I want bluetooth-less headphones. Simply selecting "wired" isn't enough as it will show me headphones that support both wired and wireless capabilities. Sometimes I don't want a feature, even a popular one, and it's extremely tedious to wade through results of stuff I will never want.
I want this feature as badly as you do. In my case, to filter out any smart TVs when shopping for a replacement television. I recognize though, from working in retail and from looking at the front and back ends of the human process (and the front and back ends of POS, ERM, and other software that manages a business' inventory)... That the world itself will probably never be well ordered enough to support reliable logical operators with accurate results when searching most inventory out there.
You have to nail the software that developers have to write to understand the inventory it's keeping well enough for those operators to work. You have to nail the human process of keeping the inventory itself (and any tagging/categorization in the software) manually up to date. You have to deal with the malincentives of all the people selling product on to you at the distributor level, and how that affects the information they provide with the product.
I wish for consistent, comprehensive logical operators in product search but I just don't see it happening. I think it's an example of a 'wicked problem'[1], and one that someone could probably make a killing solving.
[1] https://en.wikipedia.org/wiki/Wicked_problem
You have to nail the software that developers have to write to understand the inventory it's keeping well enough for those operators to work. You have to nail the human process of keeping the inventory itself (and any tagging/categorization in the software) manually up to date. You have to deal with the malincentives of all the people selling product on to you at the distributor level, and how that affects the information they provide with the product.
I wish for consistent, comprehensive logical operators in product search but I just don't see it happening. I think it's an example of a 'wicked problem'[1], and one that someone could probably make a killing solving.
[1] https://en.wikipedia.org/wiki/Wicked_problem
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.
Of note I was part of the team that helped build this feature over 10 years ago.
Just as an FYI, “shop all styles” excludes categories like jackets. A novel take on the word all.
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.
I just have a memory of shitty Shopify templates that small clothes manufacturers use. I think its pretty uncommon on small merchants.
In some markets this is called "parametric search".
Digikey and McMaster-Carr are the kings of this.
Ah, Digikey is excellent. I've used McMaster-Carr for a while as a reference model when I'm writing catalogue/search UIs, nice to have another one to hand.
The product database behind Digikey is much larger but the metadata of lower quality than McMaster. It means that filtering can be very frustrating if the parameter you’re filtering on has entries for, say,
I guess my point is that the taxonomy and cleanliness of the product database is just as important as the front-end UI
1 in
1.0”
25.4mm
1”
1lpi
I guess my point is that the taxonomy and cleanliness of the product database is just as important as the front-end UI
Oh definitely. In terms of reference model what I'm looking at is how easy it is use that exposed taxonomy, how fast it is, etc. I can only make inferences about the taxonomies from that (though the quality of the search gives extremely strong indications as to how the data is structured).
The example you give is really good though. It is an indication how well structured/clean the metadata is, and it's something that should be dealt with, even if it's not at the metadata level -- ie some kind of sanitisation/formatting layer just behind the UI layer which parses sizes/weights/etc to a single common unit that can be switched at the customer's preference (even this breaks down though due to sizing subtlteies in groups of similar things). I've worked for a large electrical/electronic components wholesaler (CEF), and was always an issue -- every supplier has their own metadata conventions, and it didn't matter how careful we were, the sheer amount of products flooded our ability to ensure complete consistency.
A different market, but same issue: the ASOS storefronts I like very much, but as they've absorbed different brands and suppliers, the search filtering has visible suffered over the last few years. Sizing (common problem for all retailers) is the most obvious issue
The example you give is really good though. It is an indication how well structured/clean the metadata is, and it's something that should be dealt with, even if it's not at the metadata level -- ie some kind of sanitisation/formatting layer just behind the UI layer which parses sizes/weights/etc to a single common unit that can be switched at the customer's preference (even this breaks down though due to sizing subtlteies in groups of similar things). I've worked for a large electrical/electronic components wholesaler (CEF), and was always an issue -- every supplier has their own metadata conventions, and it didn't matter how careful we were, the sheer amount of products flooded our ability to ensure complete consistency.
A different market, but same issue: the ASOS storefronts I like very much, but as they've absorbed different brands and suppliers, the search filtering has visible suffered over the last few years. Sizing (common problem for all retailers) is the most obvious issue
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.
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.
Along the same lines: if your store has multiple locations, allow me to filter by location. Sometimes I don't care so much about the exact product (think audio cables), I just want to be able to go to the closest store and pick it up.
Online auto parts stores tend to do this well. Specify the make, model, year, and engine of your car and you only see parts that apply to you. It works so well that it's easier to browse the categories than to use search in well-curated stores.
For example, https://idparts.com is a highly-curated store that sells parts for diesel-engine cars, mostly Volkswagens. If I need a car part I look here first.
For example, https://idparts.com is a highly-curated store that sells parts for diesel-engine cars, mostly Volkswagens. If I need a car part I look here first.
Showing an attractive item which is currently out of stock would make complete sense, if there'd be an box to put an email and be notified when it's back in stock.
You can filter the entire stock by size on Amazon https://i.imgur.com/3QGQVZI.png
Yeah but then 70% of the results are wrong. Amazon's filtering sucks
This is even worse with shoes or pants online, where you have a large matrix of size by color.
It should save your size in your profile and pre-filter the whole site.
it's possible in germanys zalando. I always do this.
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.
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.
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.
It really bugs me when they use drop downs for numbers. We have a "number" type entry. Use that.
there are issues with input type="number".
https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-des...
https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-des...
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.
I think you've summed it up nicely when dropdowns should be used vs buttons.
> 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.
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.
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.
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.
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.
Yoox.com has exactly this iirc, allows you to set sizes for for shoes, trousers and shirts etc I believe.
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.
> 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").
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").
Why does the site need access to my VR headset?
https://i.imgur.com/Tg5G6Ma.png
https://i.imgur.com/Tg5G6Ma.png
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.
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.
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?
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?
Site works for me in Firefox with uBlock Origin active and blocking Javascript and remote fonts, doesn't ask for access to anything.
This is the only way to browse the modern web.
Sounds like browser fingerprinting for ad profiles
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.
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.
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.
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.
There is something like 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/. 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.
There should be open-sourced service where you can pair your email address + PIN with collection of sizes.
> 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.
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.
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_titl...
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_titl...
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.
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.
Pretty good research on the same topic from this firm a few years ago: https://baymard.com/blog/drop-down-usability
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-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.
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-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.
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.
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.
It sounds like the issue you encountered was that the styling of the option didn't make it clear that it was disabled.
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.
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?
"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.