Implement the speedreader promo bubble #9262

iefremov · 2020-04-16T12:52:53Z

Description

Introduce users to Speedreader.

Design

User Flow

A fresh Brave Browser install supports reader mode by default. Users will see a reader mode icon when visiting a reader-mode available page. Clicking on it for the first time will show a promo tooltip to turn on Speedreader. This promo tooltip appears 3 total times, regardless of whether or not the user has turned on Speedreader before. The user can ignore the tooltip and continue using reader mode normally; clicking the "Reader Mode" pill in the URL bar will turn off Reader Mode as the user expects.

If the user clicks "Turn on Speedreader" in the promo tooltip, this will turn on Speedreader globally. Users visiting a speedreader page will see it automatically load in Speedreader. The user can click on the "Speedreader" pill in the URL bar to turn off Speedreader view for just that domain. This does not change the behavior of readable pages being automatically loaded in Speedreader. Users can turn off Speedreader globally by visiting brave://settings and toggling it off. This will revert Brave to using the default reader mode.

Settings

Additional interaction states and dark theme

Notes

Speedreader and its introductory experience with the promo tooltip is per browser profile.

Assets

Figma link: https://www.figma.com/file/YHMNRL2XpZDOUe6n1Dw6K1/?node-id=0%3A1

karenkliu · 2021-05-27T17:28:26Z

@keur Updated this with latest designs for you!

iefremov · 2021-06-03T09:11:09Z

@karenkliu for some reason dismissing the tooltip on the diagram leads to "Reader Mode ON", perhaps this is not intentional?

karenkliu · 2021-06-03T17:15:13Z

@iefremov It's intentional; the user sees the promo tooltip for Speedreader only after they have already turned on the normal Reader mode. I can provide a walkthrough of the UX if that helps!

karenkliu · 2021-07-09T18:30:24Z

Re: today's discussion. The Speedreader promo bubble has been implemented, but needs to show the first 3 times the user turns on Reader Mode. It should not be triggered when user clicks on the Reader mode icon (this should only toggle on/off Reader mode).

kkuehlz · 2021-07-09T18:43:58Z

Created a separate issue for the accessible text. Going to batch these fixes into the same PR thoough

#16881

After a meeting with the Speedreader team, Raf suggested we have too much going on in the omnibox, and that we ought to kill the labels. Instead of indicating page state via labels, we do so with different icons. Icon vector change is triggered from the Update() method. We get to delete lots of code now that we don't need to bother with labels :) Resolves brave/brave-browser#9262

stephendonner · 2021-07-27T00:46:43Z

Verified PASSED following the inline testplan here with build

Brave	1.28.91 Chromium: 92.0.4515.107 (Official Build) beta (x86_64)
Revision	87a818b10553a07434ea9e2b6dccf3cbe7895134-refs/branch-heads/4515@{#1634}
OS	macOS Version 11.5.1 (Build 20G80)

Confirmed:

clicking on the Speedreader icon shows the promo tooltip
after clicking again and then again (3x total), the Speedreader promo tooltip no longer pops up
after clicking Turn on Speedreader via the promo tooltip, all supported text articles automatically load in Speedreader mode, until explicitly disabled (either globally via brave://settings or the icon in the URL bar)
after clicking the promo Turn on Speedreader tooltip, above, confirmed Speedreader is toggled to On via brave://settings/
after clicking to toggle Speedreader to Off in brave://settings/, loaded a few sites, and confirmed they returned to default (non-Speedreader/reader) mode
after globally enabling Speedreader, then visiting nytimes.com and clicking on an article, I was in Speedreader mode. Toggling the Speedreader icon to Off via the www.nytimes.com in Speedreader toggle, the site now refreshed and was back in default mode
after clicking to get and then dismissing the Turn on Speedreader promo tooltip 3x, I'm able to toggle the Reader mode on/off via its icon in the URL bar
light and dark modes were tested
Speedreader works in private windows, private windows with Tor, and Guest mode
confirmed the tooltip for Speedreader mode is Speedreader settings

example	example	example	example	example	example	example	example	example

Verification passed on

Brave	1.28.92 Chromium: 92.0.4515.107 (Official Build) beta (64-bit)
Revision	87a818b10553a07434ea9e2b6dccf3cbe7895134-refs/branch-heads/4515@{#1634}
OS	Ubuntu 18.04 LTS

Confirmed:

clicking on the Speedreader icon shows the promo tooltip
after clicking again and then again (3x total), the Speedreader promo tooltip no longer pops up
after clicking Turn on Speedreader via the promo tooltip, all supported text articles automatically load in Speedreader mode, until explicitly disabled (either globally via brave://settings or the icon in the URL bar)
after clicking the promo Turn on Speedreader tooltip, above, confirmed Speedreader is toggled to On via brave://settings/
after clicking to toggle Speedreader to Off in brave://settings/, loaded a few sites, and confirmed they returned to default (non-Speedreader/reader) mode
after globally enabling Speedreader, then visiting nytimes.com and clicking on an article, I was in Speedreader mode. Toggling the Speedreader icon to Off via the www.nytimes.com in Speedreader toggle, the site now refreshed and was back in default mode
after clicking to get and then dismissing the Turn on Speedreader promo tooltip 3x, I'm able to toggle the Reader mode on/off via its icon in the URL bar
light and dark modes were tested
Speedreader works in private windows, private windows with Tor, and Guest mode
confirmed the tooltip for Speedreader mode is Speedreader settings

Light theme

Dark theme

Logged #17216

Verification passed on

Brave | 1.28.92 Chromium: 92.0.4515.107 (Official Build) beta (64-bit)
-- | --
Revision | 87a818b10553a07434ea9e2b6dccf3cbe7895134-refs/branch-heads/4515@{#1634}
OS | Windows 10 OS Version 2004 (Build 19041.1110)

Confirmed:

clicking on the Speedreader icon shows the promo tooltip
after clicking again and then again (3x total), the Speedreader promo tooltip no longer pops up
after clicking Turn on Speedreader via the promo tooltip, all supported text articles automatically load in Speedreader mode, until explicitly disabled (either globally via brave://settings or the icon in the URL bar)
after clicking the promo Turn on Speedreader tooltip, above, confirmed Speedreader is toggled to On via brave://settings/
after clicking to toggle Speedreader to Off in brave://settings/, loaded a few sites, and confirmed they returned to default (non-Speedreader/reader) mode
after globally enabling Speedreader, then visiting nytimes.com and clicking on an article, I was in Speedreader mode. Toggling the Speedreader icon to Off via the www.nytimes.com in Speedreader toggle, the site now refreshed and was back in default mode
after clicking to get and then dismissing the Turn on Speedreader promo tooltip 3x, I'm able to toggle the Reader mode on/off via its icon in the URL bar
light and dark modes were tested
Speedreader works in private windows, private windows with Tor, and Guest mode
confirmed the tooltip for Speedreader mode is Speedreader settings

Light theme

example	example	example	example	example	example	example

Dark theme

example	example	example	example	example	example	example

iefremov added the feature/speedreader label Apr 16, 2020

iefremov self-assigned this Apr 16, 2020

iefremov mentioned this issue Apr 16, 2020

Add speedreader button via --enable-speedreader #8416

Closed

rebron mentioned this issue May 18, 2020

[Meta] Add Speedreader view #9810

Closed

4 tasks

rebron added OS/Desktop QA/Yes release-notes/exclude priority/P3 The next thing for us to work on. It'll ride the trains. labels May 22, 2020

srirambv changed the title ~~Implement the speedreader promo bubble~~ [Desktop] Implement the speedreader promo bubble Sep 9, 2020

iefremov removed their assignment May 19, 2021

rebron assigned karenkliu May 19, 2021

kkuehlz self-assigned this May 28, 2021

kkuehlz mentioned this issue Jun 1, 2021

Implement Speedreader address bar bubble panels #16162

Closed

kkuehlz mentioned this issue Jun 4, 2021

Add speedreader toggle to settings #16238

Closed

kkuehlz mentioned this issue Jul 10, 2021

Speedreader change icon behavior brave/brave-core#9396

Merged

24 tasks

kkuehlz closed this as completed in brave/brave-core@4b7ae7a Jul 12, 2021

kkuehlz added this to the 1.28.x - Nightly milestone Jul 14, 2021

stephendonner added the QA Pass-macOS label Jul 27, 2021

rebron changed the title ~~[Desktop] Implement the speedreader promo bubble~~ Implement the speedreader promo bubble Jul 27, 2021

LaurenWags added the QA/Test-All-Platforms label Jul 27, 2021

btlechowski added the QA Pass-Linux label Jul 28, 2021

btlechowski mentioned this issue Jul 28, 2021

speedreader settings link points to brave://settings rather than speedreader settings #17216

Closed

GeetaSarvadnya added the QA Pass-Win64 label Jul 29, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement the speedreader promo bubble #9262

Implement the speedreader promo bubble #9262

iefremov commented Apr 16, 2020 •

edited by karenkliu

Loading

karenkliu commented May 27, 2021

iefremov commented Jun 3, 2021

karenkliu commented Jun 3, 2021

karenkliu commented Jul 9, 2021

kkuehlz commented Jul 9, 2021

stephendonner commented Jul 27, 2021 •

edited by GeetaSarvadnya

Loading

Implement the speedreader promo bubble #9262

Implement the speedreader promo bubble #9262

Comments

iefremov commented Apr 16, 2020 • edited by karenkliu Loading

Description

Design

User Flow

Settings

Additional interaction states and dark theme

Notes

Assets

karenkliu commented May 27, 2021

iefremov commented Jun 3, 2021

karenkliu commented Jun 3, 2021

karenkliu commented Jul 9, 2021

kkuehlz commented Jul 9, 2021

stephendonner commented Jul 27, 2021 • edited by GeetaSarvadnya Loading

iefremov commented Apr 16, 2020 •

edited by karenkliu

Loading

stephendonner commented Jul 27, 2021 •

edited by GeetaSarvadnya

Loading