Closed Bug 1083779 Opened 10 years ago Closed 9 years ago

[UX] Design mobile version of link clicker UI

Categories

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

x86_64
Windows 8
defect
Points:
8

Tracking

(Not tracked)

RESOLVED FIXED
Iteration:
39.1 - 9 Mar
backlog backlog+

People

(Reporter: RT, Assigned: sevaan)

References

Details

(Whiteboard: [UX])

User Story

As a Firefox Hello link clicker on a mobile device, I want the desktop client UI to be optimized on any device I use.

Attachments

(1 file, 8 obsolete files)

      No description provided.
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?
backlog: --- → -
Priority: -- → P1
Flags: firefox-backlog+
Flags: qe-verify-
Points: --- → 8
Assignee: nobody → sfranks
Status: NEW → ASSIGNED
Iteration: --- → 37.2
Attached image Mobile version of link clicker UI (obsolete) —
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).
Attachment #8535036 - Flags: ui-review?(mmaslaney)
Attachment #8535036 - Flags: review?(rtestard)
Updated with rotated screen layout.
Attachment #8535036 - Attachment is obsolete: true
Attachment #8535036 - Flags: ui-review?(mmaslaney)
Attachment #8535036 - Flags: review?(rtestard)
Attachment #8535056 - Flags: ui-review?(mmaslaney)
Attachment #8535056 - Flags: review?(rtestard)
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?
Flags: needinfo?(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.)
Flags: needinfo?(mreavy)
Updated based on RT's feedback.
Attachment #8535056 - Attachment is obsolete: true
Attachment #8535056 - Flags: ui-review?(mmaslaney)
Attachment #8535056 - Flags: review?(rtestard)
Attachment #8540220 - Flags: review?(rtestard)
Iteration: 37.2 → 37.3
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
Flags: needinfo?(sfranks)
Updated!
Attachment #8540220 - Attachment is obsolete: true
Attachment #8540220 - Flags: review?(rtestard)
Flags: needinfo?(sfranks)
Attachment #8540725 - Flags: review?(rtestard)
Great, thanks!
Status: ASSIGNED → RESOLVED
Closed: 9 years ago
Resolution: --- → FIXED
Attachment #8540725 - Flags: review?(rtestard) → review+
make sure there's an implementation bug linked
Iteration: 37.3 → 37.2
Flags: needinfo?(sescalante)
(In reply to sescalante from comment #10)
> make sure there's an implementation bug linked

It is bug 1115380.
Flags: needinfo?(sescalante)
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?
Status: RESOLVED → REOPENED
Flags: needinfo?(sfranks)
Resolution: FIXED → ---
Iteration: 37.2 → ---
Updated to include view of shared screens.

Also removed "Leave" from the exit button and replaced it with an icon.
Attachment #8540725 - Attachment is obsolete: true
Flags: needinfo?(sfranks)
Attachment #8551981 - Flags: review?(rtestard)
Comment on attachment 8551981 [details]
Mobile Vesion of Link Clicker UI (Update #2)

Looking good, thanks Sevaan.
Attachment #8551981 - Flags: review?(rtestard) → review+
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.
Flags: needinfo?(sfranks)
Flags: needinfo?(krudnitski)
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).
Flags: needinfo?(krudnitski)
backlog: - → Fx38+
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?
Attached image Mobile Link Clicker UI (Update #3) (obsolete) —
Updated UI attached!
Attachment #8551981 - Attachment is obsolete: true
Flags: needinfo?(sfranks)
Attachment #8556121 - Flags: review?(rtestard)
Attachment #8556121 - Flags: review?(rtestard) → review+
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
Flags: needinfo?(sfranks)
Attached image Mobile Link Clicker UI (Update #4) (obsolete) —
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.
Attachment #8556121 - Attachment is obsolete: true
Flags: needinfo?(sfranks)
Attachment #8562981 - Flags: ui-review?(rtestard)
Attachment #8562981 - Flags: ui-review?(dmose)
Thanks, looking good!
Attachment #8562981 - Flags: ui-review?(rtestard) → ui-review+
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...
Attached image Mobile Link Clicker UI (Update #5) (obsolete) —
Thanks for the reminder about that :dmose. Updated.
Attachment #8562981 - Attachment is obsolete: true
Attachment #8562981 - Flags: ui-review?(dmose)
Attachment #8563443 - Flags: review?(dmose)
backlog: Fx38+ → backlog+
Rank: 5
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
Attachment #8563443 - Flags: review?(dmose) → review+
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?
Flags: needinfo?(rtestard)
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.
Flags: needinfo?(rtestard)
Removed some of the TOS and Privacy Notice placements.
Attachment #8563443 - Attachment is obsolete: true
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.
Status: REOPENED → RESOLVED
Closed: 9 years ago9 years ago
Resolution: --- → FIXED
Iteration: --- → 39.1 - 9 Mar
Blocks: 1141493
No longer blocks: 1141493
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: