#148 (Restyle/redesign the registration page) – Making WordPress.org

Took a stab at redesigning the page in signup.png . I went for labels on top for faster readability and reorganized some of the fields. Additionally, I switched the fonts over to Open Sans and used the primary button style we have in the header.

#8 @samuelsidler
11 years ago

Owner set to Otto42
Status changed from new to assigned

#9 @melchoyce
10 years ago

Keywords needs-patch ui-feedback added; needs-ui removed

#10 @Otto42
10 years ago

Did some work on this today, refactored the html involved. Shouldn't be hard to implement.

@melchoyce any opinions on the styling of error messages? Including the error thrown by the new style of CAPTCHA being used.

#11 @melchoyce
10 years ago

The CAPTCHA error is fine staying as-is. What do you think about something like this for general error styling?

@melchoyce
10 years ago

Attachment registration-error.png added

#12 @samuelsidler
10 years ago

@Otto42: Any update here?

#13 @Otto42
10 years ago

The changes I made back then have been lost and will need to be redone. This is mostly just HTML and CSS in the support forum theme code. But, not a priority at the moment.

#14 @SergeyBiryukov
9 years ago

Keywords needs-patch removed

Removing 'needs-patch' from components that are not open sourced yet, to help focus on tickets that actually need a patch.

#15 @ocean90
8 years ago

Keywords needs-patch added
Priority changed from trivial to high

Related: #1673

Looks like it's time to include the registration form on login.wordpress.org?

@ocean90
8 years ago

Attachment 148.patch added

#16 follow-up: ↓ 17 @ocean90
8 years ago

Component changed from Support Forums to Login & Authentication
Owner Otto42 deleted
Status changed from assigned to reviewing
Summary changed from Restyle/redesign the registration page of support to Restyle/redesign the registration page

@melchoyce, @hugobaeta, @mapk: Do you have any ideas on how the registration form could be integrated into the design of login.wordpress.org? #1524 has a few mockups but most/all of them are using one narrow column which I think doesn't work here: https://cloudup.com/c6IgU4vF_SR. Should this maybe split up into two steps?

#17 in reply to: ↑ 16 @mapk
8 years ago

Replying to ocean90:

@melchoyce, @hugobaeta, @mapk: Do you have any ideas on how the registration form could be integrated into the design of login.wordpress.org? #1524 has a few mockups but most/all of them are using one narrow column which I think doesn't work here: https://cloudup.com/c6IgU4vF_SR. Should this maybe split up into two steps?

I still like the concept keeping a narrow column similar to the login and think it works well. Here's a more refined mockup. The first is the simple form which is currently live. The second includes some of @melchoyce's revisions from above.

We could split them into two steps, but I don't think there's a ridiculous amount of form elements that would necessitate it. The form is still simple enough to consume on one page.

Concept 1

Concept 2 (more form elements including CAPTCHA)

What do you all think?

#18 follow-up: ↓ 19 @melchoyce
8 years ago

Ahaha this ticket is so old.

Looks good, stylistically. If we redirected people to their profiles after registration (not sure what we do now) we could prompt them to fill in more information and keep the initial form a little shorter? I agree it's pretty long.

#19 in reply to: ↑ 18 ; follow-up: ↓ 20 @ocean90
8 years ago

Replying to melchoyce:

If we redirected people to their profiles after registration (not sure what we do now) we could prompt them to fill in more information and keep the initial form a little shorter? I agree it's pretty long.

That might be possible. I created a few screenshots of the current registration flow (which is so bad in many points): https://cloudup.com/c_3-CLuIVzL

@mapk Concept 2 seems to be the way to go, maybe without the profile information section. How should we display error messages? That's what WordPress does: https://cloudup.com/cSPVngF3NkH

#20 in reply to: ↑ 19 @mapk
8 years ago

Replying to ocean90:

Replying to melchoyce:

If we redirected people to their profiles after registration (not sure what we do now) we could prompt them to fill in more information and keep the initial form a little shorter? I agree it's pretty long.

That might be possible. I created a few screenshots of the current registration flow (which is so bad in many points): https://cloudup.com/c_3-CLuIVzL

I like this idea of cutting it down and pushing the user to their profile page. Here's the form without the Profile info.

@mapk Concept 2 seems to be the way to go, maybe without the profile information section. How should we display error messages? That's what WordPress does: https://cloudup.com/cSPVngF3NkH

Keeping the same error pattern is good. Here is an idea incorporating @melchoyce's error example from above. It's just a thicker border and in red. I understand that some users might be colorblind, but the weight of the border and error msg above should be enough to indicate the problem and where it is. I wouldn't mind adding an error icon next to the input field, but am unsure the structure of the markup allows for that (it may not even allow the border change as it is).

If we do add in an input change on error, we should make sure that pattern gets carried over to the login and forgot password pages as well.

#21 @ocean90
8 years ago

Owner set to ocean90
Status changed from reviewing to accepted

#22 @dd32
8 years ago

Keywords needs-patch removed
Owner changed from ocean90 to dd32
Status changed from accepted to assigned

Just noting I have most of this operationable, just need a chance to write a few of our spam blocking functions and get a chance to push live.

#23 @dd32
8 years ago

In 4470:

Login.WordPress.org: Allow user registration through login.wordpress.org

This change does many things, including, but not limited to:

Making all the routes have proper templates, rather than being template-parts
Removing all the extra WordPress functionalities and outputs
Adding the Registration pages and routes
Updating SSO to handle routes with URL params
Adding rest endpoints for username/email validation

See #148, #1524

#24 @dd32
8 years ago

Just noting this feedback from @mapk here:
https://wordpress.slack.com/archives/meta/p1481760263001197

Get the width on the Register page to match the login page _as closely as possible_
Vertically center the Register box.
Tighten up the line-height on the text below each input field.
The ‘subscribe’ text shouldn’t drop below the checkbox.

#25 @dd32
8 years ago

In 4533:

Login: Remove the partial reminents of oauth and l10n/rtl styles that don't actually apply to the current theme.

See #148

#26 @dd32
8 years ago

In 4534:

Login: Move saving of extra profile fields from the template to a function.

See #148

#27 @dd32
8 years ago

In 4535:

Login: Clear any error messages upon clearing the erroring field.

See #148

#28 @dd32
8 years ago

In 4536:

Login: Make the REST API endpoints regex more greedy, fixes a case where the incorrect response could be supplied if a field contained /.

See #148

#29 @dd32
8 years ago

In 4537:

Login: Make the form widths between Login and Registration the same, this makes the fields the same width as the Recaptcha box.

See #148

#30 @dd32
8 years ago

In 4538:

Login: Ensure the text doesn't wrap around the mailinglist checkbox on the registration screen.

See #148

#31 @dd32
8 years ago

In 4539:

Login: Better styling for the "Please check your email" notice upon registration.

See #148

#32 @dd32
8 years ago

In 4540:

Login: Disable flexbox alignments for the registration pages and login on smaller screens, as it cuts off the top of the content.

See #148

#33 follow-up: ↓ 34 @dd32
8 years ago

Following up on 24:

Get the width on the Register page to match the login page _as closely as possible_

Since we're constrained by the recaptcha width, I've simply altered everything to that width. Registration is slightly narrower, login is slightly wider. Looks good to me.

Vertically center the Register box.

I don't think these actually need to be vertically centered, mostly due to the fact that they're near, or overflowing most screen lengths (Some tablets excepted I expect).

After quite some battling with flexbox, I ran away screaming :( @mapk please feel free to revert [4540] and replace it with something else. I honestly couldn't find a combination of things which allowed the flexbox to work as intended.

The major issue I ran into constantly was <h1> and #nav being within #login in the DOM but displayed outside of it, It seems that these might need to be moved up a layer and that div then being made a flex container in addition, but I haven't been able to find a combination that works.
Moving the elements outside of the #login dom also didn't work too well due to the styles and flexbox being worked around it..

Tighten up the line-height on the text below each input field.

I wasn't able to get the line-height/spacing any smaller, not exactly sure why. Any ideas @mapk?

The ‘subscribe’ text shouldn’t drop below the checkbox.

Done! Although I could've sworn that the checkboxes were physically larger prior to the change (as seen in the screenshot in Slack: https://wordpress.slack.com/archives/meta/p1481760263001197), I can't reproduce the larger size anymore. I've tried reverting it back to a week ago and still couldn't see the larger size..
@mapk Can you see if you can bump the size up a bit? I wasn't able to find a CSS combination that actually looked any good.

#34 in reply to: ↑ 33 @mapk
8 years ago

Replying to dd32:

Since we're constrained by the recaptcha width, I've simply altered everything to that width. Registration is slightly narrower, login is slightly wider. Looks good to me.

That works.

Vertically center the Register box.

I don't think these actually need to be vertically centered, mostly due to the fact that they're near, or overflowing most screen lengths (Some tablets excepted I expect).

If we can't get them to vertically center, then they should be positioned the same space from the top. Can you change the margin-top on the body tag to 10em instead of a pixel height?

Tighten up the line-height on the text below each input field.

I wasn't able to get the line-height/spacing any smaller, not exactly sure why. Any ideas @mapk?

My suggestion here is to change the font-size on the 'small' tag from 80% to 12px so that it matches the font-size of the 'subscribe' checkbox text.

The ‘subscribe’ text shouldn’t drop below the checkbox.

Done! Although I could've sworn that the checkboxes were physically larger prior to the change (as seen in the screenshot in Slack: https://wordpress.slack.com/archives/meta/p1481760263001197), I can't reproduce the larger size anymore. I've tried reverting it back to a week ago and still couldn't see the larger size..
@mapk Can you see if you can bump the size up a bit? I wasn't able to find a CSS combination that actually looked any good.

Don't worry about this. It was showing a bigger checkbox because those screenshots were taken on a mobile device. The mobile version displays a bigger checkbox for easier touch.

#35 @dd32
8 years ago

In 4542:

Login: Use the .small class in the registration form for more consistent sizing.

See #148

#36 @dd32
8 years ago

If we can't get them to vertically center, then they should be positioned the same space from the top. Can you change the margin-top on the body tag to 10em instead of a pixel height?

100px looks better IMHO on desktop and mobile, matches what was already used in the small-browser fallbacks. Feel free to experiment with it and find something you like though.