0

Hey guys we've a B2B Shop. In the Item View you can order multiple Items depending on which Color and Variant it is.

below you'll see two screenshots where you can order for each variant and color and another one where you are only able to order some specific combinations between colors and variants

many variants with 2 Colors

enter image description here

Now my questions: What would you do to optimize the view to make the shopping experience a bit less painful? And on the other hand - this is a full responsive shop - how to deal with a mobile device in such situations?

Our current solution is pictured in the 3rd image below

Our current solution is pictured in the 3rd image below

  • What do the numbers below the input boxes represent? – Brian May 19 '15 at 14:26
  • current warehouse stock – sintakonte May 19 '15 at 16:46
1

I would remove the incrementing controls from the quantity inputs. The number HTML input type supports this by default, so it's probably unnecessary. Having users use the mouse to increment or decrement something is going to very slow. Ideally, you'd have the ability to exclusively use your keyboard for this whole process (tabbing left/right, incrementing/decrementing with the up/down arrow keys). Nielsen Norman Group wrote a good article about keyboard controls and accessbily that has, I think, some relevant information.

I might change the layout to make color/variant the column and size the row; I don't have any research to support this, but my feeling is that a correct fit is more important than color to most customers. Prioritizing sizing lets you scan and tab quickly across a row, and, I think, would speed up data entry.

It might also be helpful to add some sort of supporting visual element to the column headers to help users scan the columns more easily. In my example below I've used a colored circle, but it really could be anything.

enter image description here

  • What would you do to make that mobile responsive? – Rachel9494 May 20 '15 at 13:33

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.