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.
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this communityI 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.
Avoid drop downs if you can. See JohnLewis.com for a good solution to showing sizes and their availability.
For touch devices the use of + - as buttons can be effective.
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; http://ui-patterns.com/patterns/ProductPage
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
Here is what to do:
1 - Make sure your current design is buttoned up.
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 Zappos.com, Amazon.com 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.