Sign Up: Polish form spacing

[danhauk]

This PR addresses some concerns with the signup screen with social buttons included. Feedback from @ranh:

I think it's mostly that there's no balance between the "old" and new parts. The form is very spacious with tons of whitespace, the social options are packed together very tightly

The main reason it was so spacious was because we had the form validation always in the markup with a min-height. While this did help with the UI jumping a bit with validation errors, it's not essential. Especially because the UI still jumped with languages other than English where the error was longer. Also, the form fields felt more disconnected with so much whitespace between them.

Before

After

Testing

1. Run git checkout update/sign-up-screen-polish and start your server, or open a live branch.
2. Visit the social signup screen at /start/social/user-social.
3. Assert the screen looks like the screenshot above.
4. Try signing up, try to break it.
5. Visit the regular signup flow at /start.
6. Assert it looks and works in the same way.

Review

• Code
• Product

[matticbot]

Test live: https://calypso.live/?branch=update/sign-up-screen-polish

[ranh]

tl;dr: mockup of all the changes suggested below:

---

Re. the copy before the social buttons, we had a few different variations of this along the way, and there's a bit of discussion about some of them in #13983.

I think this is the best of what we've had so far:

Or connect your existing profile to get started faster:

I like this because it's short, straightforward, and informative. I think it will be a good basis for further testing and optimization later.

---

There was also discussion about:

We'll never post without your permission

Try to forget how many times you read this sentence before, and try reading it with fresh eyes. To me, it seems alarmist and defensive. It's like we found the worst thing users might think about us, and now we're making sure every user thinks it every time they see this screen.

Why even mention it? And why mention it so prominently?

Since it's clearly meant to answer a very specific question, including this line means we're betting that most users are going to have this question in mind already. And placing this above the buttons is only necessary if we think that most users are unlikely to use the social options at all if they don't read this first.

I don't think either of those assumptions are true. Perhaps they were true at some point, but now I think this pattern is still around out of habit as much as anything else.

I suggest we launch without this line, and potentially test adding this in the future.

---

Something I've been wondering about is the difference between "Create My Account" and "Continue with Google/Facebook".

This difference suggests that there's some distinction between the first button and the other two. We should be presenting them as equivalent.

The specific wording also suggests that the social signup flows are going to be longer or more complicated than the email signup flow. "Create account" vs. "continue" suggests that the first one goes straight to an end result whereas the second one is going to be a process. Which is the opposite of what the other copy on the screen says.

How about just "Continue" for the main button instead of "Create My Account"?

This makes the choice clearer: you're not choosing between "creating an account" or "continuing" (you get both either way). You're only choosing who you will continue with.

---

Let's also update the TOS copy here to the revised language from legal:

By creating an account via any of the options below, you agree to our Terms of Service.

Note that if we change this screen (or any other log in or sign up screen where we show the tos), we should keep legal in the loop to make sure the tos and privacy policy are up to date.

[scruffian]

These changes look good. It would be good to remove the behaviour which validates the form when any field is blurred. I had a look into this, but it's not an easy fix.

[danhauk]

I just pushed a commit to show different TOS copy based on whether or not the form has social signup. Without this, the regular signup form starting at /start had copy that included "via any of the options below".

I'm thinking the code I used there could probably be done in a better, more optimal way so as not to repeat the entire block. cc @scruffian

[scruffian]

@danhauk I updated your commit to remove some of the code duplication.

[scruffian]

LGTM 👍