For information about specific preference behaviour, visit Design Walkthrough

See Also:
(Floe) UI Options user testing results (November 2012)
(Floe) UI Options user testing report (November 2012)
(Floe) UI Options user testing protocol (September 2012)


Closed panel

Open panel



Emphasis links & buttons


For information about simplify behaviour, visit Design Walkthrough

Option 1: Responsive layout slider

Option 2: Article-only with table of contents

Panel slid


Text to speech

For information about text to speech behaviour, visit Design Walkthrough

Keyboard Shortcuts

Browser extension


UIO button (gear in circle) appears on the bottom left corner when the user opens a page. The button disappears (transitioning downward) when the user scrolls down the page content. The button reappears (transitioning upward) when the user scrolls up the page content.

The preference panel opens (transitioning upward, overlapping content) when the user selects the UIO button.

The preference panel collapses when the user selects the UIO button, the user selects the content, or the user swipes down on the content. 

General interaction:

  • navigating between preferences
    • swiping up and down
    • or selecting the down arrow (moves only one direction)
  • adjusting preferences
    • swiping side to side (where applicable)
    • or selecting interactive



( section is incomplete )


  • #433F3D Open Sans or Helvetica, Arial, sans-serif
  • preference headings: 16pt Semibold (weight:600)
  • descriptions/check-boxes/drop-downs: 14pt Regular (weight:400)
  • on/off toggle: 14pt Semibold (weight:600)

Form element outline


Icon grey


Highlight background


Blue Link


1 = Outline 009966
2 = Inset border ABD078
3 = Light gradient 97C93C
4 = Dark gradient 22A755

Options top gradient

000000, 15% opacity

Options bottom gradient




  • No labels

1 Comment

  1. Notes from Community Meeting discussion about UI Options mobile designs

    November 5, 2014

    • panels on desktop version are fixed-width, but this is not good for mobile
    • we should use relative widths instead
    • should we use same styling as for desktop (with updated adjusters that work best for mobile)
      • e.g. use text-field steppers like those used in the Cloud4All PMT/PCP
      • change the on/off switches also to match Cloud4All
    • should we limit the max font size for mobile
      • what are some other mobile-specific issues for the other preferences?

    the current design:

    • uses space well
    • has no reset/undo button
    • has no responsive/landscape design
    • affects itself (prefs apply to tool)?
    • integrated into system (question)
    • breadcrumb dots are good
    • not consistently styled with desktop (does this matter?)


    • emphasis button - active/inactive states seem reversed
    • captions language drop-down and space 
    • arrow at bottom - need top and bottom? remove altogether?

    Merits of live preview on mobile?

    • use full screen for panels? 
      • if yes, we need a reset button since user will not experience effects of preference adjustments until they close UIO