Closed Bug 1278704 Opened 4 years ago Closed 2 years ago

Android Reader View's new brightly colored, ever-present floating action button is distracting

Categories

(Firefox for Android :: Reader View, defect, P3)

47 Branch
All
Android
defect

Tracking

()

RESOLVED FIXED
Firefox 56
Tracking Status
fennec - ---
firefox56 --- fixed

People

(Reporter: ivangarciapr, Assigned: JanH)

References

(Blocks 1 open bug)

Details

(Keywords: ux-minimalism)

Attachments

(2 files)

Background: The menu item for changing Reader View options used to be colored such that it blended in with the rest of the page and it would disappear entirely if you started to scroll down. This made sense, reader view is supposed to be about distraction-free reading and the reader view UI went out of its way to not be a distraction.

In the new version, the Reader View options are instead exposed through a bright orange Floating Action Button that is always present, blocks the user from reading the text under it, and is visually distracting by making the least important part of Reader View into the most visually prominent part of its UI.

The new floating button might make the Reader View options more discoverable, which I'm guessing was the motivation behind the change, but it also adds unnecessary visual clutter, which goes against the fundamental purpose of Reader View.
tracking-fennec: --- → ?
Flags: needinfo?(bbermes)
Flags: needinfo?(alam)
>>>it would disappear entirely if you started to scroll down

antlam, could we bring this back to have the new button disappear once you start scrolling?
Flags: needinfo?(bbermes)
(In reply to Ivan Garcia from comment #0)
> In the new version, the Reader View options are instead exposed through a
> bright orange Floating Action Button that is always present, blocks the user
> from reading the text under it, 

Thanks for the feedback Ivan! You raise a good point. This is something we considered this as well. But in practice (and in your screenshot too) it really doesn't block much "text" and if it does, it's at the far right, bottom corner of the page. 

That being said, I think having this button move out of the way [1] is a great idea too. I'd be happy to see this proto-typed out to see how it works in practice. 

> The new floating button might make the Reader View options more
> discoverable, which I'm guessing was the motivation behind the change, but

To be clear, discover-ability was not the driver behind this change. 

We are removing the "Add to Reading List" button/ability to simplify the mental model around saving, and revisiting. This was our opportunity to clean up the experience around Saving, regardless of where/what/how you were viewing web content.

> it also adds unnecessary visual clutter, which goes against the fundamental
> purpose of Reader View.

When we designed Reader View, the fundamental purpose was to read and consume the article. And to help users do that, we also offer controls to manipulate the content based on personal preference. 

The purpose of this visual here isn't to clutter, but rather to make it easy to identify what mode you're viewing the content in. This also clearly separates the functionality of Reader View from the Browser because this is where a user would go to change the typography of the page.



[1] https://material.google.com/components/buttons-floating-action-button.html#buttons-floating-action-button-behavior
Flags: needinfo?(alam)
The bright orange floating button consistently blocks off the last word(s) when are the bottom of the page.

I Find it maddeningly distracting while reading as it's color contrast to the rest of the UI makes me feel like it's a notification from another app.
I leave it to Anthony and Barbara to decide what we should do to address this (if anything).
Status: UNCONFIRMED → NEW
tracking-fennec: ? → -
Ever confirmed: true
On Android this is usually done with a CoordinatorLayout:
https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html

But the ReaderView UI is HTML so we would need to re-implement this in JS.
Priority: -- → P3
I'll echo the sentiments of the other users here, plus some orthogonal feedback on reader mode:

If I'm staring at my phone in a dark place, reader mode is nice if only to take a black-on-white website to white-on-black, i.e. "night mode". The bright colored button ruins a lot of this particular benefit, independent of its effect on clutter/text occlusion.

In the name of a quicker patch, is it possible to style the button with user chrome CSS or similar? I'm not familiar with the workings of android firefox.
Most people know that oled suffers from screen burn-in. After a year of the orange floating action bar, there is now a permanent ghost of it on my screen.
Add the CSS below to Stylish or userchrome.css and the orange button will scroll off the screen as discussed instead of float:


@namespace "http://www.w3.org/1999/xhtml";
@-moz-document url-prefix("about:reader?url=") {
	#reader-toolbar {
		bottom: initial !important;
		position: absolute !important;
		top: 0 !important;
	}
	.open > .dropdown-popup {
		bottom: initial !important;
	}
}
It turns out that we have some code (https://dxr.mozilla.org/mozilla-central/rev/7d2e89fb92331d7e4296391213c1e63db628e046/toolkit/components/reader/AboutReader.jsm#247) that dims the system navigation buttons depending on whether we're scrolling up or down, so extending that might work for hiding and showing the button as well.
Assignee: nobody → jh+bugzilla
Hardware: Unspecified → All
Comment on attachment 8889084 [details]
Bug 1278704 - Hide Fennec's floating reader view button when scrolling down.

https://reviewboard.mozilla.org/r/160106/#review165646

::: toolkit/components/reader/AboutReader.jsm:637
(Diff revision 1)
> +      }
> +      tb.removeAttribute("hidden");
> +      tb.style.opacity = "1";
> +    } else if (!tb._animationHiding && !tb.hasAttribute("hidden")) {
> +      tb.style.opacity = "0";
> +      tb._animationHiding = this._win.setTimeout(() => {

This should use a transitionend listener.

::: toolkit/components/reader/AboutReader.jsm:961
(Diff revision 1)
> +  _setupToolbar() {
> +    if (!gIsFirefoxDesktop) {
> +      this._toolbarElement
> +        .style.transition = "opacity " + gToolbarAnimationMs + "ms linear";
> +    }
> +  },

This should just go in the CSS, in an android-specific file.
Attachment #8889084 - Flags: review?(gijskruitbosch+bugs)
Comment on attachment 8889084 [details]
Bug 1278704 - Hide Fennec's floating reader view button when scrolling down.

https://reviewboard.mozilla.org/r/160106/#review165646

> This should just go in the CSS, in an android-specific file.

I wanted to make sure the time value for the animation stays in sync with setting the element to hidden, but thanks for the reminder about the transitionend event - in that case this will indeed not be necessary.
Comment on attachment 8889084 [details]
Bug 1278704 - Hide Fennec's floating reader view button when scrolling down.

https://reviewboard.mozilla.org/r/160106/#review165950

Thanks!
Attachment #8889084 - Flags: review?(gijskruitbosch+bugs) → review+
For absolute correctness I should probably register the "transitionend" listener before starting the transition.
Pushed by mozilla@buttercookie.de:
https://hg.mozilla.org/integration/autoland/rev/798d2c7d1fdf
Hide Fennec's floating reader view button when scrolling down. r=Gijs
https://hg.mozilla.org/mozilla-central/rev/798d2c7d1fdf
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 56
Duplicate of this bug: 1399345
Blocks: 1405716
You need to log in before you can comment on or make changes to this bug.