web-dev-qa-db-ja.com

予測できないほど長いプロセスについてユーザーに伝える方法は?

ユーザーがフォームに入力する必要があるWebサイトを作成します。その後、フォームはこの入力でAPIの呼び出しを開始します。

残念ながら、APIの応答は非常に遅く、ユーザーは1分ほど待たなければならない場合があります。

私は X Movement から読みました。ユーザーが長い間待つ必要がある場合は、スピナーの代わりにプログレスバーを使用することをお勧めします。

API呼び出しがどのくらい続くか予測できません。したがって、進捗状況を正確に表示することは困難です。

これを処理する方法やアイデアはありますか?

56
susi87

スピナーと進行状況インジケーターには違いがあります。

  • スピナーは待機のみを通信し、

  • プログレスインジケーター(プログレスバーまたは0〜100%のその他のフォーム)は待機して進行を通知します。

進捗状況、正確さを伝えるには、それが必要です。これが、99%で停止するインストールの進行状況バーが非常にイライラする理由です。したがって、プロセスがいつ終了するかを判断できない状況で進行状況バーを表示することはお勧めできません。

ただし、ユーザーの待ち時間を少なくし、プロセスに関する情報をバックグラウンドで提供するために、以下の一部または両方を適用できます。

  • プロセスをユーザーアクションのバックグラウンドで実行する-これを行うには、たとえば、画面の右上隅のどこかに進行状況インジケーターを表示し、他のアクションからユーザーを止めることはできません。彼らはシステムで実行することができます。

  • おおよその待機時間を伝える-これはのように言っているだけです "これは通常1分ほどかかります。"-それでもユーザーに、終了するまでの待ち時間を理解してもらいます。

  • アクションの結果として一部のアイテムがユーザーに表示される場合は、現在のプレースホルダーを使用して、操作が完了するとデータを入力できます。これは、たとえばLinkedInにアクセスすると表示されます。

編集:

  • あなたが考慮できる別のこと、これらのいくつかを組み合わせる –たとえば、system busyインジケーター(たとえば、スピナー)を表示することによって「通常は最大30秒かかります」という情報によってサポートされます。そして、操作に時間がかかる場合は、ユーザーが選択できるようにします操作が終了した後で、より長く待つか、結果リストに戻るか。同様のパターンが使用されます。 Chrome私が覚えている限り、タブがしばらく応答しないとき。
86
Dominik Oslizlo

それだけ待てば、ユーザーに全然待たせたくない。

"などの結果を表示することを検討してください。フォームの送信が受け入れられ、処理されています。処理が完了すると、[通知方法]によって通知されます。これは通常[x]分以内です "

これで、フォーム、ページ、または何をしているかを離れて、やりたいことを何でもやり直すことができます。処理が完了したら、通知(電子メール、SMS、IM、適切と思われるものは何でも)を送信し、クリックして中断したところから再開するためのリンクを提供します。

このように、彼らはどれくらい時間がかかるのかと思っているページを見て座って貴重な時間を無駄にしています。スピードを上げるためにできることは何もないように感じます(ユーザーが再送信や更新を行うと、どういうわけか、私を超えて助けになると思うのはなぜでしょうか!)。通知が表示されるまで。

ユーザーがこの時点ですでに識別されている場合は、フォームの先頭にあるメッセージも検討してください。送信がまだ処理されているときにユーザーがページに再度アクセスすると、ステータスが通知されます(あいまいな場合でも、正確なプログレスバーを提供できないため、ステータスの詳細があまりないと仮定します)

49
Darren H

進行に数秒以上かかる場合は、ユーザーエクスペリエンスについて考える必要があります。ユーザーが1分間プログレスバーを見つめるとは期待できません。ユーザーは時間内に別のことを行いますが、長いプログレス操作はバックグラウンドで終了します。

進行状況バーを表示する場合は正確でなければなりません(そのため、ユーザーが待機時間を推測できるため)-進行状況の正確なフィードバックを提供できない場合は、予想される読み込み時間のあるスピナーとテキストを使用してください。

最も重要なこと:操作が完了したら、ユーザーが再エンゲージするためのオプションを提供します。これは、デスクトップ通知、サウンド、またはブラウザでのファビコンとタブタイトルのタブバーの点滅/変更であり、完了を通知します。

Your request is being processed, usually takes about 2 minutes.

Please do not close this window.

You will be informed via notification when the progress completes.
12
Falco

上記のすべてに加えて、中間更新を追加することをお勧めします。

  • 読み込んでいます...
  • 読込中...
  • まだ読み込んでいます...

テキストが変更された場合、プロセスがハングしていないという手掛かりがユーザーに与えられます。


アプリに応じて、パーソナリティメッセージはユーモラスまたは正式なものになります。

ユーモラス

  • お茶を作ってみませんか?...
  • それともコーヒー?.
  • それともホットチョコレート?.

1つの注意点:エラーが発生した場合は、ユーモアの場がありません。

フォーマル

  • 無料のデータベース接続を検索しています...
  • データベースに接続しています...
  • データベースにデータを送信しています...
  • ...

フォーマルの例:Photoshop読み込みウィンドウ(ブラシを読む) enter image description here

Klaws および John の提案で編集

8
Runnick

待機を有益なものにできない場合は、少なくともそれを楽しいものにしてください。

たとえば、 特定のWebサイト では、Bill Shatnerが 変な顔と手のジェスチャー を作成しますが、 悪名高い低速システム が問い合わせられます。あなたはそのユーモアを構築するのに最適な人物ではないかもしれませんが、おそらくビジネスイメージまたはマーケティングチームに相談して、ユーザーに「待機中」のコンテンツを提案するよう依頼することができます。

このギャップに気を散らす情報を入れようとしないでください。主なコンテンツは、有益でユーモラスなものでなければなりません。有益な情報は、プロビジョニングされたばかりのシステムのビデオツアーかもしれません。ユーモラスは従業員の犬のカルーセルかもしれません。マーケティング担当者は、関連製品の広告を掲載したくなるかもしれません。それらを許可しないか、少なくともそのような広告は小さくすべきだと主張してください。

6
bishop

1分はプロセスが達成するのと同じくらい高速であり、これは重要なコンポーネントであると想定すると、エンジニアリングと調整してアプローチを変更し、長時間実行されるAPI呼び出しで実行されないようにすることを検討します。

ドミノピザの注文追跡のようなものに似たユーザーエクスペリエンスへの高レベルなアプローチは次のとおりです。

  1. 現在のAPIを変更して、メッセージをキューに追加し、すぐに応答するようにします。
  2. UXはすぐに0%の進行状況バーを表示し、通知を待ちます。
  3. バックグラウンドワーカープロセスがメッセージを取得し、処理を開始します。
  4. さまざまなマイルストーンでステータスの更新を追加して、プロセッサロジックを変更します。
  5. プッシュ通知を介してこれらのステータス更新をユーザーに送り返し、進行状況バーを更新します。
  6. UIが最後の更新を受け取り、プロセスが完了したことを確認したら、ユーザーを次のビューに移動します。
4
Ben Harrison

どちらのバグレポートを読みますか。

  • スピナーは回転し続けます。
  • 進捗状況は一時的に78%で止まっています。
  • アプリは、「修正デルタ波」ステージを実行するのに非常に長い時間を要し、与えられた1分の推定値の10倍長くなります。

はい、後者はユーザーが理解できるものではないかもしれませんが、それでも開発者はパフォーマンスを改善したりバグを修正したりするために必要な情報yoです。したがって、アクションshouldが進行状況インジケータの初期化ルーチンよりも速く終了しない限り、do待機する価値があるか、マルチする価値があるかをユーザーに知らせるための十分な情報を提供してください-しばらく他の場所でタスクを実行します。そしてしないでください絶対に必要でない限り、デバイスを完全にブロックします。

2
Tobias Kienzler

主に、長い待機には多くの問題があります。

  • ユーザーは、ウェブサイトが遅いだけと比べて、ウェブサイトが失敗した状況をどのように区別できますか?
  • ユーザーにとって、接続が失われた場合の影響は何ですか?ブラウザがクラッシュしましたか?
  • フォームを再送信すると、ユーザーにとってどのような影響がありますか?

ただし、テキストを使用してこれらの問題に対処しようとすると、驚くほど裏目に出る可能性があります。次のようなテキストで待たせるウェブサイトを見るときはいつでも:

このページを更新しないでください。お支払いが2回処理される可能性があります!

私は本当に心配しており、通常はWebサイトに戻ることを避けています:

誤ってお客様に2度請求する可能性がある場合、ウェブサイトの支払い処理にどの程度自信がありますか?まあ、全然自信がない!


重要な問題は、これはユーザーを待たせるだけではなく、次のことをユーザーに保証することです。

  • 彼らの要求は対処されています、
  • 彼らの要求は失われません、
  • 彼らはいつでも要求の処理を再開できます。

ユーザーがログインしている場合は、Webサイトデータベース内のプロファイルにリクエストを保存できます。ユーザーがログインしていない場合は、グローバルに一意のIDを生成して、ユーザーのブラウザーのCookieまたはローカルストレージに保存できます。

どちらの場合も、UIの観点からは次のことを行う必要があります。

  • リクエストが承認され、登録されたことをユーザーに示します(まだ処理されていない場合でも)。
  • ユーザーが最新のリクエストを確認できるようにします。少なくとも前回の接続以降に完了したリクエストであるため、タスクを再開できます。

どちらのステップも、「履歴」/「最近のリクエスト」ボックスをユーザーに表示し、現在のリクエストをボックスに追加して、それが行われたことを確認することで実行できます。リクエスト(ドラフト、送信済み、進行中、完了/キャンセル済み)が一番上にある「ステップ」を区別する小さなアイコン。

これは、待機自体からユーザーの不安や不安を和らげるのに役立ちます。


そして今、それから初めて、ユーザーを最も待たせる方法を取り上げます。

最初の質問は:

ユーザーはアクティブに待機していますか、それとも非同期でユーザーに通知できますか?

後者の場合は、通知されることをユーザーに伝えます。彼らはすぐに進みたいと思うでしょう。

この場合、前述のように、回転が行われるのではなく、回転バーではなく進行状況バーを表示することをお勧めします。

  • 進行状況バーの持続時間は、API呼び出しの90/95パーセンタイルの概算である必要があります。 99%でスタックするよりも早く完了する方がはるかに良い(キーワード:スタック)、
  • 可能であれば、ステップをプログレスバーの上に表示する必要があります(「ステップ1/5:X」、「ステップ2/5:Y」、...)、
  • ウィングしないでください。APIで処理のステップを確認できる場合にのみ、ステップを表示します。

その間、ユーザーが別のリクエストを処理することを許可するかどうかは、あなた次第であり、使用方法によって異なります。

また、ユーザーが待機している間に広告やギャグを表示することは、必ずしも積極的に行われるとは限りません。怒っているせっかちなユーザーは、金儲けの試みに対するユーモアと忍耐力がほとんどありません。

1
Matthieu M.

ペンギンかレミングスのどちらかが崖の上を歩いて底に積み重なる状況グラフィックをお勧めします。

これにより、ユーザーは経過時間(死んだペンギンの数)と残り時間(ピットの残りスペース)を知ることができます。

ユーザーは、ペンギンがなくなるか、前進するためのスペースがなくなると、プロセスが失敗またはハングしたことを認識します。

ユーザーはピットに何匹のペンギンが入るかわからないので、ステータスバーのパーセンテージより優れています。 (瓶の中のジェリービーンの数を推測するのによく似ています)したがって、ユーザーはあなたが達成することに失敗することを期待することはありません。

スピニングホイールなどとは異なり、これはフィードバックを提供し、ユーザーに何も起こっていないことを考えさせません。人々は、長いスピナーは遅れの兆候であると信じています。この信念は、何十年にもわたるマイクロソフトアワーグラスとApple無限のカラーホイールエクスペリエンスから得られたものです。

また、このビジュアルは、ユーザーが日々の退屈なアプリ/ウェブ使用から非常に必要なブレーキを与えるでしょう。

1
Annon Blank

最も重要なことはロードに時間がかかる可能性があることを明示的にユーザーに通知する(約1分)と進行状況インジケーターを表示することです。私の意見では、タスクに取り組んでいることを示している限り、それがスピナーであろうとプログレスバーであろうとそれほど重要ではありません。

長時間のロードで正確な表現を提供できない場合、プログレスバーの問題があります。進行状況バーがかなり長い間40%で止まっていると想像してください。ユーザーは、実際にはそうではないのに、サイトがロードを停止したと考え始めるでしょう。この場合、ユーザーはプロセスを放棄する可能性が高く、それを確実に回避する必要があります。

別の良いアイデアは待機中にアニメーションまたは画像を表示するです。このようにして、彼らの注意はページに保持されます。もちろん、これはアプリケーションのタイプによって異なります。

1

ユーザーが長い間待つ必要がある場合は、スピナーの代わりにプログレスバーを使用する方が良いと私は読んだ

はい、しかしそれは理由ではなく効果です:

プログレスバーは、次の場合に使用できます測定可能プロセスの進行状況(!)。 「Xが発生した場合、通常は半分ほど完了しているので、進行状況を50%に設定してください」という行の中の何か。

スピナーは、あなたがわからないプロセスにかかる時間です。あなたはあなたがそれがほとんど終わっているのか、それとも始めたばかりなのかわからないので、あなたはそれを回転させ続け、そして「それが終わったら終わります」。

「わからない」は、「とにかく短いので気にしない」から来ることがよくあります。そのようにして記事の著者は結論を出しました。しかし、作者がすべての操作(特に長い操作)は測定可能であるという隠された(そして誤った!)仮定をしたことは明らかです。結論:「短い=スピナー、長い=進歩」という意味合いがありますが、それは単なる偶然の一致であり、基本的なルールではありません。

API呼び出しがどのくらい続くか予測できません。したがって、進捗状況を正確に表示することは困難です。

それが、そもそもスピナーを発明した理由です!

「不確定プログレスバー」というものもあります。しかし、スピナーと何の違いもありません。これは、通常のプログレスバーと視覚的に一貫性を持たせることを目的としているため、同じダイアログ、グラフィック、およびレイアウトを両方のタイプの操作で使用できます。

「フローの再設計」についてはすでに述べたので、繰り返す必要はありません。最高のスピナー/プログレスバーは、決して必要のないものだからです。

0
Agent_L

ユーザーに通知する

おおよその時間または最大時間がわかっている場合は、それらをプログレスマーカーとして使用することもできます。待機中に何らかのアニメーションや流用を行うと、痛みがやや軽減されます。それらが発生したときにユーザーに通知する「部分的な」ステップを取得できる場合は、単調さを壊す可能性もあります。

APIから情報が返されない場合でも、15秒ごとにユーザーに知らせてください。そうすることで、サービスが壊れておらず、まだ待機していることが良好です。

さらに良いことに、予想される最大期間が経過した後に、ユーザーに役立つ情報の別の送信方法(検索?)をユーザーに知らせてください...

2分経ちましたが、何か問題が発生した可能性があります。通常、それほど長くはかかりません。担当者名@メール

0
aslum

ここでの目標は必要以上の情報をユーザーに提供せずに、常にユーザーに通知するです。リクエストが高速に処理されるユーザーは、平均待機時間を知る必要はありません。また、5分間待機していたユーザーは、プロセスに通常1分かかることを知る必要はありません。

これを実現するための1つの提案を以下に示します。1分でプログレスバーがキャップされ、その下にテキストが表示されます。最初はテキストは"working on it"を伝え、次に約10-15秒が経過した後、テキストを(これは通常、分 "、そしてが経過し、進行状況バーがいっぱいになった後、メッセージをメッセージが長くかかる理由とユーザーが実行できる理由に関する理由)で置き換えることができます。それについて。 「私たちはx APIを使用していますが、現時点では応答が遅いようです」次に、「これが完了したら通知を送信します」、「後でもう一度やり直してください」など、彼らができることについてのアドバイスが続きます。

繰り返しになりますが、1分後でも時間が経過してもメッセージをカスタマイズできます。ユーザーリクエストの95%が1分30秒以内に満たされることがわかっている場合は、「x APIを使用しており、現時点で応答が遅いようです。しばらくお待ちください」と変更し、「しばらくお待ちください」 while」は、1分30秒後に他のメッセージに送信されます。

0

さまざまなプレゼンテーションスタイルに関するこのすべての話は、ここでの中心的な懸念事項の横にあります。
ユーザーは、リモートサーバーに接続するWebサイトフォームで情報を提供しています。

長い待ち時間がある場合、ここでの最大の懸念は、ユーザーが接続がハングしたと考えることであると私には思われます。それで、不確定な時間がかかります。おそらく1分ですが、サーバーの負荷に応じて30秒から5分ほどかかりますか?そう言うメッセージを必ず持ってください。
最初に注意を引くために、そのメッセージには小さなアニメーションコンポーネント(単純なCylonの目で十分です)を含める必要があります。ユーザーは、このメッセージが単なる静的な言い回しではなく、いつでも閲覧できることを知る必要があります。

ここでの主な懸念は、サーバーへの接続が失われていないこと、またはサーバー側のスクリプトがフリーズまたはクラッシュしていないことをユーザーに通知し続けることです。そして、診断などのプルアップを開始する必要のない方法でこれを行うため。
ユーザーがシステムを2回以上使用する場合、ユーザーは提供された情報が信頼できるものであることを知る必要があるため、これはごまかすことはできません。
HTTPSセッションを開いたままにするのと同じ方法を使用する必要があります。つまり、タイムアウトを防ぐためにpingを実行するクライアント側スクリプトです。

インジケーターが点滅し、次のような影響があることを示す簡単なメッセージ

ステータス:処理中。 。 。

おそらくあなたの状況に最適でしょう。他にもさまざまなメッセージを表示できます。

ステータス:接続が失われました!

ただし、もう1つ必要なことは、クライアント側のスクリプトが応答するかどうかをユーザーがどのように知るかです。使用しているものにもよりますが、現地時間を示すものを書くことをお勧めします。そうすれば、ハングした場合、そのクロックを別のクロックと比較できます。
しないでくださいマウスカーソルなどで風変​​わりであることを当てにしています。一部のユーザーは、スクリプトを実行できないようにするためです。

0
can-ned_food