What is best approach for radio button where "none" is acceptable?

Question

I am designing a section where a user configures account details and profile preferences, including adding and editing phone numbers.

Within the phone number section, the user must also allocate one number, or no numbers to be eligible to receive SMS messaging.

The original design here was much simpler when we were requiring the user to select one phone number. However, the requirements changed to allow "none", and I cannot think of an elegant way to balance both this selection, as well as the "Add Phone" function. I've tried several ways and have moved the section elements around quite a bit from the original, and along the way have lost my way. LOL

Options:

1. The obvious solution is to add a radio with a "None" option, as I have shown in my example. However, I feel that it adds clutter and throws off the hierarchy of the ability to add additional numbers.

2. I've also considered changing to checkboxes, but disabling the others once one is checked. I don't love the idea of trying to make checkboxes act like radios.

I've been dwelling on this too long. Would love fresh eyes and brain cells to take a look!

Answer 1

I see a bit of chaos in the image design.

• What's the difference between the x and the trash can
• If only three numbers can be added, I see the clarification as unnecessary, a space for three numbers will be enough
• Window save/cancel buttons are in the opposite corners

Putting a bit of order in all the functions:

• Add the phone number
• Edit the phone number
• Delete the phone number
• Choose to receive SMS/Text
  • If yes → Select phone number to receive SMS/Text
• Decline to receive SMS/Text

The window content:

• Title + action description
• (Numbered) Fields to put up to three numbers
• Check to get SMS
• Edit icon
• Delet icon
• Phone number field
• Explanation text of the SMS/text
• Cancel/Save buttons

From an organization scheme similar to the following, a good design can be created.

Answer 2

All other requirements being the same, I would recommend splitting up the two tasks:

• Add/edit/delete phone numbers
• Choosing the number that should receive SMS

You can use the pattern shown above for add/edit/delete. Below that, show a dropdown with "Choose where to send SMS messages" with the added phone numbers as the options and "Don't send SMS" as one of the options.

Answer 3

I think the hierarchy of the user interactions is best decided by data-driven and user-centric information.

If the main use case is that most people have and opt for providing mobile phone contact details then you can make that the main focus.

However, from a pure information architecture perspective, the users either want to provide a phone number or they don't (whether they actually have one or not). So your first decision point should be to work out whether this information needs to be captured or not, since if the user doesn't want to provide one then you don't need to show them the rest of the details.

Then the principle of progressive disclosure would suggest that based on the user selecting to provide the details, you reveal input fields to collect the minimum amount of detail required (i.e. one phone number) and then offer the option to add additional numbers.

Using this logic you would need two radio button options, with the phone number option to reveal a basic input form (or CRUD table if you allow many numbers to be added) like some of the answers suggested.