web-dev-qa-db-ja.com

内側のスクロールバーは悪いUXですか?

メッセージに返信するときにGmailのインターフェースを見ると、元のメッセージとそのすぐ下の新しいメッセージウィンドウが表示されています。このパターンは2つの垂直スクロールバーを作成します。1つはブラウザーウィンドウに、もう1つは内部の「新しいメッセージ」ウィンドウにあります。同じ質問がux.stackexchageのここにあります。新しい質問を書き、そのすぐ上にある「既に回答がある可能性のある質問」セクションを確認するときです。

私はこのパターンを使用する多くの利点を見つけることができないようですが、欠点は明らかです:内側のスクロール用の小さな領域、ページ上の奇妙なマウスホイールの動作など。
私の見解では、それは単に悪いuxパターンのように見えます。誰かが私の目を明るくして、内側のスクロールバーのパターンがユーザーにより良い体験を与える場所の例をいくつか教えてもらえますか?

25
Yaniv

一般的に、私は可能な限り二重のスクロールバーを避けるようにしています。ユーザビリティテストで彼らに悪い反応がありました、そして、ユーザーはそれらに直面したときに窮地に陥ったと報告しました。

内部のスクロールバーはユーザーを混乱させる可能性があり、特にマウスホイールの動作が原因でイライラします。モバイルユーザーの場合、特に内部領域がスクロールすることを示す適切な兆候がない場合、混乱を招きます。画面が大きい/高いユーザーの場合、小さなスクロール領域があると非常にイライラし、制限が厳しすぎるように見えることがあります。

一般に、これらは次のいずれかの兆候です。

  • あなたのデザインは非常に「忙しい」(おそらく必然的)
  • 可変サイズの領域の上と下の両方にコンテンツがあり、ユーザーが両方に同時に到達/表示できることを確認したい
  • 設計は、「おそらくスクロールしなければならない」(おそらく不必要に)ことを避けようとしている、または
  • 正方形以外のスクロール領域を回避している(これまではWebでは困難でした)

長いコンテンツの複数の領域がある場合(例:数百のユーザーが含まれるテーブルは、数百のジョブが含まれるテーブルと一致する必要があります)、内部スクロールバーmightは正当化されます、しかし、ほとんど常にそれを行うためのより良い方法があります。コンテンツを「背が高く」なるようにレイアウトし、ブラウザのスクロール機能に依存するだけです。

同様に、ページの動的レイアウトは通常、問題を回避できます。このサイトのコメントボックスを使用すると、ユーザーがコメントボックスのサイズを変更できます。ただし、入力時にボックスのサイズが自動的に大きくなるデザインを想像できるため、常に下部に1行または2行のスペースがあります。この再レイアウトは邪魔になる可能性があります。または、ユーザーが入力に集中できるようにする可能性があります。特定のアプリケーションでテストする必要があります。 (そしてここSEでは、ライブプレビューの外観がこれに影響を与える可能性があります。)

13
Alex Feinman

内部スクロールパネルを使用する直接的な利点の1つは、表示されているコンテンツが豊富にある場合にページレイアウトを維持できることです。すべてのコンテンツの高さが親スクロールに転送されると、ページが非常に長くなり、ナビゲートするのが難しくなります。

もう1つの利点は、Gmailでメールを作成するときに内部スクロールをどのように利用するかという点を考慮することです。 "メッセージに返信すると、元のメッセージとそのすぐ下の新しいメッセージウィンドウが表示されます"。これは実際に良いことです!これは、メモリに障害が発生した場合、スクロールせずにユーザーが元のメッセージに簡単にアクセスできることを意味します。これは、会話が順調に進んでいること、および返信するメールで考えられるすべての質問に対処するのに便利です。

12
AndroidHustle

内部スクロールにはいくつかの利点がありますが(前述のように)、そのような動作は制限するか、回避する必要があります。マウススクロールの問題(親ウィンドウではなく内部ウィンドウがスクロールする場合、ユーザーを狂わせます。さらに、「新しい」非表示のMac OS Xスクロールバーにより、場合によっては領域がスクロール可能かどうかを推測することがほとんど不可能になります)。

個人的には、GMailの作成ウィンドウや返信ウィンドウなどの一時ブロックに内部スクロールを使用しても問題ないと思います。静的に配置されたブロックでは使用しないでください。

内側のスクロールを置き換えることができるいくつかの一般的なパターン(必要に応じて領域を動的に拡大する「フルテキストを表示する」リンクなど)があります。

3
alexeypegov

主な欠点は、スクロールジェスチャを実行する前に、マウスカーソルを内側の領域に移動する必要があることです。外側のスクロールバーが1つだけだった場合、マウスはブラウザの表示領域内のどこにあってもかまいません。

Amazonがそのページのさまざまなセクションに内部スクロールバーを持っていると想像してみてください。それはあなたを狂気にさせるでしょう。中央のセクションがどれほど肥大化しているかに関係なく、一番下までスクロールすると、レビューにアクセスできることがわかります。一番上までスクロールすると、製品名と画像が表示されます。それ以上のものはやり過ぎであり、ユーザーによる過度のフォーカスが必要です。

0