Closed Bug 620554 Opened 15 years ago Closed 14 years ago

Modify Newsletter Signup on First Run Page

Categories

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

Product:
www.mozilla.org
Component:
General
Type:
defect

Tracking

(Not tracked)

Status:
VERIFIED FIXED

People

(Reporter: lforrest, Assigned: sgarrity)

References

(
URL
)

Details

Attachments

(3 files)

EFF newsletter signup box - example
339.90 KB, image/png
Details
Email Sub - 1. Show email field upon page load
981.09 KB, image/png
Details
Email Sub 2 - Populate other info
1.06 MB, image/png
Details
We would like to emphasize the newsletter more on this First Run page since right now it's below the fold and not a main CTA. We want to work within the existing new design and simply move the email module into the main content area and: -Decrease the amount of white space on the top of the page -Remove bottom social media module -Move newsletter signup, and the consequential UI filling out of newsletter form fields into the main content area as well. Assigning this bug to me as Lee works on the mockup to help display this.
Target Milestone: --- → 1.0
Here's Lee's mockup: http://intothefuzz.com/leetom/Mozilla.com/JPG/firstrun_02.jpg I think the copy surrounding the sign up could be a lot better at connecting the brand welcome message to the sign up CTA. Assigning over to John for some finessing!
Assignee: lforrest → jslater
How about this very slightly revised text (to replace "Now that you're running..."): P.S. Now that you're using Firefox, let's stay in touch! Were you looking for more changes than that? If so, let me know. Also, is the "Get Monthly News" CTA something we can change, or has that been conclusively proven to be the best phrase? I don't love the way it sounds, personally. Lastly, this isn't the main point of this bug, but we can probably remove or shorten the text above the three icons on the right. What do you think?
thanks guys for your help with all this so far. When I spoke with cbeard - he had suggested something like this, though its pretty long... "Sign up and find out how to get more from your Firefox" We had also spoke about showing a sign up box field, which when clicked on would open to the newsletter sign up page: http://www.mozilla.com/en-US/newsletter/
(In reply to comment #2) >If so, let me know. Also, is the > "Get Monthly News" CTA something we can change, or has that been conclusively > proven to be the best phrase? I don't love the way it sounds, personally. I don't think this was the winner of the last test, but Jane, correct me if I'm wrong - they were all very close. Here however, I'm more concerned that the copy fits in with the Welcome message. > Lastly, this isn't the main point of this bug, but we can probably remove or > shorten the text above the three icons on the right. What do you think? I'd love to do that if it's possible, since we're touching this page anyways.
(In reply to comment #4) > We had also spoke about showing a sign up box field, which when clicked on > would open to the newsletter sign up page: > http://www.mozilla.com/en-US/newsletter/ I like the concept of showing the sign up box field upon page load since it makes the CTA obvious. We've built this page to contain all the sign up functionality so I propose keeping what we've built, but adding the sign up box. When someone starts typing in it we can then dropdown the details (html/text, local, privacy policy). Keeping them on the same page will warrant a higher success rate.
Can we meet about this page early next week? I think there are enough open points in comments #4-6 that a bit of face-to-face discussion is warranted. Jane, re: showing the sign up field, there are still some unanswered questions for me as to how the functionality of that would actually work (given that we'd still have to expose a bunch of other info, like the legal text, etc). Did you ever find any examples of how other sites have done this? If there's someone else who does it particularly well I'd rather follow their lead rather than spin our wheels trying to figure out the best way.
Yes, happy to chat next week about this. Here is one example (EFF newsletter signup box) where they ask for newsletter signup all on the page, just one example.
That's helpful, thanks Eve. Can you set up a meeting for early next week? (Fwiw, I'm traveling on Monday and will likely wfh on Tuesday but could certainly meet if you can find an open time. Alternately, Wednesday is good if that's not too late for you.)
Wednesday is also good as its my first day back to Mt View - thanks
Attaching a mockup of what I was envisioning. First step: show the email field. Second Step: Once visitor puts cursor in the box to begin typing the rest would populate, just like our current interaction (here's an example when you click "Get Monthly News": http://nova.stage.mozilla.com/en-US/firefox/3.6/firstrun/). This would allow us to show signup details like country, format, privacy policy. If we can do something as simple as EFF here and show only two fields then that would be great too.
I presume I'm waiting on further confirmation before beginning implementation. Let me know if not.
(In reply to comment #15) > I presume I'm waiting on further confirmation before beginning implementation. > Let me know if not. Correct - let us iron out more details before implementation. We should have a meeting tomorrow to review, and then we'll update this bug with the results. Thanks!
Priority: -- → P1
Target Milestone: 1.0 → 1.1
Hey Laura - Here are states of the First Run page: - default (before user starts typing email address in field) http://intothefuzz.com/leetom/Mozilla.com/JPG/firstrun_03a.jpg - drop down state (once user starts typing in field) http://intothefuzz.com/leetom/Mozilla.com/JPG/firstrun_03b.jpg
Looks good to me. One thing that we discussed yesterday that's missing is an element that would indicate an action *after* you enter your email. Something that makes it look clickable, or indicates there's a next step after entering the email address. Could be a little arrow or that >> symbol or something like that. Eve, Jane - thoughts?
Looks beautiful. Eve
Sorry I forgot to add this, too: I agree with John, it would be great to add a little symbol (something like a small circle with a little right pointing triangle in it), next to the empty email address box when they first see it, to symbolize a next step is coming and that they are not quite done yet. Thank you, Eve
A button makes sense to me if the user needs to click it drop the rest of the form down. If, once they start typing their email address, the rest of the form is visible - will it seem awkward to have positioned a button that they actually never had to interact with? I think I'm also concerned with the consistency of visual language that we introduce. ie: the treatment of the Country select pulldown employs the 2 arrows denoting it's a pulldown. ">>" is normally used to denote a hyperlink that will take you somewhere else etc. I don't have a clear solution for this yet.. but I thought I should air my thoughts:)
Good thoughts. For what it's worth, my assumption was that you wouldn't actually see the expanded pull-down until you actually click on whatever the thing is (vs it appearing when you start typing). Steven, any input here you'd like to share?
Just my two cent beyond the discussion on how the remaining fields drop down -- looks awesome. Huge thanks.
Having two steps (1. enter email, then click button, 2. fill in rest of form, then submit) seems awkward to me. Do share the concern, though, that in the latest
Oops, submitted before I was done my comment... anyhow: ... I Do share the concern, though, that in the latest mockups (firstrun_03a.jpg, firstrun_03b.jpg), there's a bit of cognitive overhead in figuring out that "something" will happen when select/start-typing in the email field. I might look at the initial state of this form and wonder how I will submit it. That said, maybe people would just assume they'd have to hit "Enter". Testing would be required to really determine how people would react to it. It does seem a bit like we're inventing a new interaction style for what was a relatively simple form. It's probably beyond the scope of this bug, but it would be great to be able to eliminate the HTML/text option - is that really necessary? Could it be an option you set after signup? Unless the ability to get a text-only email would encourage some reluctant potential recipients. Even so, I'd be surprised it was worth the added complexity. Also, and this is one for the lawyers, but is check-box required for the Privacy Policy? Would it suffice to say something like "By signing-up you agree to the Mozilla Privacy Policy". I wonder, too, if we should put the "We will only send you..." line below the email input, rather than at the base of the form. It seems a bit late at that point, especially if that part of the form is initially hidden. With those simplifications, showing the entire form by default might be more feasible.
(In reply to comment #25) > It does seem a bit like we're inventing a new interaction style for what was a > relatively simple form. Well put. I agree and think this is why we're getting stuck. I want to avoid reinventing the wheel and most of all, presenting people with something they're not used to and that may feel weird to interact with. Unless we can think of a UI design that will better fit this sign up flow I think we need to either: 1. Show a more traditional newsletter promo and then expose the sign up field, and other required fields, upon click (on same page). 2. Greatly scale down the sign up elements so exposing the total sign up form upon page load won't be overwhelming. See considerations below. I think this is a strong possibility. > It's probably beyond the scope of this bug, but it would be great to be able to > eliminate the HTML/text option - is that really necessary? Could it be an > option you set after signup? Unless the ability to get a text-only email would > encourage some reluctant potential recipients. Even so, I'd be surprised it was > worth the added complexity. Based on what Eve has told me, presenting this option at the beginning is necessary. > Also, and this is one for the lawyers, but is check-box required for the > Privacy Policy? Would it suffice to say something like "By signing-up you agree > to the Mozilla Privacy Policy". Eve/Jane - is this possible? > I wonder, too, if we should put the "We will only send you..." line below the > email input, rather than at the base of the form. It seems a bit late at that > point, especially if that part of the form is initially hidden. It seems reasonable to consider removing this line all-together. > With those simplifications, showing the entire form by default might be more > feasible. Agree. Jane/Eve - what do you think?
I talked to John about this and he'd rather not have all the form fields populate upon page load, even if minimized. We came up with another UI idea that should work and doesn't involve anything too complicated. I'll work with Lee to get that fleshed out and we'll post mockups here.
Have a look at these mockups - Lee added a treatment that aims to show people there's a next step, while not looking like the final "Sign me up!" button used in step 2. I like how it turned out. The user may be a bit surprised that there are more boxes to check but since it's a fairly simple two boxes and a button click, this doesn't feel too bait-and-switchey to me. Check it out! Step 1: http://intothefuzz.com/leetom/Mozilla.com/JPG/firstrun_04a.jpg Step 2, Shown after a user clicks on the button (not upon typing): http://intothefuzz.com/leetom/Mozilla.com/JPG/firstrun_04b.jpg Steven: Do you think this absolves the cognitive overhead and makes for a nice experience? Eve/Jane/Winston: This work for you?
I like this.
Looks awesome to me. Big thanks.
Looks wonderful! Eve
If everyone has signed off, you can find PSD here: http://intothefuzz.com/leetom/Mozilla.com/PSD/firstrun_04.psd
Looks good. To clarify, the additional form fields are to appear when the user clicks the down-arrow button, not just when they start typing in the email input? We may have to capture the Enter key to have it open the additional form fields rather than submit the form prematurely. The Tab key might also be worth capturing to trigger the additional fields - though having Tab switch focus to the down-arrow button might be ok.
(In reply to comment #33) > Looks good. To clarify, the additional form fields are to appear when the user > clicks the down-arrow button, not just when they start typing in the email > input? Yes > We may have to capture the Enter key to have it open the additional form fields > rather than submit the form prematurely. Agree The Tab key might also be worth > capturing to trigger the additional fields - though having Tab switch focus to > the down-arrow button might be ok.
Assignee: jslater → steven
Looks fantastic. Do we have any flexibility when it comes to testing different variations on buttons? Color, size, etc - or are we restricted by brand guidelines?
(In reply to comment #35) > Looks fantastic. Do we have any flexibility when it comes to testing different > variations on buttons? Color, size, etc - or are we restricted by brand > guidelines? Yes - we have the ability to test nearly anything that makes sense and fits our graphic guidelines. Lets push these changes first, then consider possible tests in future bugs/phases.
Committed implementation in r81143.
Merged to stage in r81205. Please not that this merge affects three pages: https://www.authstage.mozilla.com/en-US/firefox/3.6/firstrun/ https://www.authstage.mozilla.com/en-US/firefox/3.6/whatsnew/ https://www.authstage.mozilla.com/en-US/firefox/connect/ (the whatsnew page is tracked in Bug 623997)
Status: NEW → RESOLVED
Closed: 14 years ago
Keywords: qawanted
Resolution: --- → FIXED
(In reply to comment #39) It doesn't look like the white space was removed from the top of this page, like in the mockup and from Comment #0 at the very top of this bug (easy to miss). Reopening bug. Please: (comment #0) "-Decrease the amount of white space on the top of the page"
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
(In reply to comment #40) > It doesn't look like the white space was removed from the top of this page, > like in the mockup and from Comment #0 at the very top of this bug (easy to > miss). Reopening bug. Fixed in trunk in r81263. Merged to stage in r81264.
Status: REOPENED → RESOLVED
Closed: 14 years ago → 14 years ago
Keywords: qawanted
Resolution: --- → FIXED
pushed to production r81578 | jlong@mozilla.com | 2011-01-25 14:08:57 -0500 (Tue, 25 Jan 2011) | 1 line second commit pulls in r81264 from staging: r81581 | jlong@mozilla.com | 2011-01-25 14:19:55 -0500 (Tue, 25 Jan 2011) | 1 line
mozilla.com/en-US/firefox/3.6/firstrun/ verified fixed
Status: RESOLVED → VERIFIED
Component: www.mozilla.org/firefox → www.mozilla.org
Component: www.mozilla.org → General
Product: Websites → www.mozilla.org
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: