Dependant on UI work
Per discussions with neilio, we'd like to completely revamp registration and pare down the info requirements so it's not as time-consuming. Proposed changes to the registration page is as follows: - Limit information collected for the registration to: - username - email address - first name - last name - captcha - Make all fields mandatory - Hide help text as a default - Make all repack names free-form as part of the customization process (e.g. no forced use of corporate names) Metdata fields will not be removed from the DB and/or profile page. If there is a request for more info from the admins, or if the user wishes to supply more info, they can do so through the profile. A nice-to-have for this will be an ajax lookup to see if a username is available.
OS: Mac OS X → All
Hardware: x86 → All
Additional nice to have is a "?" or other help element per field that when hovered or clicked on, would display help text, rather than it being displayed on the page.
Tossing in a time estimate off the top of my head.
Whiteboard: 04 hrs
I've been messing around with this and doing some research. This looks like it might be an interesting way to do the form: http://www.lukew.com/ff/entry.asp?1007 Another example is on the moof.com homepage: http://moof.com/
Created attachment 440507 [details] New registration page Did a quick conversion of neil's PSD to PNG, attaching to this bug. Hoping to start taking a crack at it soon.
Assignee: neil → lorchard
Status: NEW → ASSIGNED
Created attachment 440510 [details] Another PNG of the reg mockup Oh wait, there was another PNG of the mockup in my .zip too, attaching that as well
Updated mock-ups: Wireframe: http://people.mozilla.com/~chowse/drop/byob/v1/registration.png Originals (Omnigraffle): http://people.mozilla.com/~chowse/drop/byob/v1/00_byob.graffle.zip Here's what's changed: * Updated the messaging w/ Slater's comments, along with a few of my own. I've excluded the help text for the sake of brevity. * Shuffled the order of some of the fields. Namely, I want the questions to progress from basic recall (name, email) to synthesis (username, password). * Added some hints and placeholders to a few of the fields. * Help text appears on the right, and is hidden until the associated form control gains focus. * Added an (optional) password strength indicator. * I'd recommend using the 'white' or 'clean' ReCAPTCHA themes instead of the default. The bright red and yellow boxes makes it way too conspicuous. * I removed the mad lib-style confirmation at the bottom. I really like the idea, but if we use it, it should be for the form entry itself. I'm not convinced that simply having it for confirmation, when every field is required and is pretty unambiguous nets us much benefit. (On the other hand, I've seen plenty of evidence that it is useful when forms are long, have complex fields, and many optional elements.) * A few minor tweaks to the page heading. (Perhaps this should be a separate bug?)
Created attachment 443741 [details] Latest registration page mock-up Adding a local copy so there's no ambiguity.
(Copied from bug #526701) For some of the style changes, I'm preparing a CSS style guide here: http://people.mozilla.com/~chowse/drop/byob/style/ Attempting to use CSS3 w/ graceful degradation wherever possible.
Taking a first crack at this and a few other CSS tweaks with r67048, should show up on staging shortly.
Not really the focus of this bug, but this seems as good a place as any: I've just checked in r67078 which implements more of the CSS style guide from comment #9
I'm going to say this is closed, since it seems to be working on staging now. Feel free to reopen or file new bugs if there are problems.
Status: ASSIGNED → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → FIXED
Looks good. Only thing I noticed was that using an existing email address creates an error which isn't intuitive. I'll file a bug :)
This looks great! If you'll forgive a few styling nits (though some may just not be ready yet): * The text under the heading ("You're just a few moments...") doesn't need to be a smaller size. * The First Name and Last Name fields should have placeholder text. * The lines between each section should be dotted, not dashed (sorry, this was a shortcoming of OmniGraffle). * The hint text below certain fields (e.g. "This is the name you will use...") should be a smaller font (I'd recommend 85%, or 11px). If it's possible to reduce the top margin of the text, too, that would be great. * On my machine, the help text appears too far to the right, rather than flush left w/ the inputs. * While the 'clean' ReCAPTCHA is an improvement, I think the 'white' theme might be better, since it actually includes instructions (i.e. type these words). * I'd add a bit more vertical space above the Submit button and the page footer (2 em each). * The focus effect on text fields seems to have the opposite effect, of making the field seem to fade into the background. I'd recommend something slightly different (e.g. background: #fff; -moz-box-shadow: 0 0 3px #004463).
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Just checked in r67154, should appear on staging in 10 min or so (In reply to comment #14) > This looks great! If you'll forgive a few styling nits (though some may just > not be ready yet): > > * The text under the heading ("You're just a few moments...") doesn't need to > be a smaller size. Done. Looks like a lot of these things are probably leftovers from the previous CSS styles still mixed in. Trying to merge in changes without throwing everything out > * The First Name and Last Name fields should have placeholder text. Fixed. > * The lines between each section should be dotted, not dashed (sorry, this was > a shortcoming of OmniGraffle). Done. > * The hint text below certain fields (e.g. "This is the name you will use...") > should be a smaller font (I'd recommend 85%, or 11px). If it's possible to > reduce the top margin of the text, too, that would be great. Done. > * On my machine, the help text appears too far to the right, rather than > flush left w/ the inputs. Switched to absolute pixel sizes rather than ex sizing, which got messy with the differing font sizes of field label versus help notes. > * While the 'clean' ReCAPTCHA is an improvement, I think the 'white' theme > might be better, since it actually includes instructions (i.e. type these > words). Switched to 'white' theme. > * I'd add a bit more vertical space above the Submit button and the page > footer (2 em each). The footer is stuck to the bottom of the window, so the spacing is variable. But, I threw in a 2em padding to the bottom of the form if that helps. > * The focus effect on text fields seems to have the opposite effect, of making > the field seem to fade into the background. I'd recommend something slightly > different (e.g. background: #fff; -moz-box-shadow: 0 0 3px #004463). Trying this style on :focus for text fields
Status: REOPENED → RESOLVED
Last Resolved: 9 years ago → 8 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.