ダウンロードが進行中であることをどのように示すべきですか？
ダウンロード形式のオプションがあるボタンの行があるデータテーブルがあります。ボタンの1つがクリックされたときに、ダウンロードの準備プロセスが開始され、進行中であることを示す何らかのメッセージを表示したいと思います。このメッセージは、プログラムがデータを取得し、ブラウザがダウンロードできるように準備している間に表示されます。
ユーザーがボタンをクリックした後、技術的にページでの作業を続けることができるので、ダウンロードボタンのクリックが成功したことをユーザーに示す何かを探していますが、同時にあまりにもそうではありません破壊的。
ダウンロードが進行中であることを示す最良の方法は何ですか？
考えられるアイデアは5つありますが、他の提案も受け入れることができます。
アイデア1：ボタンのテキストを変更する
私の最初のアイデアは、クリックされたボタンのテキストを変更し、読み込み中のアイコンのようなものを追加して、何かが進行中であることを示すことでした。
長所：このアイデアが好きな理由は、混乱が最も少ないからです。また、選択された形式も明確です。ユーザーは技術的に、最初のダウンロードの進行中に2番目のダウンロード形式を選択できるため、このソリューションにより、複数の進行中のメッセージを同時に表示できます。また、アクションの完了に時間がかかる場合、ユーザーはボタンをもう一度クリックしようとすることがよくあります。ボタンに進行記号を直接表示することで、ボタンのアクションに関連する何かがまだ処理中であり、ボタンを再度押す必要がないことは明らかだと思います。
短所：この変更が微妙すぎるかどうかはわかりません。また、ボタンのテキストが突然変化したときに、ユーザーがそれを当惑させるかどうかもわかりません。また、テキストが長くなると、ボタンのサイズが拡大し、XLXSなどの他のボタンが移動します。これは悪いUXですか？
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
アイデア2：ボタン行の横にある小さなメッセージバナー
次のアイデアは、ボタン行の横に小さなメッセージバナーを表示することでした。
長所：このアイデアの良い点は、他の要素をブロックしていないため、ダウンロード全体の期間中にメッセージを表示したままにできることです。
短所：このソリューションに関する私の懸念は、メッセージバナーがページ上に浮かんでいるようなものであり、他のUI要素と調和していることです。ボタン列のように。このメッセージボックスは、ページに属さないランダムなアイテムのように見えますか？特にPDFのように、クリックされた実際のボタンから離れている場合、このメッセージボックスは見落としやすく見落とされがちですか。
アイデア3：小さなモーダルポップアップ
別のアイデアは、小さなモーダルでメッセージを表示することでした。
長所：ユーザーはこのメッセージに間違いなく気づき、ダウンロードがまだ始まっているかどうか心配する必要はありません。
短所：このメッセージはページ全体をブロックするため、ユーザーはダウンロード期間全体でモーダルのままであるか、または必要ですダウンロードを開始したことを示すメッセージにメッセージを変更し、数秒後にモーダルを非表示にします。モーダルを非表示にすることもできますが、ダウンロードボタンをクリックした結果としてユーザーにモーダル全体を閉じるように要求するのは、やりすぎだと思います。また、簡単な情報メッセージとしては「あなたの顔」になりすぎるのではないかと思います。
アイデア4：ページ上部のスナックバー
Android Snackbarのような要素を使用することも考えていますが、ページの上部からメッセージをスライドインします。
長所：このメッセージボックスはページの中央に表示されるため、メッセージバナーのような他のUI要素の間で失われることはありませんボタンの側面でしょう。また、ページ上の他のすべての要素の上に表示されるため、ページレイアウトの残りの部分は問題になりません。
短所：このメッセージはページの一部をブロックするため、ダウンロード中はメッセージを保持できません。技術的にはボックスを非表示にすることができますが、ユーザーがページ上で他のアクションを続行した場合、ページの前面と中央にメッセージが表示されることはないと思います。
アイデア5：ページの横のトースト
私の最後のアイデアは、ダウンロードメッセージをページの横にあるトーストメッセージボックスのようなものとして表示することでした。
長所：このアイデアはスナックバーに似ており、ページのレイアウトは重要ではありません。ある意味で、私はこれがスナックバーのアイデアよりも好きです。なぜなら、それはページの横にあり、それほど邪魔にならないからです。また、これはページの横にあるため、ユーザーが最初のダウンロードが完了する前に2番目のダウンロードを選択すると、積み重ねられたメッセージのリストを技術的に表示できます。
短所：要素が他の要素の上にあるため、メッセージを数秒間しか表示できないか、または、ボックスを閉じるにはボタンを追加する必要があります。また、他のUI要素をカバーすることがよいかどうかもわかりません。また、ユーザーはページの端まで表示されているアイテムに気付かないでしょうか？
他のサイトがダウンロードをどのように処理するかを調査するのにしばらく時間を費やし、Googleドライブがそれらをどのように処理するかが好きでした。
これは、Googleドライブで同時に行われている2つのダウンロードのスクリーンショットです。
この方法の好きなところ：
- このメッセージボックスは、アイデア5で述べたトーストのアイデアに似ていますが、ボックスはページの上部ではなく下部に配置されます。これの良い点は、ページの下部に配置されたボックスは、ページの上部に配置されたボックスよりも重要な情報をブロックする可能性が低いことです。また、目立ちますが、同時にページ上部のメッセージほど邪魔になりません。
- このデザインは、並行ダウンロードを同時に表示するクリーンな方法をサポートしています。
- ダウンロード中にボックスを完全に閉じることはできませんが、上部に最小化ボタンがあり、詳細のほとんどを非表示にできます。
- 処理中にいつでもすべてのダウンロードをキャンセルするために使用できる上部にxボタンがあります。
- プログレスバーを表示する余地があります。 Googleドライブは丸いプログレスバーを使用しますが、必要に応じて、標準のバープログレスバーのデザインにも余裕があります。 （私の場合、進行状況バーにデータを入力するために使用できる完了率データがないので、進行状況バーを読み込みアイコンに置き換えることを計画しています。）
- ダウンロードが完了すると、「処理中」のテキストが「処理完了」メッセージに変わり、処理中のメッセージボックス全体が消えるだけではありません。これの利点は、この方法では、処理が完了したことをユーザーに明確に伝えることができることです。
- 最後のダウンロードが完了すると、「完了」メッセージのボックスがさらに数秒間表示され、自動的に非表示になります。この間、ユーザーはボックスの上部にあるxボタンを使用してボックスをすぐに閉じることもできます。
アイデア2：ボタン行の横にある小さなメッセージバナーは、ダウンロードに時間がかかる場合でも、ユーザーが作業を中断する必要がない場合に適しています。
ダウンロードに時間がかかる場合（私はこれと同じ問題のあるアプリで作業しました）、開始したアクションのすぐ近くにメッセージを置くことで、他の場所に焦点を合わせずにシステムのステータスを確認できます。
また、ダウンロードするフォーマットについて具体的なメッセージとペアにすることもできます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
セグメント化されたコントロールとユーザーの期待
あなたのモックアップでは、セグメント化されたコントロールを使用してダウンロード形式から選択しているようです。これらは通常、さまざまなコンテンツの表示（またはフィルタリング）用に予約されています。例としてiOSガイドラインを示します。
セグメント化されたコントロールは、さまざまなビューを表示するためによく使用されます。たとえば、マップでは、セグメント化されたコントロールを使用して、マップ、交通機関、航空写真のビューを切り替えることができます。
私はそれをドロップダウンボタンに交換することを提案しました。これはbootstrap図書館。
Pro
- 使い慣れたコントロール（ボタン）
- 省スペース
Con
- 形式の選択肢を非表示にします
私の解決策は、ユーザーインターフェイスを4分の1画面左（または好みに応じて右）にスライドさせ、ダウンロードパネルを表示して、ユーザーが現在行っているさまざまなダウンロードの現在の状態を表示することです。
このパネルは最初のダウンロード時に自動的に表示されるため、ユーザーは何が起こっているのか、このパネルの表示を制御する方法（ボタンの使用または左/右のスワイプモーションのいずれか）に気づくでしょう。このようにして、ユーザーは制御下にあり、ダウンロードパネルを表示するかどうかを決定します。一部のメニューシステムでは、このタイプのディスプレイも使用しています。
私は一般的にスナックバーを支持していますが、メッセージが見落とされる可能性があります。ユーザーがデータをダウンロードする必要がある頻度、ダウンロードの準備にかかる時間などに応じて、検討する価値のある別のオプションがあります。
ボタンが押されたときに何が起こるかを示す個別のボタン（Mike Mの回答で説明されている理由によるセグメント化されたコントロールではなく）と共通のダウンロードアイコンに注意してください。ボタンを押すと、次のモーダルが表示されます。
これは非常に透過的です。ユーザーはダウンロードの準備ができていることを確認でき、クリックして実際にファイルを再度ダウンロードする必要があります（ファイルをダウンロードしていることを再確認します）。この時点で、ファイルはブラウザ（たとえば、Chromeのダウンロードバー）で通常のダウンロードとして表示されます。
さまざまなダウンロードの準備の長さにもよりますが、これが大きな混乱を招くとは思いません。それは余分なクリックを追加し、スナックバー以上のものを混乱させますが、データがダウンロードされていることを（うまくいけば）ユーザーに明らかにします。 Optimal Workshopはこのようなフローを使用します-申し訳ありませんが、リンクを含めるのに十分な担当者がいません。
最初のアイデアの変更として、ボタン自体を進行状況バーに変えることができます。
チュートリアルへのリンクの例： https://demo.tutorialzine.com/2013/10/buttons-built-in-progress-meters/
質問全体を読む前でも、私は「トースト（またはスナックバー）を使用する」と答えていました。このタイプのケースが、トーストとスナックバーが存在する理由です：サイトで発生する操作に関する短いメッセージとフィードバックを提供します。（違いはトーストです。通常、システムメッセージに関連していますが、スナックバーはアプリに関連しています）
あなたが言及する短所について、 トーストは一時的です （したがって、しばらくすると消えます）、両方に追加の可能性があることに注意してください閉じるためのコントロール。したがって、これがデフォルトの動作です。一部のパーツやコントロールをカバーすることについては、あなたは正しいです。常に、コントロールを到達可能なままにしておく必要があります。ただし、トーストが読み込まれる空きスペースをいくつか残しておくこともできます。たとえば、ページの右上の領域（モバイルでは下、スナックバーでも同じ）
Microsoftのトーストの概念 は、画像、タイトルなど、少々やりすぎです。 Material Design's がお勧めするような、シンプルな方法をお勧めします。
結論
スナックバーまたはトーストのいずれかが問題の完璧な解決策になります
編集する
コメントについて：同時ダウンロードまたはメッセージがある場合、マテリアルが推奨するように、積み上げトーストまたはスナックバーを使用できます。そのため、ダウンロードが完了してから5〜8秒後にトーストを非表示にすることができます。さらに、次のようなこともできます。ダウンロードがまだオンの場合、dismissアクションはそれを小さくします（たとえば、ローダーのある小さな円）が、ダウンロードが完了するまで完全に消えます。
積み重ねられたスナックバーに関しては、私はそれらを避け、何が起こっているかについての情報を変更するだけです。
例えば：
このようにして、キャンバスからより多くのスペースを取ることなく、必要な情報を提供できます。
ボタンが押されたら、ダウンロードが完了するまでボタンを無効にします。
...
または... Mediafireのように、ページが読み込まれるとすぐにすべての形式のファイルを生成します。ページの読み込み時に、ダウンロードボタンに「ダウンロードの準備中」と表示され、準備が完了すると、ダウンロードしたいものをダウンロードできます。 。