(Floe) UI Options (2008-2009)

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

User Interface (UI) Options 

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


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

User Interface Options and User Interface Enhancer - Development Progress