Closed Bug 1079489 Opened 5 years ago Closed 5 years ago

[UX] Design screen-sharing experience within Firefox Hello

Categories

(Firefox :: General, defect)

x86
macOS
defect
Not set
Points:
13

Tracking

()

RESOLVED FIXED
Iteration:
36.3

People

(Reporter: dhenein, Assigned: sevaan)

References

Details

(Whiteboard: [ux])

Attachments

(2 files, 8 obsolete files)

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".
Flags: qe-verify-
Flags: firefox-backlog+
Whiteboard: [ux]
Points: --- → 13
Blocks: 1082944
Assignee: nobody → sfranks
Status: NEW → ASSIGNED
Iteration: --- → 36.1
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.
Attachment #8510494 - Flags: ui-review?(philipp)
Attachment #8510494 - Flags: ui-review?(dhenein)
Attachment #8510494 - Flags: feedback?(rtestard)
Clearing my NI as I submitted feedback to Sevaan separately.
Iteration: 36.1 → 36.2
Attached image Review/Comments (obsolete) —
Overall, this looks very good again.
There are a couple of nits and questions in the attached image.
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.
Flags: needinfo?(philipp)
Flags: needinfo?(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.
Flags: needinfo?(florian)
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.
(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.
Flags: needinfo?(philipp)
Updated diagram attached, taking into account all feedback.
Attachment #8510494 - Attachment is obsolete: true
Attachment #8514331 - Attachment is obsolete: true
Attachment #8510494 - Flags: ui-review?(philipp)
Attachment #8510494 - Flags: ui-review?(dhenein)
Attachment #8510494 - Flags: feedback?(rtestard)
Attachment #8515193 - Flags: ui-review?(philipp)
Attachment #8515193 - Flags: ui-review?(dhenein)
Attachment #8515193 - Flags: review?(rtestard)
Comment on attachment 8515193 [details]
Screen-sharing experience within Firefox Hello (Updated)

Oops, I somehow missed that you updated the mockup…
Attachment #8515193 - Flags: ui-review?(philipp) → ui-review+
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)
Attachment #8515193 - Attachment is obsolete: true
Attachment #8515193 - Flags: ui-review?(dhenein)
Attachment #8515193 - Flags: review?(rtestard)
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.
Flags: needinfo?(sfranks)
(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
Flags: needinfo?(sfranks)
Attached image Window Sharing with Hello (obsolete) —
Refactored UX to be about sharing the entire window (other applications), as per an offline discussion with GMC and RT.
Attachment #8516894 - Attachment is obsolete: true
Attachment #8519086 - Flags: ui-review?(philipp)
Attachment #8519086 - Flags: ui-review?(dhenein)
Attachment #8519086 - Flags: review?(rtestard)
Iteration: 36.2 → 36.3
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.
Attachment #8519086 - Flags: ui-review?(philipp) → ui-review+
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Attached image Window Sharing with Hello (obsolete) —
Updated with slight change: Removed clickable URL from link clicker flows.
Attachment #8519086 - Attachment is obsolete: true
Attachment #8519086 - Flags: ui-review?(dhenein)
Attachment #8519086 - Flags: review?(rtestard)
Attached image Tab & Window Sharing (obsolete) —
Updated mockup to combine both tab and window sharing.
Attachment #8526040 - Attachment is obsolete: true
Attachment #8533213 - Flags: review?(rtestard)
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?
Flags: needinfo?(sfranks)
(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.
Flags: needinfo?(sfranks)
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.
Attachment #8533213 - Attachment is obsolete: true
Attachment #8533213 - Flags: review?(rtestard)
Attached image MVP (obsolete) —
Attaching the MVP version of this sharing piece.
Blocks: 1121050
Attached image 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.
Attachment #8547565 - Attachment is obsolete: true
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."
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
Sounds good to me!
(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?
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
Flags: needinfo?(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?
Flags: needinfo?(matej)
I like "Share your screen?"

Updated mockup attached: http://cl.ly/image/0R1O0D3j0o0t
Duplicate of this bug: 1091565
You need to log in before you can comment on or make changes to this bug.