# Not obvious that you need to scroll down during signup
**URL:** https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971
**Category:** UX
**Created:** [3월 29, 2019, 11:44오후 UTC](https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971 "2019-03-29T23:44:50Z")
**Posts on this page:** 18
**Page:** 1
### Author:  [@tkrunning](https://meta.discourse.org/u/tkrunning)
#### Post date: [3월 29, 2019, 11:44오후 UTC](https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971/1 "2019-03-29T23:44:51Z")
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](https://meta.discourse.org/t/you-have-not-completed-all-user-fields-ux-on-signup-should-be-improved/42376)
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [3월 29, 2019, 11:53오후 UTC](https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971/2 "2019-03-29T23:53:04Z")
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.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [3월 30, 2019, 1:01오전 UTC](https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971/3 "2019-03-30T01:01:10Z")
You can make a minor CSS adjustment to allow the modal to get taller on desktop devices, this should do it:
```scss
.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.
---
### Author:  [@tkrunning](https://meta.discourse.org/u/tkrunning)
#### Post date: [3월 30, 2019, 1:22오전 UTC](https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971/4 "2019-03-30T01:22:31Z")
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!
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [3월 30, 2019, 1:25오전 UTC](https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971/5 "2019-03-30T01:25:42Z")
> [@tkrunning](#):
>
> 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.
---
### Author:  [@evantill](https://meta.discourse.org/u/evantill)
#### Post date: [4월 12, 2020, 10:54오후 UTC](https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971/6 "2020-04-12T22:54:09Z")
여기서도 같은 문제가 발생합니다. 필수 사용자 지정 필드가 표시되지 않고, 사용자가 `Create new account`를 클릭할 수 없는 이유를 이해하지 못합니다:
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [4월 12, 2020, 10:57오후 UTC](https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971/7 "2020-04-12T22:57:27Z")
위에서 언급했듯이, 많은 운영 체제에서 **스크롤바가 크게 억제** 되므로 인스턴스에서 CSS를 오버라이드하여 명확하게 만드는 것을 권장합니다. 그래서 그냥 제 말을 인용하겠습니다.
> [@codinghorhor](#):
>
> 실제로 운영 체제에 따라 다릅니다. 일부 OS, 특히 OSX에서는 스크롤바가 매우 작게 표시됩니다.
>
> 근본적인 불만에는 동의하지만, 이는 브라우저와 OS에 따라 맥락이 달라진다는 점을 이해해야 합니다.
---
### Author:  [@evantill](https://meta.discourse.org/u/evantill)
#### Post date: [4월 12, 2020, 10:59오후 UTC](https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971/8 "2020-04-12T22:59:44Z")
CSS를 사용하여 가입 창에서 스크롤바를 비활성화하고 사용자가 스크롤할 수 있게 할 수 있나요?
---
### Author:  [@evantill](https://meta.discourse.org/u/evantill)
#### Post date: [4월 12, 2020, 11:12오후 UTC](https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971/9 "2020-04-12T23:12:51Z")
감사합니다 @awesomerobot. 이렇게 커스터마이징하니 더 좋습니다.
---
### Author:  [@evantill](https://meta.discourse.org/u/evantill)
#### Post date: [4월 13, 2020, 6:43오후 UTC](https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971/10 "2020-04-13T18:43:57Z")
적용
```css
.d-modal.create-account .login-form form {
max-height: 70vh
}
```
iPhone 6에서 이상한 부작용이 발생합니다:
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [4월 15, 2020, 1:20오전 UTC](https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971/11 "2020-04-15T01:20:51Z")
오, 그건 확실히 이상하네요. 제가 재현을 못 하겠는데… 어떤 버전의 iOS인지 알고 계신가요?
---
### Author:  [@evantill](https://meta.discourse.org/u/evantill)
#### Post date: [4월 15, 2020, 1:29오후 UTC](https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971/12 "2020-04-15T13:29:01Z")
- iPhone 6 Plus
- iOS 12.4.5
Safari와 Firefox를 사용해도 동일한 결과가 나타납니다.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [4월 27, 2020, 10:20오후 UTC](https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971/13 "2020-04-27T22:20:40Z")
이 문제는 여기서 다시 언급되었습니다: [https://meta.discourse.org/t/not-obvious-that-sign-up-box-scrolls/149486](https://meta.discourse.org/t/not-obvious-that-sign-up-box-scrolls/149486)
이 문제를 해결하는 것은 까다로운데, 대부분의 터치 디바이스는 기본적으로 스크롤바를 숨기며, 가입 양식이 모달 안에 있고, 추가 필드가 있으면 가입 양식의 길이가 달라질 수 있으며, 브라우저 높이도 다양하기 때문입니다.
가입 양식을 모달 대신 전체 페이지로 이동하는 대규모 변경 사항 외에… 몇 가지 가능한 해결책이 있으며, 그중 하나(또는 둘 다)가 상황을 개선할 수 있을 것입니다:
- 현대 브라우저에서는 CSS로 스크롤바 표시를 강제할 수 있습니다. 이는 터치 디바이스에서 항상 스크롤바가 표시되도록 하므로(스크롤이 더 명확해짐) 유용하지만, 가입 모달의 기본 OS 스크롤바 스타일을 오버라이드하게 되어 어색해 보일 수도 있습니다.
- “계정 만들기” 버튼의 동작을 변경할 수 있습니다. 양식이 완료될 때까지 비활성화하는 대신, 사용자가 클릭할 수 있도록 허용하고, 첫 번째 미완성 입력 필드로 스크롤을 이동시키는 방식입니다.
스크롤바 표시를 강제하는 것은 먼저 시도해 보기 쉬울 것입니다. @codinghorror/@sam, 이에 대해 의견이 있으신가요?
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [4월 27, 2020, 10:24오후 UTC](https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971/14 "2020-04-27T22:24:00Z")
> [@awesomerobot](#):
>
> “새 계정 만들기” 버튼의 동작을 변경할 수 있습니다. 폼이 완성될 때까지 비활성화하는 대신, 사용자가 버튼을 클릭할 수 있도록 허용한 후 첫 번째 미입력 필드로 스크롤을 이동시키는 방식입니다.
저는 이 솔루션이 가장 마음에 듭니다. @vinothkannans 이 작업을 맡아주실 수 있을까요?
우리는 수년 동안 작성기(composer)에서 동일한 문제를 겪어왔습니다. 버튼을 항상 클릭 가능하도록 변경한 후 많은 문제가 사라졌으며, 그 튀어 오르는 빨간색 애니메이션이 작성기에서 여러 문제를 일으키고 있었기 때문입니다.
---
### Author:  [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [5월 5, 2020, 5:56오후 UTC](https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971/16 "2020-05-05T17:56:07Z")
> [@awesomerobot](#):
>
> 양식이 완료될 때까지 비활성화하는 대신, 사용자가 클릭할 수 있도록 허용한 후 첫 번째 미입력 항목으로 스크롤을 이동시키는 방식을 사용할 수 있습니다.
아래 공개된 PR에서 처리되었습니다.
>
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [5월 5, 2020, 8:40오후 UTC](https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971/17 "2020-05-05T20:40:34Z")
좋아 보이네요. 이제 훨씬 더 명확해졌을 것 같습니다!
여분으로 마진을 제거하고, 필수 메시지에서 “supply” 대신 "enter"를 사용하도록 변경했습니다. (검증 메시지에서 "enter"를 사용하고 있어서 그대로 가져왔습니다.)
---
### Author:  [@cybe](https://meta.discourse.org/u/cybe)
#### Post date: [5월 11, 2020, 6:12오전 UTC](https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971/18 "2020-05-11T06:12:18Z")
> [@vinothkannans](#):
>
> 아래 열린 PR에서 처리되었습니다.
감사합니다. 하지만 이 패치를 적용할 기술(또는 용기)이 없습니다. 이 기능이 조속히 향후 업데이트에 포함되기를 바랍니다.
입력 텍스트 상자가 누락된 항목을 나타내기 위해 빨간색으로 강조되어야 한다고 생각합니다.
참고로, 방금 이 문제로 인해 두 번째 사용자가 계정을 생성하지 못했습니다…
---
### Author:  [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [5월 14, 2020, 6:46오전 UTC](https://meta.discourse.org/t/not-obvious-that-you-need-to-scroll-down-during-signup/112971/19 "2020-05-14T06:46:24Z")
PR이 이제 병합되었습니다.