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.
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?
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.
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.
Я рекомендую переопределить CSS на вашем экземпляре, чтобы сделать его более понятным — как уже говорилось выше, многие операционные системы сильно скрывают полосы прокрутки, поэтому, думаю, я просто процитирую сам себя..
Решение этой задачи нетривиально, так как на большинстве сенсорных устройств полосы прокрутки по умолчанию скрыты, форма регистрации находится в модальном окне, её длина может меняться при добавлении дополнительных полей, а высота окон браузеров различается.
Помимо кардинального изменения — переноса формы регистрации на отдельную страницу вместо модального окна — я вижу несколько возможных решений, и одно из них (или оба) могли бы улучшить ситуацию:
В современных браузерах можно принудительно отображать полосы прокрутки с помощью CSS. Это означает, что они всегда будут видны на сенсорных устройствах (что сделает прокрутку более очевидной). Однако это также означает, что мы переопределяем стандартные стили полос прокрутки операционной системы в модальном окне регистрации, из-за чего они могут выглядеть неуместно.
Можно изменить поведение кнопки «Создать новую учётную запись». Вместо того чтобы отключать её до заполнения формы, можно разрешить пользователям нажимать на неё, а затем прокручивать страницу к первому незаполненному полю ввода.
Принудительное отображение полос прокрутки должно быть простым решением для первой проверки. @codinghorror/@sam, что вы об этом думаете?
Мне больше всего нравится это решение, @vinothkannans, не мог бы ты взяться за это?
У нас была та же проблема с композитором в течение многих лет, и изменение на всегда доступную для нажатия кнопку устранило множество ошибок. Анимация прыгающей красной рамки действительно создавала проблемы в композиторе.
Выглядит хорошо, теперь это должно быть гораздо очевиднее!
Я внес дополнительное изменение: убрал отступ и использовал «введите» вместо «укажите» в обязательных сообщениях (в сообщениях валидации мы используем «введите», поэтому я скопировал это).
Спасибо. Хотя у меня нет ни навыков (ни смелости), чтобы применить этот патч. Надеюсь, что эта функция появится в будущих обновлениях как можно скорее.
По-моему, поле ввода должно подсвечиваться красным, чтобы указать, чего не хватает.
Кстати, у меня только что второй пользователь не смог создать учётную запись из-за этой проблемы…
