web-dev-qa-db-ja.com

カスタムスクロールバーは使いやすいですか。

多くのWebアプリケーションがカスタムスクロールバーの使用を開始していることに気づきました。いくつかの例には、Facebook、Trello、Googleドキュメント、Twitterが含まれます。もう少し考えることができると思います:

why custom scroll bars?

これらのタイプのカスタムスクロールバーは、ユーザビリティにどのように影響しますか?クリックするのが難しいと感じることが多く、スクロールしないと消える癖があります。取得する領域が狭くなり、ターゲットが表示されなくなると、Webアプリの使用が難しくなりますが、私は少数派かもしれません。これらを使用する場合、ユーザーエクスペリエンスにbenefitを示すものはありますか、それとも単により洗練された "Web 2.0"に見えるようにするためですか。

27
nhinkle
  1. 美学はユーザビリティを助ける 。多くのものが「ただ」いいように見えますが、スクロールバーなどの重要な要素については、その視覚的な魅力により、より使いやすくなっています。
  2. ほとんどのWebアプリでは、スクロールバーの少なくとも1つがページの右端の要素であり、ブラウザーの標準のスクロールバーに隣接しているため、標準のスクロールバーとは異なる外観にすることが重要です。同じように見えると、どちらもひどく見え、どちらがどのコンテナに属しているかについて人々を混乱させ、使用するのが非常に不便になります。
  3. ごく最近まで、画面またはページに内部スクロール付きの小さなボックスを多数配置すべきではないというガイドラインがありました。この規則は、ほとんどのコンテナーがかなり大きい標準のスクロールバーを使用しているために常に表示され、小さなボックスに配置すると使用できなくなるという事実に基づいています。スクロール可能なボックスでいっぱいのページを見ると、それは常にがらくたのように見えました。たとえば、古いSharepoint Webサイトでよく見られます。今日、この規則はほとんどなくなりました。カスタムスクロールバーによってこれらの問題が解決されるため、最も役立つ機能はコンテキスト依存です。それらがオンデマンドでのみ表示されるという事実により、1つのページで多くのスクロール可能な要素を、その外観を損なうことなく使用できます。
  4. 標準のスクロールバーは、そのハンドル(スクロールボックス)を使用してスクロールするために何よりもまず作成されました。これは、マウスホイールが一般的になる前のことです。今日、マウスの絶対的な大多数はホイールを備えており、コンピューターにあまり詳しくない人でも、マウスの使い方を知っているか、比較的早く習得できます。したがって、スクロールバーの「機能」の役割は減少し、その「フィードバック/インジケーター」の役割は比較的重要になります。この領域がスクロール可能であることをユーザーに知らせるために、多くの場合それらを表示します。またはキーボードを使ってスクロールさせます-スクロールの主要な手段として使用されるスクロールバーは設計していません。したがって、従来のように幅を広くする必要はありません。
21

彼らは通常、デザイナーがよりよく見えると考えているために使用されます。多くのデザイナーは、使用可能なものではなく、見栄えの良いものを設計します。

使いやすさのために、標準のスクロールバーを使用してください。

編集:また、スクロールバーの使い方は人によって異なります。バーをクリックして移動する人もいます。マウスのスクロールホイールを使用する人もいます。上部または下部の矢印をクリックする人もいます。バーと矢印の間のスペースをクリックする人もいます。

それらは存在するかもしれませんが、人々がそれらを使用する傾向があるすべての方法で使用できるカスタムスクロールバーを見たことがありません。カスタムスクロールバーを回避するもう1つの理由。

17
JohnGB

実際、私はiPadでブラウジングの多くを行っていますが、それらのどれもが私にとって標準的ではないように見えます。

デフォルトのデスクトップスクロールバー(20年前と同じように見えます)は、他の点ではうまく設計されたサイトのコンテキストではひどく見え、それ自体を配置すること自体がユーザビリティの問題になるほどで​​す。空白を上手に使用するなどの小さなことは、ユーザーエクスペリエンスに大きな違いをもたらし、その真ん中に巨大な灰色のスクロールバーを貼り付けると、すべてが壊れます。

それに加えて、スクロールバーは多くの場合2次コントロールにすぎず(タッチまたはマウスホイールが1次である)、邪魔にならないものを設定するのに適しています。

3
Tom Clarkson

ここには実際に2つの質問があります。1)それらは異なるものであるべきであり、2)なぜそれほど多くの違いがあるのですか?

そして、3番目を追加します。

3)そもそもページにスクロールするセクションがあるべきですか?

私は3に「ノー」と言う傾向があります...特にモバイルの世界では。現在、iOS用にスクロールするモーダルウィンドウの作成に取り組んでいます。これは本当に使用するのに適切なパラダイムではないので、私は苦痛を感じます。内容が重要であり、人々がそれを見る必要がある場合は、小さなスクロールボックスに閉じ込めないでください。

さて、1に戻って、何らかの妥当な議論がある場合は、おそらくそれらは異なるはずですが、まず、デフォルトが現状のままではいけない理由を最初に尋ねます。一般的に、既知のGUI要素(OSスクロールバー)は、ユーザーが使い慣れていること、予測どおりに動作すること、理解しやすいことから、推奨されるオプションです。

質問2については、純粋にビジュアルデザインのベルやホイッスルからカスタムデザインされていることが多いので、他の人にも同感です。私が作成したカスタムウィジェットのUIがデフォルトになっている現在のJSライブラリとプラグインの多くが共有されているという事実を付け加えておきます。たとえば、jQuery UIには非常にユニークなフォーム要素デザインがあります。そのメリットについては議論の余地がありますが、一般的な議論は、特定のOSの特異性とは関係なく、Web用の統一されたUIを作成することです。

2
DA01

それは間違いなくトレンドです。スクロールバー2.0の時代に入ります。 iOSの人気と、OSXライオンがこのデザインをデスクトップ/ラップトップコンピューターに移植しているという事実は、ほんの始まりにすぎません。他のOSの次のバージョンになると確信しています。

今、人々がスクロールバーをどのように使用するかに関する具体的な調査と結果があるかどうか知りたいですか?

私はそのようなスクロールバーを備えたアプリをデザインしました。美学の点では見た目が良く、アプリのデザイン全体にぴったりとフィットするので、私はそれらが好きです。ある意味で、それは誰もが知っている一般的なアクションの視覚的なノイズを作成しません。 (たぶん誰もが私が対象としているユーザーではないでしょう)。テキスト領域にカーソルを合わせると、スクロールバーがスムーズに表示され、マウスホイールを使用すると機能します。マウスホイールがない場合でも、バーをドラッグするか、キーボードの矢印キーを使用できます。

しかし、トラックボールを使用しているためスクロールに慣れていないため、スクロールバーにがっかりした同僚(マーケティング部門、MSオフィスのパワーユーザー、30歳、女性)からのコメントがあります(狂っているようです)。ですよね??)代わりに、バーをドラッグしたり、キーボードを使用したりします。実際、カスタムスクロールバーに気付かなかったのは、カスタムであり、OS標準ではないためです。 この動作は頻繁ですか?

2
Marc D

GoogleドキュメントとTrelloはWebアプリケーションであり、さまざまなスクロールバーコントロールと外観からメリットを得ることができます。 Webアプリケーションには、より包括的な設計アプローチがあり、多くの場合、デフォルトのブラウザーコントロール/外観がオーバーライドされて、Webインターフェイスのブランディングサイクルが完了します。

たとえば、一部のスクロールバーには、単一の矢印と共に二重矢印を使用して「ページの上部へ」と「ページの下部へ」を与えるスクロールバーがあり、これは垂直方向に長いページに非常に役立ちます。

FacebookとTwitterは、慣習を破るという点で一貫して境界を押し広げてきましたが、可能です。両方のコミュニティには非常に大きな支持があり、それぞれのユーザーが非常に投資されているため、各企業は非常に小さな放棄率で新しい設計変更を導入できます。たとえば、現在Facebookの新しいインターフェイスの更新については多くの議論がありますが、ユーザーの放棄率はごくわずかだと思います。

設計が何であれ、常に慣習を使用して開始し、確立されたときにそれらの慣習の外でのみプッシュすることが常に最善です。

1
rlsaj