UIO+ vertical design

Owned by Caren Watkins
Jun 08, 2020
3 min read

Brief

https://issues.gpii.net/browse/GPII-4381

Take each panel that we have currently and then effectively stack them with a line between each segment. Left align all of the labels, but probably best to center the controls. I'm imagining the UIO+ being narrower since our controls are generally narrower than Clusive's. You can split the Contrast menu of options into two rows, which will make it narrower like the rest.

When you have a stacked menu, you can tweak the CSS to tighten up the vertical space a little bit (but still keeping things readable).

Iteration 1 (one)

goal:

  1. chunk list of options into sections with some logic
  2. headings for sections were considered for visual users. It was decided that the section headers added "noise" and an assumption that the explicit and imposed logic would be clear to everyone.
  3. chunk list with visual dividers (eg. space and rules) to scaffold logic and content fatigue

design iteration sketches and notes:

  1. Options list

Twelve options chunked into digestible and logical groupings:

  • Zoom, Contrast
  • Character spacing, Word spacing, Line spacing
  • Syllables, Enhance inputs
  • Right-click to select, Selection highlight
  • Text to speech, Reading mode, Contents

2. Chunked group behaviour

Each chunked group opens a panel of user options and their relevant interactions. This approach uses existing interaction designs.

3. vertical insitu

Notes, reflections and feedback

  • move reset to bottom
  • interaction icon?: +/- , solid triangle
  • add UIO+ header
  • visual representation at first level: icons, colour
  • reconsider design of individual interaction panels
    • contrast: chuck into high contrast group and low contrast group; consider representing contrasts with a scene rather than or as well as the letter “a”.
    • text scaling: explore relation built in to browser scaling; either/or; enhanced browser options
    • From TPL epub UIO:

  • add "MORE" at bottom of option list as an alternative and explicit way to open menu of functions (Mangage extensions, Options, Remove from Chrome, etc.). Some users may not know how to access this panel without an explicit path.