[UX] Need icon for screen sharing

RESOLVED FIXED

Status

P1
normal
RESOLVED FIXED
4 years ago
4 years ago

People

(Reporter: sevaan, Assigned: mmaslaney)

Tracking

unspecified
x86
All
Points:
---
Bug Flags:
firefox-backlog +
qe-verify -

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [ux])

Attachments

(2 attachments)

(Reporter)

Description

4 years ago
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
Flags: firefox-backlog+

Updated

4 years ago
Flags: qe-verify-
Whiteboard: [ux]
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).
Blocks: 1126286
No longer blocks: 1122032

Comment 2

4 years ago
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.
backlog: --- → Fx38+
Flags: needinfo?(sfranks)
Flags: needinfo?(mmaslaney)
Priority: -- → P1
(Reporter)

Comment 3

4 years ago
The talented Michael Maslaney for icons, plz!

I flagged it for the Firefox Backlog since he works off of that.
Flags: needinfo?(sfranks)
Created attachment 8555892 [details]
Share.zip

Icons attached.
Flags: needinfo?(mmaslaney)
(Reporter)

Comment 5

4 years ago
Looks great. Thanks!
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?
Flags: needinfo?(sfranks)
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?
Status: NEW → ASSIGNED
Flags: needinfo?(mmaslaney)
Assignee: nobody → mmaslaney
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).
(Reporter)

Comment 9

4 years ago
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.
Flags: needinfo?(sfranks)
(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?
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.
Flags: needinfo?(mmaslaney)
(In reply to Michael Maslaney [:mmaslaney] (mmaslaney@mozilla.com) 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.
Status: ASSIGNED → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.