Skip to end of metadata
Go to start of metadata

What is UI Options?

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

  • Text size and style
  • Line spacing
  • Colour and contrast
  • Display a table of contents
  • Emphasize links and buttons
  • Simplify layout
  • Add a table of contents
  • Enable 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 see it applied right away. This way it's easy to experiment and discover what works, and settings can be easily reverted. By default, settings are saved using browser cookies - this way personalizations will apply automatically whenever they use your 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 toward satisfying some accessibility compliance (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 their 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 and not necessarily the same way 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.

How to Install UI Options

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

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 spots where the styling does not look right when certain settings are selected in UI Options. 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 to fix them.

UI Options can also be extended and customized with additional functionality ( (question) Is this the documentation? http://docs.fluidproject.org/infusion/development/tutorial-prefsFramework/CreatingAPrefsEditor.html), or customized to fit a particular theme or style ((warning) 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



  • No labels