User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

enter image description here

I am doing an E-commerce site like Ebay but for clothing industry and I want a way that users can manage colours and sizes.

Sizes should be based on quantity.

Based on this what,s the best way to show it on front-end. enter image description here

share|improve this question
What's wrong with what you currently have suggested? – JonW Mar 17 '14 at 16:14
Nothing wrong but maybe what I have done is logically wrong so I am looking forward for other peoples suggestions on this regard. – user45042 Mar 17 '14 at 16:21
You might find good information here : – Jybz Mar 17 '14 at 16:32
The example isn't good enough because sometimes there maybe more than 4 sizes and more than 3 colours and its going to look really cluttered with that example look. – user45042 Mar 17 '14 at 16:50
I like the design but contrast is really low. Please check it against a contrast checker to see if it follows wcag guidelines – Mervin Johnsingh Mar 17 '14 at 18:11
up vote 0 down vote accepted

Avoid drop downs if you can. See for a good solution to showing sizes and their availability.

For touch devices the use of + - as buttons can be effective.

enter image description here

share|improve this answer
Have you got a screenshot of the johnlewis idea to save everyone having to head over there and hunt around for how they do it? (Plus they may not do it that way forever, so a screenshot will capture what you refer to as-of today). – JonW Mar 18 '14 at 12:30
Thanks to @JDelossantos for adding the screen shot. I'll try to be less lazy next time. – Stewart Dean Mar 20 '14 at 10:01

Being experience eCommerce ux designer - I would like to recommend to throw some different kind of ui patterns to users to understand their feedback. Here is the patterns list;

Btw - I like your design but just make sure that labels should be prominent by improving the contrast.

my suggestions; Color - Either button or dropdown, Size - Dropdown, Qty - textbox

share|improve this answer
Great article. By the way my only problem is how users are going to manage this from back-end. For example say the site is managed by the users like on Ebay. This is what i thought of. – user45042 Mar 18 '14 at 19:41

Here is what to do:

1 - Make sure your current design is buttoned up.

  • There are "+" amongst "Remove" labels. Go one way or the other.
  • "Add Color" seems like an open text field you will need to consider misspelling, corrections and data validation. Having a forced user constraint like a dropdown or checkbox group might help. This is an instance where back-end can effect the user's experience. Best to talk to the engineer about how to handle data-entry and validation.
  • Descriptive help text is verbose. Wordsmith to make it small to the effect of: "one product, many colors".

2 - Think about how someone selects options. Typing "gray" or "grey" are semantically equal but not to a software. Be hesitant to avoid dropdowns as they do serve a purpose.

3 - Mock-up versions with dropdowns, type-ahead or other solutions. Incorporate what you have learned about the back-end creating, updating and deleting data methods. Be creative and try things you see on sites like, and Google Shopping. They have UX teams - stand on the shoulders of giants.

4 - Run the variations by about 5 users, asking them to think aloud as they add their products to their storefront. Look for efficiency (or lack thereof), errors, time to complete tasks and other qualitative information. Look for the big issues and let that inform your design decisions.

If you have the opportunity to stay involved, collect analytics and look for funnels. Pages with unusually high abandonment rates could indicate a design flaw. You can learn alot form these instances.

eComm is complicated. User testing is the way to go to make definitive high-value impacts. Read about the $300 Million Dollar Button for inspiration.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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