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

RESOLVED FIXED in Firefox 56

Status

()

Firefox for Android
Reader View
P3
normal
RESOLVED FIXED
2 years ago
8 months ago

People

(Reporter: Ivan Garcia, Assigned: JanH)

Tracking

(Blocks: 1 bug, {ux-minimalism})

47 Branch
Firefox 56
All
Android
ux-minimalism
Points:
---

Firefox Tracking Flags

(fennec-, firefox56 fixed)

Details

MozReview Requests

()

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(2 attachments)

(Reporter)

Description

2 years ago
Created attachment 8760976 [details]
Screenshot with new bright orange floating button at bottom right

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)

Comment 3

2 years ago
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.

Comment 4

2 years ago
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
Keywords: ux-minimalism

Comment 6

2 years ago
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.

Comment 7

11 months ago
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.

Comment 8

11 months ago
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;
	}
}
(Assignee)

Comment 9

10 months ago
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)

Updated

10 months ago
Assignee: nobody → jh+bugzilla
Hardware: Unspecified → All
Comment hidden (mozreview-request)

Comment 11

10 months ago
mozreview-review
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)
(Assignee)

Comment 12

10 months ago
mozreview-review-reply
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 hidden (mozreview-request)

Comment 14

10 months ago
mozreview-review
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+
(Assignee)

Comment 15

10 months ago
For absolute correctness I should probably register the "transitionend" listener before starting the transition.
Comment hidden (mozreview-request)

Comment 17

10 months ago
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

Comment 18

10 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/798d2c7d1fdf
Status: NEW → RESOLVED
Last Resolved: 10 months ago
status-firefox56: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 56
(Assignee)

Updated

9 months ago
Duplicate of this bug: 1399345
(Assignee)

Updated

8 months ago
Blocks: 1405716
You need to log in before you can comment on or make changes to this bug.