(Floe) UI Options Design Walkthrough, C.1

Panel

Navigating through Widget Boxes

• Arrow buttons
  • clicking the right arrow button smoothly scrolls the boxes until 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 maximum amount to be fully visible and centred to the panel

• Tab Order
  • once the UIO panel is opened, focus is moved to preference boxes (from first to last) followed by Reset and Display Preferences button
  • focusing on preferences at the edge of the screen smoothly moves boxes over by one, next/previous arrows are not in tab order

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

Text to Speech