Dynamic selector answers

Question

Background

On a step, we have two selectors. "Travellers outside Wingly" depends on "Offered to Wingly". It works that you have N number of seats and you can share them or select that some seats will be taken. And you do not need to use all the seats even.
The problem that I run into is that most of the users will select all seats to share with Wingly. As it is convenient for the user I want to even preselect this option. But the dropdown is that then the second selector emphasized text(Travellers outside Wingly) will have no options to select which makes it counter-intuitive...

Question

Is there a better way to display the connection between fields "Offered to Wingly" and "Travellers outside Wingly"?

Answer 1

Since the user need not assign all seats, I think the clearest way would be to:

• keep the inputs separate
• don't restrict user inputs
• provide immediate validation for their selection

^{download bmml source – Wireframes created with Balsamiq Mockups}

This kind of loose structure seems necessary due to your requirements: a user can assign 0-n seats, and any combination whose total is <= n is valid. I think the key here is clear feedback.

Answer 2

I'm not sure if I've understood this correctly but I don't understand why you need to change the available options in the select boxes.

If I have 10 seats the both dropdowns should allow me to select 10 seats for either option.

When I land on the page the 10 seats are allocated to "Offered for Wingly" which means that the selected option for the "Travellers outside Wingly" list should be 0.

^{download bmml source – Wireframes created with Balsamiq Mockups}

If I then decide that I want to put three seats onto the "Travellers outside Wingly" list, then I should be able to select '3' from that dropdown and the "Offered for Wingly selector should automatically change to '7'.

^{download bmml source}

^{download bmml source}

If I want to remove seats altogether then I could set both dropdowns to '3' giving me 4 unallocated seats.

You don't have to remove options from either list - the lists should both give the full possible range of selection - you only select the correct option from the each list based on what is selected in it's counterpart.

Does that make sense?