Note: There are a few cases of duplicates in user autocompletion which are being worked on.

Add a play icon to the click-to-play placeholder

VERIFIED FIXED in Firefox 14

Status

()

Toolkit
Themes
--
enhancement
VERIFIED FIXED
5 years ago
5 years ago

People

(Reporter: Dave Garrett, Assigned: jaws)

Tracking

({mobile})

Trunk
mozilla15
mobile
Points:
---
Dependency tree / graph
Bug Flags:
in-testsuite -

Firefox Tracking Flags

(firefox14 fixed)

Details

Attachments

(2 attachments, 4 obsolete attachments)

(Reporter)

Description

5 years ago
With the current plugin click-to-play placeholder you have to read the text to know it's click-to-play. Adding a play icon (triangle pointing right) would give a simpler at a glance understanding of what's going on. I suggest simply taking what is there now, making the Lego brick plugin icon significantly bigger, and sticking a play icon in the middle. It's just a minor change, but I think it could be a nice improvement.
(Reporter)

Updated

5 years ago
Depends on: 711552

Comment 1

5 years ago
Created attachment 616429 [details]
expected_pretty.png

screenshot with suggested "Play" button, along with a "Play All" check box

This "Play" button appear same as the one on <VIDEO> element control.

Comment 2

5 years ago
Created attachment 616430 [details]
current_ugly.png

screenshot with current ugly plug-in place holder

Comment 3

5 years ago
URL for screen shot
http://pbskids.org/dinosaurtrain/games/hungryhungryherbivore.html

Updated

5 years ago
Blocks: 738698
No longer depends on: 711552

Updated

5 years ago
Blocks: 711552

Updated

5 years ago
Component: Plug-ins → Themes
Product: Core → Toolkit
QA Contact: plugins → themes
We've gone back and forth in the past when talking about this. I agree the current UI (attachment 616430 [details]) isn't what we want, though.

Specifically, if we make it look like the click-to-play HTML5 video controls, that's good because it's familiar / consistent UI. But it's also not-so-good in that it blurs the lines between HTML5 and plugins. It's sorta a lost cause, but then again when we're using this UI as a security mechanism for outdated+vulnerable plugins, it would be a shame for HTML5 video to pickup those emotions too just because the UI looks similar.

UX will save us! ;)
Keywords: uiwanted
We'll have to be careful about the metaphor that is used here, because not all plugin usages have a simple connotation of 'playing'. For example, a Java-based calculator might look odd with a large play button in its place.

A few metaphors that I have been thinking of:
- Lightswitch
- Question mark inside of the plugin block
- Electrical plug inside of the plugin block (similar to this: http://www.sonalksis.com/images/buttons/activate_download_roll.png)
what about an effective click-to icon (example http://www.netgear.com/images/Icon%20-%20Power%20OnOff%20Button18-3597.gif)
(Reporter)

Comment 7

5 years ago
A play icon might not fit perfectly for starting an embeded Java program, but it does make some sense that would be understandable by the user. Play means "start" in such an instance. Even we're calling it click-to-"play".

A play icon is the first thing that comes to mind, and the alternate suggestions in comment 5 and 6 aren't used commonly and are all a bit of over-thinking things, honestly. A lightswitch (if a user can recognize what it is) doesn't imply starting something, it implies a toggle option and is used as such in other places. A question mark implies a question, which this is, but still means the user needs to read the text to see what's being asked. Electrical plugs imply power management in most usage. The finger icon does imply the need to click on a touchscreen, but not why, and is not ideal for desktop users. A play button is easily recognizable as a button to click to start something, and video and games are by far the most common plugins that will be loaded by clicking a placeholder anyway.

Note that Biju is suggesting a full big video-like play button. My suggestion in comment 0 was to merely add a play button to the plugin icon already in use and make things a little bigger.

Comment 8

5 years ago
I agree both that a plugin icon (lego piece, I guess) and a play icon combined (a play icon inside a plugin icon shape?) is probably a metaphor that would work best.

Comment 9

5 years ago
The reason why I first asked for this at bug 711552 comment 67 is because webpages looks non-attractive with current click to play UI. see.. 
http://manoramaonline.com/  
http://www.mathrubhumi.com/
http://www.nytimes.com/
http://www.ajc.com/

When we enable click-to-play, page should still appear pleasant to read.
on iPhone Flash is not available, but when we surf web with iPhone pages are still pleasant to read.


(In reply to Dave Garrett from comment #7)
> Note that Biju is suggesting a full big video-like play button. My
> suggestion in comment 0 was to merely add a play button to the plugin icon
> already in use and make things a little bigger.

Problem with LEGO icons in Firefox is nobody I know get it that 
1. it is an image of LEGO block
2. it mean a plugin.
Even though we all know LEGO, the Firefox LEGO image in broken-plugin never looked like LEGO to me and my friends, I have to explain it others about that after I read it some were.

Now, LEGO is not a popular brand in every country.
Growing up in India I never played with LEGO or I saw it at any of my friends place. I had building blocks from some other company, and it had totally different shape.

So get rid of LEDO icon completely.

(In reply to Jared Wein [:jaws] from comment #5)
> We'll have to be careful about the metaphor that is used here, because not

See http://www.youtube.com/watch?v=UjwLcmqZTKU
dont worry too much about the metaphor, people will figure it out, as long as you present something which appear to be "can be pushed" and appear simple.

Even though "3D" icon appear cool, still it is always complex to understand, 
try to get something which looks good even in "2D".
(said the, you may give slight "3D" effect to get coolness)
 
A triangle "|>" shaped play button got associated with playing movie or music only because electronics company used them in walkmans, music players and VCRs to indicate "GO", "START" etc.
And it is only a shortened arrow symbol, arrow (pointer) we use all the time every where for meaning "GO", like sign on the road, an event site, air-port etc.
  
So I feel we should use PLAY icon for this.
(Reporter)

Comment 10

5 years ago
(In reply to Biju from comment #9)
Your argument against the current plugin icon makes sense, but it's already used in quite a few other places inside Firefox. Even if it's not perfect some people will understand it and I'd think using it for consistency makes sense. Having a Lego brick shape around a play icon instead of a circle shouldn't detract from its understandability.

Comment 11

5 years ago
(In reply to Dave Garrett from comment #10)
> sense. Having a Lego brick shape around a play icon instead of a circle
> shouldn't detract from its understandability.

Then make the Lego brick Pretty.

Alternately for plugin across every where at mozilla.org and Firefox 
I feel a "Gear" make sense.

So it can be a Play Arrow inside a Gear, for plugin click-to-play.
sample of a gear image 
http://icons.iconarchive.com/icons/deleket/soft-scraps/256/Gear-icon.png
And instead of the center circle in it put a Triangle "Play" image

Comment 12

5 years ago
I'd say this must be RESOLVED WONTFIX if you don't want a million "I haz to click play twice to play YouTube vidz" bugs.
(Reporter)

Comment 13

5 years ago
(In reply to alex_mayorga from comment #12)
> I'd say this must be RESOLVED WONTFIX if you don't want a million "I haz to
> click play twice to play YouTube vidz" bugs.

Um... what does changing the icon have to do with an increased number of clicks? This would be an argument against turning click-to-play on by default, though it is being designed to remember when a user doesn't want to use it for certain sites.

Updated

5 years ago
Keywords: mobile
Created attachment 619985 [details] [diff] [review]
Patch with crude play plugin icon

This patch uses a crudely made play icon that I created. We'll need a new graphic for this, but my guess is that it will be somewhat close to what I made in Paint.net. (I actually tried this time ;) ).
Assignee: nobody → jwein
Status: NEW → ASSIGNED
Created attachment 619986 [details]
Screenshot of crudely made icon

Stephen, I tried making an icon for once. The diagonal edges of the play button are too jagged and I couldn't get the shadow to match the rest of the icon though ;)
Attachment #619986 - Flags: ui-review?(shorlander)
Attachment #619986 - Attachment is patch: false
Attachment #619986 - Attachment mime type: text/plain → image/png

Comment 16

5 years ago
(In reply to Jared Wein [:jaws] from comment #15)
> Created attachment 619986 [details]
> Screenshot of crudely made icon

Can we make background of icon (ie, the plugin content area) transparent.
At present it is gray and make web page ugly looking
Didn't shorlander just make a "nice" icon for this? I could swear he posted it on IRC one day... (quite possibly in response to this ;)
Created attachment 621499 [details]
Click-to-Play Icon

(In reply to Justin Dolske [:Dolske] from comment #17)
> Didn't shorlander just make a "nice" icon for this? I could swear he posted
> it on IRC one day... (quite possibly in response to this ;)

I did make an icon.
Attachment #619986 - Attachment is obsolete: true
Attachment #619986 - Flags: ui-review?(shorlander)
Keywords: uiwanted
Created attachment 621750 [details] [diff] [review]
Patch for bug

Updated patch with icon from Stephen.
Attachment #616429 - Attachment is obsolete: true
Attachment #616430 - Attachment is obsolete: true
Attachment #619985 - Attachment is obsolete: true
Attachment #621750 - Flags: review?(felipc)
Attachment #621750 - Flags: review?(felipc) → review+
https://hg.mozilla.org/integration/mozilla-inbound/rev/746e2b965521
status-firefox14: --- → affected
Flags: in-testsuite-
Target Milestone: --- → mozilla15
Comment on attachment 621750 [details] [diff] [review]
Patch for bug

[Approval Request Comment]
Regression caused by (bug #): bug 711552

User impact if declined:
Missing plugin icon is used instead of click-to-play icon. This feature is preffed off for Fx14, but it would be a nice-to-have patch on Fx14 since this feature has been getting a lot of press.

Testing completed (on m-c, etc.): locally, landed on mozilla-inbound
Risk to taking this patch (and alternatives if risky): none expected
String changes made by this patch: none
Attachment #621750 - Flags: approval-mozilla-aurora?
https://hg.mozilla.org/mozilla-central/rev/746e2b965521
Status: ASSIGNED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED

Comment 23

5 years ago
I can see the new icon on Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:15.0) Gecko/15.0 Firefox/15.0a1 ID:20120509030514

Not that it'd make any difference, but I don't like it and think it is confusing.

activate ≠ play
Status: RESOLVED → VERIFIED
Comment on attachment 621750 [details] [diff] [review]
Patch for bug

[Triage Comment]
Approved with the same rationale as https://bugzilla.mozilla.org/show_bug.cgi?id=743421#c13.
Attachment #621750 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
https://hg.mozilla.org/releases/mozilla-aurora/rev/d3b918a3d019
status-firefox14: affected → fixed
You need to log in before you can comment on or make changes to this bug.