web-dev-qa-db-ja.com

ボタン内に進行状況インジケーターを表示することは良い考えですか？

典型的な例： http://msurguy.github.io/ladda-bootstrap

よりクレイジーな例： http://tympanus.net/Development/ProgressButtonStyles

enter image description here

必要に応じて、これはデスクトップアプリ用です。ターゲットビューに約3つの異なるボタンがあると考えてください。利点は、ユーザーが常に少数のコマンドのどれが実行されているかを知っていることです。

もう1つのポイントは、後でボタンが別の状態に移行できることです：Inactive (press to execute) -> In Progress (execution progress spinner) -> Finish (happy icon - click to close)

buttonsdesign-patternsanimationprogress-bartransitions
8
Den

内部の進行状況インジケーターを使用する場合は、ボタンに3フェーズが必要です。

  1. 静的
  2. 進捗状況
  3. 成功または失敗

マテリアルデザインのフローティングアクションボタンでも同様のコンセプトを使用しています。あなたは関連することができるかもしれません このマテリアルアップの例

静的フェーズは、実行されるアクションを示します。進捗フェーズには、返されるデータに応じて、確定または不確定の進行状況バーがあります。成功または失敗フェーズでは、アクションの結果を指定します。成功した場合、何かを行います。

失敗した場合は、[アクションで置き換える]失敗というメッセージを表示し、ボタンをクリックしてアクションを再実行できるようにします。

1
Swapnil Borkar

頑張れ。対話中のボタンに即時のフィードバックを表示することの追加の利点の1つは、重複したフォーム送信の削減です。これは、二重に送信すると二重に課金される可能性があるeコマースの場合に非常に役立ちます。

ベストプラクティスは、動作を「削除」などの否定的/破壊的なアクションではなく、「肯定的」な追加/送信に制限することです。主なアクションが本質的に破壊的である場合は、必ず「キャンセル」またはその他の救済アクションを含めて、開始後に進行を元に戻してください。

3
Paul Gebel

ボタンにスピナー/進行状況インジケーターを配置することは問題ありませんが、ボタンを十分に大きくしてインジケーターをコーナーに配置し、ユーザーがスピニングインジケーターに気を取られないようにします。 FacebookiOSアプリのログインページの良い例： enter image description here

2
Stephenye

私はそのような解決策を使用しても問題はありませんが、以下に留意してください：

送信されると、ボタンは進行状況バー（左から右）のみを使用します。提出が完了すると、「提出」というテキストは再び利用できなくなります。代わりに、提出が完了したことを示すチェックマークを使用してください。

そしてもちろん、適切なコントラスト色を使用し、aria-labelを「Submit」、「sending」、「Submitted」に変更することを忘れないでください。

1
Ilias Bennani