なぜプログレスバーは水平なのですか？
この議論 によって引き起こされた質問。
進行状況バーがほとんど常に左から右に増加する水平線として表示されるのはなぜですか？これは進行状況を示す最良の方法ですか（そしてその理由）？そして、この傾向が後退している重要な例はありますか？
西洋に住んでいるほとんどの人は左から右に読んでいるからですそれが彼らが時間の経過を想像する方法です
上から下へと日本の顧客や右から左へ向かう特定のアラビア文化に利益がもたらされるかどうかは、良い質問です。一方、西側メディアと西側ソフトウェアの文化的影響はそれを変えます。
彼らの記述に基づいて、彼らはそれが右から左、または上から下に起こることを期待していると簡単に想定できますが、彼らの世界はiPhoneとAndroidとWindowsとFacebookとその他何にでも広まっているので、彼らはそれはコンピューターに関しては慣れていますが、それは逆のことです。
とにかく、伝統的に右から左に時間が経過する文化があります。英語はそれらの1つではない、あなたの聴衆に依存します。
これの非常に考えられる理由の1つは、進行状況インジケーターが表示されるコンテキストとの適合およびマッチングです。
考えてみてください。通常、進行状況インジケーターは、何が処理されているかを説明する説明テキストと共に表示されます。そして、テキストについて私たちは何を知っていますか。まあ、1つは左から右に水平に書かれていることです（私は伝統的な中国語、日本語、アラビア語はこれに該当しないことを知っていますが、私は従来のUI言語を話しています）。
周囲のテキストと簡単に組み合わせることができる方法でプログレスバーを表示することは非常に適しているようです。
進行状況バーが垂直に表示された場合、これらの進行状況ビューがどのように不均衡になるかを想像してください。
キックのためだけに一例を挙げましょう！
ハードウェア関連の答えもあるかもしれません。 GUIの前には、DOSプロンプト/ターミナルインターフェイスがありました。ここのプログレスバーは、文字でレンダリングされます。ドットまたは塗りつぶされた正方形。コーディングするときは、画面の左から右に成長するにつれて進行状況を表示する方がはるかに簡単です。これは、次の文字が移動する場所を非常に簡単に計算できるためです。おそらく、ビデオメモリのアドレスをインクリメントして次の「進行文字」を表示します。 。
ビデオメモリは、画面の左上から始まり（たとえば、これはアドレス0です）、（（screen_width * screen_height）-1）まで続くので、描画するのがはるかに高速です（プログラマーのコード行とCPUサイクルの両方で）。ビデオメモリは、垂直線よりも水平線です。また、ユーザーが入力した以前のコマンドを引き続き表示できるように、過度の垂直スクロールを節約します。
それはテキストベースの「グラフィック」以来存在しており、この時点での伝統です。コマンドラインでは、左から右への移動が唯一の方法であるため、最初のプログレスバーはそのように機能する必要がありました。 HTMLとJavaScriptでは、テーブルの幅はありますが、リアルタイムで変更できる高さはありません。そのため、この技術では水平バーを再度指示しました。
左から右に流れる時間については少しは購入しません。伝統的な時計が回転します。砂時計または水時計が下からいっぱいになります。どちらかといえば、歴史の先例は下から上に埋められます。
いずれの場合も、左から右に塗りつぶす以外の処理を行った進行状況バーは、この時点では正しく表示されません。ユーザーにシュールで見当識のないエクスペリエンスを作りたいのでない限り、左から右に進んでください。
配置は1つです。テキスト行がある場合は、プログレスバーで下線を引くことができます。 （西洋文化では）書かれたテキストと同じ方向に進むのは理にかなっています
縦棒が存在し、私の車には燃料を示す棒が1つあります。そして興味深いことに、25ピースのフルショーが上部の25ピースで満たされているとは思えないでしょう。グラスの中の水のように、「フィル」が自然に下部に引き寄せられると想定しています。
常に時計回りに動作する円形のバーが存在します。
重要なのは、文化的な複製と参照であるようです。
飛行中のドキュメントアニメーションなどをコピーしたときに彼らが発見したことについて、マイクロソフトから入手できる興味深いものがあります。緑のプログレスバーに沿ってパルスが走っている理由は、ユーザーにアクティビティがあり、それが正しい方向に進んでいることを安心させるためです。
私は時々これらの受け入れられた手がかりのいくつかを実験します、そしてあなたが生み出すことができる即時の欲求不満はおかしいです。
時間の経過とともに増加または進行する物事のメンタルモデルは、通常、左から右、または下から上に移動するもののようです。 他の質問で説明されているメディアプレーヤーのUI の観点から、水平バーは、ユーザーが範囲内のポイントに前方または後方にジャンプしながら、有限範囲内の位置を示す両方の最良の方法のようですその範囲。それは垂直に機能することができると思いますが、それはぎこちなく感じるでしょう。クローズドループのような代替案は、純粋に進行状況を示すために機能しますが、それを操作する必要がある状況では扱いにくいと思います。
進行状況バーは、タスクのステータスを伝える「遠くから見た」方法です。
これにより、ユーザーはモニターの近くから離れても、小さなテキストを読まなくてもタスクの進行状況を視覚的に確認できます。
人間の目は、垂直線を処理するときに光学的に混乱する可能性があります。これが、ほとんどの言語が横書きで書かれている理由の1つです。日本のようなアジアの言語を除いて、それらの言語でさえ水平に書くことができます。
もう1つの問題は、モニターのアスペクト比です。それらは正方形ではないので、人間の脳はその空間を分割する線によって簡単に混乱する可能性があります。人間の脳は、モニター上の垂直線を処理して、関心のある正方形の領域を作成したいと考えます。これは 長方形の荒削り として知られています。
ほとんどのユーザーインターフェイスは多くの水平線で構成されており、垂直プログレスバーを導入すると、ユーザーが混乱する可能性があります。ユーザーインターフェイスコントロールのレイアウトだけで Optional Illusions を簡単に作成できます。
水平線と垂直線がうまく混ざらないことを簡単に示すため。 Vertical-Horizontal Illusion トリックについてお読みください。人間の脳は線の長さを誤って認識しています。
したがって、「プログレスバーはなぜ水平なのか」という質問に答えるには、水平でなければならないからです。そうでなければ、それはユーザーを混乱させ、混乱させるでしょう。
水平プログレスバーの許容可能な代替方法は次のとおりです。
- バーが円周に沿った円形状。
- 進捗状況が完了したことを示す大きな数値テキスト。
- タスクのステータス（作業中、終了）を表す大きなビジュアルアイコン。
- タスクに対して実行されている作業を表す2Dアニメーション。
他の回答は、プログレスバーが一般的に水平に流れる理由を適切に説明していると思いますが、興味深いカウンターの例をいくつか投稿します。
Appleの一部のデスクトップソフトウェア（Xcodeや古いバージョンのMailなど）では、進行状況は小さな円グラフで表示されます。
Appleサポートコミュニティフォーラムの randomtruthからの画像 。品質が悪いため申し訳ありません。
独自のCocoaアプリケーションでそのコントロールを使用することに関心がある場合は、 オープンソース実装 があります。
Appleは、プレビューを再生するときに、iTunes（ ウェブ 、デスクトップ、iOS）でも同様の手法を使用しています。
iLounge からの画像
大胆な火の玉 からの画像
ドアを開いてWebテクニックを見ると、他にも興味深い循環テクニックがいくつかあります。
Percentage Loader の画像、この目的のためのjQueryプラグイン
Circular Progress の画像、この目的のための別のjQueryプラグイン
最後に、「ゲージ」スタイルの進行状況メーターがあります（ただし、実際には進行状況メーターではないと主張しますが、必ずしも動作するとは限りません）プログレスメーターが行うことを期待できるので、片側から反対側へ）：
水平と垂直の両方のプログレスバーを使用する検証ツールを次に示します。垂直プログレスバーは常に表示されますが、水平バーを含むコントロールパネルは左端に折りたたまれている場合があります。
それは本当に2つの理由によると思います：
- 画面の不動産を考慮する必要があります。水平プログレスバーは見やすく、垂直方向のスペースをあまりとらないので、指示、推定完了時間、マシンが実際に実行していることなどの詳細情報は、バーの上または下にきれいに収まります。
- 人間の目は、左から右、上から下に見える傾向があります。 （ここに 1つの記事 言及します。）
（2）を考慮すると、斜めのプログレスバーは意味があるかもしれません。しかし、彼らは多くの画面領域を占有する可能性があります。
なぜ垂直プログレスバーではないのですか？ Microsoftによると 、「垂直のプログレスバーは使用しないでください。水平のプログレスバーの方がマッピングが自然で、フローが改善されています。」 Install_Messenger.exeを示すその記事のスクリーンショットは、これを示しています。操作の進行状況を示す（水平）プログレスバーのインジケーターのすぐ下に、「__ MB/__ MB完了」があります。これが Appleの対応する記事 です。これは、垂直プログレスバーに直接対応していませんが、例には水平バーのみが含まれています。