1

I was wondering what would be the best way to display variant when a user clicks on "Add Variant". I already designed two alternatives: display it in ascending order or descending order. I have tested it to internal stakeholders but I still hesitate because the results are 50:50, either they chose Alternative-A or Alternative-B.

On Alternative A, when a user clicks "add variant" then it will appear in ascending order. After the user filled the product variant name, the variant 1 will be automatically changed based on the product variant name, so on. The latest variant will be placed on the bottom. Example:

variant 1

variant 2

variant 3 [this is the latest]

Alternative A: enter image description here

enter image description here

enter image description here

On Alternative B, when a user clicks "add variant" then it will appear in descending order. After the user filled the product variant name, the variant 1 will be automatically changed based on the product variant name, so on. But, the latest variant will be placed on top. Example:

variant 3 [this is the latest]

variant 2

variant 1

Alternative B: enter image description here

enter image description here

enter image description here

I would be glad if someone could give me an opinion and a strong justification to which best UX alternative from those two options. On the other hand, I would like to put an indicator state to the latest variant but I still have no idea how to present it. Maybe you could offer me an idea regarding the indicator state. Thank you in advance!

  • How many variants can be added? – rhauger Jul 11 at 12:01
  • @rhauger I assume that the number of variants wouldn't be more than 10 in this case. – Livin Jul 11 at 12:30
1

My suggestion would be to place the button underneath the list of variants and add the variants downwards. For indication i placed a small label on the new variant to make it easy to differentiate but keep the list scan-able. I also placed a "delete"-icon on the variant because the user might want to remove an variant, you could also add an "edit" or "move"-icon to make it even easier to handle the list. I think this way it's clear where i add what and how.

enter image description here

  • Hi Rhauger, thanks for your suggestion! Structurally it looks systematic and clear. In this case, you prefer the ascending order, right? Perhaps you have an explanation why do you prefer the ascending instead of descending order? – Livin Jul 11 at 13:19
  • Yes, ascending. In my example the "add"-button is at the end of the list, this is the place where you add an element to the list that's why the element should appear at the end. In the analog world you would also add things to a list in ascending order. A nice animation would also enhance UX (for example, fade in / slide in the new element after creation). This would also bring more focus on the new element. – rhauger Jul 11 at 13:24
  • It's about what the user expects to happen. – rhauger Jul 11 at 13:43
  • Alright, based on your design and justification, it makes sense! Thanks a lot, Rhauger! – Livin Jul 11 at 14:00
0

I think there are two concepts mixed:

  • The logic of interactivity
  • The logic of the operation

The logical position of a sum operation is this:

enter image description here

When adding a new operation, the symbol of the operation is placed next to the last result already obtained. This in interactivity would translate as:

enter image description here

There's a working example at the myfonts.com's advanced search

myfonts

  • 1
    For me this looks like i would add a variant on a variant instead of adding it to the same layer. – rhauger Jul 11 at 12:24
  • Hi Dan, thanks for your explanation but placing the "add variant" next to the variant name itself seems more confusing. That's why on my design the "add variant" is only placed on top altogether with the title. – Livin Jul 11 at 13:01
  • What's the step when the user wants to delete a variant? – Danielillo Jul 11 at 13:46
  • On my overall design, I put the "delete" button on the bottom of the product information. It will automatically delete the variant then. @Danielillo – Livin Jul 11 at 13:56

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.