web-dev-qa-db-ja.com

なぜプログレスバーは逆方向にアニメーション化するのですか?

今日、Gmailの新しい読み込みバーに注意が向けられました。

Gmail loading bar

バー内の色付きのパターンは、右から左にアニメーションします。

Mac OSプログレスバーも同じように動作します。

Mac OS progress bar

これには理由がありますか?プログレスバーをアニメーション化するように求められた場合、自動的に逆の方法で実行するので、意識的な決定であったに違いないと思います。

更新

私は最近 記事を読む ユーザーに進行状況バーをより速く表示させる他の方法を含めました:

  1. 脈動数を増やします-「脈動が増加している進行状況バーは、持続時間が短いと認識される可能性が高くなりました」

  2. 進行状況を加速し、最後に一時停止を回避します-進行状況バー「プロセスの終わり近くで最も速い進行状況が発生する」は、進行状況バーよりも速く認識されましたプロセスの結論の近くで一時停止しました」

290
fredley

研究によると、見た目が速く、UXの認識はすべてです;)

A スタディ(PDF) [1]は、アニメーションが、アニメーション化されていないバーと比較して、ダウンロードの知覚速度を最大11%向上させることができることを示しています。 Gmailの読み込みバーのように逆アニメーションの背景を使用するか、バーが完了に近づくにつれて背景のパルスを速くすると、どちらもこの効果を生み出します。 ビデオ アニメーションのデモと記事の要約があります。

[1]ハリソン、C。、ヨー、Z。、およびハドソン、SE (2010)。高速なプログレスバー:視覚的な拡張機能で知覚期間を操作します。コンピュータと人間の相互作用の議事録。

278
csulok

これはImage Readyを使用するのに永遠にかかりました。笑


今後:

enter image description here



後退:

enter image description here


スパイラルがバーの方向と逆向きになると、バーの移動速度が視覚的に悪化します。

バーは互いにかなり接近しているので、Palmで1つを非表示にし、一度に1つだけ見てください。 :)

294
Jung Lee

これは想定ですが、プログレスバーがより速く満たされているように見えるためと考えられます。

この効果は、結果の部分であるバーの右端がアニメーションとは反対の方向に移動し、バーエッジが移動する増分が、塗りつぶしバーを含むボックスに比べて大きく見えるために達成されます。

38
msanford

他の回答によって提示された知覚速度の理由に加えて、この内部パターンのアニメーションは、別の論理/分析レベルでも意味があります。

進行状況バーの例は2つの方法でアニメーション化されています。(1)進行状況を表す領域が拡大し、右端が右に移動します。 (2)内部の色付きパターンが右から左にシフトしている(「反対」方向)。

アニメーション(1)は全体的な進行状況を示すのに役立ちます。そのEdgeが著しく動いている間、何かが起こっていることを間接的に確認します。

アニメーション(2)は、全体的な進捗レベルが行き詰まっている、または気付かずに動いているように見えても、何かが起こっていることを示すのに役立ちます。

その意味で、アニメーション(2)はスピナーに似ています。その動きは、(速度または絶対的な進行状況の)マグニチュードインジケーターではなく、何かが進行している間、何かが進行中であることの確認です。

さて、なぜスピナーは通常時計回りに動くのですか?時計の針に関する私たちの経験は、その回転を時間の進行に強く関連付けているためです。

同様に、「クロール」アニメーション(2)は、(少なくとも左から右に読む言語の読者にとって)私たちの経験に基づいています。テキストの行をたどって結論に至ると、テキストは視線の下で右から左に移動します。 。同じことが、通常レンダリングされるタイムラインにも当てはまり、後の期間は右にノッチされます。過去から未来へそれを検討すると、目盛りは私たちのビジョンの中で右から左に動きます。 (同じことは、写真を内外にアニメーション化する時系列の写真アルバムにも共通です。後の写真に移動すると、前の写真が左に移動し、後の写真は1つの長いフィルムストリップのように右から入ります。)

したがって、拡大バー自体は抽象的な表面への一種のウィンドウです。テクスチャサーフェスが右から左に移動しているという事実は、未来/完成に向かって移動していることを示しています。 (このアニメーションは、プログレスバーの右端のエッジと対照的ですが、マグニチュードエッジが一時的に停止しているときでも右方向に動いているように見える傾向があることも、もう1つの視覚的なボーナスです。)

時々、幅を広げて全体の進捗状況を示しようとしない「クローラー」アクティビティインジケーターが表示されます。それらは、キャンディーストライピングまたは他のテクスチャーの固定サイズの長方形を持っています。その内部パターンは、テキストまたは他の線形メディアをスキャンするかのように、右から左に移動することもよくありますが、何かを前方に回転/ドリルするように、逆に移動することもあります。 (スキャンされた主題ではなく、忙しいワーカーエージェントを表すものとしてテクスチャを見るとき、彼らは左から右に進行状況を見ると思います。たとえば、メンタルモデルは、横スクロールと共有されるものかもしれません。左から右に移動するゲーム。キャラクターは右に移動し、背景は左に移動します。)

14
gojomo

私はそれをアルキメデスのねじ、または潜水艦のプロペラシャフトのようなものと考えました。

something like this

一種は潜水艦を前進させます。

1
packetChor

バーの進行が速く見えるようにするだけでなく、主な理由は、ユーザーがページ/アプリケーションがまだ機能していることを認識できるようにするためです。移動バーは基本的に、アプリケーションがバックグラウンドで動作しており、スタックしていないことをユーザーに通知します。

プログレスバーがアニメーション化されておらず、しばらく動かなかった場合、ユーザーはアプリケーションが「応答していない」と考えるかもしれません。これは通常、プログラマーがUIスレッドを使用してタスクを実行しているときに発生します(これは悪い習慣です)。

1
Tvde1