1123858 - [UX] Need icon for screen sharing

Status: RESOLVED FIXED

(Hello (Loop) :: Client, defect, P1)

Description

[Sevaan Franks [:sevaan]]

A temporary icon has been used in our screen sharing mockups. Now we need to finalize the icon we will be implementing into Firefox Hello.

Current "temp" icon: http://cl.ly/image/2v1R1g1j2l2V

Comment 1

[Mark Banner (:standard8)]

Note: we need an icon/ux that also covers the following states:

- Screen share active
- Screen share inactive
- Screen share button disabled (this currently happens only whilst prompting for a particular window, or whilst set-up of sharing media is in progress).

Comment 2

[:shell escalante]

who should this be assigned to - Sevaan or Michael?  we are delivering this in Fx38 - so we need the SVG icons to add to the code.

Comment 3

[Sevaan Franks [:sevaan]]

The talented Michael Maslaney for icons, plz!

I flagged it for the Firefox Backlog since he works off of that.

Comment 4

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Share.zip

Icons attached.

Comment 5

[Sevaan Franks [:sevaan]]

Looks great. Thanks!

Comment 6

[Mark Banner (:standard8)]

Sevaan: the icons in the zip files have additional mute states. Currently we're not using different icons - the icons stay the same and the background changes:

- Microphone and Camera icons go blue when muted
- Screen share icon goes green when sharing

I'm not quite sure the "mute" icon would make sense for screen sharing in the current setup.

Also, we need something to indicate the screen share icon is disabled - which typically happens for a short time whilst sharing is being initiated.

Can you clarify what we want for the UX please?

Comment 7

[Mike de Boer [:mikedeboer]]

Michael, it seems like the SVG exporter plugin adds all kinds of elements to the resulting SVG file, which I don't think we need.
Can you take a look and optimize this a bit?

Comment 8

[Mark Banner (:standard8)]

Sevaan: I was wrong - we do use the mute states for the microphone/camera icons. What I'm not sure about is when we want the "mute" state to show for the screenshare icon (and the previously mentioned disabled indication).

Comment 9

[Sevaan Franks [:sevaan]]

We won't need the mute-state for the screenshare icon. It's split off onto the other side of the window and has it's own functionality already outlined in the spec.

Comment 10

[Mark Banner (:standard8)]

(In reply to Mike de Boer [:mikedeboer] from comment #7)
> Michael, it seems like the SVG exporter plugin adds all kinds of elements to
> the resulting SVG file, which I don't think we need.
> Can you take a look and optimize this a bit?

Michael, any update yet?

Comment 11

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Screen_Icon.zip

Michael, let me know if the attached fair better. I went ahead and unified the shapes within the AI file.

Comment 12

[Mike de Boer [:mikedeboer]]

(In reply to Michael Maslaney [:mmaslaney] ([e-mail]) from comment #11)
> Created attachment 8562165 [details]
> Screen_Icon.zip
> 
> Michael, let me know if the attached fair better. I went ahead and unified
> the shapes within the AI file.

Thanks! I think so, I seem to be able to just remove the first <g> element with all the 'SVGID' stuff in it, containing clip paths, rects and coordinates. I think they're just used for displaying purposes in Illustrator are not essential to the shape.