3

I have 3 values - A, B and C. The values can be selected in the following ways:

  1. Select A only
  2. Select A and B
  3. Select A, B and C

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.

Improve this question
6
  • I'm confused, what is your question?
    – UXerUIer
    Oct 3, 2016 at 17:12
  • Sorry, I have updated the question.
    – Ricardo
    Oct 3, 2016 at 17:16
  • a vertical switch sounds good, with a being selected when b is selected, and b being selected when c is selected.
    – njzk2
    Oct 4, 2016 at 2:46
  • What do you mean with "not fit on screen"? Horizontally? or the whole screen?
    – rr1g0
    Oct 4, 2016 at 5:46
  • 1
    @rr1g0 I have updated the question.
    – Ricardo
    Oct 4, 2016 at 5:52

6 Answers 6

Reset to default
4

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.

enter image description here

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.

Improve this answer
8

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: Example picture with ice cream.

Improve this answer
12
  • 1
    Why not check boxes? Seems like you're adding to and subtracting
    – UXerUIer
    Oct 3, 2016 at 18:37
  • 2
    Because checkboxes mean more than one option can be selected and each can be selected equally. That's not true in this case. B can never be selected alone, and A without B or C is subtly different from A and B but not C. This is the unnecessary complication I was referring two.
    – Nathan Rabe
    Oct 3, 2016 at 18:46
  • It could be: do you want anything with your ice cream?
    – UXerUIer
    Oct 3, 2016 at 18:47
  • 3
    I mean... from his question, option a was always going to be an option.
    – UXerUIer
    Oct 3, 2016 at 18:55
  • 1
    The OP suggests that the option names are long so this may look awkward but I think this is still a decent option.
    – Andre Dickson
    Oct 3, 2016 at 19:06
6

No B check box until they select A
No C check box until they select A and B

Improve this answer
3
  • 2
    No A checkbox at all, since he doesn't say they are allowed to not select A. ;)
    – Wildcard
    Oct 4, 2016 at 3:55
  • @Wildcard You read "Select only A" different than I do
    – paparazzo
    Oct 4, 2016 at 5:16
  • A value is always selected.
    – Ricardo
    Oct 4, 2016 at 5:32
3

I was thinking somewhere on the lines of one vertical slider that also gives feedback as you drag its range.

Range slider for value A Range slider for value A+B Range slider for value A+B+C

I created a jsFiddle demonstrating this.

Improve this answer
3
  • I think this is the best approach but I have not clue how do this in storyboard.
    – Ricardo
    Oct 4, 2016 at 5:31
  • +1 But as a nobody, my first impression from your answer was that you had a crazy scheme of 3 sliders. I then checked out your jsFiddle and was like, "oh, cool!"
    – Zach Mierzejewski
    Oct 5, 2016 at 1:27
  • @ZachMierzejewski My bad; I tend to think more on the lines of a developer. Updated to reflect it
    – Slartibartfast
    Oct 5, 2016 at 2:45
2

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:

  1. 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.

  2. 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.

  3. When the user selects B, you don't have to do any additional work since A is already selected by default.

Improve this answer
5
  • I was thinking use a range selector.
    – Ricardo
    Oct 3, 2016 at 17:49
  • @Ricardo why a range selector? If you have discrete options that the user needs to select and the options don't lie along a range I wouldn't use a range selector.
    – Andre Dickson
    Oct 3, 2016 at 18:39
  • 1
    if he is accumulating options, then I think this is the right answer. Not sure though since the question isn't very clear
    – Devin
    Oct 3, 2016 at 20:10
  • @Devin I think it's fair to assume it's accumulation given range selector was an option for the OP, there are three options and only three possible selections and of course the other answers.
    – Andre Dickson
    Oct 3, 2016 at 20:15
  • 1
    yes, it wasn't clear for me at first if he would be able to select C and A
    – Devin
    Oct 3, 2016 at 20:17
1

Here's a mockup based on @Papparazzi's answer:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer

Your Answer

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

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