User interface options mocked up in Inclusive Learning Handbook

Overview

The following mockups show the use of UI Options in the context of the Inclusive Learning Handbook. In particular, they show UIO as a "behind the page" panel, accessed by pulling down the page (via "Display Preferences"; nomenclature tbd).

Several options are mocked, including:

the various contrast options (note the liberal interpretation of colours; e.g., the background shade of table of contents),
single column layout (note the disparate text alignments),
text size,
text style,
and combinations thereof.

The downloadable .mov additionally demonstrates some of the panel interactions.

View mock interaction video

> Download the mock interaction in .mov (best experienced in fullscreen)

Mockups

Step-by-step mockup of UI Options (UIO) in Inclusive Learning Handbook (ILH)

Below: 1. Inclusive learning handbook, as-is.

Fluid > (Floe) UI Options Design in Inclusive Learning Handbook, B.1 > Faux-functionality UI Options in Inclusive Learning Handbook-01.png

Below: 2. ILH sliding down to reveal UIO panel behind the page.

Fluid > (Floe) UI Options Design in Inclusive Learning Handbook, B.1 > Faux-functionality UI Options in Inclusive Learning Handbook-02.png

Below: 3. UIO panel full revealed.

Fluid > (Floe) UI Options Design in Inclusive Learning Handbook, B.1 > Faux-functionality UI Options in Inclusive Learning Handbook-03.png

Below: 4. Rich contrast panel drop-down.

Fluid > (Floe) UI Options Design in Inclusive Learning Handbook, B.1 > Faux-functionality UI Options in Inclusive Learning Handbook-04.png

Below: 5. White-on-black contrast applied.

Fluid > (Floe) UI Options Design in Inclusive Learning Handbook, B.1 > Faux-functionality UI Options in Inclusive Learning Handbook-05.png

Below: 7. Single-column layout applied.

Fluid > (Floe) UI Options Design in Inclusive Learning Handbook, B.1 > Faux-functionality UI Options in Inclusive Learning Handbook-06.png

Various options applied to Inclusive Learning Handbook

Below: Yellow-on-black contrast applied.

Fluid > (Floe) UI Options Design in Inclusive Learning Handbook, B.1 > Faux-functionality UI Options in Inclusive Learning Handbook-Yellow on black.png

Below: Larger text applied.

Fluid > (Floe) UI Options Design in Inclusive Learning Handbook, B.1 > Faux-functionality UI Options in Inclusive Learning Handbook-Larger text.png

Below: Times New Roman style applied, stacked onto larger text.

Fluid > (Floe) UI Options Design in Inclusive Learning Handbook, B.1 > Faux-functionality UI Options in Inclusive Learning Handbook-Larger text and Times New Roman.png

Below: Black-on-yellow contrast applied, stacked onto larger text and Times New Roman style.

Fluid > (Floe) UI Options Design in Inclusive Learning Handbook, B.1 > Faux-functionality UI Options in Inclusive Learning Handbook-Larger text, Times New Roman, and contrast.png