web-dev-qa-db-ja.com

ボタンでビジースピナーを実装する方法

ユーザーがボタンをクリックして完了するまでの時間が短いアクションをトリガーし、処理中を示すビジースピナーを表示するとどうなりますか？

  • [click]↖⇒[click] ↖⚙-マウスカーソルがシステムビジースピナーカーソルに変わります
  • [click]⇒⚙-ビジースピナーがボタンを完全に置き換えます
  • [click]⇒[ ⚙ ]-ビジースピナーがボタンのテキストを置き換える
  • [click]⇒[click ⚙]-ビジースピナーがボタン内に表示されます
  • [click]⇒[click] ⚙-ビジースピナーがボタンの外側に表示されます
  • [click]⇒[⚙ please wait...]-ビジースピナーがボタンテキストを置き換え、テキストを伴います
  • [click]⇒⚙ please wait...-ビジースピナーはボタンを完全に置き換え、テキストを伴います

上記のソリューションのどれが最もユーザーフレンドリーですか？

progress-barloadingindicatorprogressspinner
3
clickbait

最もユーザーフレンドリーな答えは、常に状況によって異なります。多くの要因に依存しますが、主なものは、ターゲットオーディエンスは誰ですか？彼らの知識とメンタルモデルは何ですか。

この例では、アクションのコンテキストがわからないので、いくつかのことを考えることをお勧めします。

  1. ユーザーが行ったアクションは何ですか？ （アクション）
  2. 彼らは何が起こると予想しましたか？ （知識）
  3. 彼らの期待はシステムの動作とは異なりますか（ギャップ）
  4. ユーザーにフィードバックを提供してギャップを埋める（理解）

あなたの例のために

[クリック]↖=> [クリック]↖⚙-マウスカーソルがシステムビジースピナーカーソルに変わります

  • どのシステムがビジーですか？

[クリック] =>⚙-ビジースピナーがボタンを完全に置き換えます

  • ボタンが消えたのはなぜですか？

[クリック] => [⚙]-ビジースピナーがボタンテキストを置き換える

  • これは私の意見ですが、これは私には大丈夫な解決策のようです。また、このアプローチは、ユーザーがこの回転することの意味を知っていることを前提としています。

[クリック] => [クリック⚙]-ビジースピナーがボタン内に表示されます

  • ユーザーはもう一度ボタンをクリックできますか？彼らがそうなるとどうなりますか？

[クリック] => [クリック]⚙-ビジースピナーがボタンの外側に表示されます

  • ユーザーはもう一度ボタンをクリックできますか？彼らがそうなるとどうなりますか？

[クリック] => [⚙お待ちください...]-ボタンのテキストがビジースピナーに置き換えられ、テキストが表示されます

  • ユーザーが何かが起こっていると彼らは待つ必要があるというフィードバックを持っているので良い解決策です。この時点でボタンをクリックできますか？彼らがそうなるとどうなりますか？

[クリック] =>⚙お待ちください...-忙しいスピナーがテキストを伴ってボタンを完全に置き換えます

  • ボタンはどこに行きましたか？壊した？ああ、私は待つ必要がある...

私の意見では3番目と6番目のオプションが最良ですが、これに関するいくつかの調査を見つけるか、ユーザビリティテストを実行して、ユーザーがこれらの異なるアプローチにどのように反応するかを確認することをお勧めします。

3
Igor-G

[クリック]↖=> [クリック]↖⚙

  • プロセスがWebサイト上で実行されているのか、自分のPC上で実行されているのかが明確にわからないため、これはユーザーを混乱させる可能性があります。

[クリック] =>⚙

  • これはそれだけで素晴らしいでしょう、それはユーザーに十分な情報を渡さない

[クリック] => [⚙]

  • これは上記のオプションに似ていますが、渡される情報はそれほど多くありません。極端なユーザーは、それが何を意味するのかを確実に知ることはできません。

[[クリック] => [クリック⚙]

  • これはまだユーザーにクリックするように指示しており、同時に仕事で忙しいので、ほとんどのユーザーを混乱させます

[クリック] => [クリック]⚙

  • これは、上記の直前と同様です。スピナーが表示されている場合でも、ほとんどのユーザーがそのボタンをクリックするようにしてください。

[クリック] => [⚙お待ちください...]

  • これははるかに優れており、ほとんどの場合それだけがボタンであり、一部のユーザーにとっては「クリックされる」ことを意味します。無効になっている場合を除いて、それは完璧になります。

[クリック] => waitお待ちください...

  • これはもう1つの優れたオプションです。ボタンを完全にヤンクして、ユーザーに起こりうるクリックを回避し、プロセスが実行されたことをユーザーに通知します。

[〜＃〜]要約[〜＃〜]

最後から2番目のオプション（ボタンを無効にする）が最適です。

3
Adedoyin Akande

例はどれも信じていません。

そのボタンで埋める必要のあるものすべてのHTMLおよびCSSスケルトンのロードを開始したいと思います。ユーザーがボタンをクリックしたときにRESTリクエストがテーブルに入力するように要求した場合、ユーザーがボタンをクリックするとすぐに、HTMLとCSSスケルトンのロードが開始されたとしましょう。アニメーションは、ユーザーの待ち時間として使用されます。

これは私が何を意味するのかについて十分に説明された例です： BLOG-stop-using-loading-spinner-theres-something-better

2
Sandy Veliz

マウスカーソルは決して変更しません。私見、最高のUXは、ボタンをクリックしたらすぐに無効にし、ボタンのテキストを「お待ちください...」/「ロード中...」に変更することです。昔ながらの名前で、Webレイアウトやモバイルレイアウトに最適です。

1
Ram Sundar

マウスカーソルを変更することは良い考えではなく、ユーザーを混乱させる可能性があります。ビジースピナーは、ユーザーが行ったアクションの結果です。そのため、このアクションとの関連で表示する必要があります。

スピナーは、ユーザーが見逃さないように十分に表示されている必要があります。ボタン内のテキストのみを置き換える場合、またはスピナーをボタン内に表示する場合、このような小さな変更はユーザーが簡単に見落とす可能性があります。

ボタンのステータスを変更して、クリックが登録されたことをユーザーに即座に視覚的にフィードバックし、その横に「お待ちください」メッセージを含むスピナーを追加します。マイクロコピーライターがあれば、メッセージの文言が改善される可能性があります。時間の見積もりを提示することも、現実的であればよいことです。

1
celinelenoble