1079489 - [UX] Design screen-sharing experience within Firefox Hello

Status: RESOLVED FIXED

(Firefox :: General, defect)

Description

[Darrin Henein [:darrin]]

Based on the exploratory work done in https://bugzilla.mozilla.org/show_bug.cgi?id=1048555 and https://bugzilla.mozilla.org/show_bug.cgi?id=1065316, refine and design a screen-sharing experience to augment the existing Firefox Hello product.

User Story: As a Firefox Hello user, I would like for the other party to "see what I see".

Comment 1

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

FYI here's the work we've done on device sharing permissions
https://bugzilla.mozilla.org/show_bug.cgi?id=1052011

Comment 2

[Sevaan Franks [:sevaan]]

Attachment: Screen-sharing experience within Firefox Hello

Initial draft of screen sharing UX within Firefox Hello.

Note: Visual design bugs will need to be created for the sharing icon, the shared window badge/stop sharing button, and the shared window itself.

Comment 3

[Romain Testard [:RT]]

Clearing my NI as I submitted feedback to Sevaan separately.

Comment 4

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

Attachment: Review/Comments

Overall, this looks very good again.
There are a couple of nits and questions in the attached image.

Comment 5

[:shell escalante]

Hi Philipp & Florian,
i put a need info as i couldn't find the UX for doorhangers Bug 1037405 (or which bug had the all up screen sharing UX that was implemented).  This might help in what exists that we can leverage and it's much nicer than what's in the https://mozilla.github.io/webrtc-landing/gum_test.html page.

here's my feedback from a purely engineering view:
1. when the use clicks on the screen sharing icon - the options provided are not available in the screen sharing code today or what TokBox is coding for.  ideally we could use existing screen or window sharing (or both) for the first time around...  https://mozilla.github.io/webrtc-landing/gum_test.html shows the options those give when you select.  
2.  i love that we have the pop out in front of the window being shared - that is just different and a nice experience.
3.  all up bug for [meta] screen sharing was Bug 923225- but probably simpler to talk directly to the original designers on where it is now.

Comment 6

[Florian Quèze [:florian]]

(In reply to sescalante from comment #5)
> Hi Philipp & Florian,
> i put a need info as i couldn't find the UX for doorhangers Bug 1037405 (or
> which bug had the all up screen sharing UX that was implemented).

The mockup was attachment 8453837 [details].

> it's much nicer than
> what's in the https://mozilla.github.io/webrtc-landing/gum_test.html page.

I don't see how that test page is related.

Comment 7

[:shell escalante]

sorry - the gum test page was just for what types of sharing we have in the code - but it doesn't have any of the UX for permissions, global indicators, etc. that is the bug you indicated.

Comment 8

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

(In reply to sescalante from comment #7)
> sorry - the gum test page was just for what types of sharing we have in the
> code - but it doesn't have any of the UX for permissions, global indicators,
> etc. that is the bug you indicated.

The current implementation follows the wireframe that Florian linked. The global indicators are not very prominent on mac unfortunately. It's better on Windows though.

If you're looking for the spec with the global indicators that Sevaan used in his mockup, they are in bug 1052011. This is the next iteration of device sharing permissions, but it hasn't been implemented yet.

Comment 9

[Sevaan Franks [:sevaan]]

Attachment: Screen-sharing experience within Firefox Hello (Updated)

Updated diagram attached, taking into account all feedback.

Comment 10

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

Comment on attachment 8515193 [details]
Screen-sharing experience within Firefox Hello (Updated)

Oops, I somehow missed that you updated the mockup…

Comment 11

[Sevaan Franks [:sevaan]]

Attachment: Screen-sharing experience within Firefox Hello (Update 2)

Updated again based on conversation today with RT. Changes:

- Details on mouse ripple for call initiator
- Note on Room chat window UI
- Note on skipping screen-sharing permissions for call initiator
- Removed dragging of chat window from one side of the window to the other (not necessary for V1)

Comment 12

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

It's amazing that I looked at this dozens of times and didn't notice it yet:
Our flow doesn't allow sharing of non-browser windows or the whole desktop!

Is that an intentional omission or did we all just not catch it?
We definitely have the technical plumbing in place to share other windows, other applications and the entire screen.

Comment 13

[Sevaan Franks [:sevaan]]

(In reply to Philipp Sackl [:phlsa] from comment #12)
> It's amazing that I looked at this dozens of times and didn't notice it yet:
> Our flow doesn't allow sharing of non-browser windows or the whole desktop!
> 
> Is that an intentional omission or did we all just not catch it?
> We definitely have the technical plumbing in place to share other windows,
> other applications and the entire screen.

It's a separate design spike to follow: https://bugzilla.mozilla.org/show_bug.cgi?id=1091565

Comment 14

[Sevaan Franks [:sevaan]]

Attachment: Window Sharing with Hello

Refactored UX to be about sharing the entire window (other applications), as per an offline discussion with GMC and RT.

Comment 15

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

Comment on attachment 8519086 [details]
Window Sharing with Hello

Looks great!
Since you've been already in exchange with Romain and Shell, I assume that their concerns about the permissions flow have already been taken into account.

Comment 16

[Sevaan Franks [:sevaan]]

Attachment: Window Sharing with Hello

Updated with slight change: Removed clickable URL from link clicker flows.

Comment 17

[Sevaan Franks [:sevaan]]

Attachment: Tab & Window Sharing

Updated mockup to combine both tab and window sharing.

Comment 18

[Romain Testard [:RT]]

Is tab sharing in this doc? Maybe I miss this but can't find it!

Also as a link clicker using the desktop client UI it feels like showing content inside of the reduced conversation window is not ideal and will always end-up with the user expanding it so why not doing this automatically? Or maybe a notification is displayed to the user that content is being shared with him - the user can click the notification to open the content in a new tab - this allows to keep the conversation window for Video only and probably will set us well for co-browsing too?

Comment 19

[Sevaan Franks [:sevaan]]

(In reply to Romain Testard [:RT] from comment #18)

> Is tab sharing in this doc? Maybe I miss this but can't find it!

Red is tab sharing, and blue is window sharing: http://cl.ly/image/033V411Z1j2R

> Also as a link clicker using the desktop client UI it feels like showing
> content inside of the reduced conversation window is not ideal and will
> always end-up with the user expanding it so why not doing this
> automatically? Or maybe a notification is displayed to the user that content
> is being shared with him - the user can click the notification to open the
> content in a new tab - this allows to keep the conversation window for Video
> only and probably will set us well for co-browsing too?

It's not a good idea to expand the screen automatically because as a link-clicker, I do not know when the other person is going to start sharing their screen. If they turn on screen-sharing and suddenly my interface turns full-screen, it's like someone else is controlling my computer.

Additionally, users could be in the middle of a task in the background tab while chatting with the window in the lower corner. By notifying the user and allowing them to expand the conversation themselves, we allow them to wrap up what they are doing and make the mental switch to go full-screen.

Comment 20

[Sevaan Franks [:sevaan]]

Attachment: Tab & Application Sharing

Updated doc:

Main change is that it is now one-click to share your tabs, and there is a sub-menu for sharing other windows.

Comment 21

[Sevaan Franks [:sevaan]]

Attachment: MVP

Attaching the MVP version of this sharing piece.

Comment 22

[Sevaan Franks [:sevaan]]

Attachment: MVP (Updated)

I've added a modal popup to the MVP for after a user clicks the sharing button. I believe it's a strong enough privacy concern to warrant an interruption to ask the user if they are sure they want to continue.

Comment 23

[Romain Testard [:RT]]

Good idea.
Regarding the text of the popup, the current text infers that the whole window will be shared whereas it's only the content of the tabs. Do you agree that the following is more accurate?
"Conversation participants will be able to see the content of your active tabs until you turn sharing off again."

Comment 24

[Sevaan Franks [:sevaan]]

Well it's not in any window...it would just be the one browser window. How about we combine ours?:

"Conversation participants will be able to see the contents of your active tabs in this browser window until you turn sharing off again."

http://cl.ly/image/2I3c3707350N

Comment 25

[Romain Testard [:RT]]

Sounds good to me!

Comment 26

[Florian Quèze [:florian]]

(In reply to Sevaan Franks [:sevaan] from comment #24)
> Well it's not in any window...it would just be the one browser window. How
> about we combine ours?:
> 
> "Conversation participants will be able to see the contents of your active
> tabs

Isn't there at most one active tab?

Comment 27

[Sevaan Franks [:sevaan]]

Yes, you are correct, :flo!

"Conversation participants will be able to see the contents of your active tab in this browser window until you turn sharing off again."

Matej, do you mind looking the above string over?

Context: When users click the share button, we want to open a modal pop-up that asks them if they are sure they want to do this, and to sort of explain how it works. 

Here is the image, including the title question which you may have an opinion on: http://cl.ly/image/2I3c3707350N

Comment 28

[Matej Novak [:matej]]

Would this do it?

Everyone in this conversation will be able to see what you're viewing in Firefox until you turn off sharing.


As for the title, I wonder if there's a way to shorten it. Here are some options:

Turn on screen sharing?

Share your screen?

Start sharing your screen?

Comment 29

[Sevaan Franks [:sevaan]]

I like "Share your screen?"

Updated mockup attached: http://cl.ly/image/0R1O0D3j0o0t