(Floe) UI Options Design Specifications, C.1

Owned by James Yoon
Last updated: Apr 03, 2013 by Joanna VassVersion comment
4 min read

Introduction

User Interface Options Version C consists of two types of containers -presets and granular preferences- and a framework (i.e., "configuration") for presenting and using said preferences.

Containers
  • Presets: high-level basic preferences that are composites of granular preferences (e.g. "size" is a composite of all types of text size (headers, paragraphs, links, etc.), image size, etc.)
  • Granular preferences: containers for preferences (e.g., page width, line spacing, etc.) that contain granular preferences for adjusting things at a very low level (e.g., "text & image size" contains sizing preferences for headers, paragraphs, links, images, etc.)
Framework/Configurations
  • On-Page Panel: Implemented in a website, effects all pages of that website. Only presets (high-level basic preferences) are available in the on-page panel configuration. Preset priority is determined by the implementer. By default, panel is hidden on top and activated by button (e.g., 'Display Preferences'). Panel pushes down page content. Other configurations (e.g., full page) are the responsibility of the implementer. UIO can provide the individual preset containers, but the implementer must style and arrange these on a page as per his/her own requirements.
  • Browser Extension: Effects all websites. If the UIO on-page panel is implemented in a website, it is removed - user can only make customizations through browser extension. Presets and granular preferences are available in browser extension configuration. User can navigate through preferences using filter tabs or search. Browser extension preference panel is revealed from the top and activated by button (UIO icon) on the browser chrome. Panel pushes down page content. Preference sets (themes) can be created, edited, and shared.
  • Mobile: Implemented in a website, effects all pages of the website. Only mobile-specific presets (high-level basic preferences) are available in the mobile configuration. Bottom preset panel is hidden and activated by button (e.g., UIO icon). Panel overlaps page content.

Presets

Basic preferences can be customized through on-page panel, browser extension is required to customize advanced preferences.

Size
  • Basic Preferences: modify the size of all content on the page/site on a uniform scale (i.e., text and images increase in size together at the same pace). Page margins increase as needed. If available, page layout turns to responsive version if it reaches maximum browser width.
  • Advanced Preferences: modify text styles sizes separately.
Contrast
  • Basic Preferences: change between several common contrast schemes (default, B/Y, Y/B, W/B, B/W) or ones determined by website implementer.
  • Advanced Preferences: change contrast level (left-most: mild contrast; right-most: maximum contrast)
Emphasize links & buttons
  • Basic Preferences: turn on 1) always underlining and bolding links, and 2) always highlighting links and buttons (for buttons, highlight generates a border; for links, sets both a new foreground and background colour).
  • Advanced Preferences: add a consistent symbol in-front of links/buttons, determine specific text and background colour for links/buttons (colour overwrites chosen contrast theme)
Simplify
  • Basic Preferences: simplify the presentation of the page/site (layout and content). Implementer can override this by providing an alternative simplified layout.
  • Advanced Preferences: set specific page width, (position of TOC, contents of TOC?).
Show captions
  • Basic Preferences: turn on captions for all video and audio media on the page/site. Field available to input preferred language of captions, video language is used by default.
  • Advanced Preferences: set colour contrast of captions, size of captions.
Text-to-speech
  • Basic Preferences: add a widget to the page to speak text on the page/site.
  • Widget Options: modify advanced preferences, download article audio, (scrubber, switch between articles?).
  • Advanced Preferences: change volume, speed, synchronized text highlighting.
Keyboard shortcuts
  • Basic Preferences: Enables navigation and hot keys. Default keybindings to be offered, but implementer should provide site-specific set. When this option is enabled, a hot key is assigned to bring up a key binding tooltip/help/customization overlay.
  • Widget Options: customize keybindings.
  • Advanced Preferences: customize keybindings.

Granular Preferences

  • Size
    • Size overall
    • Size separate 
      • Paragraph
      • Headers
      • Links (text hyperlinks; would include icons as appropriate) (need to specify further)
      • Interface (icons & buttons & inputs) (need to specify further)
      • Images (would not include icons; just content images, e.g., photos, diagrams, etc.)
      • Captions
      • Transcripts
  • Page width
    •  virtual page width (need to specify interaction with size and responsive design)
  • Spacing
    • Line spacing
    • Word spacing
    • Character spacing
    • Object spacing
  • Links, buttons & inputs
    • Always underline (for links)
    • Always bold (for links and buttons)
    • Always add visual indicator (icon) (for links)
    • Colour ( overwrite contrast theme for links and buttons)
      • Foreground (text) (for links)
      • Background (highlight) (for links and buttons; for buttons, highlight generates a border)
    • Size (for links and buttons) (see issues under "Size")
  • Images
    • Replace images with text
    • Disable flashing visuals
    • Size
  • Tab navigation
    • On/Off (is it necessary to turn off)
    • Focus styling colour
    • Focus styling outline or background
    • Group similar elements together (need to specify further)
  • Text style
    • Font: default, few suggested, or from user library
    • Avoid italics
    • Avoid ALL-CAPS
  • Colour & contrast
    • Colour
      • Foreground (text, icons, diagrams, line-illustrations)
      • Background
    • Contrast intensity
  • Text-to-speech
    • Volume
    • Speed
    • Synchronized text highlighting
  • Audio feedback
    • Volume
    • Sound
  • Keyboard shortcuts
    • On/Off
    • (keyboard shortcuts list to be included)
  • Table of contents
    • On/Off
    • Position: side, top of page
    • Structure: current page, full site
    • Include site search bar
    • Include skip to content links if possible
  • Transcript
    • Always show if available
      • Language: video default, specific language
    • Scroll: sync with playback, scroll manually
    • Size
  • Captions
    • Always show if available
      • Language: video default, specific language
    • Contrast: Default (or selected contrast theme), no background, black on white (need to specify further)
    • Size
  • Time dependency
    • Time limit: default to none
    • Instantly show tooltips on hover
  • Focused viewing
    • On/Off
    • Opacity
    • Always show headings
    • Always show links, buttons, & input fields

Preferences categorization

The number of preferences in User Interface Options is high and growing. The links below lead to work-in-progress documents for presets and preferences tagging:

On this page