強度、スクロールインジケータ(またはスクロールバー後の寿命)

1か月前、誰かが私のgithubで未完成のプロジェクトを見つけ、 Designer Newsにそのリンクを投稿しました。 突然、50人の人々がプロジェクトのウェブサイトに常に座っているのを見ました。そして、最も地獄のようなバグさえも緊急に排除するために、私は急いで仕事から逃げさえしました。 このプロジェクトはintensであり、スクロールバー(スクロールバー)を、スクロール可能な領域をテクスチャで強調表示する特別なインジケーターに置き換えるUXコンポーネントです。 次のようになります。





プロジェクトのウェブサイト自分でスクロールできます



UXの専門家とプログラマーのコミュニティは非常に興奮して反応しました。
嫌いな理由がわからない ...-GrumpyUX Man @ layervault
神聖なうんち、これは激怒する -Thecoss @ reddit
はい、私自身はスクロールバーをこれで置き換えるのではなく、最初に最初のスクロールhttp://theonion.github.io/fartscroll.js/をデフォルトとしてインストールします。 -カイル・ドンモイヤー@ layervault
ありがとう 標準のインターフェイス要素を変更したいという願望を私は決して理解できませんでした。 スクロールバーは、機能するものの1つです。 干渉せず、コンテンツの量を簡単に明確にします。 -madk @ reddit
なに? -magenta_placenta @ reddit
...

どの ような 問題が解決するのかよくわかりません -jineshshah36 @ reddit
(誰かがReal Bad UX subredditを作成して、そこにこのプロジェクトへのリンクを投稿しました)



UXの専門家と一緒に、私は興奮しました。 役に立たないプロジェクトは通常誰にとっても面白くありません、私はそれらをいくつか持っています。 しかし、今では非常にありそうにない-これは非常に物議を醸すことが判明し、私はそのような動きを見ていません。 次の数週間、私は主なコメントを考慮に入れて、ライブラリ自体に何かを修正するか、プロジェクトのウェブサイトに説明を追加しようとしました。 そして同時に、他のリソースにそれをレイアウトしました-フィードバックの度合いは和らいでいるように見えました。



ここでは、強度のどの領域が使用されているかを説明し、「スクロールバー後の生活」をどのように想像するかを説明します。 また、読者にこのプロジェクトを批判し、スクロール全般、UX全般、および特に従来の要素を置き換える可能性について議論することをお勧めします。



スクロールに関連してユーザーが必要とするものについて考えてみましょう。 たとえば、スクロールバーは、スクロール可能な領域に現在の場所を表示し、任意の場所に移動できるユニバーサルコンポーネントです。 ところで、多くの場合、ユーザーは正確な位置を知る必要はありません。 この事実は、開発者によって既に使用されています。たとえば、タブレットインターフェイスでは、スクロールバーが頻繁に表示されないことがよくあります。 別の例は、コンテンツを動的にロードするサイトでは、スクロールバーが予期せず移動し、何も意味しないことです。



したがって、スクロールバーは主にスクロールに関する正確な情報を取得するのではなく、まず「一般に「スクロールするもの」があることを理解するために使用され、次に「巻く量」を決定するために使用されます。 。



もちろん、場合によっては、いくつかの追加情報があなた自身の方向付けに役立つかもしれません。 たとえば、セクションのあるテキストの場合、ユーザーは現在どのセクションにいるのかを表示できます。





- ブルームバーグのウェブサイトのインジケータには、現在のセクションのタイトルと、セクションの読書進行状況が含まれています



そして、任意の場所に移動できることが本当に重要な場合、ほとんどの場合、コンテンツに関する追加情報が必要になり、特定の場所に正確に何があるかを示します。





- 崇高なテキストエディタは、コンテンツの小さなコピーを表示します



または関連する場所に関する情報:





-Netbeansの差分の表示:スクロールバーの横に変更箇所が示されます





-Google Chromeで検索すると、スクロールバーで正しい場所が強調表示されます



つまり、このような場合、通常の形式のスクロールバーは不要です。



しかし、これらのすべての例では、アプリケーションに関係なく、スクロールに関する一般的な情報、つまりスクロールする領域とスクロールする量が役立ちます。 強度は、そのような情報を正確に示すのに役立ちます。 このインジケータは、スクロール可能な領域全体をスクロール可能な領域で強調表示します。この点では、スクロールバーよりも視覚的です。





サイトからの写真



さらに表示する情報-アプリケーションによって異なります。 したがって、スクロールの一般的な指定のために強度が提案され、追加情報のために、特定のタスク用に個別のウィジェットを作成できます。



スクロールバーは、ステータスを示すだけでなく、スクロール領域内を移動することもできます。 当然、代替として提供されるものから少なくとも同じ機能が期待されます。 しかし、強度は単なる指標であり、制御のための要素を提供しません。 したがって、最も人気のあるフィードバックは次のようなものでした。「そして、今どのようにスクロールを開始しますか? または特定の場所に移動しますか?」



確かに、このプロジェクトを反対側に座っている同僚に見せたとき、次の30分間、彼のマウスのホイールの心臓が痛むガラガラ音しか聞こえませんでした。 彼は激しいサイトを上下にスクロールし、この革新を称賛しました(その時点では、サイトにはまだ特定の場所に移動できるメニューがありませんでした)。 もちろん、これは進歩ではなく、これをこのように使用すべきだとは思いません。



ただし、上記の例の追加情報と同様に、適切な種類のナビゲーションはタスクによって異なります。



(上記の例のように)スクロールの正確な位置が追加で表示されるアプリケーションでは、任意のポイントに移動する機能も役立ちます。 しかし、繰り返しますが、これをあらゆる機会に提供する必要はありません。 たとえば、セクションを含むテキストを読む場合、コンテンツナビゲーションを使用して特定のセクションに移動する方が「最後から約4分の1移動する」よりも便利です。





-TheDaily Beast Webサイトのメニューでは、現在のセクションと現在のセクションの進捗状況が強調表示されます。 そのようなメニューは自給自足で、ここではスクロールバーなしで何でもできます



現在、このようなナビゲーションコンポーネントは、スクロールバーがあるため回避されることが多く、ナビゲーションの問題を何らかの形で解決します(正直なところ、何らかの方法で解決します)。



Intensityサイトのメニューは、「関連ナビゲーション」の別の例です。 ちなみに、週末にこのメニューを実装するために、viewport.jsライブラリは見落とされました(このプロジェクトは既に準備ができていますが、他のどこにも公開されていません):スクロールステータスに関する包括的な情報を提供し、あらゆる種類のナビゲーションウィジェットの作成に適しています。



このアプローチがどのように実行可能かを教えてください。 フィードバックに応じて、強度の記述方法に関する投稿をさらに公開することを考えています(ブラウザの互換性、およびインジケーターのテクスチャでスクロールするときに発生するマタンについて多くの興味深いことがあります)、さらにトピックに関するチュートリアルを書くことができます前述のviewport.jsライブラリに基づいた強度とナビゲーションでスクロールバーを置き換える方法。



All Articles