タスクが完了するまで続行ボタンを非表示にする必要がありますか？
マルチステップウィザードでは、いくつかのステップで、次のステップに進む前に完了する必要のあるタスクのリストがユーザーに表示されます。
リストの各タスクは、ユーザーがタスクを完了するポップアップを開きます。
続行ボタンには3つの可能な解決策があります。
a）常に表示する。すべてのタスクが完了する前にユーザーがクリックすると、続行する前に何をしなければならないかについての情報が表示されます。
b）すべてのタスクが完了すると有効になる無効なボタンを表示します。無効な状態のボタンには、続行する前にすべてのタスクを完了する必要があるという一般的なメッセージが表示されます。
c）ボタンを非表示にし、すべてのタスクが完了したときにのみ表示します。
私のWebアプリには同じワークフローがあり、フォームフィールドがすべて入力されたときに有効になる[続行]ボタンの無効なバージョンが表示されます。ユーザーがすべての情報を入力せずに[続行]ボタンをクリックすると、ポップアップにユーザーメッセージが表示されるので、Bが最善の解決策だと思います。
オプションAは、ユーザーが[続行]をクリックしてエラーメッセージを表示する可能性があるため、ユーザーを苛立たせる可能性があります。無効になっている[続行]ボタンは、先に進む前にタスクを完了する必要がある従来の視覚的な手掛かりを提供します。
オプションCは、次のステップがあるかどうか、または続行できるかどうかがわからないため、ユーザーを混乱させる可能性があります。また、主要なナビゲーションコントロールを非表示にすることはお勧めできません。
アンチパターンですアフォーダンスを視覚的に無効にする、機能的にアフォーダンスを無効にする、またはアフォーダンスを非表示にする。しないでください。 3つすべてのケースを作成します。
アフォーダンスの無効化または非表示は、特にソリューションの過剰設計の場合であるため、私の最大のペットのおしっこの1つです。
- 断続的に何かを隠したり無効にしたりすることは、常に余分なエンジニアリングと設計の労力です。
- クライアント側のデータ検証は、データ（または他の最終結果）の保存が失敗する可能性がある無数の方法の1つにすぎないため、クライアント側の検証に合格し、ボタンを「表示」および「有効」にしても、ユーザーがContinueをクリックしても引き続きエラーになりますが、このエラーを適切に処理する必要があります。たとえば、サーバー側の検証が失敗したり、ネットワークやその他のサーバーに障害が発生したり、デバイス上のファイルシステムエラーが発生したりする可能性があります。
- 場合によっては、クライアント側の検証が正しくない（古いかバグがある）か、適切なタイミングでボタンを「表示」または「有効化」できないことがあります。これはユーザーのサブセットを完全にブロックし、この種のエラーを検出することは困難です。通常、ユーザーがサポートに連絡し、その情報が修正できる人に戻ってくるのを待っています。
要約すると、余分な設計とエンジニアリングの努力が価値よりもリスクを生み出しています。以下で説明するように、リスクを100％軽減できると考えていても、それは依然としてアンチパターンです。
————————————————
不快なものから不快なものまで：
アフォーダンスを隠すべきではないのはなぜですか？
まず、なぜ何かを隠す必要がありますか？プライバシーまたはセキュリティの目的で、物事を隠す必要があります。なぜアフォーダンスがそこにあるのですか？これは、アプリケーションのユーティリティに関する通信と、ユーザーがアプリケーションの意図や信念を通信するためのメカニズムという2つの目的を果たします。つまり、アプリケーションのユーティリティをプライベートまたはセキュアにしようとしない限り、あなたはアフォーダンスを隠すべきではありません。この時点で、アプリケーションがContinuingの機能を備えているという事実を非公開または安全にしようとしておらず、ボタンを永続的に表示していると仮定します。この時点で、アフォーダンスが表示されることの利点に注目しましょう。
- ユーザーはそれを発見できます—ユーザーはアプリケーションの機能について学ぶことができます。
- アプリケーションの機能を知ることは、アプリケーションを使用する動機を与え、それらの機能を達成する方法でタスクを完了します。例えば。彼らは最後に「続行」できることを知っているため、フォームに記入する意欲が高まります。
- 経験豊富なユーザーはどこでそれを見つけるか知っています。これは少しおかしいですが、何らかの理由で現在それを使用することが許可されていなくても、あなたがそれを見つけたことを知ることは、ユーザーエクスペリエンスにとって非常に重要で満足です。見つからない場合は、移動したのか、それともメモリに障害が発生しているのか疑問に思っており、通常はしばらく探し回っていて、最終的にはアプリケーションへの信頼を失います。彼らは機能を削除しましたか？壊れてる？彼らはそれを数ヶ月ごとに動かしますか？
アフォーダンスを機能的に無効にすべきではないのはなぜですか？
これについては前のセクションで触れました。これは、アフォーダンスの2番目の目的に帰着します。つまり、ユーザーが自分の意図や信念をアプリケーションに伝えるメカニズムとしてです。これは混乱の大きなポイントです。ほとんどのデザイナーと開発者は、アフォーダンスを額面どおりに受け止めます。「続行」というボタンをクリックすると続行するか、「削除」というボタンをクリックすると削除します。これが最終的な目標ですが、ボタンはそれ以上のものです。ボタンをクリックすることにより、ユーザーは次の1つ以上を伝えます。
- 彼らintendアクションを実行する
- ユーザーの意図を捉えることは実に奇跡です。この情報は絶対に活用してください。準備ができて進んで利用するユーザーがいます。ファンネルを通してそれらを導きます。
- 彼ら信じる彼らがそれをクリックするとアクションが発生します
- ユーザーは、ボタンをクリックする以外に伝える方法がないということをあなたに伝えました。彼らは、このアクションを実行するための基準を満たしていると信じています。彼らがそうしていない場合、彼らはアプリケーションを積極的に操作しているので、これは彼らを導く絶好の機会であり、彼らとコミュニケーションするのに最適な時期です。
- 彼らは信じる彼らはそれをクリックすることになっている
- おそらく、過去の経験が異なる新しいユーザーであるか、インターネットに慣れていない（冗談ではない）か、今日（または毎日）少しぼやけているかもしれません。しかし、何らかの理由で、彼らはこのボタンをクリックして、それで十分だと考えました。そうではありません...でも、これは彼らを成功へと導くための絶好の機会です。明らかに、UIで他のすべてのコミュニケーションをスクロールしてこのボタンをクリックしました。ボタンは注目を集めたので、実際にやるべきこと（修正が必要なものは何でも）に注意を向けさせます。
最後に、アフォーダンスを視覚的に無効にしてはいけないのはなぜですか？
単に障害者のアフォーダンスはアフォーダンスではないからです。何もしないボタンの視覚スタイルを一致させるためにトラブルに行ったので、何もしないことをユーザーに正しく伝えました。したがって、それは彼らの注意を引きません、彼らは彼らがそれをクリックすることになっていると信じていません、彼らはそれが何かをすることを信じていません、それゆえ彼らは彼らの意図や信念を伝える方法があると信じていません（または混乱）あなたに。彼らは他の何かを探してページを見回すかもしれませんが、他のUXの失敗やコードの失敗が原因でページを見逃しているとしたらどうでしょうか？彼らがクリックする準備ができていると彼らが信じるボタンをクリックすることはとても簡単で速く、そして次に何をすべきかについて彼らに明確なガイダンスを与えることができます。言い換えれば、ユーザーはボタンをクリックするための「早期」ではなく、インターフェースで「迷子」になります。
タスクが必須であり、購入を開始する前にジャケットの色を選択するなど、エクスペリエンスを向上させる機能にのみ必要な場合は、ボタンを表示して無効にすることをお勧めします。
これにオプションのタグ付けフィールドとメッセージングを組み合わせることで、ユーザーは問題なく手順を完了することができます。
はい、私たちは人々を困らせたくありません。それは、ユーザーの期待される結果が正しいことを確認するためにコントロールを使用すべきではないことを意味するわけではなく、プロセスの終わりに到達することによって彼らは困惑しません。必要であったとしても、強制しなかったアクションを完了するためにページに戻る必要があります。
フレームチャレンジ：ほとんどの場合、マルチステップの「ウィザード」ワークフローは、今求めていることを完了するまで、次に尋ねるものを続行（または表示）することができず、ユーザーに敵対的であり、暗いパターンです。ユーザーにとって、それが彼らにとって有益であるかどうか、または彼らが操作全体で実行できるようになるかどうかを知る前に、彼らは情報を提供するように求められているように感じます-それは判明するかもしれません後のステップで必要となる追加情報がないか、後のステップで続行する資格がないことを伝えます。
すべてを1つのページに配置するのが難しすぎる場合、適切なUXは、次のようなページ付けされたプロセスです。
- すべての情報を入力せずに自由に前後に移動できます
- あなたがそうできることを明確にします
- プロセス全体を完了する前に必要となる情報を省略したことを明確にします
- プロセスを中止するか、後でそれを脇に置いた場合に、部分的な作業が保存されるかどうかを明確にします
私は最近、同様のマルチステップウィザードに取り組みました。これは、開業医が適切な医療免許を申請するのに役立ちました。
TL/DR：ボタンのオプションを無効にしました。
私たちは、各質問への回答が後続の質問を導く段階的な段階的なアプローチに従っていたため、「継続」CTAは各回答の後に行う必要がありました。このフローではすべての質問が必須であったことに注意してください。
このため、ユーザーは次の2つのアプローチをテストしました
- 何があっても、「アクティブ」状態を示すアクティブな「続行」ボタンを表示する。
- ユーザーが続行するために必要な単一のアクション/選択を行ったときにアクティブになる無効な「続行」ボタンを表示します。
「続行」CTAを非表示にする3番目のオプションは、システムステータスの反映が不十分で直感的ではないと本質的に考えたため、テストしませんでした。
結果は次のとおりです。
- 2番目のオプション（関連するまでボタンを非アクティブにする）は、ユーザーに焦点を合わせるためのアクション可能な領域の視覚的な手掛かりを提供しました。
- ユーザーが非アクティブ化されたボタンをクリックしようとした場合（これは非常にまれに発生しました）、非アクティブ化（フェード）状態が提供するヒントのため、ユーザーは直感的に質問に戻ります。
- ボタンを常にアクティブにしておくと（オプション1）、ユーザーは実際に関連する質問に答えずにボタンをクリックすることになり、その後のエラーメッセージによってためらいが生じ、速度が低下しました。
これらの理由により、オプション2（無効化されたボタン）を使用しました。
オプション2（非アクティブ化されたボタン）を使用する際の注意事項
- これは、入力が閉じた語彙の選択（ラジオボタン、チェックボックスなど）のみであり、テキスト入力ではないフローに最適です。テキスト入力の場合、マシンは「続行」ボタンをアクティブにするためにフォームが本当に完成しているかどうかを知りません。
- ユーザーがボタンのステータスの変化を確認できるように、ユーザーが質問に取り組んでいるときにボタンを表示する必要があります。
- また、各ステージの質問が1つしかないフローの場合は、[続行]ボタンの操作に一貫性を持たせることが理想的です。 （つまり、続行をクリックした後にのみ次の質問が表示されます）。
お役に立てれば！
2番目のアプローチは行く方法だと思います。ユーザーは、自分が続行できる場所と、さらに多くのステップがあることをすでに知っています。
3番目のアプローチも同様に機能します。このためのモックアップをいくつか見る必要があります。とてもエレガントにできますが、ユーザーを混乱させる危険があります。 2つ目は、保存、信頼性が高く、ユーザーフレンドリーであると思います。
オプションDはどこにありますか？ボタンを有効な状態で表示し、続行する前にフォームに入力する必要があることを明確にする指示も表示します。このようにして、何かを発見させます。ユーザーは説明を読むことができたはずですが、読んでいない場合でも、ボタンをクリックして、次に何をすべきかについてフィードバックを得ることができます。
アラートやエラーメッセージを叫ばないでください。丁寧に指示をもう一度表示または点滅させるか、実行する必要がある追加情報を表示してください。スクリーンリーダーの場合は、aria-live=“assertive”クリック後に何が起こるかを知ることが優先されます。