Hello link viewed in IE or Safari needs a better message

RESOLVED FIXED

Status

P2
normal
Rank:
29
RESOLVED FIXED
4 years ago
2 years ago

People

(Reporter: verdi, Assigned: mancas)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(10 attachments, 23 obsolete attachments)

314.54 KB, image/jpeg
Details
39 bytes, text/x-github-pull-request
standard8
: review+
Details | Review | Splinter Review
127.20 KB, application/zip
Details
94.51 KB, image/png
Details
182.99 KB, image/png
Details
183.92 KB, image/png
Details
45.89 KB, image/png
Details
38.99 KB, image/png
Details
39.23 KB, image/png
Details
24.83 KB, image/png
Details
(Reporter)

Description

4 years ago
Created attachment 8569512 [details]
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

4 years ago
Sevaan: Didn't we at one point discuss indicating that Chrome and Opera support WebRTC on this page?
Flags: needinfo?(sfranks)
(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.
Flags: needinfo?(sfranks) → needinfo?(alainez)

Comment 3

4 years ago
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.
Flags: needinfo?(alainez)
Or better yet, both.
(Reporter)

Comment 5

4 years ago
(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.
(Reporter)

Updated

3 years ago
Whiteboard: [fxgrowth]

Comment 6

3 years ago
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?
Rank: 29
Flags: needinfo?(sfranks)
Flags: needinfo?(mmaslaney)
Priority: -- → P2
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?
Flags: needinfo?(sfranks)
Flags: needinfo?(mmaslaney)
Flags: needinfo?(garethcull.bugs)
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
Flags: needinfo?(garethcull.bugs)
(Reporter)

Comment 9

3 years ago
So what does the page look like that is testing well? Do we mention that Hello works in other browsers?
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.
(Reporter)

Comment 11

3 years ago
(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!
(Assignee)

Comment 12

3 years ago
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?.
Flags: needinfo?(b.pmm)

Comment 13

3 years ago
Created attachment 8686104 [details]
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.
Flags: needinfo?(b.pmm)
(Assignee)

Updated

3 years ago
Assignee: nobody → b.mcb

Comment 14

3 years ago
Created attachment 8687143 [details]
Non Supported Browser VisualSpec

Visual Spec of Non Supported Browser screen

Comment 15

3 years ago
Created attachment 8687144 [details]
NonSupportedBrowser_Assets.zip

Assets provided for this screen

Comment 16

3 years ago
Created attachment 8687811 [details]
NonSupportedBrowser_Assets.zip
Attachment #8687144 - Attachment is obsolete: true
(Assignee)

Comment 17

3 years ago
Created attachment 8687873 [details]
not_supported_page.png

Hey Pau, take a quick look at the screenshot. I think is pretty similar to your mockup =)
Attachment #8687873 - Flags: ui-review?(b.pmm)

Comment 18

3 years ago
Comment on attachment 8687873 [details]
not_supported_page.png

Thanks!
Attachment #8687873 - Flags: ui-review?(b.pmm) → ui-review+
(Assignee)

Comment 19

3 years ago
Created attachment 8687883 [details] [diff] [review]
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!
Attachment #8687883 - Flags: review?(standard8)
(Assignee)

Comment 20

3 years ago
Created attachment 8688479 [details]
OSX_version
Attachment #8688479 - Flags: ui-review?(b.pmm)

Comment 21

3 years ago
Created attachment 8688880 [details]
NonSupportedBrowser_Assets.zip

Updated assets
Attachment #8687811 - Attachment is obsolete: true
(Assignee)

Comment 22

3 years ago
Created attachment 8688923 [details]
OSX_version
Attachment #8688479 - Attachment is obsolete: true
Attachment #8688479 - Flags: ui-review?(b.pmm)
Attachment #8688923 - Flags: ui-review?(b.pmm)
(Assignee)

Comment 23

3 years ago
Created attachment 8688926 [details] [diff] [review]
Hello link viewed in IE or Safari needs a better message

Assets files updated and minor visual issues fixed
Attachment #8688926 - Flags: review?(standard8)
(Assignee)

Updated

3 years ago
Attachment #8687883 - Attachment is obsolete: true
Attachment #8687883 - Flags: review?(standard8)

Updated

3 years ago
Attachment #8688923 - Flags: ui-review?(b.pmm) → ui-review+
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.
Flags: needinfo?(sfranks)
Flags: needinfo?(b.pmm)
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.
Attachment #8688926 - Flags: review?(standard8) → review-
Created attachment 8689990 [details]
Bad layouts on alternative window widths.

Comment 27

3 years ago
(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.
Flags: needinfo?(sfranks)
Flags: needinfo?(b.pmm)

Comment 28

3 years ago
Created attachment 8690051 [details]
NonSupportedBrowser_Assets.zip

Updated Assets.
Attachment #8688880 - Attachment is obsolete: true
Status: NEW → ASSIGNED

Comment 29

3 years ago
Created attachment 8691885 [details]
NonSupportedBrowser Tablet version

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

Comment 30

3 years ago
Created attachment 8691886 [details]
NonSupportedBrowser Tablet Visual Spec

Visual Spec for tablet layout.
Component: General → Client
Created attachment 8706863 [details] [review]
[loop] mancas:bug1136991 > mozilla:master
(Assignee)

Comment 32

3 years ago
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
Attachment #8706863 - Flags: feedback?(standard8)
(Assignee)

Updated

3 years ago
Attachment #8688926 - Attachment is obsolete: true
(Assignee)

Comment 33

3 years ago
Created attachment 8706865 [details]
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.
Attachment #8706865 - Flags: ui-review?(b.pmm)
(Assignee)

Comment 34

3 years ago
Created attachment 8706866 [details]
Tablet version
Attachment #8706866 - Flags: ui-review?(b.pmm)

Comment 35

3 years ago
Comment on attachment 8706865 [details]
Mobile version

Yes, it looks good in here. Let's test it properly in a real device!
Attachment #8706865 - Flags: ui-review?(b.pmm) → ui-review+

Updated

3 years ago
Attachment #8706866 - Flags: ui-review?(b.pmm) → ui-review+
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 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.
Attachment #8706863 - Flags: feedback?(standard8)
Created attachment 8706874 [details]
Layout as seen in IE 10.

Comment 39

3 years ago
(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

3 years ago
(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.
(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

3 years ago
(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

3 years ago
Created attachment 8707818 [details]
NonSupportedBrowser_Assets.zip

Providing new assets to match new visuals and including RTL.
Attachment #8690051 - Attachment is obsolete: true

Comment 44

3 years ago
Created attachment 8707821 [details]
NonSupportedBrowser_1366x768

New visuals for Non Supported Browser Desktop.
Attachment #8686104 - Attachment is obsolete: true

Comment 45

3 years ago
Created attachment 8707825 [details]
NonSupportedBrowser_768x1024

New visuals for Non Supported Browser for lower screen size (portrait).
Attachment #8691885 - Attachment is obsolete: true

Comment 46

3 years ago
Created attachment 8707826 [details]
NonSupportedBrowser_1024x768

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

Comment 47

3 years ago
Created attachment 8707855 [details]
desktop_version.png
Attachment #8688923 - Attachment is obsolete: true
Attachment #8707855 - Flags: ui-review?(b.pmm)
(Assignee)

Comment 48

3 years ago
Created attachment 8707856 [details]
tablet_portrait_version.png
Attachment #8706866 - Attachment is obsolete: true
Attachment #8707856 - Flags: ui-review?(b.pmm)
(Assignee)

Updated

3 years ago
Attachment #8687873 - Attachment is obsolete: true

Updated

3 years ago
Attachment #8707855 - Flags: ui-review?(b.pmm) → ui-review+

Updated

3 years ago
Attachment #8707856 - Flags: ui-review?(b.pmm) → ui-review+
Duplicate of this bug: 1240565
Whiteboard: [fxgrowth]
(Assignee)

Comment 50

3 years ago
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
Attachment #8706863 - Flags: review?(standard8)
(Assignee)

Comment 51

3 years ago
Created attachment 8719722 [details]
1280x768
Attachment #8687143 - Attachment is obsolete: true
Attachment #8689990 - Attachment is obsolete: true
Attachment #8691886 - Attachment is obsolete: true
Attachment #8706865 - Attachment is obsolete: true
Attachment #8706874 - Attachment is obsolete: true
Attachment #8707855 - Attachment is obsolete: true
Attachment #8707856 - Attachment is obsolete: true
Attachment #8719722 - Flags: ui-review?(b.pmm)
(Assignee)

Comment 52

3 years ago
Created attachment 8719724 [details]
1024x768
Attachment #8719724 - Flags: ui-review?(b.pmm)
(Assignee)

Comment 53

3 years ago
Created attachment 8719725 [details]
768x1024
Attachment #8719725 - Flags: ui-review?(b.pmm)
(Assignee)

Comment 54

3 years ago
Created attachment 8719726 [details]
360x640
Attachment #8719726 - Flags: ui-review?(b.pmm)
(Assignee)

Comment 55

3 years ago
Created attachment 8719730 [details]
1280x600
Attachment #8719722 - Attachment is obsolete: true
Attachment #8719722 - Flags: ui-review?(b.pmm)
Attachment #8719730 - Flags: ui-review?(b.pmm)
(Assignee)

Comment 56

3 years ago
Created attachment 8719731 [details]
1024x768
Attachment #8719724 - Attachment is obsolete: true
Attachment #8719724 - Flags: ui-review?(b.pmm)
Attachment #8719731 - Flags: ui-review?(b.pmm)
(Assignee)

Comment 57

3 years ago
Created attachment 8719732 [details]
768x1024
Attachment #8719725 - Attachment is obsolete: true
Attachment #8719725 - Flags: ui-review?(b.pmm)
Attachment #8719732 - Flags: ui-review?(b.pmm)
(Assignee)

Comment 58

3 years ago
Created attachment 8719733 [details]
360x640
Attachment #8719726 - Attachment is obsolete: true
Attachment #8719726 - Flags: ui-review?(b.pmm)
Attachment #8719733 - Flags: ui-review?(b.pmm)

Updated

3 years ago
Attachment #8719730 - Flags: ui-review?(b.pmm) → ui-review+

Updated

3 years ago
Attachment #8719731 - Flags: ui-review?(b.pmm) → ui-review+

Updated

3 years ago
Attachment #8719732 - Flags: ui-review?(b.pmm) → ui-review+

Updated

3 years ago
Attachment #8719733 - Flags: ui-review?(b.pmm) → ui-review+
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 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.
Attachment #8706863 - Flags: review?(standard8)
Attachment #8706863 - Flags: review?(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.
Attachment #8706863 - Flags: review?(standard8) → review+
(Assignee)

Comment 62

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

Thanks Mark
Status: ASSIGNED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.