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

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

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

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

推薦する

Apache での ab パフォーマンス テスト結果を分析する

私はパフォーマンス テストを行うために常に Loadrunner を使用してきました。 Loadru...

nginx を使用して wgcloud へのアクセスを構成する方法

nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...

JavaScript でプライベート メンバーを作成する

目次1. クロージャを使用する2. ES6クラスを使用する3. ES2020提案を使用する4. We...

JavaScript 配列の詳細な概要

目次1. 配列誘導1. 文字列を配列に分割する2. コレクションとマップを新しい配列に変換する3. ...

MySQLの最適化の詳細な分析とパフォーマンス

導入データベースを使用したことがある人なら、機能面での like 記号と = 記号の類似点と相違点を...

CPU、マシンモデル、メモリなどの情報を表示するLinuxシステム

システムメンテナンス中は、いつでも CPU 使用率を確認し、対応する情報に基づいてシステムの状態を分...

Docker実践: Pythonアプリケーションのコンテナ化

1. はじめにコンテナはサンドボックス メカニズムを使用して相互に分離します。コンテナ内にデプロイさ...

Webフロントエンド開発経験の概要

XMLファイルは、可能な限りutf-8でエンコードする必要があります。gb2312には、?など、保存...

CSSはコーナーカット+ボーダー+投影+コンテンツ背景色のグラデーション効果を実現します

CSS を使用するだけで、コーナーカット + ボーダー + 投影 + コンテンツの背景色のグラデーシ...

Tomcat を使用して Centos 環境に SpringBoot WAR パッケージをデプロイする

戦争パッケージを準備する1. 既存のSpringBootプロジェクトを準備し、pomに依存関係を追加...

Linux または Android でファイル システムを追加する属性インターフェイスを解析する方法

最初のもの: 1. 主要なヘッダーファイルを追加します。 #include <linux/of...

フォーム OnSubmit と input type=image の使用の概要

ここに <input type="image"> がある場合、この画...

Ubuntu でディスク容量不足により MySQL が起動しない場合の解決策

序文最近、データベースのテーブルに 2 つのフィールドを追加しました。その後、ディスク容量不足のよう...

MySQL 8.0.11 のインストールと設定方法のグラフィック チュートリアル (win10)

この記事ではMySQL 8.0.11のインストールと設定方法を参考までに記録します。具体的な内容は以...

MySQLの自動増分IDについて知っておくべきこと

はじめに: MySQL を使用してテーブルを作成する場合、通常は自動インクリメント フィールド (A...