1138453 - [meta] Hello link clicker UI design refresh

Status: RESOLVED FIXED

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

Comment 1

[Romain Testard [:RT]]

Mika, currently the PN/ToS links are shown prior to joining the conversation AND then all the time during the conversation.
Having the links displayed during the conversation feels useless (if the user is in the conversation he has already had a chance to review and agree to the PN and ToS prior to joining) and takes screen real estate. Are you OK with us removing these links when the user is in the conversation? (We obviously will keep then displayed to the user so he can review prior to joining the conversation).

Comment 2

[Mika]

(In reply to Romain Testard [:RT] from comment #1)
> Mika, currently the PN/ToS links are shown prior to joining the conversation
> AND then all the time during the conversation.
> Having the links displayed during the conversation feels useless (if the
> user is in the conversation he has already had a chance to review and agree
> to the PN and ToS prior to joining) and takes screen real estate. Are you OK
> with us removing these links when the user is in the conversation? (We
> obviously will keep then displayed to the user so he can review prior to
> joining the conversation).

The user needs a way to access this information from the in-product experience.  So if you remove from the bottom before the link clicker joins the call, please suggest a method by which the linkclicker can still access it.

Comment 3

[Sevaan Franks [:sevaan]]

Attachment: Desktop Link Clicker UI

V1.

Comment 4

[Romain Testard [:RT]]

Mika, I was suggesting keeping it prior to joining the call and removing it when in the call - is that acceptable?

Comment 5

[Sevaan Franks [:sevaan]]

Attachment: Desktop Link Clicker UI (Update #1)

- Removed bookmarking/reading list buttons as that is for Firefox users only.
- Added full-screen and pop-out buttons.

Comment 6

[Romain Testard [:RT]]

Thanks Sevaan, my questions/comments:
- Remove the ToS and PN links when in a conversation (Mika to confirm)
- The Hello logo is used, Winston is that fine with you since so far we used the Firefox logo there?
Missing UX for "there are already 2 people in this conversation", "non supported browser", non supported platform", "mobile form factor", "received shared content"
- Can you provide the visuals for the emoticon menu (little smiley face in the chat window)
- Maybe some indicator when the chat begins that the chat history will be cleared when everyone leaves the room?
- What are the buttons on top of the chat thread about?
- Is the top part of the chat window containing the context fix or does it disappear when there is a long chat history?

Comment 7

[Winston Bowden]

> - The Hello logo is used, Winston is that fine with you since so far we used
> the Firefox logo there?

Seevan, curious if we had a specific reason for using Hello vs Firefox logo

Comment 8

[Sevaan Franks [:sevaan]]

> Seevan, curious if we had a specific reason for using Hello vs Firefox logo

The product is called Firefox Hello, so it seems odd to me that we don't have our logo on the UI anywhere. I included the Firefox Hello logo because a) it looks good, b) it matches the product name and c) it reinforces the brand of the product we are trying to create (i.e. tying it to the toolbar icon, to the graphics we have on our website, etc).

I've never heard a clear answer for why we shouldn't use it, so I just included it in the mockups because it's prettier. If you want me to replace it with the Firefox logo, that's no problem. I'm just designing towards my own ideal look & feel and can modify according to requirements.

But I do believe every design decision should have a reason, so if there is hestitation about using the logo, I'd like to know why. I'm not sure where the initial decision for not using the Firefox logo came from, or what the situation was at the time and whether things have changed. The product is starting to mature, so we should settle on what we are doing from here on out.

Comment 9

[Sevaan Franks [:sevaan]]

> the initial decision for not using the Firefox *Hello* logo came from...

Comment 10

[alainez]

....me.

There is a sense that a non-Firefox user may feel safer knowing the brand behind the product is Firefox, instead of Firefox Hello. 

It's about mitigating friction to adoption based on a security concern. 

This thinking is all pre-launch. 

With the brand team, we have alignment on using Firefox logo but they have recommended the following.
1. Use Firefox logo to non-Firefox users
2. Use Firefox Hello logo to Firefox users

Happy to reconsider this if we feel this isn't a concern now that we've launched.

Comment 11

[Sevaan Franks [:sevaan]]

Attachment: Mobile Link Clicker UI

Mobile Link Clicker UI attached.

Comment 12

[Romain Testard [:RT]]

(In reply to Sevaan Franks [:sevaan] from comment #11)
> Created attachment 8580970 [details]
> Mobile Link Clicker UI
> 
> Mobile Link Clicker UI attached.

Thanks Sevaan, my comments:
- The top and bottom bars seem to take a fair amount of screen space, can't we make these 2 appear only if you touch the screen (then disappears on timeout)?
- It seems that chat won't fit well (scrolling through the history seems hard). How about displaying the chat screen in place of the "shared content screen" when chatting. It seems that "chatting" or "seeing shared content" could be 2 modes to switch from one to the other based on whether keyboard is active or not so they can use a larger part of the screen? 
- Chat won't be possible prior to joining the conversation (the "join the conversation" "rejoin" and "retry" mocks seem to imply you can)

Comment 13

[Romain Testard [:RT]]

> - Chat won't be possible prior to joining the conversation (the "join the
> conversation" "rejoin" and "retry" mocks seem to imply you can)

Actually after discussions with Standard8 we could do this without a back-end:
- Allow link clickers to send an IM to the link generator
- Allow link clickers to see whether the link generator has his Firefox opened or not (we may want to only allow IMing the LG if he has his browser opened until we implement persistent chat)

Comment 14

[Sevaan Franks [:sevaan]]

I don't think users should be able to chat until they "Join the conversation". Otherwise they've already joined the conversation.

Comment 15

[Sevaan Franks [:sevaan]]

Attachment: Desktop Link Clicker UI (Update #2)

Comment 16

[Mike de Boer [:mikedeboer]]

Sevaan, the toolbar at the bottom looks kind of big... is that intentional? In the mockups it looks out of balance to me compared to the browser navbar. Of course, the navbar is chrome UI and the LC is a web page. But still, it might matter.

Otherwise, it looks neat-o ;)

Comment 17

[Romain Testard [:RT]]

(In reply to Sevaan Franks [:sevaan] from comment #14)
> I don't think users should be able to chat until they "Join the
> conversation". Otherwise they've already joined the conversation.

I'm not sure why we should artificially restrict the ability to chat to when people are only in audio/video sessions if technically we can. I'm not saying this is a Fx40 item since it implies non trivial tech changes although it feels like we should prepare for this in the UX. Link clickers will want to IM before a RTC conversation (that's what people are trained to do, that's less intrusive).

Also we need to clarify the concept of "conversation". Up until now you could not communicate before joining the "conversation" and "Join the conversation" meant "Video chat with someone".
A conversation is a space where you can communicate synchronously or asynchronously. Why should we require a user to click "join the conversation" in order to be able to IM? I think "Join the conversation" should become synonymous to "Join with audio and/or video", an option available to a user when he is on a Hello URL although by just being on a URL he should be able to IM, and later annotate....

Agreed?

Comment 18

[Romain Testard [:RT]]

Sevaan, I have some more questions:
- What does pop-out allow? popping-out the chat window only?
- Agreed with Mike that the bottom bar feels big. Can't we have buttons in a similar way to the desktop client UI refresh? We discussed that we can remove the ToS/Privacy policy links when in a call and I'd argue we don't need the Mozilla logo there since we already have the Firefox Hello logo.
- Can we have a help link?
- We probably don't need the audio/face mute and leave room buttons prior to joining, at the end of the conversation or on the error window?
- "#Conversation 1" at the bottom perhaps is not needed since you have it already at the top of the chat window?

Comment 19

[Romain Testard [:RT]]

Also can you please provide details for the following:
- Room full notification (I assume this is similar to the expired link screen with just a different copy)
- Non supported browser (Something aligned with what you had on the mobile clicker UI https://bug1083779.bugzilla.mozilla.org/attachment.cgi?id=8574034 ?)
- Non supported platform (similarly use the sad Hello face?)

Comment 20

[Sevaan Franks [:sevaan]]

> - Room full notification (I assume this is similar to the expired link
> screen with just a different copy)

Will add these.

> - Non supported browser (Something aligned with what you had on the mobile
> clicker UI https://bug1083779.bugzilla.mozilla.org/attachment.cgi?id=8574034
> ?)
> - Non supported platform (similarly use the sad Hello face?)

I believe these are being taken care of the creative team in Bug 1132236.

Comment 21

[Romain Testard [:RT]]

Another comment - the gUM prompt helper at the bottom right feels like it could be missed easily.
Also after we introduced it we saw no difference at all in terms of success in joining a call once you click "Join".
I wonder if a more intrusive approach would help users better: http://screencast.com/t/Arw2a9RWihOE
Once you decide to join, the only think you'll want to do is acknowledge the gUM prompt so I think we should take over the screen with that prompt so it's obvious for the users.
Thoughts?

Comment 22

[Sevaan Franks [:sevaan]]

I think that's a great idea. Definitely worth trying to see if the numbers change.

Comment 23

[Sevaan Franks [:sevaan]]

Comment on attachment 8580970 [details]
Mobile Link Clicker UI

Vicky, do you mind posting the latest Link-Clicker and Mobile Link-Clicker designs?

Comment 24

[Victoria Gerchinhoren [:vicky]]

Attachment: Visual design + IA specs for Link clickers Mobile

Comment 25

[Victoria Gerchinhoren [:vicky]]

Attachment: Link clickers Desktop interaction and visual specs

Comment 26

[Mark Banner (:standard8)]

Hi Vicky, something I've just realised, is that on the mock-ups, there's no location for the Terms of Service & Privacy Policy.

Also, I believe we'll be using just the Firefox brand on the link-clicker for the time being. Though we can check with Romain if you're expecting something different.

Comment 27

[Victoria Gerchinhoren [:vicky]]

(In reply to Mark Banner (:standard8) from comment #26)
> Hi Vicky, something I've just realised, is that on the mock-ups, there's no
> location for the Terms of Service & Privacy Policy.
> 
> Also, I believe we'll be using just the Firefox brand on the link-clicker
> for the time being. Though we can check with Romain if you're expecting
> something different.

Hi Mark, let me see where to fit it, should it be present all the time or can it be before / after the conversation? 

On the other hand, is there a good reason not to use the product brand? From an UX POV, all colors, feedback,etc is tightly related to tide the UI with the product brand.

Comment 28

[Romain Testard [:RT]]

(In reply to Victoria Gerchinhoren [:vicky] from comment #27)
> (In reply to Mark Banner (:standard8) from comment #26)
> > Hi Vicky, something I've just realised, is that on the mock-ups, there's no
> > location for the Terms of Service & Privacy Policy.
> > 
> > Also, I believe we'll be using just the Firefox brand on the link-clicker
> > for the time being. Though we can check with Romain if you're expecting
> > something different.
> 
> Hi Mark, let me see where to fit it, should it be present all the time or
> can it be before / after the conversation? 
> 
> On the other hand, is there a good reason not to use the product brand? From
> an UX POV, all colors, feedback,etc is tightly related to tide the UI with
> the product brand.

Agreed we should be using the Firefox Hello branding on the clicker UI per the refresh mocks for better consistency.
I NI Fabio here in case he has objections.

Comment 29

[Fabio Rios [:frios]]

Yep, as long as the Firefox name is on it and it's not just the smiley. So looks good per mockup in comment 25.

We should definitely figure out where the Firefox logo can come up though. For the link clicker maybe we show it somehow after a successful call?

Comment 30

[Sevaan Franks [:sevaan]]

(In reply to Victoria Gerchinhoren [:vicky] from comment #27)
> (In reply to Mark Banner (:standard8) from comment #26)
> > Hi Vicky, something I've just realised, is that on the mock-ups, there's no
> > location for the Terms of Service & Privacy Policy.
> > 
> > Also, I believe we'll be using just the Firefox brand on the link-clicker
> > for the time being. Though we can check with Romain if you're expecting
> > something different.
> 
> Hi Mark, let me see where to fit it, should it be present all the time or
> can it be before / after the conversation? 
> 
> On the other hand, is there a good reason not to use the product brand? From
> an UX POV, all colors, feedback,etc is tightly related to tide the UI with
> the product brand.

I believe the TOS can disappear once the user joins the conversation. RT, can you confirm?

Comment 31

[Romain Testard [:RT]]

Yes, we just need to display links to privacy notice and ToS prior to joining the conversation.

Comment 32

[Victoria Gerchinhoren [:vicky]]

Attachment: [Specs] Mobile link clickers Visual + Interaction

Comment 33

[Victoria Gerchinhoren [:vicky]]

Attachment: [Specs] Desktop link clickers Visual + Interaction

Comment 34

[Victoria Gerchinhoren [:vicky]]

I reposted the specs for desktop and mobile versions of link clickers including the Service Terms and conditions link in the screens prior a conversation.

Please let me know if this is right / enough or if you see somewhere else it should be placed in.

Thanks!

Comment 35

[Romain Testard [:RT]]

(In reply to Victoria Gerchinhoren [:vicky] from comment #34)
> I reposted the specs for desktop and mobile versions of link clickers
> including the Service Terms and conditions link in the screens prior a
> conversation.
> 
> Please let me know if this is right / enough or if you see somewhere else it
> should be placed in.
> 
> Thanks!

Hi Vicky, that's looking great! Here are my comments on the desktop link clicker visual refresh:
- We'll remove the feedback form for the link clicker in Fx41 (the NPS survey will replace it and will only be for the link generators)
- Link clickers outside of Firefox won't be able to tab/window share (we can remove the button)
- On the "JOIN THE CONVERSATION", "LINK INVALID" and "CONVERSATION TERMINATED" screens should we not remove the "Hang-up"/"Mute" buttons?
- The indicator helping the link clicker share his camera and microphone feels hidden. Don't you think an approach similar to http://screencast.com/t/Arw2a9RWihOE would help users see the notification to share their cam/mic since anyway they should not be doing anything else at that point of the flow?
- You have a "pop-ou" feature, what gets poped-out if you use it?
- If the link is invalid or expired, we should not provide a user with a button to retry, I think we should rather prompt the user to start his own conversation with a Firefox download, agreed?
- We're missing a help link on the landing page?
- We need a Room full notification (I assume this is similar to the expired link screen with just a different copy)
- We need a  Non supported browser notification 
- We need a Non supported platform notification
- UX for when a user is alone awaiting the link generator (we'll display a tile)
- UX to cover requirements in bug 1155112

Comment 36

[Victoria Gerchinhoren [:vicky]]

(In reply to Romain Testard [:RT] from comment #35)
Romain, some comments inline, it looks like this comments are more oriented to the interaction specs rather than the visual refresh of it.

> (In reply to Victoria Gerchinhoren [:vicky] from comment #34)
> > I reposted the specs for desktop and mobile versions of link clickers
> > including the Service Terms and conditions link in the screens prior a
> > conversation.
> > 
> > Please let me know if this is right / enough or if you see somewhere else it
> > should be placed in.
> > 
> > Thanks!
> 
> Hi Vicky, that's looking great! Here are my comments on the desktop link
> clicker visual refresh:
> - We'll remove the feedback form for the link clicker in Fx41 (the NPS
> survey will replace it and will only be for the link generators)
What screen are you referring to? The feedback buttons (faces)? If not, then can you just ignore it and place the link to the new UX for feedback survey?
> - Link clickers outside of Firefox won't be able to tab/window share (we can
> remove the button)
Won't this feature ever be implemented?
> - On the "JOIN THE CONVERSATION", "LINK INVALID" and "CONVERSATION
> TERMINATED" screens should we not remove the "Hang-up"/"Mute" buttons?
This was indicated like this in the IA specs, and I think Sevaan has a reason to put it, I'll let him answer this.
> - The indicator helping the link clicker share his camera and microphone
> feels hidden. Don't you think an approach similar to
> http://screencast.com/t/Arw2a9RWihOE would help users see the notification
> to share their cam/mic since anyway they should not be doing anything else
> at that point of the flow?
> - You have a "pop-ou" feature, what gets poped-out if you use it?
> - If the link is invalid or expired, we should not provide a user with a
> button to retry, I think we should rather prompt the user to start his own
> conversation with a Firefox download, agreed?
Again, interaction input needed.
> - We're missing a help link on the landing page?
> - We need a Room full notification (I assume this is similar to the expired
> link screen with just a different copy)
It's just like the mobile version, same illustration and copy.
> - We need a  Non supported browser notification 
It's just like the mobile version, same illustration and copy.
> - We need a Non supported platform notification
It's just like the mobile version, same illustration and copy.
> - UX for when a user is alone awaiting the link generator (we'll display a
> tile)

> - UX to cover requirements in bug 1155112

We can talk about this offline. Let's set up a call and it would be easier.

Comment 37

[Romain Testard [:RT]]

(In reply to Victoria Gerchinhoren [:vicky] from comment #36)
> (In reply to Romain Testard [:RT] from comment #35)
> Romain, some comments inline, it looks like this comments are more oriented
> to the interaction specs rather than the visual refresh of it.
> 
> > (In reply to Victoria Gerchinhoren [:vicky] from comment #34)
> > > I reposted the specs for desktop and mobile versions of link clickers
> > > including the Service Terms and conditions link in the screens prior a
> > > conversation.
> > > 
> > > Please let me know if this is right / enough or if you see somewhere else it
> > > should be placed in.
> > > 
> > > Thanks!
> > 
> > Hi Vicky, that's looking great! Here are my comments on the desktop link
> > clicker visual refresh:
> > - We'll remove the feedback form for the link clicker in Fx41 (the NPS
> > survey will replace it and will only be for the link generators)
> What screen are you referring to? The feedback buttons (faces)? If not, then
> can you just ignore it and place the link to the new UX for feedback survey?
Yes, that's the feedback faces. The link clickers won't be prompted to enter a survey at all so when the conversation is over the user should be redirected to the "JOIN" page I think.
> > - Link clickers outside of Firefox won't be able to tab/window share (we can
> > remove the button)
> Won't this feature ever be implemented?
We may at some point but it won't be done as part of this visual refresh.
> > - On the "JOIN THE CONVERSATION", "LINK INVALID" and "CONVERSATION
> > TERMINATED" screens should we not remove the "Hang-up"/"Mute" buttons?
> This was indicated like this in the IA specs, and I think Sevaan has a
> reason to put it, I'll let him answer this.
> > - The indicator helping the link clicker share his camera and microphone
> > feels hidden. Don't you think an approach similar to
> > http://screencast.com/t/Arw2a9RWihOE would help users see the notification
> > to share their cam/mic since anyway they should not be doing anything else
> > at that point of the flow?
> > - You have a "pop-ou" feature, what gets poped-out if you use it?
> > - If the link is invalid or expired, we should not provide a user with a
> > button to retry, I think we should rather prompt the user to start his own
> > conversation with a Firefox download, agreed?
> Again, interaction input needed.
> > - We're missing a help link on the landing page?
> > - We need a Room full notification (I assume this is similar to the expired
> > link screen with just a different copy)
> It's just like the mobile version, same illustration and copy.
> > - We need a  Non supported browser notification 
> It's just like the mobile version, same illustration and copy.
> > - We need a Non supported platform notification
> It's just like the mobile version, same illustration and copy.
> > - UX for when a user is alone awaiting the link generator (we'll display a
> > tile)
> 
> > - UX to cover requirements in bug 1155112
> 
> We can talk about this offline. Let's set up a call and it would be easier.
Call set-up:)

Comment 38

[Romain Testard [:RT]]

FYI I updated the US to align with the latest on clicker UI design refresh.

Comment 39

[Mark Banner (:standard8)]

Yep looks better now, though obviously still have RT's comments. The only thing I was going to mention was the missing help link - but RT's already mentioned that.

Comment 40

[Mark Banner (:standard8)]

I think we're far enough through the UI refresh that we can call this fixed now.