What is UI Options?

UI Options is a tool that allows individuals to personalize web content and other user digital interfaces to meet their needs and preferences. UI Options offers a variety of customizations including:

Modification of text size and style
Adjustment of line spacing
Changing the screen colour and contrast
Displaying a table of contents
Emphasizing links and buttons
Simplifying layout
Enabling text-to-speech without additional plugins or software

By using the UI Options’ accessible drop-down panel, individuals can choose any of the adjustments and have them applied right away; settings can also be easily reverted. This makes it easier for an individual to experiment and discover what works. By default, settings are saved using browser cookies - this way personalizations will apply automatically whenever an individual uses the same website or application.

UI Options works by adding to the existing styles of a website or application, and is designed to be integrated into a website or application's overall design with relatively minimal effort.

Personalization and Accessibility

While UI Options can help to satisfy accessibility compliance to some extent (like WCAG), this is not its primary purpose. UI Options is a content and interface personalizer - helping transform an otherwise static interface into something that meets an individual’s own personal "standard". This one-size-fits-one approach helps avoid the often segregated and specialized design solutions that are intended to meet the needs of those “on the margins”. In this way, individuals experience content how they want, without involuntarily missing out on any nuanced and interesting features, and not necessarily in the same way as desired or defined by others.

See: https://guide.inclusivedesign.ca/insights/OneSizeFitsOne.html

UI Options is not a "Silver Bullet"

UI Options works on top of the content and interactions that are already present in your website or application, therefore it will not permanently fix any pre-existing issues related to usability, accessibility, or inclusion. The Inclusive Learning Design Handbook, and the Inclusive Design Guide are good resources that can help you fix these issues.

How to Install UI Options

You can install UIO by following this guide: http://docs.fluidproject.org/infusion/development/tutorial-userInterfaceOptions/UserInterfaceOptions.html

If you are using WordPress, there is also a WordPress plugin which simplifies the installation if you are using WordPress.

After Installing UI Options - What Now?

After installing UI Options, there may be a few areas of your website where the styling does not look right when certain settings are applied. Some common issues are:

Text and layout not resizing properly with text size adjustment
Colours and images not changing properly with contrast themes

This guide, "Working with UI Options", can help you understand the cause of these problems and fix them.

UI Options can also be extended and customized with additional functionality ( Is this the documentation? http://docs.fluidproject.org/infusion/development/tutorial-prefsFramework/CreatingAPrefsEditor.html), or customized to fit a particular theme or style ( Todo: Currently there isn't any documentation explaining how to override UIO's default style. Is this self explanatory? Does it need to be documented?).

Design Crit Notes

Answer the question: is it okay that my website be WCAG non-compliant (i.e. in terms of colour), will UIO make my site compliant? Is it okay if I keep my site the way it is?
De-emphasize standards and emphasize personalization.
Customization is a later topic. Another video or docs. Specifically "Learner Options is designed ... web-based content."
Suggestion: produce 2 videos for Floe / Infusion- intro and integration. 1 video for P4A which combines the two.
For second video, add examples to possible integrations (integrations pages) and demos. Leads them to customization topic.
What is the user experience with preference persistence? Define it for the integrator and end user so they know what to expect. This needs to get written
Use different language initially. Instead of "CSS" use "style". Delve into javascript injection later in the 2nd half of the video.
If the video comes out saying that it isn't an a11y compliance tool, we will need to make a case for personalization and customization. This is important as most end user will come to this from the compliance perspective. https://guide.inclusivedesign.ca/insights/OneSizeFitsOne.html

Browser not supported