Closed Bug 1379480 Opened 2 years ago Closed Last year

[meta] The Reload/Stop button animation is too distracting


(Firefox :: Theme, enhancement, P3)






(Reporter: Oriol, Unassigned)



(Keywords: meta, Whiteboard: [photon-animation])


(1 file)

I want my focus to stay on the area where the page I want to see will load. I don't want to be distracted by annoying useless animations in the browser GUI.
Set toolkit.cosmeticAnimations.enabled to false to disable it.
There's also browser.stopReloadAnimation.enable it seems.
From bug 1355924 comment 41, by Dão Gottwald [::dao],

> I think we should also consider not having this animation at all if there's
> any significant cost. From all photon animations, this one feels like it's
> more on the "bells and whistles" and "just because we can" spectrum, and to
> be honest I found it pretty distracting when I tried the patch.
I agree that this specific animation is distracting.  I think what causes me to feel that this animation is distracting while the others aren't is that it runs very often, every time a page loads.  Also, unlike for example the Pocket animation, which occurs in response to a specific user interaction, this animation can happen whenever the page does a navigation (e.g. in an iframe).  An extreme cases where this is noticeable is, where the animation runs around ten times before the page has settled down!
I think that the combination of how common it is visible, how often it happens and how long the animation is contributes to that.
On a fast network the animation goes from reload to stop to reload really fast. It would be cool to try to minimize the number of elements of the animation, maybe skip it if the page loads under X ms and maybe make it a bit less noticable?

I like the animation itself and the idea of animation. it makes the UI feel "fluid" and contributes to my experience of feeling that the UI is fresh and modern.
Throwing in 2 more theories:

1) animation distracts because it appears only a short moment. It also appears after page load is done for child content like images and iframes; and those can come in short burts. Two solutions here would be not animating for loading past initial page load and  debouncing the start of the animation (maybe 150ms, should be tested), so it doesn't show for short loads.

2) The animation takes more time by animating in and out. Maybe the in-phase can be shortened and made less "noisy".
Whiteboard: [photon-animation] [triage]
Attached file SVGs +
Thanks for all the feedback everyone.  It's really helpful.  We're trying to find a balance that makes the browser feel more refined without being distracting.

I've decreased the duration of the animation since it was feeling slow on implementation - the svg sprite is attached.

It would be great if we can skip the animation altogether if the page loads quickly.  But say we set a threshold to 150ms and the page ends up loading at 200ms - we'll have a similar problem here.

Can we we try delaying the motion by 150ms and skip if the site has loaded? If the site takes longer to load but is under 2s we should play the in animation but skip the out animation. While sites that take over 2s to load get both the in and out? This should give a large enough of a pause in between motions since when they connect the motion feels broken and very distracting.

But as Harald mentioned we'll have to test this out and will most likely tweak until we have the right balance.

Also, once the page loads the out animation should only play once and not for subsequent loads of the site. The flickering of subsequent loads feels really glitchy.
Flags: needinfo?(jaws)
Flags: qe-verify+
Priority: -- → P3
QA Contact: jwilliams
Whiteboard: [photon-animation] [triage] → [reserve-photon-animation]
Just now, I was loading a page that should be very quick to load (a small, file: page).  The page load was quick, but the animation continued past the page load finish time, and I realised that I felt that the page hadn't finished loading until the animation was done.  I don't know if other users would feel the same way, but I had a sudden worry that this could contribute to people feeling Firefox is slower on fast loading pages.
(I realise now, reading Eric's comment 7, that he's thinking of this issue too.  Thanks!)
See Also: → 1380947
I just used Nightly on another PC where I didn't disable the pref, and I saw the animation again. It's more than distracting, it's so damn annoying! Please backout bug 1355924.
(In reply to Oriol [:Oriol] from comment #10)
> I just used Nightly on another PC where I didn't disable the pref, and I saw
> the animation again. It's more than distracting, it's so damn annoying!
> Please backout bug 1355924.

The implementation on nightly has not yet been refined.  Please hold you're judgement until we update the speed and interaction. I appreciate your concerns and have taken them into account, thanks!  The end goal is to have a refined icon animation that helps the browser feel more polished and designed without being distracting.
(In reply to Eric Pang [:epang] UX from comment #7)

The work to speed up the animation has been spun out to bug 1381957.

This bug will remain to be a general catch-all for issues with the stop/reload animation.
Flags: needinfo?(jaws)
The work to disable the animation if the page loads very fast has been spun out to bug 1384180.
Flags: qe-verify+ → qe-verify-
Keywords: meta
Priority: P3 → --
QA Contact: jwilliams
Summary: The Reload/Stop button animation is too distracting → [meta] The Reload/Stop button animation is too distracting
Whiteboard: [reserve-photon-animation] → [photon-animation]
No longer blocks: 1355924
Component: General → Theme
Depends on: 1384180, 1381957, 1355924
Priority: -- → P3
Closed: Last year
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.