User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I have 3 values - A, B and C. The values can be selected in the following ways:
The values used for A, B and C are large enough to not fit on screen.
Every value used for A, B and C are large enough to fit almost all horizontal space in screen.
What kind of UIView is better to achieve this goal? I was thinking about a vertical switch but I have no idea how to re-design a UIView.
You could use a short explanation of what your choices are, and leave a lot of room for one the explanation at the time. See example.
I think Nathan's response is on the right place with removing the "multiple" selection idea, but just a radio button kind of thing is not appropriate for a mobile, specially if you don't have enough room horizontally.
Keep it simple: use radio buttons.
Checkboxes and your rules governing what can be selected and when will be confusing for both your users and programmers alike. Someone will try to select only option B and you'll either have to explain to them that it's not allowed or set up conditions to only allow B after A. (But then what happens if they deselect A?)
All that complication is unnecessary for what is essentially a choice between 3 options. Radio buttons should work nicely. Users will also benefit from having the three options enumerated for them instead of having to puzzle through what is allowed and what is not.
Example:
No B check box until they select A
No C check box until they select A and B
I was thinking somewhere on the lines of one vertical slider that also gives feedback as you drag its range.
I created a jsFiddle demonstrating this.
You need to use checkboxes if you are doing multiple selection. Selecting the checkbox given for the value selects the option and a provided button confirms all the selections made.
It seems you are actually accumulating options rather than allowing for multiple selection. You can modify the checkbox pattern to do allow for this by doing the following modifications:
Since A must always be selected provide only 2 options - B and C. You must of course inform the user of this somehow. Alternatively, if you want to show all three options in the list, you can have A selected but greyed out so the user cannot deselect it.
When the user selects C, automatically select B and have it greyed out so the user cannot deselect it. Again, you must explain to the user why the automatic selections are occurring.
When the user selects B, you don't have to do any additional work since A is already selected by default.
Here's a mockup based on @Papparazzi's answer:
download bmml source – Wireframes created with Balsamiq Mockups
