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

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

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

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

推薦する

SpringBoot と Vue の相互作用におけるクロスドメイン問題の解決策

目次ブラウザ同一生成元ポリシー1. VUEフロントエンド構成プロキシはクロスドメインの問題を解決しま...

要素に丸い境界線を追加する border-radius メソッド

border-radius:10px; /* すべての角は半径 10px で丸められます*/ bor...

ReactプロジェクトでのTypeScriptの実装

目次1. はじめに2. 使用方法ステートレスコンポーネントステートフルコンポーネント制御コンポーネン...

Linux 上の Vim で色とテーマを変更する方法

Vim は Linux でよく使用されるテキスト エディターです。 Vim は、Sublime や ...

React Fragment の紹介と詳しい使い方

目次序文フラグメントの動機React Fragment の紹介と使用<React.Fragme...

LinuxでのDNSサーバーの設定の詳細な説明

1. DNSサーバーの概念インターネットでの通信には IP アドレスの助けが必要ですが、数字に対する...

CSS 前景と背景の自動カラーマッチング技術の紹介 (デモ)

1. カラーマッチング効果のプレビュー下の GIF に示すように、ボタンの背景色が徐々に薄くなると...

シンプルな HTML ビデオ プレーヤーを実装する方法

この記事では、シンプルな HTML ビデオ プレーヤーを実装する方法を紹介し、皆さんと共有します。詳...

Vue ルーターにパラメータを渡すときにページを更新するとパラメータが失われる問題に対処する方法

目次概要方法1: params経由でパラメータを渡す方法2: クエリを通じてパラメータを渡す方法3:...

Linux で 1 回限りのスケジュールされたタスクを実行するための at コマンドの使用に関する詳細な説明

目次序文1. 一度限りの計画タスクの紹介2. コマンド3. 1回限りのスケジュールタスクを作成する4...

mysqlサーバーは--skip-grant-tablesオプションで実行されています

MySQLサーバーは--skip-grant-tablesオプションで実行されているため、このステー...

JavaScript エラー処理 try..catch...finally + は throw+TypeError+RangeError をカバーします

目次1. 目的2. 文法3. 練習する1. 目的通常、エラーが発生すると、スクリプトは直ちに停止し、...

MySQL の DOS ウィンドウの文字化け問題を解決する方法

文字化けしたコードの問題は次のとおりです。 この問題の原因は非常に単純です。コマンドラインのエンコー...

Vueは水平の斜めの棒グラフを実装します

この記事では、水平傾斜棒グラフを実装するためのVueの具体的なコードを参考までに共有します。具体的な...

Mysql マルチテーブル結合クエリの実行の詳細について簡単に説明します。

まず、このブログのケースデモンストレーション テーブルを作成します。 create table a(...