Web ページのスクロール バーが右側に設定されているのはなぜですか?

Web ページのスクロール バーが右側に設定されているのはなぜですか?
スクロールバーが右側にあるのはなぜですか? トリプルチュートリアル
私たちが毎日使っているブラウザや Word 文書のスクロール バーはなぜ右側にあるのでしょうか。多くのデザイナーは、スクロール バーを左側に配置する方がデザインとして優れていると考えています。しかし、実際には、Xerox が Star (グラフィカル インターフェイスを備えた最初のコンピューター) を発売して以来、すべてのグラフィカル インタラクティブ インターフェイスではスクロール バーが右側に配置されています。 入力以外では、スクロール バーのドラッグは、おそらくグラフィカル インタラクティブ インターフェイスで最もよく使用される操作の 1 つです。通常、スクロール バーをいつ使用するかを考えてみましょう。たとえば、ドキュメントやフォーム内で何かを探している場合は、スクロール バーを少しずつ下にドラッグし、同時に目的のものが見つかるまでテキストをスキャンし続けます。
この一連のプロセス中に、目はどのように動きますか? 一般的に、私たちはテキストを左から右に読み、重要なランドマーク情報 (名前やタイトルなど) は通常、一番左に表示されます。したがって、視線は常に右側のスクロール バーから左側の記事の先頭へと切り替える必要があります。このプロセスをより個人的に体験するには、ドキュメントを開き、ウィンドウを短く広くしてから、スクロール バーをドラッグして何かを見つけてみてください。視覚の焦点が絶えず変化することは非常に不快に感じるかもしれません。スクロールバーを左側に配置すると、この問題はすぐに解決されます。
実際、最も初期の WIMP インターフェイスでは、スクロール バーは左または右のどちらにも配置できましたが、デフォルトでは左に配置されていました。 Xerox が Star で右側のスクロール バーを設定するまで。この設定は後に Apple の Lisa に継承され、その後有名な Macintosh に受け継がれ、最終的にコンピュータ業界全体に受け入れられました。
では、スクロール バーを右揃えにしたデザインは、一体何から生まれたのでしょうか。スクロール バーが左側にあると、スクロール バーをドラッグするには、手で画面全体を横切らなければなりません。もちろん、実際に画面を横切るのはあなたの手ではなくマウス ポインターですが、あなたの脳は画面を横切るのはあなたの手であると認識します。この心理的現象は幻肢に似ており、操作するマウスや画面上のマウス ポインターが脳内で腕の延長となり、画面上の情報がこの仮想の腕によって遮断されることになります。実際にページ上の情報を支障なく読むことはできるものの、何となく何かがおかしいと感じるでしょう。

<<:  html オプション 無効 選択 選択 無効 オプションの例

>>:  Linux netstatコマンドの詳細な説明

推薦する

Dockerカスタムネットワーク実装

目次1. コンテナ相互接続を実現するためにネットワークをカスタマイズする2. ネットワーク接続1. ...

MySQL の if 関数の正しい使い方の詳細な説明

今日私が書こうとしている内容では、プログラムは 7 時間近く実行され、データベースに 1,000 万...

Vueストレージにはブール値のソリューションが含まれています

Vueはブール値でストレージを保存します今日、問題に遭遇しました。バックグラウンドから返された真偽の...

MySQL ページングクエリ最適化テクニック

ページング クエリを使用するアプリケーションでは、LIMIT と OFFSET を含むクエリが非常に...

ウェブページのカラーマッチングスキルについての簡単な説明(フロントエンド開発者必読)

一般的に、Web ページの背景色は、より柔らかく、よりシンプルで、より明るく、暗いテキストとマッチし...

海外の無料写真素材サイトベスト9

良い画像素材のウェブサイトを見つけるのは難しいです。特に無料です。良い写真には非常に目を引く視覚効果...

MySQL のグループ分けの例

mysql のような php switch case ステートメント。 xxフィールドを選択、ケース...

html2canvas を使用して HTML コードを画像に変換する方法

コードを画像に変換するにはhtml2canvas は、ブラウザから Web ページのスクリーンショッ...

Dockerイメージ解析ツールのダイブ原理解析

今日は、Docker イメージ、各レイヤーの内容を調べ、Docker/OCI イメージのサイズを縮小...

美しい FLASH ウェブサイト デザイン例 50 選

Flashにより、デザイナーや開発者はブラウザ上でリッチなコンテンツを提供し、動き、インタラクティブ...

Vue カプセル化に基づくプルダウン更新およびプルアップ読み込みコンポーネント

VueとネイティブJavaScriptカプセル化に基づいて、プルダウンリフレッシュとプルアップロード...

VueはGraphVisを使用して無限に拡張された関係グラフを開発します

1. GraphVis 公式サイトにアクセスして、対応する js をダウンロードします。js の新し...

MySQLのどのフィールドがインデックスに適しているかについての簡単な説明

目次1 データベース インデックスを作成するための一般的なルールは次のとおりです。 2. 数千万件の...

IIS を使用して X-Forwarded-For ヘッダー (XFF) を呼び出して訪問者の実際の IP を記録する 2 つの方法

問題: IIS を通じて公開された Web サイトは F5 デバイスの背後に配置されています。透過的...

nodejs で worker_threads を使用して新しいスレッドを作成する方法

導入前の記事で述べたように、NodeJS には 2 種類のスレッドがあります。1 つは、ユーザー リ...