WordPress.org

Making WordPress.org

Opened 6 years ago

Closed 3 years ago

Last modified 5 months ago

#148 closed task (fixed)

Restyle/redesign the registration page

Reported by: j.conti Owned by: dd32
Milestone: Priority: high
Component: Login & Authentication Keywords:
Cc:

Description

Migrated from #wp23002.

The design of http://wordpress.org/support/register.php is rather meh. We should make it nice.

Attachments (4)

signup.png (302.9 KB) - added by melchoyce 6 years ago.
signup.psd (2.5 MB) - added by melchoyce 6 years ago.
registration-error.png (42.9 KB) - added by melchoyce 5 years ago.
148.patch (3.1 KB) - added by ocean90 3 years ago.

Change History (56)

#1 @melchoyce
6 years ago

  • Cc melchoyce added

#2 @Hanni
6 years ago

  • Cc Hanni added

#3 @melchoyce
6 years ago

I feel like these three questions use to be checkboxes:

https://i.cloudup.com/jXazRi4x6W.png

They seem kind of weird as input fields.

Last edited 6 years ago by melchoyce (previous) (diff)

#4 @coffee2code
6 years ago

@melchoyce: See #38.

#5 @coffee2code
6 years ago

In 100:

Give some padding to registration form text input fields. See #148.

#6 @samuelsidler
6 years ago

  • Keywords needs-ui added

@melchoyce
6 years ago

@melchoyce
6 years ago

#7 @melchoyce
6 years ago

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
6 years ago

  • Owner set to Otto42
  • Status changed from new to assigned

#9 @melchoyce
5 years ago

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

#10 @Otto42
5 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
5 years ago

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

#12 @samuelsidler
5 years ago

@Otto42: Any update here?

#13 @Otto42
5 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
4 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
3 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
3 years ago

#16 follow-up: @ocean90
3 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
3 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
https://cldup.com/IawwMOPr0E.png

Concept 2 (more form elements including CAPTCHA)
https://cldup.com/azY_L786XJ.png

What do you all think?

#18 follow-up: @melchoyce
3 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: @ocean90
3 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
3 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.
https://cldup.com/21DzoDp8BZ.png

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

https://cldup.com/Tj8QHheEBt.png

#21 @ocean90
3 years ago

  • Owner set to ocean90
  • Status changed from reviewing to accepted

#22 @dd32
3 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
3 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
3 years ago

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

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

#25 @dd32
3 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
3 years ago

In 4534:

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

See #148

#27 @dd32
3 years ago

In 4535:

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

See #148

#28 @dd32
3 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
3 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
3 years ago

In 4538:

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

See #148

#31 @dd32
3 years ago

In 4539:

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

See #148

#32 @dd32
3 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: @dd32
3 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
3 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
3 years ago

In 4542:

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

See #148

#36 @dd32
3 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.

My suggestion here is to change the font-size on the 'small' tag from 80% to 12px

Done in [4542], I've switched to using the <span class="small"> as IMHO <small> should respect the inherited font size.

so that it matches the font-size of the 'subscribe' checkbox text.

I'm tempted to bump the size of the subscribe box up to 13px to match the standard body size actually.. I'll leave it as-is for now though.

#37 @ocean90
3 years ago

In 4942:

Login: Fix missing user ID for user meta updates.

See #148.

#38 @ocean90
3 years ago

In 4943:

Login: Use tabs for code indentation.

See #148.

#39 @ocean90
3 years ago

In 4946:

Login: Improve display of error messages and scrolling behaviour.

See #148.

#40 @ocean90
3 years ago

In 4947:

Login: Keep the nickname meta since it's a required user meta.

See #148.

#41 @ocean90
3 years ago

In 4950:

Login: Don't let search engines index login/register pages.

See #148.

#42 @ocean90
3 years ago

In 4951:

Login: On the confirm registration page remove "New" from the password label.

At this point no password has been set yet.

See #148.

#43 @ocean90
3 years ago

In 4952:

Login: On the post-register page show the email address to give users a hint whether they entered the correct email.

See #148.

#44 @ocean90
3 years ago

In 4953:

Login: Use a fresh user object for the user fields template.

The page doesn't get reloaded when updating a field, which means the initial user object still has the old values.

See #148.

#45 @ocean90
3 years ago

In 4959:

Login: Use wp_registration_url().

See #148.

#46 @ocean90
3 years ago

In 4960:

WordPress.org SSO: Update signup URL to point to the new registration form.

See #148.

#47 @ocean90
3 years ago

In 4961:

WordPress.org SSO: Inherit the 'registration' option from the main network.

See #148.

#48 @ocean90
3 years ago

In 4963:

WordPress.org SSO: Add registration paths only when registration is open.

See #148.

#49 @karmatosed
3 years ago

  • Keywords has-ui-feedback added; ui-feedback removed

#50 @karmatosed
3 years ago

  • Keywords has-ui-feedback removed

#51 @ocean90
3 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

#52 @dd32
5 months ago

In 9082:

Login: Don't send the Pasword Changed email for new user registrations. This fixes a typo in [4470].

See #148.

Note: See TracTickets for help on using tickets.