We have this online boutique shop, in product page we have two variants (color & size). So we are thinking what would be the best order of those variants to have a good user experience.

Color then Size enter image description here


Size then Color enter image description here

What shoppers would click first the color or the size?

In Victoria Secret, they arranged the variants that color comes first, should we use this type of convention?

Your thoughts would be greatly appreciated.


Size should be first.

Reasoning: Things that are beyond your control should go first. Your t-shirt size is not something you can control. You just happen to have a certain size.

I can imagine that a certain color t-shirt is possibly not available (or in stock) at a given size. So the question to ask is, which has priority? Let's say our user is a size M and prefers red, so preferred choice is M-red.

Will our user choose L-Red if M-red is not available, or will he/she rather choose M-another color?

I believe the 2nd option is the most logical one. You can't wear a shirt that is too small or too large. But you can wear a t-shirt in your 2nd most favorite color. Therefor size has priority over color.

Another thing you can't control is your sex. When during the process do you select your sex? Probably somewhere in the beginning, and for the very same reason.

  • 1
    +1 Bravo! "Things that are beyond your control should go first" is an eloquent way to put it in sentence. There are lots of context-specific variants, but this is a great statement of design principle. – tohster Aug 9 '15 at 1:47
  • 1
    +1 As this promotes the paradigm to eliminate false expectations as early as possible. – jazZRo Aug 9 '15 at 10:34

Alternatively, you could use a grid.

You've got 2 dimensions of data (size, color) so you could use X for sizes and Y for colors/patterns, or vice versa. I'd put the most predictable and/or smallest amount on the X axis because scrolling down is easier. For example if there are 10+ colors, you wouldn't have a stupid wide page.

enter image description here

Just another option, though I probably wouldn't recommend it in this case. Like others said you can't really choose your size, so it's no use adding the cognitive burden of a more complex 'choice' here.


I think one possibility is to simply test it out what people do and how they respond to the flow. Personally I'd start with a real test with a few people and ask them direct questions regarding some small delays or 'errrr' moments. Next to qualitative test you should also gather some quantitative data, an A/B test could quickly learn you what system is working or isn't. Looking at human behaviour, you'll see that we're mostly visual oriented, which means that the reason we got to click on the red shirt during our high level search was that we thought is looked pretty. That's why I'd prefer the second approach since you've already established the fact that they like red. That being said, I'd definitly look to try and better understand your user and the goal he/she wants to accomplish rather than looking at the 'feature' too much in detail.

Hope this gives you some clues to find the optimal result :-)


When shopping you first check they even have your size, then you choose which color of the shirt you prefer because: why choose your favorite color WHEN YOU MIGHT BE UNABLE TO WEAR IT so you select your size AND THEN choose from the colors you can choose from (since some size color combos might be out of stock)

Hope that answers your question


Whilst I like Bart's answer for this instance, I would make a suggestion for a slightly different circumstance.

When searching for products, style/colour should come first


In the example you've given it looks like we're just about to go to checkout, we've found what we want and would like to take the next step. Prioritising Bart's way works well here as the customer has already decided on the item they wish to buy.

Prior to this I would imagine you would have some sort of search or filter feature for users to find the clothes that they're looking for. 'Display all clothes with xy properties'. In this event I would make the case that it's better to mirror internet shopping's offline counterpart - 'I want a red t-shirt, let's see if they have one/oh, isn't this a nice red t-shirt. Is there one in my size?.'

Typically (not always, I'm just thinking majority), people do not go shopping for size medium t-shirts, but they do go shopping for red t-shirts. Defining properties tend to come first with utility later. 'I need some black brogues... in size 10'

So, by this logic you should prioritise style/colour over size prior to getting to the individual product pages.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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