web-dev-qa-db-ja.com

プログレスバーの完了が速すぎます

バックエンドがいくつかのプロセスを実行しているときにユーザーがファイルをアップロードした後に実行される進行状況バーがあります。次のように、処理が完了すると塗りつぶされる標準の進行状況バーのように見えます: enter image description here

アップロード/処理が完了すると、バーは「アップロード完了」というテキストに置き換えられます。

ファイルが大きい場合、完了するまでに数秒以上かかり、何も凍結されていないことをユーザーに知らせるための素晴らしい視覚的進行を提供します。問題は、ユーザーが小さなファイルを入力した場合、処理時間が非常に短いため、ユーザーが[アップロード]をクリックすると、進行状況バーが点滅し、一部の要素が下にシフトしてから消えて、すべての部分で成功テキストに置き換えられます。二番目の。

これに対処する方法はいくつかありますが、どれが最高のUXを提供するかわかりません。

1。何もしない

行動の1つのコース、そして確かに開発側からの最も単純なことは何もしないことでしょう。バーが点滅し、時間がかかると消えます。これが速すぎると、ユーザーが混乱したり、方向感覚を失ったりする可能性がありますが、ユーザーが期待する自然な進行に従います。

2。少し遅延を追加します

直感的に、extra時間を意図的にアプリケーションに追加することは、UXの罪であると考えるでしょう。しかし、この記事の 遅延を追加して知覚される値を増やす は、Bloggerが小さな読み込み.gifを追加して、ユーザーの満足度を高め、何かがうまくいかないという恐れを減らした方法を示しています。

3。小さなファイルの読み込みバーを非表示にする

アクションの1つのコースは、どのファイルがロード時間の短すぎる原因となり、単純に最初にバーを表示しないかを決定することです。大きなファイルをアップロードするユーザーは、以前と同じ読み込みの進行状況と完了ステータスを受け取りますが、小さなファイルを選択するユーザーはアップロードにヒットし、一時的に「アップロードの完了」が表示されます。これに関して私が見る問題は、プログレスバーが表示されないことに慣れているユーザーです。一貫性をトレーニングしてきましたが、ユーザーごとに異なるUXエクスペリエンスが必要になるでしょう。さらに、このルートを使用する場合、このしきい値を選択してバーを表示または非表示にします。一部のユーザーは、表示されているバーを完全に認識するのに3秒かかる場合がありますが、1秒しか必要ない場合もあります。

4。 100%完了後、バーを上げたままにします

オプション#3とは逆に、バーの下または横にある完了ステータス「アップロード完了」で、バーを100%のままにしておくことができます。これにより、進行状況バーが点滅してすぐに消えることがなくなります。ただし、完成した進行状況バーを示す既に窮屈なモバイルディスプレイでは、貴重な不動産を占有し、まさに最も魅力的な視覚要素ではありません。一定の間隔でそれを消すこともできますが、それによって一部の制御の軌跡が削除され、ユーザーの混乱を引き起こす可能性があります。それはまた、#3のしきい値の問題を引き起こし、バーがどれくらい長くそこに留まるのかが短すぎて、目的を無効にし、あまりに長く続くため、永続的であり、削除されたときに混乱を引き起こす可能性があります。ユーザーに自分でそれを却下させることもできますが、これによりプロセスに余分なクリックが追加されます。

だから私は尋ねますか?変化するロード時間を処理するための最もフレンドリーなUXを提供するものは何ですか?

38
DasBeasto

もう1つの方法は次のとおりです。プログレスバーが最も魅力的ではなく、貴重な不動産を占有しているとおっしゃいました。レイアウトに影響を与えない、よりコンパクトなプリローダーと成功メッセージを検討しますか?例として:

enter image description here

その特定の例があなたの状況に合うかどうかはわかりません。ただし、よりコンパクトなデザインを実現できる場合は、ロードが完了した後、多くのスペースを占有することなく、成功メッセージ(チェック)を残すことができます。

このようなものが使用された場合、少しの遅延を追加してアニメーションを強制的に実行しても問題はありません(アイデア#2を参照)。プリローダーがレイアウトに影響を及ぼさず、アニメーションの実行中にユーザーが何をしていても続行できる場合、それはユーザーを実際に遅延させているわけではなく、ユーザーエクスペリエンスを損なうべきではありません。

104
Nick Todd

進行状況インジケーターは、ユーザーのシステム遅延の認識を減らすために一般的に実装されます。これは、進行状況インジケーターの値を提供するシステム遅延の知覚を排除する必要があるためです。逆に、ユーザーのアクション(例では[アップロード]をクリック)とシステムの応答(ファイルのアップロード)の間にまったく遅れがない場合、プログレスバーの表示は実際にはこのニーズ(UI要素のちらつき/消失)に対して機能します。プロセス/システムのエラーを示している場合があります)。

デザイナーとして決定する必要があるのは、進行状況インジケーターを表示することでユーザーエクスペリエンスが強化されるかどうかです。 ユーザーがアップロードを「見る」ことが重要である場合(進行状況インジケーターを介して)、の最小読み込み時間を追加します表示するインジケーター(必要な場合のみ)は意味があります。それ以外の場合、「アップロード成功」メッセージを表示するだけで、処理時間を短縮できます。数ミリ秒より長いプロセスの場合、現在の進行状況インジケーター/メッセージは適切です。

ユーザーとプロセスのコンテキストを知らなければ、説明に基づいて、オプション#3がおそらく最良のオプションだと思います。 アップロードプロセスが速すぎてユーザーが進行状況を視覚的に認識できない場合は、アップロードの成功または失敗を通知するだけで十分です。いつものように、ユーザーを知ってください。

参考までに、プロセスが1秒より長い場合、 Microsoft推奨 進行状況インジケーターを表示します。

12
Joel Garfield

1つの潜在的なオプションはexplicitly小さなファイルの進行状況バーを非表示にすることではなく(特定のネットワークの「小さな」とはどのようにしてわかるか)ですが、-delay短い期間。この期間にアップロードが完了すると、「アップロードが完了しました」というメッセージが表示されますが、アップロードに遅延以上の時間がかかる場合は、進行状況バーが表示されます。

Psion 3/5ハンドヘルドは、OPLプログラミング言語の組み込みの「ビジー」メッセージに対して同様の手法を使用しました。ビジーメッセージを有効にできますが、指定された時間遅延内で無効にされない場合にのみ表示されます。

通常、遅延は比較的小さく、0.5秒が一般的です。

アップロードが遅延よりもほんの少し長くかかり、進行状況バーが一瞬点滅する可能性はまだありますが、多くの場合、ほとんどのファイルは「非常に短い」または「数秒」と思われます以上"。

5
TripeHound

それまでにプロセスが完了していない場合は、しばらくしてからプログレスバーを表示します。そうすれば、高速アップロードで画面のちらつきや進行状況バーが表示されることはなく、遅いアップロードでも進行状況バーが表示されます。

まだ「インスタント」と感じる時間は、約200〜400ミリ秒です。 200ミリ秒の間、プログレスバーを表示しません。処理が50%未満の場合は、進行状況バーを表示します。ユーザーは、これを「瞬時に」表示される進行状況バーとして認識します。この方法では、アップロードが「瞬時に」または「瞬時に」完了すると、画面時間がかなり長いプログレスバーが表示されます。

4
nwp

#3(小さなファイルの進行状況バーを表示しない)は私には悪いようです。まず、ネットワークに問題がある場合、小さなファイルでもアップロードに時間がかかることがあります。第二に、あなたの気まぐれなブロードバンド接続ですばやくアップロードするのに十分小さいファイルのあなたの考えは、非常に遅いリンクを使用している第三世界の国の誰かのものと同じではないかもしれません。第3に、ファイルのアップロード速度を確実に予測できた場合、進行状況バーを使用する代わりに、その見積もりを引用するだけです。

3
David Richerby

機能する唯一の良いオプションは「4。 100%完了後、バーをそのままにします。」.

アップロードにかかる時間はわからず、インターネットの速度は常に変化しています。それで、バーを2秒間置くのを遅らせたとしたら、アップロードが次の0.5秒で完了したらどうなるでしょうか。

バーの更新はちらつきがなく、頻繁に行われないようにする必要があります。

個人的には、「62%」をバーの最後に移動するか完全に削除し、完了したら「アップロード完了」をバーに書き込みます。アップロードが完了すると、緑の背景に「アップロードが完了しました」という言葉が重ねて表示されます。

(---%(%)テキストを更新すると、同じピクセルがワイトから黒に、次にワイトにスワップされるため、ちらつきます。バーを塗りつぶすと、各ピクセルがウェイトからブロックに変わります。)

Nick Toddによってうまく行われたようにバーを「パイチャージ」にすることは、ファイルが完了した後にバーを表示したまま、スペースをとらない方法です。

0
Ian