(C4A) Preference Editor adjuster mockups for iteration 2
- Dana Ayotte
- Former user (Deleted)
 Also view frame mockups for iteration 2
1. Fully collapsed view / Initial view
The fully collapsed view of the adjusters includes single buttons for each preset. Presets are activated by selecting a button.
2. Partially expanded view (space 3)
When a preset is selected, the button expands to reveal primary adjusters for that preset (where available). When a preset is selected, pre-determined adjuster values are applied immediately, and are indicated by the levels/values shown in the expanded area.
- Selecting the add contrast preset will apply the available high contrast setting.
- Selecting the increase size preset will increase the text size and cursor size to their respective pre-determined values. The magnifier will remain deactivated but the magnifier adjuster will appear in the partially expanded window.Â
- Selecting the speak text preset will turn on the screen reader and set the words spoken per minute to the default setting.
3. Partially expanded view (space 4)
In space 4 the partially expanded view includes preview windows and a "more" option at the bottom of each window (where no further adjusters are available, the more option does not appear). Selecting "more" will take the user to the fully expanded view.
The preview windows provide guidance for the user where live preview is not available -- for example, when editing a set which is not applied to the current device.
Note the two views below, which demonstrate the effect on the preview windows both without and with the contrast preview activated.
Â
Â
4. Fully expanded view (space 4)
Selecting the "full editor option" in the editor tool or selecting "more" from the bottom of the window reveals more adjusters related to the selected presets (where available).Â
Text size, Cursor size
As text size / cursor size is increased, the preview window responds to show the actual size of the text / cursor. Text size can be adjusted by selecting + or - or entering a value in the box below it. Cursor size can be adjusted by using the slider.
Magnifier
As magnification is increased, the preview window responds to show the actual size of text. Magnification can be adjusted by selecting + or - or entering a value in the box.Â
If magnification is set to 100% the field indicates it is off and all other magnifier options (except ' + ' button and field text) will be greyed out.Â
Magnifier Position
The magnifier position (lens / full screen / docked left / docked right / docked top / docked bottom) is selected by choosing one of the radio button icons.Â
Magnifier Follows
The magnified area can be selected using the mouse cursor, text cursor and/or keyboard focus. The user can choose multiple options, at least one option must always be selected when the magnifier is active.Â
Screen Reader
The screen reader switch is turned on when the speak text preset is selected.  Â
Â
5. Fully expanded view showing examples of hover and drop-down functionality (contrast deactivated)
- The speak text language field can be edited in-line or a language can be selected from a scrollable list in the drop-down menu.
- The most common languages for the given region will be shown at the top of the list.Â
- When a letter is entered in the entry field the drop-down will reveal a list of languages beginning with that letter.
- Tool tips appear on hover. If the screen reader is on tool tips will be spoken when the focus state lands on that item
6. Preview window interactions
Please see a more detailed description of the preview window interactions here, including text size and contrast interactions.
Notes and Questions
- The slider adjusters were removed where no maximum value exists (e.g. text size and magnification) - need to re-evaluate beyond Iteration 2 whether or not to add them back in and what the interaction would look like at max.
- It might make more sense and be clearer to the user if text size were shown in % rather than in pt (like magnification) - is this possible? This would also provide a set minimum value (i.e. 100%) at which text size could be considered to be "off".
- Is a magnifier on/off toggle needed? Currently there is no way to quickly turn the magnifier off. Interaction between on/off toggle and adjusters will need to be considered (when magnifier is off, what value is shown in the window? 100%? OFF? both? Should adjuster appear when magnifier is off? Does adjuster disappear when magnifier is turned off?)
- Deactivating/reactivating presets - if the adjusters in a preset are modified by a user, and then the user deactivates that preset, upon reactivation the adjuster values should return to the user-modified state. The exception would be if all adjusters were turned "off" by the user - in this case reactivation should set the adjusters to their original pre-determined values (but what is consdiered to be the "off" state for text size, or for other adjuster values? see point 2 above re: text size).Â
- if the user sets all the preset adjuster values to 0 (or "off"), the preset will be unchecked (but the panel remains expanded). There are two ways to have the preset re-checked: 1) by selecting it (which would re-apply the predetermined values) or 2) by modifying any of the preset adjusters.
- eg. for the second example on this page: preview window interaction.pdf - if "Increase size" is selected, but then text size is set to minimum/default and cursor size is set to minimum, then the preset should be considered to be off/deactivated. Â
- This point requires some more thought as what if a user actually wants to set text size to 90% of default? Can text size (or other adjuster values) ever be considered to be "off"? Should this preset be called "size" instead of "increase size"? Should adjuster values always be returned to their user-modified state regardless of what value they are set to?
Changes made to the adjusters values will not immediately be applied to the adjuster panel content (other than the preview windows), but are applied when the tool is closed and reopened. This will avoid a situation where a user makes a change and is then unable to undo it (for example, if text size is reduced to a point where the user can no longer read it).
- VoiceOver/TTS - use case for TTS without screen reader - add TTS as a preference
Â
Assets
- font family for interactives: open sans
- font family for headers: roboto slab
- font icons for adjusters here
Â
Â
Â
Â