Not obvious that you need to scroll down during signup

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! :slight_smile:

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

1개의 좋아요

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.

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.

6개의 좋아요

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!

Oops, yes exactly! Fixed it above.

6개의 좋아요

여기서도 같은 문제가 발생합니다. 필수 사용자 지정 필드가 표시되지 않고, 사용자가 Create new account를 클릭할 수 없는 이유를 이해하지 못합니다:

위에서 언급했듯이, 많은 운영 체제에서 스크롤바가 크게 억제되므로 인스턴스에서 CSS를 오버라이드하여 명확하게 만드는 것을 권장합니다. 그래서 그냥 제 말을 인용하겠습니다.

2개의 좋아요

CSS를 사용하여 가입 창에서 스크롤바를 비활성화하고 사용자가 스크롤할 수 있게 할 수 있나요?

감사합니다 @awesomerobot. 이렇게 커스터마이징하니 더 좋습니다.

1개의 좋아요

적용

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

iPhone 6에서 이상한 부작용이 발생합니다:

오, 그건 확실히 이상하네요. 제가 재현을 못 하겠는데… 어떤 버전의 iOS인지 알고 계신가요?

2개의 좋아요
  • iPhone 6 Plus
  • iOS 12.4.5

Safari와 Firefox를 사용해도 동일한 결과가 나타납니다.

이 문제는 여기서 다시 언급되었습니다: https://meta.discourse.org/t/not-obvious-that-sign-up-box-scrolls/149486

이 문제를 해결하는 것은 까다로운데, 대부분의 터치 디바이스는 기본적으로 스크롤바를 숨기며, 가입 양식이 모달 안에 있고, 추가 필드가 있으면 가입 양식의 길이가 달라질 수 있으며, 브라우저 높이도 다양하기 때문입니다.

가입 양식을 모달 대신 전체 페이지로 이동하는 대규모 변경 사항 외에… 몇 가지 가능한 해결책이 있으며, 그중 하나(또는 둘 다)가 상황을 개선할 수 있을 것입니다:

  • 현대 브라우저에서는 CSS로 스크롤바 표시를 강제할 수 있습니다. 이는 터치 디바이스에서 항상 스크롤바가 표시되도록 하므로(스크롤이 더 명확해짐) 유용하지만, 가입 모달의 기본 OS 스크롤바 스타일을 오버라이드하게 되어 어색해 보일 수도 있습니다.

  • “계정 만들기” 버튼의 동작을 변경할 수 있습니다. 양식이 완료될 때까지 비활성화하는 대신, 사용자가 클릭할 수 있도록 허용하고, 첫 번째 미완성 입력 필드로 스크롤을 이동시키는 방식입니다.

스크롤바 표시를 강제하는 것은 먼저 시도해 보기 쉬울 것입니다. @codinghorror/@sam, 이에 대해 의견이 있으신가요?

6개의 좋아요

저는 이 솔루션이 가장 마음에 듭니다. @vinothkannans 이 작업을 맡아주실 수 있을까요?

우리는 수년 동안 작성기(composer)에서 동일한 문제를 겪어왔습니다. 버튼을 항상 클릭 가능하도록 변경한 후 많은 문제가 사라졌으며, 그 튀어 오르는 빨간색 애니메이션이 작성기에서 여러 문제를 일으키고 있었기 때문입니다.

10개의 좋아요

아래 공개된 PR에서 처리되었습니다.

11개의 좋아요

좋아 보이네요. 이제 훨씬 더 명확해졌을 것 같습니다!

여분으로 마진을 제거하고, 필수 메시지에서 “supply” 대신 "enter"를 사용하도록 변경했습니다. (검증 메시지에서 "enter"를 사용하고 있어서 그대로 가져왔습니다.)

8개의 좋아요

감사합니다. 하지만 이 패치를 적용할 기술(또는 용기)이 없습니다. 이 기능이 조속히 향후 업데이트에 포함되기를 바랍니다.

입력 텍스트 상자가 누락된 항목을 나타내기 위해 빨간색으로 강조되어야 한다고 생각합니다.

참고로, 방금 이 문제로 인해 두 번째 사용자가 계정을 생성하지 못했습니다…

PR이 이제 병합되었습니다.

3개의 좋아요