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

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

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

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

推薦する

docker createコマンドの使用方法

docker create コマンドは、イメージに基づいてコンテナを作成できます。このコマンドの効果...

MySQLはライブラリ内の主キーなしでテーブルインスタンスコードを素早く取得します

概要MySQL データベースで主キーのないテーブルを表示するための SQL ステートメントをいくつか...

MySQL でのフィルター条件なしのカウントの詳細な説明

カウント(*)成し遂げる1. MyISAM: テーブル内の行の総数をディスク上に保存し、フィルタリン...

vue+openlayer をベースにマップの集約と散乱効果を実現

目次序文:結果: 1.重合効果: 2. 散布効果:具体的な実装手順: 1. プロジェクトにOpenL...

Vue elementUI フォームのネストされたテーブルと各行の検証の詳細な説明

目次エフェクト表示コードリンクキーコード表形式データコンポーネントのネスト検証方法リセット方法完全な...

Vue Element フロントエンドアプリケーション開発: Vuex での API ストアビューの使用

目次概要1. フロントエンドとバックエンドの分離とWeb APIの優先ルート設計2. Axiosネッ...

Linux でプロセスを隠す方法と、遭遇する落とし穴

序文1. この記事で使用したツールは、https://github.com/gianlucabore...

Vue ElementUI は非同期読み込みツリーを実装します

この記事の例では、vue ElementUI の非同期読み込みツリーを実装するための具体的なコードを...

HTMLノードの追加と削除の簡単な例

HTML ノードの追加と削除の簡単な例 HTML ノードの追加と削除の簡単な例<input t...

HTML/CSS の基礎 - HTML コード記述におけるいくつかの注意事項 (必読)

この記事の警告事項は、ブラウザの互換性とはまったく関係ありません。主に、プロジェクトで遭遇したいくつ...

Vue2 キューブUI 時間セレクターの詳細な説明

目次序文1. 需要と効果必要効果2. コードの実装index.vue(html)日付方法テスト結果3...

HTML テーブル マークアップ チュートリアル (29): セルのライト境界線の色属性 BORDERCOLORLIGHT

セルでは、明るい境界線の色を個別に定義できます。 > 基本構文<TD ボーダーカラーライ...

異なるページ間のJavaScriptデータ転送(URLパラメータ取得)

Web ページでは、あるページに情報を入力すると、別のページにジャンプし、入力した情報が別のページ...

知っておくべき 18 の Web ユーザビリティの原則

世界最高のビジュアル デザイン スキルを持っていたとしても、訪問者がページ間やアイテム間を快適に移...

JavaScriptの動作メカニズムの詳細な説明とイベントループについての簡単な説明

目次1. JavaScript がシングルスレッドなのはなぜですか? 2. タスクキュー3. イベン...