Provide information about what the UIO preference panel and adjusters do
Description
Environment
Attachments
Activity
Justin ObaraDecember 9, 2024 at 6:37 PM
The screenshot shows the latest mockup of the information panel on the right.
Heading
EN: “about”
ES: “Información“
Content
EN: “User Interface Options (UI Options) allows you to personalize the web content of this site to meet your own personal needs and preferences.“
ES: “Las Opciones de interfaz de usuario (Opciones de IU) le permiten personalizar el contenido web de este sitio para adaptarlo a sus necesidades y preferencias personales.“
Link text
EN: “What is UI Options?”
ES: “¿Qué son las opciones de interfaz de usuario?“
Justin ObaraOctober 9, 2024 at 4:14 PM
This is the latest iteration with the updated content an switched to using Fira Sans.
suggested that we tweak the linespacing to about 150% and if that’s too much to go down by 10% increments.
Justin ObaraOctober 9, 2024 at 1:53 PM
The above example incorporates the prior suggestions such as: lighter background, updated text, updated colour and text for the link.
Further suggestions from are:
Change content to start with what UIO is
Is there a term used for compliance tools?
legibility of typeface for the number one “1”, the capital letter “I” and the lowercase “l”
suggestion from is to use Fira Sans
Justin ObaraOctober 8, 2024 at 1:18 PMEdited
The screenshot above is my first attempt at adding an about panel to UIO. Based on the design suggestions mentioned in the previous comment.
Cheryl, , and made some suggestions in the fluid-design channel.
Is there enough contrast between text and background?
Add a light background
Add a line about how UIO is unique/different from accessibility overlays
The “learn more” link should be a different colour from the text
The “learn more” link should be more specific, maybe the H1 from the page it links to
Justin ObaraSeptember 25, 2024 at 5:30 PM
I spoke with and Cheryl today and the suggestion for implementing this in the current design is to add a “card” to the end of the list of preferences that contains the description and a link to more information. While this may be a “card” or card like, it shouldn’t actually look like the other cards so that it isn’t confused with a preference. It could even be text against the background with maybe a thin border.
Details
Assignee
UnassignedUnassignedReporter
Justin ObaraJustin ObaraComponents
Priority
Major
Details
Details
Assignee
Reporter
Justin ObaraComponents
Priority
Major
Originally filed against the floeproject.org site as issue #271
Add "What is this?" Panel
Fictitious User stories to illustrate the need.
Issue: The preference panel does not include a "what is" section. As a result, users are required to make inferences about what it does and why. This increases cognitive load on users and takes more time to understand. A solution is to add a "What is this?"
User story 1
I am sighted and don't have any learning disabilities. I believe web sites should be accessible and have an affinity towards initiatives that improve equity. When I go to a web page I see "Show preferences". I open it and am trying to make sense of what these options are about. I'm a little confused.
User story 2
I am blind and navigating the website. I get to "Show preferences". I have to spend considerable time learning what these preferences are about.
Solution:
When I open the "Show Preferences" content the first content I see or hear is a link "What is this?" panel. The link goes to a page that describes the features and why it is being done. The page is either a generic FLOE page or a page on the website. I read the page and understand. I think "That's cool" and I have stronger affinity for the website and/or I think "Oh, this doesn't apply to me, but cool" and I continue on the website without spending more cognitive energy/time on the Show Preferences panel.