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.
-
1What's wrong with what you currently have suggested?– JonW ♦Mar 17, 2014 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.– user45042Mar 17, 2014 at 16:21
-
You might find good information here : ux.stackexchange.com/questions/52835/best-product-page-layout– JybzMar 17, 2014 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.– user45042Mar 17, 2014 at 16:50
-
1I like the design but contrast is really low. Please check it against a contrast checker to see if it follows wcag guidelines– MervinMar 17, 2014 at 18:11
Add a comment
|
3 Answers
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.
-
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, 2014 at 12:30
-
Thanks to @JDelossantos for adding the screen shot. I'll try to be less lazy next time. Mar 20, 2014 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; 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
-
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. clip2net.com/s/72ChbK. This is what i thought of. Mar 18, 2014 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 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.
