登録時にスクロールが必要なのはわかりにくい

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

同じ問題が発生しています。必須のカスタムフィールドが表示されず、ユーザーが「新しいアカウントを作成」ボタンをクリックできない理由がわかりません:

インスタンスの 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 さん、引き受けていただけますか?

コンポーザーでも長年同じ問題を抱えていましたが、常にクリック可能に変更したことで多くの問題が解消されました。コンポーザーでは、跳ねる赤いアニメーションが処理を妨げていたのです。

「いいね!」 10

以下のオープンな PR で実装されています。

「いいね!」 11

これで良さそうです。今はずっと明確になっていると思います!

必要なメッセージで「supply」の代わりに「enter」を使うようにする追加の変更を加えました(バリデーションメッセージでは「enter」を使っているので、それに合わせました)。また、余白を削除する変更も加えました。

「いいね!」 8

ありがとうございます。ただし、このパッチを適用する技術(または勇気)が私にはありません。この機能が今後のアップデートでできるだけ早く実装されることを願っています。

入力テキストボックスが赤くハイライトされて、何が不足しているかを示すべきだと考えます。

ところで、この問題のために、さっきもう一人のユーザーがアカウント作成に失敗しました…

PR がマージされました。

「いいね!」 3