(Floe) UI Options Design High Fidelity, C.1
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
Open panel
Size
Contrast
Emphasis links & buttons
Simplify
For information about simplify behaviour, visit Design Walkthrough
Option 1: Responsive layout slider
Option 2: Article-only with table of contents
Panel slid
Captions
Text to speech
For information about text to speech behaviour, visit Design Walkthrough
Keyboard Shortcuts
Browser extension
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.
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
Style
( section is incomplete )
Font |
|
Form element outline | 989898 |
Icon grey | 8D8681 |
Highlight background | E8EABE |
Blue Link | 3172AE |
| 1 = Outline 009966 |
Options top gradient | 000000, 15% opacity |
Options bottom gradient | E7E6E6 |
- 1 On-page
- 1.1 Closed panel
- 1.2 Open panel
- 1.3 Size
- 1.4 Contrast
- 1.5 Emphasis links & buttons
- 1.6 Simplify
- 1.7 Panel slid
- 1.8 Captions
- 1.9 Text to speech
- 1.10 Keyboard Shortcuts
- 2 Browser extension
- 3 Mobile
- 4 Style
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
breadcrumb dots are good
not consistently styled with desktop (does this matter?)
Details:
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