545305 - Simplify registration form to minimize info collected, speed up process.

Status: RESOLVED FIXED

(Websites Graveyard :: byob.mozilla.com, defect, P1)

Description

[Les Orchard [:lorchard]]

Dependant on UI work

Comment 1

[Kev Needham [:kev]]

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.

Comment 2

[Kev Needham [:kev]]

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.

Comment 3

[Les Orchard [:lorchard]]

Tossing in a time estimate off the top of my head.

Comment 4

[Neil Lee [:neilio]]

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/

Comment 5

[Les Orchard [:lorchard]]

Attachment: 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.

Comment 6

[Les Orchard [:lorchard]]

Attachment: Another PNG of the reg mockup

Oh wait, there was another PNG of the mockup in my .zip too, attaching that as well

Comment 7

[Chris Howse [:chowse]]

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?)

Comment 8

[Chris Howse [:chowse]]

Attachment: Latest registration page mock-up

Adding a local copy so there's no ambiguity.

Comment 9

[Chris Howse [:chowse]]

(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.

Comment 10

[Les Orchard [:lorchard]]

Taking a first crack at this and a few other CSS tweaks with r67048, should show up on staging shortly.

Comment 11

[Les Orchard [:lorchard]]

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

Comment 12

[Les Orchard [:lorchard]]

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.

Comment 13

[Kev Needham [:kev]]

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 :)

Comment 14

[Chris Howse [:chowse]]

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).

Comment 15

[Les Orchard [:lorchard]]

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