1107273 - Visual Design for Indicating a Window/Tab is Shared

Status: RESOLVED FIXED

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

Description

[Sevaan Franks [:sevaan]]

Design work has been put together in Bug 1079489 regarding window and tab sharing with Loop.

:Phlsa has also done some work on what a shared window would look like in Bug 1037162.

We need a visual design pass that takes into account these bugs and achieves the following:

- Decorates Firefox to indicate clearly to a user that they are sharing a window.
- Decorates Firefox to indicate clearly to a user that they are sharing a particular tab within the window.
- Decorates other application windows to show a user that they are sharing it.
- Decorates the entire desktop to show users that they are sharing it.

Comment 1

[Marco Mucci [:MarcoM]]

Hi Michael, can you assign a point value.

Comment 2

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

5

Comment 3

[Maire Reavy [:mreavy]]

Moving this to P2 based on our new priority definitions.

Comment 4

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

These design cases were covered during our Sharing Permission's UI work, found here:
http://people.mozilla.org/~mmaslaney/sharing/Device-sharing-permissions.png

Comment 5

[Sevaan Franks [:sevaan]]

Thanks Mike, I didn't know that was final. Still missing this piece though:

- Need visuals for when a particular tab within a Firefox window is being shared.

Also, we thought some sort of badge in the upper-right which could be clicked to stop sharing would be more affective than going through a permissions UI (like where the Private Browsing icon goes). Especially since through Hello the screen will be shared from the Hello interface, not a doorhanger off the URL bar. Users need a clearer way to stop things.

Philip, do you have any thoughts on this?

Comment 6

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

I like the badge idea. I'll work something up that incorporates both the badge and tab case.

Comment 7

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Just adding a few things here that you might have already considered:

- We should use some of the same iconography and colors as with non-Hello sharing.
- If we plan to use the same style/spot as the private browsing indicator, what happens if the user shares a private window?
- Would/could we use the same UI for non-Hello sharing as well?

Comment 8

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

Design updates to include

• Added Badge 

• Border gradient to accommodate screen contrast

• Tab sharing

• Badge functionality (toggle and exiting)

• Private tab sharing

Please review:
http://invis.io/NW1ZPHH74

Comment 9

[Marco Mucci [:MarcoM]]

To be tracked by Hello Team.

Comment 10

[Sevaan Franks [:sevaan]]

Looks great. I added a couple comments.

The main think to revisit in the individual tab sharing, as I am not sure we should include the URL bar in it. See the Invision link for more info: http://invis.io/NW1ZPHH74

Comment 11

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Great stuff! I added some questions in Invision.

Comment 12

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

Updated designs and specs:
http://invis.io/NW1ZPHH74

Comment 13

[Romain Testard [:RT]]

Here are some questions/comments I have:
* Share quick toggle - what happens if I click this?
* Quit sharing - this stops sharing without any prompt to the user?
* The "Quit sharing" and "Share quick toggle" buttons are on the left hand side of the screen. What happens if the shared window is in full screen?  rather than adding an outer UI, should we not rather layer a UI over the window space?

Per Philipp's comment I also think that this is a WebRTC platform requirement rather than just a Hello requirement since it feels that users of all apps leveraging the WebRTC tab/window/screen sharing features should benefit from this?