Should I use radio buttons or check boxes (or something else) for email address?

Question

So I'm building an application where the users will be able to send some information via email.

The previous system had an interface something like this, where the users would select whether they wanted to send to the address as To, CC, or none.

They shouldn't be able to send both To and CC to the same address, but I worry that it won't be as obvious what the radio buttons refer to (and also that they won't be as visually appealing).

I know outlook does it differently, where they pick and address and then add it to the list. Gmail allows you to click on the "To" and "CC" and select which one(s) you want to send it to.

Should I scrap the previous style and press for something a little more standard, or should I try to go with the status quo?

Answer 1

You should never use checkboxes when only one of the options is allowed. You should only afford the design to allow one option. In the instance that you have provided above with the Balsamiq mockup, radio buttons should be used.

However, is there potential either now, or in the future to allow BCC, Reply-To or Followup-To?

In Thunderbird a select group is present with the following options:

• To
• CC
• BCC
• Reply-To
• Newsgroup
• Followup-To

It is pretty standard configuration to have BCC as well as CC, so this will probably mean you will need a select group.

Answer 2

If I've understood it correctly, you're building not an email client but rather an application with email capabilities. In that case, you don't need a Cc: field because it's semantically unnecessary here. Per section 3.6.3 "Destination address fields" of RFC 2822 (Internet Message Format) the purpose of the Cc: is

[to contain] the addresses of others who are to receive the message, though the content of the message may not be directed at them

while the purpose of the To: field is

[to contain] the address(es) of the primary recipient(s) of the message.

According to these definitions, people are considered to be primary recipients if they are supposed to receive notifications, reports, or any other messages your application generates. Otherwise, you might be letting your users send semantically unrelated/unwanted messages (aka spam). Therefore, only one option (To:) is necessary, and it's easily implemented with just one checkbox.

If you ever decide to include another recipient option, such as Bcc:, you should go with the canonical control element for mutually exclusive options, which is the radio button. Checkboxes are used either for selecting multiple options or to record a Boolean state.

And if anyone raises the concern that radio buttons are confusing or visually unappealing for such a scenario (selecting email recipients & method of delivery), test the workflow with real users. The question to be asked during the tests must be "what they find to be the most confusing/annoying/surprising interaction" instead of "whether radio buttons confuse them". Beware, if the test results show that users do indeed prefer checkboxes in this situation, you'll need to solve yet another problem: what to do when all checkboxes in a row are marked. Hopefully, it never comes to it.

Nonetheless, you can improve the readability of the list as well as minimize wrong selections by adding zebra stripes and highlighting the selected rows. (The article on zebra stripes is about implementing them in web apps but the best practices on colors apply everywhere.)

Answer 3

If the CC option is required, maybe a list builder would fit the bill better?

You could have a list of possible recipients on the left, and two lists (one above the other) on the right (one for "To", one for "CC"), with buttons to move a person from one list to another.

Answer 4

You should use radiobuttons instead of checkboxes for selecting the options TO or CC. The standard selection should be at the option "TO". Wether you should insert in front of this options a checkbox column to mark items for sending.

Another solution you can found in Microsoft Outlook when you choose the receiver. The problem is that the selection model is not exclusive.

Answer 5

I think that your current design with two exclusive checkboxes next to each potential recipient is pretty clear.

I wouldn't worry too much about the "don't ever use checkboxes for mutually exclusive options" dogma. The alternative of having three radio buttons on each row (Don't send/To/CC) is less clear.

For added feedback to the user, in the header you might display the total number of To and CC-recipients, respectively.

Also, you could somehow highlight rows (e.g. with color) of the selected recipients (other than with the checkboxes) to aid scanability.

Otherwise, if the list of potential recipients is very long, you might consider, having two other summarizing lists above, one with the To-recipients and the other with CC-recipients. Deleting from and moving between these lists should be possible.

An alternative to having checkboxes, in each row you could have two buttons: To and CC. Then, as described above, you would have the two summarizing lists.