I wanted to get insights on the best way to show an accepted item.Suppose we have list of offers and one offer that applies to multiple lines ( mobile numbers) i.e XXX-XXX-XXX1, XXX-XXX-XXX2, XXX-XXX-XXX3 etc. as shown in the below image :

Variation 1: On click on Accept cta, the row expands and shows the lines which can be accepted. Prototype link

enter image description here

enter image description here

Variation 2 : On click on Accept cta, a modal popup appears with all the lines listed vertically and can be scrollable : Prototype link

enter image description here

enter image description here

I wanted to know if which is better out of these two and if there are better ways to show the information. Thanks in advance

1 Answer 1


It is a bit hard to determine which variation is better because it really comes down to how much data is likely to be shown to the users.

In variation one, I imagine the layout becomes a bit tricky when you have more items than you can comfortably fit into one row, and also if there is some logical order that you use to display the items that isn't easy to see when it is displayed horizontally across the page.

In variation two, I imagine that it might be a bit annoying to the user if you are switching between different rows and you have to go in and out of pop-ups to provide the input. This is probably acceptable if the user is only going to select a few options in a few items as the most common use case.

Another alternative is to use the accordion from variation one and display the list of items in a single column like you did for variation two. But keep in mind that you should consider the most common use cases and the typical amount of data you need to display before working out the best strategy.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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