Design at a glance:

UIO 2.0

Design Functionality:

• The new design has the 'user preferences' button located on the right side of the page
• The button has dynamic scrolling with the page scrolling
• The main panel has 7 main user preferences. Some of them have sub preferences.
• There are buttons such as a drop-down list, radio buttons, and sliders
• There are 2 main buttons at the bottom: close accessibility panel (this is contract the expanded panel) and reset all filters (this will bring the web page to its default state)

Options:

• Text Adjustment
  • Font size
  • Line spacing
  • Letter Spacing
  • Word spacing
  • Text style
• Color Adjustment
  • Preset colors
  • Custom colors
• Table of contents
• Enhances Inputs
• Syllables
• Simplify
• Cursor adjustment
  • Magnifies black cursor
  • Magnifies white cursor

Navigating through the preferences (based on (Floe) UI Options Design Walkthrough, C.1)

• Arrow buttons
  • clicking the down arrow button smoothly scrolls the boxes until the last overlapped box is first (or to in the closest spot to the left if remaining boxes would not fill full width)

• Scrolling / Swiping
  • scrolling/swiping moves boxes depending on distance scrolled/swiped, on release boxes smoothly snap in order for the maximum amount to be fully visible and centered to the panel
  • the is the verticle scroll bar located on the extreme right side

• Tab Order
  • once the UIO panel is opened, the focus is moved to preference boxes (from first to last) followed by Close Preferences and Reset Filters button at the bottom
  • focusing on preferences at the edge of the screen smoothly moves boxes over by one
  • the focus will begin with the preference title and then the 'expand' arrow. If the user chooses to expand the section, then the focus will move to sub-sections. 
  • 

Activating Preferences

• Mouse
  • all UIO panel interactables switch to pointer cursor on hover
    • slider uses both a pointer cursor on hover over the knob and the bar
  • clicking on the icons at the beginning and end of a slider smoothly moves knob by 10%

• Keyboard
  • sliders and radio buttons are adjusted with arrow keys, check boxes and on/off switches are activated with space or enter

Widget Boxes Responsiveness

• adjusted margins to fit the maximum amount of boxes centred to the panel with 10-30% of next/previous boxes revealed on the sides
  • minimum of 10px on right margins

User Preferences button

The button is located on right top corner when the user loads the pages. The button has dynamic scrolling as the user scrolls and navigates through the page

Section 1: Text adjustment

• This has 4 subsections. Each subsection has a reset button for further customization.
• The + and - buttons can be used to change the values.
• The default value will be 1 whereas 0.7 will be the minimum and 2 will be the maximum. 
• The text style section had 3 main fount options

Section 2: Color Adjustment

• This has 2 subsections. The entire color section has 1 single reset button
• The preset colors section has the same uio colors based on the current design for quick changes
• users can you the custom colors section to change the background, headings and contents font
  

Section 3,4,5 and 6: Table of contents, enhances inputs, syllables

Based on the latest design on https://build-infusion.fluidproject.org/demos/prefsframework/ these sections are the exact same with similar buttons 

Section 7: Cursor adjustments

• This section had 2 options to adjust and magnify and change the color of the cursor's appearance
• This section has its individual reset button

Bottom buttons

• There are 2 main buttons at the bottom: close accessibility panel (this is contract the expanded panel) and reset all filters (this will bring the web page to its default state)