Not obvious that you need to scroll down during signup

[tkrunning (Thomas K. Running)]

I received some very valid feedback today from a user. I’m not sure if there’s already a good way of dealing with this issue or not. If not, I’d say it’s something worth thinking about how to improve.

The user completed the signup form as seen here:

But after all visible fields were completed, it wasn’t immediately clear that the user would have to scroll down to find the final required field/checkbox:

Sure, there’s some slight fading of the content, but that’s not very obvious for most people.

I’m not sure what the best approach would be to improve this—perhaps a visual hint that scrolling is needed? Or simply expanding the signup modal so all fields are visible?

And is there something I can do immediately that would improve the signup flow for my users?

Looking forward to hearing your thoughts!

EDIT: This seems related to @sam’s post a couple years ago: You have not completed all user fields UX on signup should be improved

[codinghorror (Jeff Atwood)]

It really depends on the operating system; on some OSes the scrollbars are super minimized, specifically OSX.

I do agree with the underlying complaint, but you have to understand that it’s contextual to the browser and OS as well.

[awesomerobot (Kris)]

You can make a minor CSS adjustment to allow the modal to get taller on desktop devices, this should do it:

.d-modal.create-account .login-form form {
  max-height: 70vh
}

At the moment our default max-height is more restrictive, I can probably allow it to get a little taller by default… but there’s always going to be a point where the scroll cut-off isn’t obvious for someone with X number custom fields added. I really hate that macOS does this hidden scrollbar behavior.

[tkrunning (Thomas K. Running)]

Thanks @awesomerobot, I’ll give that a try! (I assume you meant max-height: 70vh; which seems to work perfectly!)

And I do appreciate that this primarily an issue on MacOS, @codinghorror. However, 1/3 of my desktop users are on MacOS, so it’s not an insignificant part of my audience.

Thanks again both of you!

[awesomerobot (Kris)]

Thanks @awesomerobot, I’ll give that a try! (I assume you meant max-height: 70vh; which seems to work perfectly!)

Oops, yes exactly! Fixed it above.

[evantill (Eric Vantillard)]

Same problem here. Required custom fields are not visibles and users don’t understand why they can not click on Create new account :

[codinghorror (Jeff Atwood)]

I recommend overriding CSS on your instance to make it clearer – as stated above, many operating systems suppress scrollbars heavily so I guess I’ll just quote myself…

@codinghorror

It really depends on the operating system; on some OSes the scrollbars are super minimized, specifically OSX.

I do agree with the underlying complaint, but you have to understand that it’s contextual to the browser and OS as well.

[evantill (Eric Vantillard)]

Can we disable scrollbars on the signup box using css and let the user scroll ?

[evantill (Eric Vantillard)]

Thank you @awesomerobot. It’s better with this customization.

[evantill (Eric Vantillard)]

Applying

.d-modal.create-account .login-form form {
  max-height: 70vh
}

I have a strange side effect on an iphone 6 :

[awesomerobot (Kris)]

oh that’s definitely strange, I can’t seem to reproduce that… do you know which version of iOS it is?

[evantill (Eric Vantillard)]

• iphone 6 plus
• ios 12.4.5

Same result using safari and firefox.

[awesomerobot (Kris)]

This has come up again here: Not obvious that sign up box scrolls

Solving this is tricky because most touch devices hide scrollbars by default, our signup form is in a modal, the signup form length can vary if additional fields are added, and browser heights vary.

Outside of the extra-large change of moving the signup form to a full page instead of a modal… I think there are a couple possible solutions and one (or both) could probably improve things:

• In modern browsers we can force scrollbar appearance with CSS. This means it will always be visible on touch devices (so scroll is more obvious). But this also means we’re overriding the default OS scrollbar styles on the signup modal, so it may look out of place.

• We can change the behavior of the “Create New Account” button. Instead of disabling it until the form is complete, we can allow people to click it, and then scroll them to the first incomplete input.

Forcing scrollbar appearance should be simple to try out first, @codinghorror/@sam do you have any feelings about it?

[sam (Sam Saffron)]

@awesomerobot

We can change the behavior of the “Create New Account” button. Instead of disabling it until the form is complete, we can allow people to click it, and then scroll them to the first incomplete input.

I really like this solution best, @vinothkannans can you take it?

We had the same issue on the composer for years and changing it to always clickable erased a large amount of issues, the bouncy red animation really tied stuff up on the composer.

[vinothkannans (Vinoth Kannan)]

@awesomerobot

Instead of disabling it until the form is complete, we can allow people to click it, and then scroll them to the first incomplete input.

It’s done in the below open PR

UX: don't disable "create account" button & display error message for required fields.

[awesomerobot (Kris)]

This looks good, I think it should be a lot more obvious now!

I added an additional change that removed a margin and uses “enter” instead of “supply” in the required messages (we use “enter” in the validation messages, so I copied that).

[cybe]

@vinothkannans

It’s done in the below open PR

Thanks. Although I don’t have the skills (or courage) to apply this patch. Hoping for this feature to appear in future updates ASAP.

I believe the input text boxt should get highlighted red to indicate what is missing.

BTW, I just had a second user fail to create an account due to this problem…

[vinothkannans (Vinoth Kannan)]

The PR is now merged.