Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

borderfalse

...

width70%

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)

On-page

Closed panel

Image Modified

Open panel

Image Modified

Size

Image Modified

Contrast

Image Modified

Emphasis links & buttons

Image Modified

Simplify

For information about simplify behaviour, visit Design Walkthrough

Option 1: Responsive layout slider

Image Modified

Option 2: Article-only with table of contents

Image Modified

Panel slid

Image Modified

Captions

Image Modified

Image Modified

Image Modified

Text to speech

For information about text to speech behaviour, visit Design Walkthrough

Image Modified

Image Modified

Image Modified

Keyboard Shortcuts

Image Modified

Browser extension

Image Modified

Image Modified

Image Modified

Image Modified

Image Modified

Image Modified

Image Modified

Mobile

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.

Image Modified

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

Image Modified Image Modified
Image Modified Image Modified
Image Modified Image Modified
Image Modified Image Modified Image Modified Image Modified Image Modified

Style

( section is incomplete )

Font

  • #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

989898

Icon grey

8D8681

Highlight background

E8EABE

Blue Link

3172AE

Image Modified

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

Options top gradient

000000, 15% opacity

Options bottom gradient

E7E6E6

...

Margins, Padding, and Sizes

...

...

width30%

...

titleOn this page

Table of Contents
indent30px
styledisc