Add narration feature to Reader Mode #1273- Riya

[riyasoganii]

What is the problem you are trying to solve?

Add narration feature to Reader Mode
mozilla-mobile/fenix#1273

Why is it a problem?

The implementation of this functionality is quite important for a few reasons.
Someone who may be visually impaired may not find it easy to peruse pages in reading mode, and hence this feature would make browsing easier. Additionally, users who may be multitasking/occupied may find it more convenient to have web pages read out to them, thus increasing usability. Hence I believe that this should definitely be made an optional feature for the convenience of all.

How would you solve the problem? What is your design proposal?

A minimal text-to-speech button could be added when reading mode is enabled. This button could be translucent, to prevent the contents of the page from being hidden. However, it must be located in a very obvious and easy-to-see location(my suggestion is, top right corner of the screen).
We could implement this button using two color schemes- one with a grey/white gradient for when the button is off, and one with a purple gradient (which matches the purple of the app's interface) for when the button is on.
This button would subsequently disappear on exiting reading mode.

EDIT : DESIGN PROPOSAL 2
I thought a more stylistic way of incorporating the tts button would be in the search bar itself, and it would only be present in the reading mode.
Note: this button is grey when not pressed, and subsequently turns 'firefox' purple when pressed, and the narration of the page then starts from the top.

If the user would like to narrate a specific portion, on selection of text, another tts button would appear in the menu . Consequently, the text to be narrated would be highlighted in a 'firefox' purple shade.

How would you measure your designs effectiveness?

Once a user opens read view, we could implement a one-time popup which introduces them to the new narration function. This is essential so that the new feature doesn't go overlooked, and prompts users to try using the same. After doing this, by tracking the number of user clicks on the button compared to the number of users using read view, we could determine the overall necessity of the function. At the same time, we could see if there are users which continue using the narration mode after trying it once.

[topotropic]

Thanks for the proposal – the context menu option to read paragraphs is neat.

Did you have a chance to review how this feature is implemented on Firefox on desktop? If not, have a look – I'd be curious what your opinion is about it and whether it influences your design proposal or not. Thanks!

[riyasoganii]

@topotropic So for firefox desktop, for the already implemented narration mode, next to the option where the user can change voices, I thought we could add another option where the user selects whether they want a specific part narrated, or the entire page, like so:

On clicking this drop down menu, the user would be presented with two options: All, and selected text. If there is no selected text, however, then the selected text option would be grey to convey that it cannot be used (to make the user aware of the fact that they have to select text to use this button, on hovering the mouse over the grey button, there can be a tooltip which says 'Select text first')