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.

  • I'm confused, what is your question? – Majo0od Oct 3 '16 at 17:12
  • Sorry, I have updated the question. – Ricardo Oct 3 '16 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 '16 at 2:46
  • What do you mean with "not fit on screen"? Horizontally? or the whole screen? – rr1g0 Oct 4 '16 at 5:46
  • 1
    @rr1g0 I have updated the question. – Ricardo Oct 4 '16 at 5:52
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.

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.

  • 1
    Why not check boxes? Seems like you're adding to and subtracting – Majo0od Oct 3 '16 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 '16 at 18:46
  • It could be: do you want anything with your ice cream? – Majo0od Oct 3 '16 at 18:47
  • 3
    I mean... from his question, option a was always going to be an option. – Majo0od Oct 3 '16 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 '16 at 19:06
6

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

  • 2
    No A checkbox at all, since he doesn't say they are allowed to not select A. ;) – Wildcard Oct 4 '16 at 3:55
  • @Wildcard You read "Select only A" different than I do – paparazzo Oct 4 '16 at 5:16
  • A value is always selected. – Ricardo Oct 4 '16 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.

  • I think this is the best approach but I have not clue how do this in storyboard. – Ricardo Oct 4 '16 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 '16 at 1:27
  • @ZachMierzejewski My bad; I tend to think more on the lines of a developer. Updated to reflect it – Slartibartfast Oct 5 '16 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.

  • I was thinking use a range selector. – Ricardo Oct 3 '16 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 '16 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 '16 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 '16 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 '16 at 20:17
1

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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.