used for preferences

• with binary options that other preferences are dependent on (e.g. ‘Magnifier’)

  • binary preference could also use an on/off toggle if there are no dependent preferences, if they are the only preferences in the family

  • not used if binary preference is dependent (e.g. ‘show crosshairs’) - check-box should be considered

• that result in immediate action (e.g. activating a number of dependent preferences, or turning a screen reader on)

presentation

• at the top of a preference family, beside the family name

• when off, dependent preferences are collapsed and unavailable

• when on, dependent preferences are revealed

interaction

mouse/touch

• click/tap or slide/swipe toggles

keyboard

• on focus, space or enter will toggle the adjuster

used for preferences

• where value is required to be infinite

• where a numeric value is useful for the user either as a reference point or to make fine adjustments

presentation

• +/- buttons should be positioned so that the minus button is read first 

• if measurement unit is not specified in the adjuster label (e.g. words spoken per minute) and is relevant, unit is indicated beside the numeric value

  • if input field accepts multiple measurement units, both value and unit is editable/selectable (if no unit is entered, last unit is used)

  • if input field accepts only the one measurement unit, only the value is editable/selectable

interaction

mouse/touch

• -/+ changes value by predetermined increments (e.g. text size 3pt increase)

• click/tap to select text entry field

keyboard

• focus is on the input field, -/+ buttons are not in tab order

• up/down arrows immediately apply change in value by predetermined increments

• right/left keys moves text cursor

• number keys used to input specific value, value is changed and applied after removing focus on adjuster

  • if the value is unavailable, input is rounded to the nearest available value

  • if the value is invalid, last valid value is used

used for preferences

• with a defined set of values, either:

  • continuous values (e.g. cursor size)

  • discrete values (e.g. …) with a larger range - radio buttons should be considered if range is small enough to comfortably be presented - checkboxes or on/off toggles should be considered for binary options

• where preferences value is viewed as a relative quantity by the user, rather than a numeric value (e.g. ...)

presentation

• values minimum to maximum are positioned in increasing order following the reading order 

  • icons or labels are positioned at the min/max values

  • if the default value is not the min/max, a marker is used to indicate the position of the default value (e.g. left/right sound balance)

discrete values

• rectangular slider handle is used

• markers are used to indicate selectable values; handle snaps to the nearest value

• if distance between values is too (small to?) accurately target, markers are not needed

interaction

mouse/touch

• click and drag handle to slide

• click on the slider icons/labels to change the value by predetermined increments

mouse-only

• click on a specific position on the slider - indicator shows the nearest selectable value

keyboard

• focus is on the slider handle, icons/labels are not in the tab order

• right & down keys change value in one direction, left & up keys change value in the opposite direction

• value changes by predetermined increments 

used for preferences

• which require the selection of one option from two or more mutually exclusive options

  • radio buttons should be avoided for binary options - checkboxes or on/off toggles should be considered

  • for consistent interaction one option must always be selected (this may mean a ‘none’ option is added)

• to bring attention to the options available and reduce the amount of interaction required from the user

• with categorical or discrete values

  • where there is a large number of values slider should be consider for discrete values and a drop-down for categorical values

presentation

horizontal layout

• preferred for discrete values where value label is short enough to fit in the given space

• values are arranged from min to max in the direction of the reading order

• text labels can be centered below the radio buttons

vertical layout

• preferred for categorical values, discrete values with longer labels, or discrete values after text size increase 

• radio button is positioned at the beginning of the reading order, followed by text labels

icons

• if icons are used (with no text labels), a caret is used to indicate the current selection

interaction

mouse/touch

• selecting the button or label selects the option (target area includes both)

  • target area could be increased if larger visual affordance is desired/provided

keyboard

• tab focus is on all option - within the tab focus, right & down select options in one direction, left & up keys select options in the opposite direction

• when first or last option is selected, option select does not loop -- reverse direction must be used to select another option

used for preferences

• with large number of categorical values, where one option is mutually exclusive of the other options

  •  if the number of options is too large to be displayed all at once (when drop down is opened), consider using a combo-box

presentation

• a drop-down could be just a text list or it can include rich-text and icon

• expanded menu includes a marker to indicate the currently selected option (highlight, check-mark, etc)

• scroll bar may be included for long list of options (but a combo-box should be considered)

• drop-down width is reflective of the width the options take up

interaction

mouse/touch

• drop-down menu opens on click/touch

• option is then selected from the list

• drop-down menu closes when selection is made

keyboard

• initial focus is on drop-down field

• space/enter or arrow keys open open drop-down menu

• right & down arrow keys move downwards through options; left & up arrow keys move upwards through options

• space/enter selects an option, and moves focus back to the drop-down field

• when drop-down is focused or menu is expanded, typing a letter selects the option starting with the letter typed

used for preferences

• to allow combined editable text input and drop-down selection 

• when number of options is too large to be displayed all at once (i.e. when menu is open)

presentation

• a combo-box could be just a text list or include rich-text and icon

• expanded menu includes a marker to indicate the currently selected option (highlight, check-mark, etc) 

  • recently selected options appear at the top with a divider from the rest of the list

interaction

mouse/touch

• drop-down menu opens on click/touch

• text field (showing active option) is selectable

• an option can be selected from the list
  drop-down menu closes when selection is made

• click/touch and drag scroll bar

• swipe through list

keyboard

• same as drop-down with the exception that typing reduces the number of options available - focus will move through these options only

  •  clearing the text field reveals all options again 

used for preferences

• with binary options that are dependent on a lead preference - if preference is not dependent, consider on/off toggle

• in a group, that are not mutually exclusive (more than one can be selected at once) (e.g. magnifier location follows)  
   
  presentation

• a check box label could be text only or can include rich-text and icon

• check-box appears at the beginning of the reading order, followed by the text label

interaction

mouse/touch

• selecting the box or the label selects the option (target area includes both)

  • target area could be increased if larger visual affordance is desired/provided

keyboard

• focus is independent for each of the check-boxes

• space/enter is used to select/deselect check-boxes