Skip to end of metadata
Go to start of metadata

this page is currently under renovation

 

 

Adjusters

on/off toggle
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

-/+ input field
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

sliders
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 

radio buttons
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

drop-down

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

combo-box
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)

 

    • with a combo-box the user can scroll through a long list of options (e.g. language)

  • to allow user to more quickly target the desired option by inputting text into the entry field

  • when there are potentially more options available than what can be provided in a list (i.e. user can enter desired value directly) (e.g…)

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 

check-box
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

Other interface elements

 

previews
used for adjusters
  • when live preview is not available

presentation

visual previews
  • preview windows are used to provide immediate visual feedback to show the effects of an adjustment (e.g. text size)

  • where icons are provided, a preview window may not be necessary (e.g. magnifier position) but in some cases both could be used (e.g. cursor size)

audio preview
  • audio 'previews' provide audio feedback for sound related preferences
  • audio previews usually play after a user modifies a preferences (e.g., after a user releases the volume slider handle or after the user selects the screen reader option)
  • similarly, tactile 'previews' can be provided for preferences such as vibrate on some devices
interaction previews
  • provide a testing area for adjustments to interaction/controls preferences (e.g. mouse speed)

behaviour

  • live changes shown in the preview window are limited to customizations made with the relevant adjuster
    • however, previous adjustments made to other preferences may be reflected in the current preview window (e.g. contrast selection is applied to the text size preview windows)
  • previews for independent tools may reflect other preferences if they are applicable to the tool, but adjustments made to tools are not shown in system-wide preview windows (e.g. magnification level preview window will show text size and contrast changes in addition to the effects of magnification level, but magnification level will not be reflected in size and contrast preview windows).
  • View example of preview window interactions→


 

icons use
used for adjusters  
  • to provide a visual description before an adjustment is made, as opposed to a preview that provides feedback as the adjustment is made

 
 

 

Text

 

family heading
  • the title of a preference family container, only one per family

  • if the lead preference is an ON/OFF toggle, the on/off adjuster is shown with (and following) the family label

label
  • the title text for one or more related preference adjusters

  • a label isn’t necessary for an adjuster IF:

    • the adjuster immediately follows and is explained by the family heading (e.g. ‘Contrast’)

    • the adjuster is self-explanatory through the adjuster text alone (e.g. ‘Invert magnifier colour’ check-box)  

description
  • include where further textual description is necessary

  • description follows family heading or label:

    • (e.g. description "Output to available device" follows family heading "Braille")

    • (e.g. description "Punctuation marks" follows label "Announce")

 

  • No labels