1083779 - [UX] Design mobile version of link clicker UI

Status: RESOLVED FIXED

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

Comment 1

[Romain Testard [:RT]]

Resising the browser window on http://people.mozilla.org/~dhenein/labs/loop-link-spec/#video-call adapts the designs but they don't seem to be fully optimized:
* http://people.mozilla.org/~dhenein/labs/loop-link-spec/#video-call splits the screen between caller and callee videos whereas the caller should have a smaller self view?
* All pre-call screens show the Mozilla logo lthough it does not seem to be the best use of the screen space?

Comment 2

[Sevaan Franks [:sevaan]]

Attachment: Mobile version of link clicker UI

Mobile Link Clicker UI attached.

One note, additional functionality will have to be added that allows mobile users to switch between the front and rear facing cameras (if applicable).

Comment 3

[Sevaan Franks [:sevaan]]

Attachment: Mobile version of link clicker UI (Updated)

Updated with rotated screen layout.

Comment 4

[Romain Testard [:RT]]

Thanks Sevaan, my feedback:
* "Leave" should be used rather than "Leave room"
* "Can't we just use "Join" rather than "Join the conversation"?
* Can the "Join" button be made much bigger?
* The mock-up shows a call duration whereas we don't have it
* The mock-up uses the Hello logo whereas marketing asked we use the Firefox logo (per current desktop version)
* I am not sure we can change the camera in call per your suggested "swap camera in call" icon. I NI Maire for confirmation.
* Can we also have UX for all other clicker UI screens?

Comment 5

[Maire Reavy [:mreavy]]

(In reply to Romain Testard [:RT] from comment #4)
> * I am not sure we can change the camera in call per your suggested "swap camera in call" icon. I NI Maire for confirmation.

Yes, Firefox can do "Swap camera" in desktop and mobile.  NOTE: The user will briefly see a black screen in switching from one camera to another on mobile. (It's a limitation of the mobile operating system.)   Also, "swapping cameras"  will only work in a Firefox standalone for the time being, not Chrome or Opera standalone.  (The webrtc working group is still deciding how camera swapping should be done.  We implemented it in Firefox to move the spec forward.  Chrome has not yet implemented this.)

Comment 6

[Sevaan Franks [:sevaan]]

Attachment: Mobile version of link clicker UI (Updated)

Updated based on RT's feedback.

Comment 7

[Romain Testard [:RT]]

Thanks, looking good!
Could you please just add visuals for non supported browsers on Android (message + prompt user to download Firefox for Android) and non supported platforms (Windows mobile, iOS, blackberry).

References: 
Non supported browsers - bug 1045498
Non supported platforms - bug 1045495

Comment 8

[Sevaan Franks [:sevaan]]

Attachment: Mobile version of link clicker UI (Updated)

Updated!

Comment 9

[Romain Testard [:RT]]

Great, thanks!

Comment 10

[:shell escalante]

make sure there's an implementation bug linked

Comment 11

[Mark Banner (:standard8)]

(In reply to sescalante from comment #10)
> make sure there's an implementation bug linked

It is bug 1115380.

Comment 12

[Romain Testard [:RT]]

Sevaan, as discussed can we can the design amended to include the UX for reception of shared tabs/window given this probably will be delivered at the time sharing is enabled on the desktop client?

Comment 13

[Sevaan Franks [:sevaan]]

Attachment: Mobile Vesion of Link Clicker UI (Update #2)

Updated to include view of shared screens.

Also removed "Leave" from the exit button and replaced it with an icon.

Comment 14

[Romain Testard [:RT]]

Comment on attachment 8551981 [details]
Mobile Vesion of Link Clicker UI (Update #2)

Looking good, thanks Sevaan.

Comment 15

[Romain Testard [:RT]]

Can you take Dan's input into account WRT messaging on non supported browser landing page on Android (i.e please download Firefox for Android page).

Primary message: "You're this close to speaking to your contact, download Firefox and you'll be ready to enjoy free video calls from the browser"
Secondary message: Side benefits of getting a new browser on their phone

Karen, I NI you here in case you have guidance regarding the secondary message for users who open room links on Android on non supported browsers - we want to promote the use of Firefox for Android in this instance.

Comment 16

[Karen Rudnitski [:kar]]

Romain - many thanks! Secondary messaging can be taken from fennec's primary messaging (which should be reflected somewhere), but the main take-aways are:
* customization (I can make Firefox my own)
* sync (I can use sync to keep all of my Firefox the same wherever I go, ie passwords, awesomebar experience, bookmarks)
* best reading experience (reading lists / home panels lets you read your own content and discover new content when you subscribe to feeds like pocket hits, wikipedia and any web site with a feed)
* and of course our larger privacy message

Let me know if you need more specifics. Some wording inspiration can be taken from the marketing messages on the fennec GPlay site (https://play.google.com/store/apps/details?id=org.mozilla.firefox&referrer=utm_source%3Dmozilla%26utm_medium%3DReferral%26utm_campaign%3Dmozilla-org).

Comment 17

[Sevaan Franks [:sevaan]]

We've got some limited space and a lot of text on this page. Could we just have a "Learn more" link that could take the user to secondary messaging?

Comment 18

[Sevaan Franks [:sevaan]]

Attachment: Mobile Link Clicker UI (Update #3)

Updated UI attached!

Comment 19

[Romain Testard [:RT]]

Sevaan, Dan made a couple of good points. I think we should implement following his recommendations:
- Screen where the user receives a shared screen in portrait mode: increase the size of the videos at the bottom to make them fit the full width (there is empty space at the top that will accommodate for the increased height)
- The screen with the "Join" button should not display the preview of the user's camera since the gUM prompt will only happen once the user presses the "join" button

Comment 20

[Sevaan Franks [:sevaan]]

Attachment: Mobile Link Clicker UI (Update #4)

Update attached. Also added a grey background to behind the screensharing, which will be the letterbox colour if the screen size doesn't fit perfectly.

Comment 21

[Romain Testard [:RT]]

Thanks, looking good!

Comment 22

[Dan Mosedale (:dmosedale, :dmose)]

Sevaan, Romain, these mocks don't appear to have any way to access the Terms of Service and Privacy Policy info.  For the moment, I've gotten them working in the footer all the time, much like they do on desktop.

I suspect having them reachable but not quite consuming so much space would be more ideal.

I'm guessing this wants design work at least, but maybe there are other things in play, so, adding a few needinfos...

Comment 23

[Sevaan Franks [:sevaan]]

Attachment: Mobile Link Clicker UI (Update #5)

Thanks for the reminder about that :dmose. Updated.

Comment 24

[Dan Mosedale (:dmosedale, :dmose)]

Comment on attachment 8563443 [details]
Mobile Link Clicker UI (Update #5)

sevaan: Looks reasonable to me, although I admit to being somewhat conflicted about whether we really want to spend scarce real estate displaying those links almost all of the time rather than just in a few key places.  Your call, of course. r=dmose

Comment 25

[Sevaan Franks [:sevaan]]

RT, can you clarify the exact usage of the TOS and Privacy Notice links? Where can I remove them? Can they disappear right after the user join the conversation?

Comment 26

[Romain Testard [:RT]]

Yes, we need to display the links prior to joining the conversation but we do not have to display them during the conversation on the link clicker side.
I cc Mika here for awareness.

Comment 27

[Sevaan Franks [:sevaan]]

Attachment: Mobile Link Clicker UI (Update #6)

Removed some of the TOS and Privacy Notice placements.

Comment 28

[:shell escalante]

Talked with Sevaan - we've got what we needed off this bug and will open a new bug if there are specific changes needed when we re-focus on mobile.