1136991 - Hello link viewed in IE or Safari needs a better message

Status: RESOLVED FIXED

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

Description

[Verdi [:verdi] Best to slack me]

Attachment: bad-hello-error.jpg

Our Hello first time use page says others "don't even need Firefox to join" but if you open the link in IE or Safari you are told that Hello only works in browsers that support "WebRTC" and then prompts you to download Firefox. 

Issues:
* WebRTC is probably not a term people are familiar with and don't know what browsers support it.
*On the first page we say you don't need Firefox and on the other the only option we provide is Firefox.

Comment 1

[Adam Roach [:abr]]

Sevaan: Didn't we at one point discuss indicating that Chrome and Opera support WebRTC on this page?

Comment 2

[Sevaan Franks [:sevaan]]

(In reply to Adam Roach [:abr] from comment #1)
> Sevaan: Didn't we at one point discuss indicating that Chrome and Opera
> support WebRTC on this page?

I am not aware of any discussions on this. NI'ing Arcadio regarding whether we'd want to call attention to other browsers or just offer up a link to download ours. It is my opinion that we should only be highlighting Firefox. Yes, it's true you don't just need Firefox...but it's what we recommend. Users can do their own research for other WebRTC-compatible browsers if they like.

I agree that WebRTC is not an understandable term.

Comment 3

[alainez]

A good direction we can take with this page is offer to download Firefox.

OR provide a link to "Learn more about WebRTC the technology that powers Hello" link to Sumo article.

Comment 4

[Sevaan Franks [:sevaan]]

Or better yet, both.

Comment 5

[Verdi [:verdi] Best to slack me]

(In reply to Sevaan Franks [:sevaan] from comment #2)
> It is my opinion that we should only be highlighting Firefox.
> Yes, it's true you don't just need Firefox...but it's what we recommend.
> Users can do their own research for other WebRTC-compatible browsers if they
> like.

(In reply to alainez from comment #3)
> A good direction we can take with this page is offer to download Firefox.

The page already has a "Get Firefox" button which links to /new. This is the one and only call to action on the page.

I think you may be missing these points:
1. One of the value propositions of Hello is that it works in more than just Firefox. If it only worked in Firefox, what would be the point (today)? You'd just use Skype, Google Hangouts, Facetime, What's App, Snapchat or one of the zillion other programs that require each party to be using the same software. 
2. Our marketing points this fact out yet when you give the link to someone using IE or Safari, it appears that we don't live up to that claim. This is a strike against both the value of the product and our credibility.
3. We can still recommend or promote Firefox and I'm not suggesting we add a "Get Chrome" button on the page. My point is that we should mention what other browsers someone can use. Maybe they don't want to go through the bother of downloading and installing Firefox (don't you hate when someone sends you some web conference link and you don't have the software or plugin?) but will happily open the copy of Chrome that they already have installed, if only they knew that would be acceptable. Not doing this seems like sacrificing usability and credibility for marketing.

(In reply to alainez from comment #3)
> OR provide a link to "Learn more about WebRTC the technology that powers
> Hello" link to Sumo article.

Leaving the term WebRTC on the page and putting it's explanation behind a link is essentially doing nothing (very few people will follow this link). If it's important for people to understand what WebRTC is, then we should do that on the page. If it's not important for people to understand what WebRTC is then remove or replace it.

Comment 6

[:shell escalante]

That error.jpg was great, the picture illustrates perfectly.

Hi Sevaan, 
Hi Michael,

when i looked in the UX for visual refresh https://www.dropbox.com/sh/giei20j7trqhevz/AACIHEkQXtGbc_U-XZ4Jm8zia?dl=0&preview=LC_Dktp_WIP.png i saw and option A and option b for a new screen that addresses this - is there a preference on which to implement?

Comment 7

[Sevaan Franks [:sevaan]]

Gareth has already done a lot of work here testing various options with Optimizely. I'm not sure these options are necessary anymore or were tested.

Gareth, can you comment?

Comment 8

[Gareth Cull [:garethc]]

Hey Sevaan,

We've seen nearly a 3x improvement in CTR to download Firefox among these users in our most recent test. We are still waiting on the test to reach significance, which should be sometime next week.

Results are promising so far. I'll drop in a link to the test results in mana after they are final.

Gareth

Comment 9

[Verdi [:verdi] Best to slack me]

So what does the page look like that is testing well? Do we mention that Hello works in other browsers?

Comment 10

[Gareth Cull [:garethc]]

Here's a link to the variations in the test plan:
https://mana.mozilla.org/wiki/display/FIREFOX/Hello+Unsupported+Browsers+Conversion+Experiment

Variation 3 is currently the leading variation that is performing nearly 3x better. 

It also includes messaging that Hello works in other browsers.

Comment 11

[Verdi [:verdi] Best to slack me]

(In reply to Gareth Cull [:garethc] from comment #10)
> Here's a link to the variations in the test plan:
> https://mana.mozilla.org/wiki/display/FIREFOX/
> Hello+Unsupported+Browsers+Conversion+Experiment
> 
> Variation 3 is currently the leading variation that is performing nearly 3x
> better. 
> 
> It also includes messaging that Hello works in other browsers.

That is awesome!

Comment 12

[Manuel Casas Barrado [:mancas]]

Hey Pau, could you show us how we should display to the user these kind of errors? AFAIK, it has changed in the last iterations of your work, hasn't it?.

Comment 13

[Pau Masiá [:Pau]]

Attachment: Non Supported Browser

Yes, since Firefox Hello is moving from a communications product approach to a Web Sharing approach, this first attachment is now outdated. Here you have an updated version of the same.

Comment 14

[Pau Masiá [:Pau]]

Attachment: Non Supported Browser VisualSpec

Visual Spec of Non Supported Browser screen

Comment 15

[Pau Masiá [:Pau]]

Attachment: NonSupportedBrowser_Assets.zip

Assets provided for this screen

Comment 16

[Pau Masiá [:Pau]]

Attachment: NonSupportedBrowser_Assets.zip

Comment 17

[Manuel Casas Barrado [:mancas]]

Attachment: not_supported_page.png

Hey Pau, take a quick look at the screenshot. I think is pretty similar to your mockup =)

Comment 18

[Pau Masiá [:Pau]]

Comment on attachment 8687873 [details]
not_supported_page.png

Thanks!

Comment 19

[Manuel Casas Barrado [:mancas]]

Attachment: Hello link viewed in IE or Safari needs a better message

Mark could you review this patch? If you're too busy, change the review to other person

Thanks!

Comment 20

[Manuel Casas Barrado [:mancas]]

Attachment: OSX_version

Comment 21

[Pau Masiá [:Pau]]

Attachment: NonSupportedBrowser_Assets.zip

Updated assets

Comment 22

[Manuel Casas Barrado [:mancas]]

Attachment: OSX_version

Comment 23

[Manuel Casas Barrado [:mancas]]

Attachment: Hello link viewed in IE or Safari needs a better message

Assets files updated and minor visual issues fixed

Comment 24

[Mark Banner (:standard8)]

Pau, Sevaan: The image here for the minimal browser UI contains un-localisable text. Is there a way we can not have the text in the image?

Otherwise, we're going to have to come up with a way to generate L10n versions.

Comment 25

[Mark Banner (:standard8)]

Comment on attachment 8688926 [details] [diff] [review]
Hello link viewed in IE or Safari needs a better message

Review of attachment 8688926 [details] [diff] [review]:
-----------------------------------------------------------------

Unfortunately this doesn't work well at reduced heights or widths. It also feels a bit strange for tall windows. I'll attach a screen shot in a minute, but we need to come up with a more flexible/scalable layout.

::: browser/components/loop/standalone/content/js/webapp.jsx
@@ +110,5 @@
> +          </div>
> +           <p>
> +            {mozL10n.get("incompatible_browser_already_have_firefox_text", { brandShortname: mozL10n.get("brandShortname") })}
> +            <a className="promote-firefox-link" href=""> {mozL10n.get("incompatible_browser_already_have_firefox_link")} </a>
> +            {mozL10n.get("incompatible_browser_already_have_firefox_link_text")}

These should be done more like the ToS view, see legal_text_and_links for an example. The reason is that it might not always be appropriate for each language for "Copy this link" to be before the rest of the text.

Comment 26

[Mark Banner (:standard8)]

Attachment: Bad layouts on alternative window widths.

Comment 27

[Pau Masiá [:Pau]]

(In reply to Mark Banner (:standard8) from comment #24)
> Pau, Sevaan: The image here for the minimal browser UI contains
> un-localisable text. Is there a way we can not have the text in the image?
> 
> Otherwise, we're going to have to come up with a way to generate L10n
> versions.

Yes, sure Mark. I can create a version with no text.

Comment 28

[Pau Masiá [:Pau]]

Attachment: NonSupportedBrowser_Assets.zip

Updated Assets.

Comment 29

[Pau Masiá [:Pau]]

Attachment: NonSupportedBrowser Tablet version

For smaller resolutions we should use this layout. Shortly I'll upload the mobile version with its corresponding spec.

Comment 30

[Pau Masiá [:Pau]]

Attachment: NonSupportedBrowser Tablet Visual Spec

Visual Spec for tablet layout.

Comment 31

[GitHub Autolander Bot]

Attachment: [loop] mancas:bug1136991 > mozilla:master

Comment 32

[Manuel Casas Barrado [:mancas]]

Comment on attachment 8706863 [details] [review]
[loop] mancas:bug1136991 > mozilla:master

New github patch. Mark, I've implemented the tablet version and your comments have been addresed so please, give me some feedback.

Thank you

Comment 33

[Manuel Casas Barrado [:mancas]]

Attachment: Mobile version

I know we need to test this version on a real device but in the meantime, please let me know if there is something wrong.

Comment 34

[Manuel Casas Barrado [:mancas]]

Attachment: Tablet version

Comment 35

[Pau Masiá [:Pau]]

Comment on attachment 8706865 [details]
Mobile version

Yes, it looks good in here. Let's test it properly in a real device!

Comment 36

[Mark Banner (:standard8)]

Note: this is unlikely to work on mobile devices, since we're not doing viewport & other detections only simple screen widths.

We're also not doing font scaling that we're likely to need on mobile.

We shouldn't fix the mobile devices here - that's future work/already covered by other bugs.

What I did want to achieve was a layout where a user could have different sizes of the browser on a desktop, and it would re-arrange whilst still looking good.

I'll test the patches in a bit, but the screen shots are looking nice.

Comment 37

[Mark Banner (:standard8)]

Comment on attachment 8706863 [details] [review]
[loop] mancas:bug1136991 > mozilla:master

On Safari, on my Mac, I'm still seeing an issue between about 769px & 1130px similar to what was seen in attachment 8689990 [details].

Maybe we need to make that image smaller, or switch earlier?

On narrow widths, the text on desktop feels a little on the large side, but I guess its probably not going to happen too often, so it might be ok.

You should also have padding on the sides of the narrow width displays - this doesn't need to be much, but will stop the text touching the sides which looks weird.

Also, on IE 10, something about the padding around the edges isn't working - I'll attach a screenshot in a moment.

Comment 38

[Mark Banner (:standard8)]

Attachment: Layout as seen in IE 10.

Comment 39

[Pau Masiá [:Pau]]

(In reply to Mark Banner (:standard8) from comment #36)
> Note: this is unlikely to work on mobile devices, since we're not doing
> viewport & other detections only simple screen widths.
> 
> We're also not doing font scaling that we're likely to need on mobile.
> 
> We shouldn't fix the mobile devices here - that's future work/already
> covered by other bugs.
> 
> What I did want to achieve was a layout where a user could have different
> sizes of the browser on a desktop, and it would re-arrange whilst still
> looking good.
> 
> I'll test the patches in a bit, but the screen shots are looking nice.

I don't understand why do we need to design for different browser sizes on desktop but not for different screen resolutions for other devices. I think it's a better approach to design one way that covers both cases instead of designing piece by piece, which also means more time dedicated to achieve the same goal.

On the other hand, font scaling should be taken into consideration if we want to have a design that looks good in different browser sizes.

Comment 40

[Pau Masiá [:Pau]]

(In reply to Mark Banner (:standard8) from comment #37)
> Comment on attachment 8706863 [details] [review]
> [loop] mancas:bug1136991 > mozilla:master
> 
> On Safari, on my Mac, I'm still seeing an issue between about 769px & 1130px
> similar to what was seen in attachment 8689990 [details].
> 
> Maybe we need to make that image smaller, or switch earlier?
> 
> On narrow widths, the text on desktop feels a little on the large side, but
> I guess its probably not going to happen too often, so it might be ok.
> 
> You should also have padding on the sides of the narrow width displays -
> this doesn't need to be much, but will stop the text touching the sides
> which looks weird.
> 
> Also, on IE 10, something about the padding around the edges isn't working -
> I'll attach a screenshot in a moment.

Totally agree. I'll work with Manu to make this shifts smoother.

Comment 41

[Mark Banner (:standard8)]

(In reply to Pau Masiá [:Pau] from comment #39)
> I don't understand why do we need to design for different browser sizes on
> desktop but not for different screen resolutions for other devices. I think
> it's a better approach to design one way that covers both cases instead of
> designing piece by piece, which also means more time dedicated to achieve
> the same goal.

We should be designing for both. However, there's a lot of work required to get the link clicker display to look good generally on mobile at the moment, and product management have said it isn't a high priority - we need to focus primarily on our use cases and getting the basic features developed.

If its simple to do (aka doesn't take up lots of time), and doesn't adversely impact other areas of the standalone UI, then that's probably ok. Otherwise we should wait until we do the main work for mobile (bug 1141493).

Comment 42

[Pau Masiá [:Pau]]

(In reply to Mark Banner (:standard8) from comment #41)
> (In reply to Pau Masiá [:Pau] from comment #39)
> > I don't understand why do we need to design for different browser sizes on
> > desktop but not for different screen resolutions for other devices. I think
> > it's a better approach to design one way that covers both cases instead of
> > designing piece by piece, which also means more time dedicated to achieve
> > the same goal.
> 
> We should be designing for both. However, there's a lot of work required to
> get the link clicker display to look good generally on mobile at the moment,
> and product management have said it isn't a high priority - we need to focus
> primarily on our use cases and getting the basic features developed.
> 
> If its simple to do (aka doesn't take up lots of time), and doesn't
> adversely impact other areas of the standalone UI, then that's probably ok.
> Otherwise we should wait until we do the main work for mobile (bug 1141493).

Ok, development-wise I think you're right. Design-wise though, it's less time consuming the way I said.

Comment 43

[Pau Masiá [:Pau]]

Attachment: NonSupportedBrowser_Assets.zip

Providing new assets to match new visuals and including RTL.

Comment 44

[Pau Masiá [:Pau]]

Attachment: NonSupportedBrowser_1366x768

New visuals for Non Supported Browser Desktop.

Comment 45

[Pau Masiá [:Pau]]

Attachment: NonSupportedBrowser_768x1024

New visuals for Non Supported Browser for lower screen size (portrait).

Comment 46

[Pau Masiá [:Pau]]

Attachment: NonSupportedBrowser_1024x768

New visuals for Non Supported Browser for lower screen size (landscape).

Comment 47

[Manuel Casas Barrado [:mancas]]

Attachment: desktop_version.png

Comment 48

[Manuel Casas Barrado [:mancas]]

Attachment: tablet_portrait_version.png

Comment 50

[Manuel Casas Barrado [:mancas]]

Comment on attachment 8706863 [details] [review]
[loop] mancas:bug1136991 > mozilla:master

Mark let's try to land this asap in order to have consistency with all of our error pages. So please take a look at the new patch based on the unsupported device patch I landed last week. Also I need to know the url of the "Learn more" link

Thank you

Comment 51

[Manuel Casas Barrado [:mancas]]

Attachment: 1280x768

Comment 52

[Manuel Casas Barrado [:mancas]]

Attachment: 1024x768

Comment 53

[Manuel Casas Barrado [:mancas]]

Attachment: 768x1024

Comment 54

[Manuel Casas Barrado [:mancas]]

Attachment: 360x640

Comment 55

[Manuel Casas Barrado [:mancas]]

Attachment: 1280x600

Comment 56

[Manuel Casas Barrado [:mancas]]

Attachment: 1024x768

Comment 57

[Manuel Casas Barrado [:mancas]]

Attachment: 768x1024

Comment 58

[Manuel Casas Barrado [:mancas]]

Attachment: 360x640

Comment 59

[Mark Banner (:standard8)]

Sorry, yesterday I had a day off, and I'm short on time today, I'll get to the review tomorrow at the latest.

Comment 60

[Mark Banner (:standard8)]

Comment on attachment 8706863 [details] [review]
[loop] mancas:bug1136991 > mozilla:master

I've put some comments in the PR, I'd like to see the updates before I go through the css in detail.

Also note the travis tests failed - though I think if you fix the comments that'll probably go away.

Comment 61

[Mark Banner (:standard8)]

Comment on attachment 8706863 [details] [review]
[loop] mancas:bug1136991 > mozilla:master

Sorry for the delay in this. I hadn't realised it was updated, then it wasn't a priority.

There's one small bit of bitrot in webapp.jsx, but this is otherwise quite easy to land.

Comment 62

[Manuel Casas Barrado [:mancas]]

Landed finally in master: https://github.com/mozilla/loop/commit/b1d315db60c803e663551f79efe69841b46d9281

Thanks Mark