0

I have a question regarding the default component for checkboxes and radio buttons in iOS.

[Context]

In this flow, the user will have to create a two period charging recurrence (for a service), where he has to select the day (day of month) for the first period and then, for the second period, either a specific day (day of month) or a number of days before the end of the month, for the charge to take place.

The user also has the possibility to define optional service period settings (here is where the checkbox comes in), like the type of the charge (if it's an in arrears or in advance payment) or custom start / end date for periods.

I want to create a screen, on iPad, having both checkboxes and radio buttons, but using the default components from the iOS doesn't really help, because the UI used by Apple, it's the opposite of the "common UI" (checkboxes have the UI of radio buttons and radio buttons are a check icon with no box around it). I've attached this wireframe in order to better understand the context in which these components are displayed.

enter image description here

The issue here is that the users can't really understand which is a radio button and which is a checkbox, which makes it harder for the user to have a first read of the screen and understand what's happening.

Only after they randomly tap on the screen they can figure out the behavior of the list:

enter image description here

Do you have any suggestions on how to apply an alternative of using these components but in a more intuitive way?

LE: this app is used by Android users also (on a company device), this is why the UX should accommodate both OS' in an Apple environment.

Disclaimer: This may seem like a design question but it also has major UX implications, this is the reason I posted it here.

  • It would be better to understand what you are asking of the users and the responses which warrant the different controls. – DarrylGodden Jul 5 at 10:35
  • Sorry Darryl, but I don't quite understand your statement. Could you please explain what do you mean? – Phreak Jul 5 at 10:37
  • 1
    It's hard for us to make a recommendation without knowing what you're trying to achieve, you're asking about which components, but UX is broader than that. – DarrylGodden Jul 5 at 11:00
  • I've added some context regarding the goal of the screen. Thanks for the input, Darryl! – Phreak Jul 5 at 11:47
  • Given you're talking dates, why isn't a date picker an option? – DarrylGodden Jul 5 at 13:02
0

The default component for single value selection (same behaviour as a radio button essentially) is the picker: https://developer.apple.com/design/human-interface-guidelines/ios/controls/pickers/

enter image description here

You can use that to enforce single-select behaviour on tablet and keep the default checkbox behaviour that iOS provides for multiple selection.

Alternatively, you can override the default behaviour and styles and create standard checkboxes though perhaps it's not advisable.

P.S iOS also offers segmented controls for single-option selection as well though it's not as common.

0

Isn't this less confusing achieves what you are aiming for?

enter image description here

0

The standard iOS widget for on/off settings is a switch, and not the checkbox appearance shown in your wireframes.

Note how, in the bottom-most paragraph about "using switches to manage the availability of related interface elements," it states that, if the setting is off, you can (and should ;) ) hide any further settings that relate to the toggle switch. In your case, that's the 'optional service period settings' you mention.

As for setting the payment date for the second period, what is the reasoning to offer both "day of month" as well as "remaining days in month?" Does your research show that this is a must have?

In an effort to simplify these settings, maybe(!) you could get away with simply having the user select a day for each of the two periods, so there is not even a need for the user to select between the two kinds.

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.