最高のボタンプログレスバーとは何ですか？
さまざまなボタンのプログレスバーのスケッチを作成しましたが、いくつかの重要な要素に基づいて、どれが最適で、その理由を知る必要があります。
- 知覚速度（最速）。
- ノイズ/気晴らしレベル（最低のノイズ/気晴らし）。
- 美しさ（moar素晴らしい）。
- 知覚されるパフォーマンス（最もスムーズ）。
次のスケッチでは、各ボタンの進行状況バーのタイプに異なる番号を付けています。左側には、ステージマッピング（初期/中立状態、クリックと最終ステージの間、完了メッセージと最終/完了ステージ）が表示されています。
私はUXの経験があまりないので、UXの達人がこれを整理するのを手伝ってくれることを願っています！
あいまいさを避けるために、私はこのようなものに行きます：
これを行うことの利点は、何かが起こっているという明確なメッセージがユーザーに与えられることですおよびより重要なのは、終了するまで現在のページを離れないようにすることです。
バーの「まだ完了していない」部分には、明るいグリーンを与えることもできます。
「知覚速度」について- 調査結果 プロセスの完了にかかる時間に関係なく、進行状況バーをゼロから開始しないでください。
編集：この研究は実際には別のユースケースについて話しているが、私はAppleは常に少しずつ入力された一般的なプログレスバーを開始するので、この場合に当てはまると思います同様に。
まあ、アニメーションで遊ぶだけでスピードとパフォーマンスを上げることができるので、スピード/パフォーマンスについてはコメントできません。
美しさは主観的なので、私はそれについてはコメントできません。
私が気づくことができる唯一のことはこれです、ボタンが突然円形のローダーに変わるとき、気晴らしのレベルはかなり高いです。この問題は、ボタンを円形ローダーと視覚的に異なるものにすることで解決できます。
いくつかの例：
私は「美しさは主観的」に同意しますが、それでも質問者の「美しさ」が意味するものは「装飾」よりも「ユーザーエクスペリエンス」に関係していると思います。とにかく–自発的に私にとって最もユーザーフレンドリーな解決策は、1）と4）の組み合わせであり、文言（「送信」）は省略します。
これはもちろん個人的な見解ですが、それはまた、たとえばvimeoのプログレスバーは次のように見えます。これは、ユーザーフレンドリーだけでなく、美しいと実際に呼んでみたいプログレスバーです。
まず、確定的な進行状況インジケーターと不確定な進行状況インジケーターが混在しています。 ＃3を除くすべての例は確定的であり、システムが既知の合計に対してどれだけの進歩があったかを定量化できることを示しています。 ＃3は不確定です。つまり、何かが起こっていることを意味しますが、システムはそれがどれほど完了しているかわかりません。
私の提案？番号＃3または＃5。その理由については、以下を参照してください。
＃1見た目は美しく、微妙である可能性があり、ユーザーがクリックしたために何も起こらなかった、またはアニメーションに気づかないとシステムが応答しないという問題が発生する場合があります。
＃2は、システムが応答したことを示すいくつかの変更を組み込んでいます。しかし、それは元の状態とは非常によく似ていますが、異なり、私には何かが壊れたように見えます。
＃最初の段落で述べたように、これは唯一の不確定な進行状況インジケーターであるため、アクションに完了時間または進行状況が不明な場合、これは5つの例の代表です。何かが発生したことが明らかであり、ユーザーがボタンを再度クリックしようとしないようにするため、私はこの扱いが気に入っています。 eコマースサイトの「Place Order」の行動を促すフレーズで、これに似たものが頻繁に表示され、ユーザーが誤って複数の注文を行うことがないようにしています。
＃4と＃5はよく似ていますが、2つの＃5の方が見栄えが良いと思います。これは＃3の決定的ないとこです。 ＃と同じ利点があると思います。
これがあなたの決定に役立つことを願っています。
知覚される速度/パフォーマンスについて："リボンが後ろに移動すると、プログレスバーの知覚される速度が増加する"ことを示す調査がありました） =。研究は特に水平バーに関するものでしたが、その効果は任意のオプションに適用できます。 @DaveAlgerの 空から始まっていない についてのアサーションも2つめです。
気晴らし/素晴らしさについて：私はしばしばこれらの2つが反対の目標であることに気付きます。私の意見では、オプション5は最も素晴らしく、最も注意散漫なものです。