(Floe) UI Options Design Mockups, B.1

Download (.ai)

Download the mockup in AI format.

Overview

Different configurations of UI options might be more suitable in some implementations than others. This page outlines a draft of designs for user interface options for Infusion 1.4.

  • The full page configurations are best suited for contexts where the preference is to place display options separate from or outside the immediacy of the affected content. This configuration has the farthest proximity from the content, and is least intrusive to the content design.
  • The skinny panel configurations are best suited for persistent, visible, and readily available display options in the immediacy of the affected content. This configuration has closest proximity to the content, but may be more intrusive to the content design.
  • The fat panel configuration provide a balance between proximity to content and intrusiveness to content design.

1. Full page

1.1 With preview

Full page with preview:

  • Changes to options are immediately reflected on the preview panel.
  • "Save and apply" saves the configured options and returns the user to the previous page.
  • "Reset" sets all the options back to their defaults.
  • "Cancel" sets all the options back to the state they were in before entering the interface, and returns the user back to the previous page.

1.2 Without preview

Full page without preview:

  • "Save and apply" saves the configured options and returns the user to the previous page.
  • "Reset" sets all the options back to their defaults.
  • "Cancel" sets all the options back to the state they were in before entering the interface, and returns the user back to the previous page.

2. Skinny panel

2.1 On top

Skinny panel default view collapsed:

  • This view (collapsed skinny panel) is optional. It should be used in implementations where increasing the distance between content and display options is desirable.

Skinny panel default view expanded:

  • Clicking "Show display preferences" brings the user to this state.
  • This panel opens and closes with a (brief) sliding animation.
  • None of the option subpanels are open by default.
  • Hovering over each of the subpanel headers triggers a hover effect, but does not open the subpanels
  • A click or 'enter' is required to open subpanels
  • "Reset all" sets all the options within each subpanel back to their defaults.

Skinny panel text & colour view:

  • This subpanel opens and closes with no animation.
  • Clicking the subpanel header or outside the panel area will close the subpanel.
  • Hovering over other subpanel headers triggers a hover effect, but does not activate the panels--a full click or 'enter' is required to open other subpanels.
  • Clicking on "Hide" while the subpanel is open will close the subpanel and slide the main panel shut.
  • Changes to options are immediately effected on the content, but not against the panel (Unanswered design question: when are changes effected against the panel?)
    • For panels, effect changes upon hide.

2.2 On bottom

3. Fat panel

Option parameters

Text and display

Text size
  • On slider: 1.0x to 2.0x
  • On text field: Any value greater than 0.1x (Unanswered design question: what happens when a user enters an invalid value?)
    • Solutions: 1. Provide error message; 2. Force typing of valid values only (e.g., letters/symbols don't register, period only registers if a number pre-exists, second periods not allowed, etc.); 3. Allow typing anything, but upon de-focus, revert back to previous value
Text style
  • Default
  • Times New Roman
  • Comic Sans
  • Arial
  • Verdana
Colour & contrast
  • Default
  • Black on white
  • White on black
  • Black on yellow
  • Yellow on black
Line spacing
  • On slider: 1.0x to 2.0x
  • On text field: Any value greater than 1.0x

Layout and navigation

Single column layout
Show table of contents

Links and buttons

Larger buttons and inputs

Individual widgets

Contrast selector

Type selector

Unanswered issues

  • When does UIO affect UIO (in fat and skinny panel configurations)? (can't be immediate, as that would throw off positioning)
  • Any affordance for automatically reverting back to previous settings if they didn't work out well? (e.g., dead-man's switch)
  • How does UIO affect UIO? (especially column simplification)
  • Designs for extensibility (interaction for extra panels that extend beyond the edge of the screen)
  • Vocabulary for labels, etc.
On this page