Improve style of click-to-play UI

RESOLVED WORKSFORME

Status

()

P5
normal
RESOLVED WORKSFORME
5 years ago
5 years ago

People

(Reporter: Eduard.Braun2, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

5 years ago
The new style of the click-to-play UI introduced in Firefox 21 (and probably bug 831921) has a few serious design issues:

- When not hovering it is very hard to notice the UI at all, especially on white background. It should be clearly visible in all situations. The old UI did a much better job at that.

- The actual flashing when hovering is rather confusing. When I actually hover over the UI I know it is there, I don't need to be be blinded by a white flash then. Furthermore I'm expecting something to happen when clicking, when there's already something going on when hovering I assume I already triggered something (which is not the case after all)

- The play button is confusing (in two ways actually):
  * In the case of video and music players one often doesn't know if it's the real play button or Firefox's click-to-play button. It's too common being only a triangle inside a circle. The previous LEGO thing wasn't really nice but unique. Maybe you should combine the puzzle-piece from about:addons with a play button.
  * Already the fact to have an actual button is confusing: One thinks one has to press the button (which is inconvenient and will lead to less people using click-to-play) whereas actually it would be enough to click somewhere in the rectangle.

- The text is very hard to read on greyish and some colored backgrounds, see http://people.mozilla.com/~shorlander/ctp-test/ctp-test.html. It's only easy to read on white background.

I hope you're considering these points and try to improve the click-to-play UI in a future version.
(Reporter)

Updated

5 years ago
Blocks: 738698

Comment 1

5 years ago
I agree with the points made in the previous comment. Also, just  as a reference, here is little userstyle which IMHO deals with most of the problems mentioned above.

http://userstyles.org/styles/86658/firefox-improved-click-to-play

- Lower/removed transparency - looks good on most dark and bright backgrounds
- Border - makes it easier to tell it apart from the rest of the content
- Fainter hover effect - less of a flash bang for the eyes
- Bigger darker text - easier to tell what you are about to enable

It also applies some changes to the crash UI making it more consistent as a whole.
(In reply to Eduard Braun from comment #0)
> - When not hovering it is very hard to notice the UI at all, especially on
> white background. It should be clearly visible in all situations. The old UI
> did a much better job at that.

But the old UI also made sites look much more "broken" when not activating the plugin. The goal of the current version was to blend in better.

> - The play button is confusing (in two ways actually):
>   * In the case of video and music players one often doesn't know if it's
> the real play button or Firefox's click-to-play button. It's too common
> being only a triangle inside a circle.

On the other hand it's an already widely used signal and most users probably know what to expect of this.

>   * Already the fact to have an actual button is confusing: One thinks one
> has to press the button (which is inconvenient and will lead to less people
> using click-to-play) whereas actually it would be enough to click somewhere
> in the rectangle.

And without something button-like it's not really clear that you can click to activate.

> 
> - The text is very hard to read on greyish and some colored backgrounds, see
> http://people.mozilla.com/~shorlander/ctp-test/ctp-test.html. It's only easy
> to read on white background.

Right, that could be improved.

(In reply to annaeus from comment #1)
> - Lower/removed transparency - looks good on most dark and bright backgrounds
> - Border - makes it easier to tell it apart from the rest of the content
[...]
> - Bigger darker text - easier to tell what you are about to enable

I think those go against the premise of making the overlay blend into the page better - think sites that are crowded with ads, which suddenly look "broken" with all the visual noise from the CtP overlay.
Status: UNCONFIRMED → NEW
Ever confirmed: true

Comment 3

5 years ago
I for one find the new UI to be a large step backwards.

(In reply to Georg Fritzsche [:gfritzsche] from comment #2)
> (In reply to Eduard Braun from comment #0)
> > - When not hovering it is very hard to notice the UI at all, especially on
> > white background. It should be clearly visible in all situations. The old UI
> > did a much better job at that.
>
> But the old UI also made sites look much more "broken" when not activating
> the plugin. The goal of the current version was to blend in better.

The fact that it _didn't_ blend in made it much more obvious.  You should draw some attention to the fact that the browser is blocking a plugin.  "Blending in" is user-hostile behavior.  If it's bothersome, users can use that X button in the corner to dismiss it.
 
> > - The play button is confusing (in two ways actually):
> >   * In the case of video and music players one often doesn't know if it's
> > the real play button or Firefox's click-to-play button. It's too common
> > being only a triangle inside a circle.
> 
> On the other hand it's an already widely used signal and most users probably
> know what to expect of this.
>
> >   * Already the fact to have an actual button is confusing: One thinks one
> > has to press the button (which is inconvenient and will lead to less people
> > using click-to-play) whereas actually it would be enough to click somewhere
> > in the rectangle.
> 
> And without something button-like it's not really clear that you can click
> to activate.
 
I have to agree with the original poster on both counts.  It is not good practice to make browser UI look like web site UI.  And I think users are more likely to discover that the entire area is clickable under the previous UI than the new one.

> > - The text is very hard to read on greyish and some colored backgrounds, see
> > http://people.mozilla.com/~shorlander/ctp-test/ctp-test.html. It's only easy
> > to read on white background.
> 
> Right, that could be improved.
> 
> (In reply to annaeus from comment #1)
> > - Lower/removed transparency - looks good on most dark and bright backgrounds
> > - Border - makes it easier to tell it apart from the rest of the content
> [...]
> > - Bigger darker text - easier to tell what you are about to enable
> 
> I think those go against the premise of making the overlay blend into the
> page better - think sites that are crowded with ads, which suddenly look
> "broken" with all the visual noise from the CtP overlay.

I do not see the apparent problem in a site that was "crowded with ads" suddenly being crowded with click-to-play placeholders.  The latter is unlikely to be any worse than the former.
(In reply to 004a0041 from comment #3)
[...]

The difference was notable in the user study that lead to the recent re-iterations. Ads and the placeholders do look different, hence sites look notably different with click-to-play.
The overlay/placeholder can certainly improved, but blending in in such cases is neccessary. Having to click away multiple placeholders should not be neccessary and is tiresome and could lead to just finding shortcuts around it (like activating all plugins).
Note that no-one needs to discover that the whole area is clickable.

Comment 5

5 years ago
> The difference was notable in the user study that lead to the recent
> re-iterations.

The difference has also been notable enough for several of us to take to Bugzilla to declare it a bug.

> Ads and the placeholders do look different, hence sites look
> notably different with click-to-play.

I didn't say they looked no different - indeed, I made it a point that they should look different - but as a user a site does not look "worse" with click-to-play placeholders than it does with ads.

> The overlay/placeholder can certainly improved, but blending in in such
> cases is neccessary.

You haven't made a good case as to why.  Judging by the comments on this bug it is not at all self-evident that that is a desirable attribute.  Indeed, I continue to hold that it is user-hostile to make this UI harder to find.

> Having to click away multiple placeholders should not
> be neccessary and is tiresome and could lead to just finding shortcuts
> around it (like activating all plugins).

I'm not sure how this is related.

> Note that no-one needs to discover that the whole area is clickable.

And no one "needs to" discover that you can close the browser by clicking a single button the OS places in the corner of the window, instead of going to File -> Exit, but making such UI affordances discoverable should be a usability consideration.
This should be discussed on the dev-apps-firefox (or firefox-dev) mailing list, not here in bugzilla.
Good point David, let's take further discussions to firefox-dev until there is some consensus about what should be done here.
Priority: -- → P5
(Reporter)

Comment 8

5 years ago
You're aware that most users (including me) are probably not receiving any Firefox mailing lists?

Just don't come up with a design that "was discussed on mailing list and has consensus" but doesn't fit the needs of the users.
For anyone interested, here's how you can sign up for the mailing lists I mentioned:
https://lists.mozilla.org/listinfo/dev-apps-firefox
https://mail.mozilla.org/listinfo/firefox-dev
(there are also links to the archives on those pages for past discussions)
And here are lists of other lists:
https://wiki.mozilla.org/Mailing_lists
https://lists.mozilla.org/listinfo
https://mail.mozilla.org/listinfo/
(Reporter)

Comment 10

5 years ago
Just for clarity: I know how subscribe to a mailing list, but since I'm only interested in specific bugs I do not want to receive bunches of mail with information mostly irrelevant for me.

I assume I'm speaking for many users here...
Most users don't read this bug either -- bugzilla isn't a discussion venue, firefox-dev is. (11 people CC'd here, 200+ on firefox-dev) I already can't even tell what this bug is specifically proposing.
(Reporter)

Comment 12

5 years ago
The style introduced in Firefox 24 solves all of my initial points of criticism. This bug is therefore resolved as far as I'm concerned.

Funnily the style is close to were it was before Firefox 21, so I'm still wondering why a change was necessary at all, but I'll not try to further question the intention behind such usability "improvements".


P.S. I just wanted to close this bug, but I'm not allowed to set this to resolved/fixed, so somebody else needs to do it.

Updated

5 years ago
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.