Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
Section
Column
width65%
Note

See: (Floe) User Interface Options (aka. Learner Options) for up-to-date information on UIO design progress

Panel
borderColor#42773F
bgColor#F4F7F2
borderStylesolid

User Interface (UI) Options 

Div
stylefloat:right;

Excerpt

Transform the presentation of the user interface and content resources so that they are personalized to an individual user's needs.

Features

  • Change contrast, fonts, text spacing, links and more
  • Add a table of contents
  • Preview preferences as they are chosen

Available as a full page or as a sliding panel at top of any page

The General Idea

Some people using the internet can have difficulty accessing some sites: Perhaps the colour contrast is not sufficient, or the links don't stand out enough from the rest of the text. The Infusion User Interface Options component is part of a system that allows site visitors to customize the presentation of the site to meet their particular needs:

  • The User Interface Options component (UI Options) presents visitors with a set of controls for adjusting the display and records these settings: text size, colour scheme, etc.
  • The User Interface Enhancer component (UI Enhancer) processes saved settings and automatically adjusts the page.

A website developer will typically build the UI Enhancer into each page of the site, probably by adding it to whatever generates the head of the document. This will allow the settings to be used on every page of the site. The UI Options controls themselves can be added to a site in a couple of ways:

  • on a page of its own, with or without a live preview, or
  • as a small panel that slides down at the top of a page (typically available on every page, but not necessarily - that's up to the site designers). If the sliding panel option is installed, a visitor's changes are applied directly to the current page as they adjust them, making the current page a giant live preview. This is great for helping visitors know how their changes will look.

Try the showcase demo to see all the different possible versions of the interface.

Include Page
Progress Indicator - User Interface Options
Progress Indicator - User Interface Options
Column
width35%
Panel
borderColor#321137
bgColor#fff
titleBGColor#aab597
titleStatus
borderStylesolid
titleStatus

This component is in Preview status

Panel
borderColor#848484
bgColor#EFEFEF
titleBGColor#CCCCCC
borderStylesolid

Demos

See It In Action

Integration Instructions

API

Development

Design Background (archive)