Skip to main content
edited body
Source Link
bishop
  • 804
  • 5
  • 14
added 105 characters in body
Source Link
bishop
  • 804
  • 5
  • 14

tl;drTL;DR Based on an informal usability study conducted on a similar need (but in a different problem domain):

 

Sample implementationSample implementation

JS FiddleJS Fiddle

tl;dr

Sample implementation

JS Fiddle

TL;DR Based on an informal usability study conducted on a similar need (but in a different problem domain):

 

Sample implementation

JS Fiddle

deleted 14 characters in body
Source Link
bishop
  • 804
  • 5
  • 14
  1. PutSeparate the "none""none of the other options" option andfrom the list of other options in a.
  2. Place the two lists side-by-side list. Put the most common option in the first read position. So, if the language is L-R andsuch that the most common option is "none", place "none" in the list on the left and the other items in a list to its rightcomes first.
  3. The "none""none of the other options" option should be a checkboxcheck box, like all the others.
  4. The checkboxes should act as a toggle: if "none" selected, others are disabled. If any one of others is selected, "none" disabled.
  5. Use text color/font weight/font style to separate "none" from the others.
  1. A long list of the options with a "none of these" radiocheckbox at the bottom.
  2. Same as 1, but with a "none of these" toggle button instead of a radiocheckbox.
  3. A long list, but with a "none of these" radiocheckbox offset out of the flow.
  4. Same as 3, but with athe button is offset.

The control, and original implementation, was #1. All scenarios were presented with similar formatting: same font, same line spacing, etc. If the "none" option was selected, there was no "graying of the list". (PopIf you care, the population stats: 62 users, avg. age 37, 59% reported as female, 5% experiencereported experiencing a form of color blindness.)

  1. Put the "none" option and the other options in a side-by-side list. Put the most common option in the first read position. So, if the language is L-R and the most common option is "none", place "none" in the list on the left and the other items in a list to its right.
  2. The "none" should be a checkbox, like all the others
  3. The checkboxes should act as a toggle: if "none" selected, others are disabled. If any one of others is selected, "none" disabled.
  4. Use text color/font weight/font style to separate "none" from the others.
  1. A long list of the options with a "none of these" radio at the bottom.
  2. Same as 1, but with a "none of these" toggle button instead of a radio.
  3. A long list, but with a "none of these" radio offset out of the flow.
  4. Same as 3, but with a button.

The control, and original implementation, was #1. All scenarios were presented with similar formatting: same font, same line spacing, etc. If the "none" option was selected, there was no "graying of the list". (Pop stats: 62 users, avg. age 37, 59% female, 5% experience a form of color blindness.)

  1. Separate the "none of the other options" option from the list of other options.
  2. Place the two lists side-by-side, such that the most common list comes first.
  3. The "none of the other options" option should be a check box, like all the others.
  4. The checkboxes should act as a toggle: if "none" selected, others are disabled. If any one of others is selected, "none" disabled.
  5. Use text color/font weight/font style to separate "none" from the others.
  1. A long list of the options with a "none of these" checkbox at the bottom.
  2. Same as 1, but with a "none of these" toggle button instead of a checkbox.
  3. A long list, but with a "none of these" checkbox offset out of the flow.
  4. Same as 3, but the button is offset.

The control, and original implementation, was #1. All scenarios were presented with similar formatting: same font, same line spacing, etc. If the "none" option was selected, there was no "graying of the list". (If you care, the population stats: 62 users, avg. age 37, 59% reported as female, 5% reported experiencing a form of color blindness.)

added 126 characters in body
Source Link
bishop
  • 804
  • 5
  • 14
Loading
Added study stats that people may like to know.
Source Link
bishop
  • 804
  • 5
  • 14
Loading
Source Link
bishop
  • 804
  • 5
  • 14
Loading