593239 - Improve the instructions on the Firefox Sync Page

Status: VERIFIED FIXED

(www.mozilla.org :: General, defect)

Description

[Chris Howse [:chowse]]

The steps to create an account listed on the lower-right side of the Firefox Sync page are overly verbose and replicate a lot of information from the installation process itself. This block should provide a simpler overview of the setup process, and do more to draw attention to the video.

I'll provide q&d mockups and copy suggestions shortly.

Comment 1

[Chris Howse [:chowse]]

Attachment: Mock-up

Aggressively reduced version. Instructions have been simplified to large callouts to the introductory video and the instructions on SUMO (http://support.mozilla.com/en-US/kb/How+to+sync+Firefox+settings+between+computers). The product features have been split into 4 smaller parts, and the FAQ has been moved into the features block. Collectively, this should reduce clutter and improve scannability.

Copy to follow...

Comment 2

[Chris Howse [:chowse]]

Attachment: New Copy

New copy used in the mock-ups, with relevant URLs.

Ragavan, could you review this copy and the mock-up attached to this bug? I want to be sure the messaging is still clear and aligned with our Sync/Mobile strategy.

Comment 3

[Chris Howse [:chowse]]

Attachment: Mock-up (Alternate)

Alternate design, with mobile links moved closer to the install button.

Comment 4

[John Slater]

Good stuff, thanks Chowse. One thought: could you move the Getting Started content in the sidebar up a little higher? Right now it seems too far down the page, and I think it would really benefit people if they could at least see part of it peeking up above the fold.

Comment 5

[Ragavan S [:rags]]

Hi Chris,
Thanks for working on this. A few thoughts:

1. Balancing whether to promote the add-on download versus built-in feature (Fx 4) is tricky. The mockups don't say anything about Firefox 4, but Sync is a pretty important feature of Firefox 4.

2. We don't call the feature Mobile Sync (for Fennec). So, we should just say Sync for Firefox Mobile - please check with Caitlin for consistency.

3. I do like promoting Home and Sync for Fennec at the top, looks good.

4. As for the copy, we are probably going to be making some changes leading to the Firefox 4 release. But for now, the proposed changes look good. 

5. I also like John's comment about moving the Getting Started content a bit higher.

Comment 6

[Chris Howse [:chowse]]

(In reply to comment #5)
> 1. Balancing whether to promote the add-on download versus built-in feature (Fx
> 4) is tricky. The mockups don't say anything about Firefox 4, but Sync is a
> pretty important feature of Firefox 4.

If you're using Firefox 4, we actually show a slightly different UI (see bug 593235). Do we want to use this promote the Fx4 beta? If so, I could make it another option on par with the add-on download.


> 2. We don't call the feature Mobile Sync (for Fennec). So, we should just say
> Sync for Firefox Mobile - please check with Caitlin for consistency.

I'll correct this in the mock. "Mobile Sync" was intended to distinguish the link a bit more from Desktop Sync and Firefox Home.


> 5. I also like John's comment about moving the Getting Started content a bit
> higher.

I can inch it a bit higher on the page, but probably no higher than the 'Why Sync Up?' block. That will bring the heading and video above the fold at 1024x768, so hopefully that's enough to get people's attention.

Comment 7

[Chris Howse [:chowse]]

Attachment: Mock-up (Updated)

* Fixes the copy on the mobile links, and shortens the text a bit.
* Moves the Getting Started block a bit higher on the page.

Comment 8

[Caitlin Looney]

Chowse -

I have made copy edits to existing Firefox/Sync page to include both mobile and desktop (and deleting Firefox/mobile/sync completely).

I have also filed a bug to get Firefox Sync page redesigned to foster a better workflow. This page has new copy, supporting demo videos and prioritized downloading Firefox 4 beta for desktop as the recommended install/setup approach.
(https://bugzilla.mozilla.org/show_bug.cgi?id=600659)

This new page will not be ready until the first week of December. In the meantime, we'll need to make some changes to the existing page, similar to what I see in your mockups with a few changes.

May I take your updated mockup and add some notes, changes and attach it to this bug?

Comment 9

[Caitlin Looney]

Attachment: Firefox/sync mockup with edits

Comment 10

[Chris Howse [:chowse]]

(In reply to comment #8)
> May I take your updated mockup and add some notes, changes and attach it to
> this bug?

Not a problem. A few quick questions about your changes:

1. Are we promoting Fx4 as the primary way of getting Sync for THIS version of
   the Sync page? Does this mean the green install button will be a Fx4 Beta
   download link, or be removed altogether?

2. If we move the add-on link into the right gutter, it will be below the fold
   for most users (esp. w/ the new horizontal bar). Unless we're replacing it
   with the Fx4 download link, I think this is a bad idea.

3. If we want to add a horizontal bar like Firefox Home's page (great idea,
   btw), I'll need some visuals or extra copy to fill out the height (i.e. to
   make it as tall as the video thumbnail). Do we have any handy, or can Lee
   assist with this?

Comment 11

[Chris Howse [:chowse]]

Another question about some of the new copy:

> 1. Firefox Sync is a built-in feature in Firefox 4 for desktop
>    and mobile. Click download, restart Firefox and you will be
>    prompted to create a Firefox Sync account.

This seems to be mixing instructions for Firefox 4 and Firefox 3.6. Also, is there supposed to be a download link here too?

Comment 12

[Chris Howse [:chowse]]

Attachment: Interim mock-up w/ the suggested changes

Comment 13

[John Slater]

Chowse, if you want, I posted some revised copy for this page over in bug 600659. It hasn't been approved by Caitlin yet, but it's based on her direction (and is shorter), so it might be a good starting point.

Comment 14

[Caitlin Looney]

Attachment: Interim Mockup with Suggested Changes

Comment 15

[Chris Howse [:chowse]]

Attachment: Updated mock-up w/ Caitlin's changes

Looks much better w/ these changes, Caitlin. Let me know if you want me to integrate any copy from bug 600659.

Comment 16

[Caitlin Looney]

Hey Chris,

Looking way better, agreed. For Install Firefox beta and Sync up sections, can we highlight them a bit more as step 1 and step 2. I think this may be more clear to the user to identify these things as what to do next.  (The 3rd section isn't a step but rather it's own help section)

Similarly to the Sync up section, I think the words "download", "restart" and "create" should be bold. 

The Firefox 4 and the mobile link can go to their respective beta pages.

Comment 17

[Justin Fitzhugh]

These look great - what's the eta to get this pushed live?  really need it, especially with the storage version changes in sync...

Comment 18

[Anthony Ricaud (:rik)]

So attachment 480160 [details] is the latest mockup, right?

If so, we should close bug 593235 as it is just a smaller redesign.

This mockup is only relevant to Firefox 3.x users and other browsers. Could we get a mockup for Firefox 4?

It also feels weird to have a question asking "Using Firefox 3.5 or 3.6?". We know which browser is currently used and shouldn't show that to users on other browsers.

Comment 19

[Michael Morgan [:morgamic]]

I want to see this page launched by Tuesday of next week.  What has to get done in order for that to happen?

Comment 20

[Caitlin Looney]

It looks good. My last comment (#16) was never addressed, but not a blocker.

Comment 22

[Chris Howse [:chowse]]

(In reply to comment #18)
> So attachment 480160 [details] is the latest mockup, right?

Yes.

> If so, we should close bug 593235 as it is just a smaller redesign.

That's fine. Those designs were put together before I knew about Caitlin's new copy.

> This mockup is only relevant to Firefox 3.x users and other browsers. Could we
> get a mockup for Firefox 4?

Not much would be different, except changing the 'Install Firefox Beta' button and removing the 'Firefox 3.6' block. However, we don't have any alternative content for those spots (but I believe that's being planned for moz.com redesign and Fx4 launch). Caitlin, do you have any input here?

Since at the moment I'd wager non-Fx4 visitors outweigh Fx4 visitors of this page, I'd lean toward keeping this page static until we have some Fx4-specific content.


> It also feels weird to have a question asking "Using Firefox 3.5 or 3.6?". We
> know which browser is currently used and shouldn't show that to users on other
> browsers.

Agreed, but see above: we don't have any alternate content to fill the spot, and I'd prefer to leave some redundant text than to have a gap.

Comment 23

[Chris Howse [:chowse]]

(In reply to comment #20)
> It looks good. My last comment (#16) was never addressed, but not a blocker.

Sorry, this is an easy fix and I must have overlooked the comment. I'll correct this and post the final mocks within the hour.

Comment 24

[Chris Howse [:chowse]]

Attachment: Final Mock-up

Comment 25

[Anthony Ricaud (:rik)]

I'm almost done.

What is the link of the "step-by-step instructions"?

Comment 26

[Anthony Ricaud (:rik)]

Attachment: Patch

First patch using sync-logo-small.png from bug 593235.

Comment 27

[Chris Howse [:chowse]]

(In reply to comment #25)
> I'm almost done.
> 
> What is the link of the "step-by-step instructions"?

I'd recommend these instructions on SUMO:

http://support.mozilla.com/en-US/kb/How+to+sync+Firefox+settings+between+computers

There's also a FAQ with links to both desktop and mobile sync instructions:

http://support.mozilla.com/en-US/kb/How+to+sync+Firefox+settings+between+computers

But I think a direct link to instructions would be better.

Comment 28

[Caitlin Looney]

Hey Chris,

Agreed. The step-by-step is out of date and we'd like to keep maintenance on one version of steps. Let's direct folks directly to Sumo instructions (http://support.mozilla.com/en-US/kb/How+to+sync+Firefox+settings+between+computers).

Comment 29

[Anthony Ricaud (:rik)]

Attachment: Patch

Comment 30

[Alex Buchanan [:abuchanan]]

Comment on attachment 484318 [details] [diff] [review]
Patch

>+        <p>The latest version of Firefox Sync is a built-in feature in <a href="/firefox/beta/">Firefox 4</a> for desktop and <a href="/mobile/beta/">mobile</a>. <strong>Download</strong> Firefox 4 beta, <strong>restart</strong> Firefox and you will be prompted to <strong>create</strong> a Firefox Sync account.</p>

hrefs should be "/<?=$lang?>/path/to/foo"

>+            echo $firefoxDetails->getDownloadBlockForLocale('en-US', $_options);

use $lang instead of 'en-US'

>+        <p>To connect another computer, symply go to <strong>Tools > Sync > Connect</strong> and add your new Sync login info.</p>
>+        <p>On Firefox Mobile, swipe to <strong>Tools > Preferences</strong>, pan down and add your new login info. Tap Connect.</p>

">" won't validate, use &gt;

Minor nits, otherwise r+


I'll fix these up and commit the patch, just noting here for future reference.

Comment 31

[Alex Buchanan [:abuchanan]]

Committed Anthony's patch to trunk in r76003

I reviewed the comments and mockups, and this looks like it's ready for QA and then production.  If something is missing, please let me know soon.

Comment 32

[raymond [:retornam] (inactive)]

Attachment: Layout is broken in IE6

The page layout is broken in IE6.. Please see attached screenshot

Comment 33

[Alex Buchanan [:abuchanan]]

r76007 fixes the IE 6 layout issues.  There's still an issue with PNG transparency on the logo, I'm working on that, but I don't think that should block launching this today.

Comment 34

[raymond [:retornam] (inactive)]

qa-verified trunk  http://www-trunk.stage.mozilla.com/en-US/firefox/sync/

Comment 35

[Alex Buchanan [:abuchanan]]

r76010 on production.

I'll file a new bug for the remaining minor fixes.

Comment 36

[raymond [:retornam] (inactive)]

reopening due to layout being broken on production http://www.mozilla.com/en-US/firefox/sync/

Comment 37

[raymond [:retornam] (inactive)]

Attachment: production layout bug

Comment 38

[Anthony Ricaud (:rik)]

This looks like you got the new HTML but not the new CSS. Caching issues.

Comment 39

[raymond [:retornam] (inactive)]

verified fixed http://www.mozilla.com/en-US/firefox/sync/

Comment 40

[Michael Morgan [:morgamic]]

Thanks guys for getting this done!  New page looks a lot better.  Nice work!