701208 - [Upgrade 3.6 Landing Page] Code Landing Page - Speed

Status: RESOLVED FIXED

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

Description

[mcbmoz]

Hey Steven,

Goal: create a landing page that focuses on an animated interaction to demonstrate speed ratio of old firefox to new firefox

Timing: as soon as possible, would be awesome to go live in our upcoming release

The meter's needle should be 'idling' with a slight bounce until user rolls over it to reveal their version.

Reference for slight animation: http://teachingjobsportal.com/ (see hover state for speedometer gauge) - little bit of jquery and red/green/yellow logic

PSD: http://intothefuzz.com/leetom/Mozilla.com/PSD/upgrade_01.psd

Steven, what's reasonable as a turnaround for the team to peek at and tweak on stage?

Comment 1

[Steven Garrity [:sgarrity]]

A few questions:
 - What do the "Firefox Upgrade" button and "Learn more" link point to?
 - Can you spec out the behaviour of the interaction/animation further? I gather that we're detecting Firefox version number, and on mouse-over of the dial, slide to a value specific to that version?
 - Do you have the performance numbers yet for the various versions?
 - You mention "red/green/yellow logic" - can you elaborate?
 - What versions of Firefox are we targeting? We have to watch which techniques we use for animation as the various options (SVG, canvas, CSS3 transforms, etc.) have varying degrees of support in Fx 3, 3.5, 3.6, 4, etc.

Perhaps this is already spec'ed out on the wiki or somewhere else? Let me know, thanks.

Comment 2

[mcbmoz]

Attachment: Wireframe: Design & Copy & Interaction Notes - Speed

Comment 3

[mcbmoz]

(In reply to Steven Garrity from comment #1)
> A few questions:
>  - What do the "Firefox Upgrade" button and "Learn more" link point to?

Laura Mesa, can you respond here?

>  - Can you spec out the behaviour of the interaction/animation further? 
> I gather that we're detecting Firefox version number, and on mouse-over of the
> dial, slide to a value specific to that version?

Yes, we need 5 states:

3.6 is on the lowest "speed"
4.0 is on a better, but not great speed
5.0 is better than 4.0, but not great
6.0 is better than 5.0, and close to great
7.0 is as fast as they come all the way to the right

>  - Do you have the performance numbers yet for the various versions?
>  - You mention "red/green/yellow logic" - can you elaborate?

The design reflects more blue to red logic, but the idea was slow, moderate, fast like stoplights.

>  - What versions of Firefox are we targeting? We have to watch which
> techniques we use for animation as the various options (SVG, canvas, CSS3
> transforms, etc.) have varying degrees of support in Fx 3, 3.5, 3.6, 4, etc.

We have to go with lowest common denominator there, so it works across all - unless you'd like to recommend and build to include various states for each browser (super cool idea by the way)

> Perhaps this is already spec'ed out on the wiki or somewhere else? Let me
> know, thanks.

Wireframe in comment 2 with interaction notes. Would a richer spec be more helpful or maybe just a call or skype?

Comment 4

[John Slater]

One note re: comment #3 - we need to account for the fact that Fx8 is now the most current version, not Fx7.

I'd recommend a phone call to get the details sorted out.

Comment 5

[Laura Mesa [:lmesa] [:lvmesa]]

(In reply to mcbmoz from comment #3)
> (In reply to Steven Garrity from comment #1)
> > A few questions:
> >  - What do the "Firefox Upgrade" button and "Learn more" link point to?
> 
> Laura Mesa, can you respond here?

According to the wireframes (and I agree with them), the upgrade button should just be a normal download button while the learn more should go to /central/. 


> 
> >  - Can you spec out the behaviour of the interaction/animation further? 
> > I gather that we're detecting Firefox version number, and on mouse-over of the
> > dial, slide to a value specific to that version?
> 
> Yes, we need 5 states:
> 
> 3.6 is on the lowest "speed"
> 4.0 is on a better, but not great speed
> 5.0 is better than 4.0, but not great
> 6.0 is better than 5.0, and close to great
> 7.0 is as fast as they come all the way to the right


I don't think actually covers all the situations.  People who come on versions less than 4.0 should see the lowest speed. 4, 5, 6 and 7 should be better but not great, with 8 being the fastest.  Ideally we can right the logic so everytime a new version comes out, it becomes that fastest and everything moves down a notch every 6 weeks.  



> 
> >  - Do you have the performance numbers yet for the various versions?
> >  - You mention "red/green/yellow logic" - can you elaborate?
> 
> The design reflects more blue to red logic, but the idea was slow, moderate,
> fast like stoplights.
> 
> >  - What versions of Firefox are we targeting? We have to watch which
> > techniques we use for animation as the various options (SVG, canvas, CSS3
> > transforms, etc.) have varying degrees of support in Fx 3, 3.5, 3.6, 4, etc.
> 
> We have to go with lowest common denominator there, so it works across all -
> unless you'd like to recommend and build to include various states for each
> browser (super cool idea by the way)

We should also note that people may come to site on versions lower than 3. 
> 
> > Perhaps this is already spec'ed out on the wiki or somewhere else? Let me
> > know, thanks.
> 
> Wireframe in comment 2 with interaction notes. Would a richer spec be more
> helpful or maybe just a call or skype?

Comment 6

[mcbmoz]

Adding Blake & Brad to answer both questions:

How do we direct traffic to the three tests, how much traffic?

Do we need any special webtrends for tracking?

Comment 7

[Bradley Gross]

It really depends on what you are looking to track.  

We would have to include some custom tagging if you are looking to incorporate the speed guage animation events into your current reports.

Comment 8

[Steven Garrity [:sgarrity]]

Attachment: Gauges mockup

Trying to work through the behaviour of the speed gauge for this page. The attached mockup shows the gauge in various states depending on which version you are running.

A few thoughts/questions:

1. Don't Roll Over
The mockup references "Roll over the speedometer" behaviour. I would recommend avoiding roll-over interaction. Why not just have the animation start when the page is finished loading? Start at flat "0", slide up to your version's notch, and hopefully a little wobble or some kind of flourish. Maybe we could have a "Newest Firefox" label at the fast end of the gauge and buried the needle when you hover, to show you what you're missing?

2. What about version numbers?
If you come to the page with Firefox 5,6,7,8+, how do we identify your version without using version numbers? Chrissie wisely pointed out that if you see you are on v5, you might think you have to do three upgrades to get to v8. The mockup does have version numbers for v5,v6,v7,v8, but I don't think we should do this. What's the alternative? (I think 3.0, 3.6, and 4.0 are fine to reference, since they are the target, and were promoted by their version number).

3. Real data, or no data.
The gauge as mocked up has 19 notches. Even if we don't put speed number labels on the notches, there is an implication that *something* is being measured and displayed. If we don't pick a real benchmark figure, the page is misleading. If we're going to do a gauge graphic without real data behind it, it should be *really* cartoony, maybe even having only two notches labelled SLOW and FAST. If Microsoft published a speed gauge of IE6/7/8/9 that didn't use real data, our community would pick it apart.

For reference, according to an old version of our /firefox/performance page and updated info in Bug 703422, using Mozilla's own Kraken benchmark (smaller is better):

Fx3.6 14,293ms
Fx4    5,072ms
Fx8    3,854ms
Fx9    2,784ms

These numbers, though, would put Fx4 relatively high on the dial. Kraken's smaller is better results don't map particularly well to a dial shaped gauge either.

I've been looking mostly at the implementation of the page, but the questions I've listed here are more editorial and should be closely looked at by someone at Mozilla.

Finally, just for some almost-on-topic awesome, here's a gallery of Chevy speedometer designs throughout the decades: http://annyas.com/chevrolet-speedometer-design/

Comment 9

[mcbmoz]

(In reply to Steven Garrity from comment #8)
> Created attachment 575532 [details]
> Gauges mockup
> 
> Trying to work through the behaviour of the speed gauge for this page. The
> attached mockup shows the gauge in various states depending on which version
> you are running.
> 
> A few thoughts/questions:
> 
> 1. Don't Roll Over
> The mockup references "Roll over the speedometer" behaviour. I would
> recommend avoiding roll-over interaction. Why not just have the animation
> start when the page is finished loading? Start at flat "0", slide up to your
> version's notch, and hopefully a little wobble or some kind of flourish.
> Maybe we could have a "Newest Firefox" label at the fast end of the gauge
> and buried the needle when you hover, to show you what you're missing?


+1 great idea.

> 
> 2. What about version numbers?
> If you come to the page with Firefox 5,6,7,8+, how do we identify your
> version without using version numbers? Chrissie wisely pointed out that if
> you see you are on v5, you might think you have to do three upgrades to get
> to v8. The mockup does have version numbers for v5,v6,v7,v8, but I don't
> think we should do this. What's the alternative? (I think 3.0, 3.6, and 4.0
> are fine to reference, since they are the target, and were promoted by their
> version number).

Since this is a product critique and not isn't a design critique let's narrow the focus. The problem we're trying to solve is increasing upgrades by demonstrating speed. If the numbers aren't really important here to solving the problem, let's not use them and instead focus on Old Firefox and Newer Firefox.

> 3. Real data, or no data.
> The gauge as mocked up has 19 notches. Even if we don't put speed number
> labels on the notches, there is an implication that *something* is being
> measured and displayed. If we don't pick a real benchmark figure, the page
> is misleading. If we're going to do a gauge graphic without real data behind
> it, it should be *really* cartoony, maybe even having only two notches
> labelled SLOW and FAST. If Microsoft published a speed gauge of IE6/7/8/9
> that didn't use real data, our community would pick it apart.

+1 for simplified 2 notches for slow and fast gauge. 

> For reference, according to an old version of our /firefox/performance page
> and updated info in Bug 703422, using Mozilla's own Kraken benchmark
> (smaller is better):
> 
> Fx3.6 14,293ms
> Fx4    5,072ms
> Fx8    3,854ms
> Fx9    2,784ms
> 
> These numbers, though, would put Fx4 relatively high on the dial. Kraken's
> smaller is better results don't map particularly well to a dial shaped gauge
> either.


If it doesn't solve the problem, and it doesn't appear to do so, let's stick to slow and fast for the best possible user-friendly and experience outcome.

> I've been looking mostly at the implementation of the page, but the
> questions I've listed here are more editorial and should be closely looked
> at by someone at Mozilla.

Hope this helps!

> Finally, just for some almost-on-topic awesome, here's a gallery of Chevy
> speedometer designs throughout the decades:
> http://annyas.com/chevrolet-speedometer-design/

<3<3<3

Comment 10

[Laura Mesa [:lmesa] [:lvmesa]]

+ 1 to Chrissie's comments.

Comment 11

[Steven Garrity [:sgarrity]]

After some further discussion with Chrissie, we've got a basic prototype setup in trunk.

This prototype isn't doing any browser detection yet - it's just showing how the page could work, with a needle animation. So far, the needle just wobbles a bit, and slides to a "fast" position.

http://www-dev.allizom.org/en-US/firefox/speed/

Does this seem like the right idea?

We'll need:
1. Text for the "slow" and "fast" labels on the speedometer.
2. Updated text for the intro paragraph "The new Firefox is 7 times faster..." - we hacked the current text up from the previous photoshop mockup provided.
3. Fallback content for Firefox versions older than 3.0 (a static image, probably?)
4. Fallback content other browsers (Chrome, IE, Safari, etc.)

Comment 12

[Matej Novak [:matej]]

Here's the copy from the design bug, with minor tweaks. Let me know if there are further changes needed.

[HEADLINE]
How fast is
YOUR FIREFOX?

[COPY]
New Firefox is up to 7 times faster. (That's a lot!) Check the speedometer to see if yours can keep up.

[OLD FIREFOX COPY]
Seriously?
That just isn't going to cut it. Stop browsing in the past and upgrade now! 

[NEW FIREFOX COPY]
Now we're talking!
Feels better, doesn't it? Welcome to the future of the Web. It's nice here.

[LEFT SIDE GRAPHIC]
Old Firefox = Sadface

[RIGHT SIDE GRAPHIC]
New Firefox = Yay!

[FOOTER]
New Firefox is faster, free (as always), crashes less and protects your privacy more.
Upgrading takes less than a minute and you won't lose your history or bookmarks. Hooray!

Comment 13

[Lee Tom]

Here are some new mockups:

Old
http://cl.ly/0C2l250n2W2g091u3q2H

New
http://cl.ly/400l3u123g2x0M0s2C33

Comment 14

[John Slater]

Speedometer looks good to me, thanks Steven. I will say that it just jumped up to fast right away without any further explanation...would be great to have something that indicates that I'm on the latest Firefox and all is well.

Also, it looks like we're still missing that footer.

Chrissie, can you weigh in on the overall experience and also provide direction on the fallback states, etc as noted in comment #11?

Comment 15

[mcbmoz]

(In reply to Steven Garrity from comment #11)
> After some further discussion with Chrissie, we've got a basic prototype
> setup in trunk.
> 
> This prototype isn't doing any browser detection yet - it's just showing how
> the page could work, with a needle animation. So far, the needle just
> wobbles a bit, and slides to a "fast" position.

Looks and functions just as envisioned! Great job!

> 
> http://www-dev.allizom.org/en-US/firefox/speed/
> 
> Does this seem like the right idea?

Yes:-)

> We'll need:
> 1. Text for the "slow" and "fast" labels on the speedometer.

see comment 12

> 2. Updated text for the intro paragraph "The new Firefox is 7 times
> faster..." - we hacked the current text up from the previous photoshop
> mockup provided.

see comment 12

> 3. Fallback content for Firefox versions older than 3.0 (a static image,
> probably?)

see comment 13

> 4. Fallback content other browsers (Chrome, IE, Safari, etc.)

oh, good catch on this. 

Matej should polish, but how about something simple, "Looks like you're using .... grab this url and test your Firefox!"

Comment 16

[Matej Novak [:matej]]

(In reply to mcbmoz from comment #15)
> 
> Matej should polish, but how about something simple, "Looks like you're
> using .... grab this url and test your Firefox!"

How about this?

Hey, looks like you're using [INSERT BROWSER]. Why not grab Firefox and see if you're up to speed.

My only concern is that we'll be directing them to download the latest version of Firefox. Is it odd that we're then suggesting that they have to test it to see if it's fast enough? Another option would be:

Hey, looks like you're using [INSERT BROWSER]. Why not grab Firefox and get up to speed.

That way they can run the test if they want, but we're already saying that Firefox is fast.

Comment 17

[Steven Garrity [:sgarrity]]

Updated trunk with a few changes. We've now got a non-Firefox browser fallback message (thanks Matej) and now have the proper text implemented (we fade in the note after the needle settles).

The footer has been added as well, though I'm not sure it really makes sense on a page where the rest of the content is already dedicated to upgrading. It's attached to the bottom of the window (even when you scroll) like the persistent upgrade messaging unit from Bug 668101.

I think this is all set. Please re-open if I missed anything.

Comment 18

[raymond [:retornam] (inactive)]

qa-verified-trunk http://www-dev.allizom.org/en-US/firefox/speed/

Comment 19

[Matej Novak [:matej]]

Looking great. Just wondering if there's a way to incorporate this text while the needle is still hovering on the left:

[OLD FIREFOX COPY]
Seriously?
That just isn't going to cut it. Stop browsing in the past and upgrade now!

The "Now we're talking copy" was written to play off that, so it reads a little weird without it.

(In reply to Steven Garrity from comment #17)
> The footer has been added as well, though I'm not sure it really makes sense
> on a page where the rest of the content is already dedicated to upgrading.

I kind of agree. Since it's anchored to the bottom of the window it actually covers the speedometer when I load the page. I also feel like it's fragmenting the message and CTA.

The other thing I noticed is that the buttons have inconsistent language. I think it should be "Upgrade Firefox" on both (the top one says "Firefox Upgrade").

Comment 20

[Matej Novak [:matej]]

Sorry, one more thing: Is there any way to ghost the speedometer image in the background for non-Firefox users? Seeing that there's something interactive on the page may give them added incentive to download Firefox.

Comment 21

[Laura Mesa [:lmesa] [:lvmesa]]

(In reply to Matej Novak [:matej] from comment #19)
> Looking great. Just wondering if there's a way to incorporate this text
> while the needle is still hovering on the left:
> 
> [OLD FIREFOX COPY]
> Seriously?
> That just isn't going to cut it. Stop browsing in the past and upgrade now!
> 
> The "Now we're talking copy" was written to play off that, so it reads a
> little weird without it.
> 
> (In reply to Steven Garrity from comment #17)
> > The footer has been added as well, though I'm not sure it really makes sense
> > on a page where the rest of the content is already dedicated to upgrading.
> 
> I kind of agree. Since it's anchored to the bottom of the window it actually
> covers the speedometer when I load the
 page. I also feel like it's
> fragmenting the message and CTA.
I do too. 
> 
> The other thing I noticed is that the buttons have inconsistent language. I
> think it should be "Upgrade Firefox" on both (the top one says "Firefox
> Upgrade").
+1

Comment 22

[mcbmoz]

Starting to notice that the copy seems to be a bit snarky instead of soft and warm - a little on the bullying side. It might be helpful to ask a few different people outside of engagement team to read it out loud to themselves and get feedback.

I love the playfulness, but without a cute fox on the page the voice is coming mostly from within a user's head and whatever they bring to the table when they view the page (a bad day at work, long commute, prior frustrations around upgrading, etc.).

Comment 23

[Matej Novak [:matej]]

I have to say I don't see how this could come across as negative, but please let me know if others are feeling the same way. This copy has also been around for 3 weeks, so I'm hesitant to change it this late in the game unless it's really going to be a problem.

Comment 24

[mcbmoz]

Consolidating changes for Steven to implement:

*remove footer
*remove "Seriously?" from copy on the old Firefox side
*"Upgrade Firefox" on single download button

Thanks all!

Comment 25

[Steven Garrity [:sgarrity]]

Changes from comment #24 are done in trunk.

Comment 26

[mcbmoz]

(In reply to Steven Garrity from comment #25)
> Changes from comment #24 are done in trunk.

Ugh, so sorry Steven, can you add copy below the speedometer that we lost with the footer.

New Firefox is faster, free, crashes less and protects your privacy more. Upgrading takes less than a minute and you won't lose your history or bookmarks. Hooray!

Comment 27

[Steven Garrity [:sgarrity]]

(In reply to mcbmoz from comment #26)
> New Firefox is faster, free, crashes less and protects your privacy more.
> Upgrading takes less than a minute and you won't lose your history or
> bookmarks. Hooray!

Done in trunk. Hooray!

Comment 28

[raymond [:retornam] (inactive)]

qa-verified-trunk http://www-dev.allizom.org/en-US/firefox/speed/

Comment 29

[James Long (:jlongster)]

Oh, missed this one yesterday. pushed in r98277