無効化されたボタンをクリックすると、フィードバックが表示されますか？
「モバイルのボタンが無効になっている」という私が直面しているUXの問題であなたが私を助けることができるかどうか疑問に思っていました
モバイルオンボーディングプロセスの一部として、いくつかの異なる入力フィールドがあります。これらのフォームにはかなりの数のフィールドがあり、現在、これらのフィールドがすべて入力されるまで、[次へ]ボタンは無効になっています。ただし、ユーザーが無効なボタンをタップすると、入力されていない入力フィールドにインラインエラーメッセージが表示されます。
ユーザーが無効なボタンをタップして何かが欠けていることを示すときにフィードバックを表示する方がユーザーエクスペリエンスが優れているのか、無効なボタンは無効になっているため、通常、無効なボタンが反応するべきではないのかについて、私たちは議論してきました。
結局、どちらの方法でも同じ結果になります。インラインエラーであるか、フィードバック付きのバブルであるかに関係なく、ユーザーは続行できない理由を知ることができます（これは システムステータスの可視性 に準拠しています）。
無効化された要素がアクションを持たないという点は理解できますが、このルールに厳密に固執することは、実際にユーザーに役立つことではありません。ルールを100％守らないという小さな価格で、彼があなたの製品でより良いUXを手に入れることができるなら、私はそれは価値があると思います。とにかくそれを完全に壊すのではなく、わずかにそれから逸脱します。
それが言われていると、私は個人的にこのフィードバックをこのように与えることはより近代的または「クーラー」と考えることができると思います。したがって、特に若い視聴者をターゲットにしている場合は、改善になると思います。
ここでの1つの欠点は、「古い方法」に非常に慣れている一部のユーザーが、これを予期せずに煩わしく感じる可能性があることです。しかし、それはかなり小さなチャンスのようです。
また考慮すべきもう一つ：視覚障害を持つユーザー。スクリーンリーダーはインラインエラーメッセージを（私の知る限り）うまく捕捉できますが、吹き出しは注意が必要です。少なくとも、表示にシステムの焦点を合わせるだけです。
このようなものはそれを行う良い方法のようです：
ソース
ボタンをクリックすると表示されるまたはその上に小さい（？）ボタンが配置されているため、無効化されたボタンのルール。
これがモバイルでなかった場合、無効になっているボタンの横に次のメッセージを表示する方がいいと思います
残りの必須フィールドに入力してください（*が付いています）
またはそのようなもの（ワードスミスが必要）。
しかしモバイルの場合、その領域がないため、ボタンをアクティブ（無効ではない）にし、どのフィールドにまだ残っているかをユーザーに通知しますクリックしたときに入力する必要があります。ボタンをdisabledにしませんが、クリックには応答しますが、おそらく（まだ送信できません）vs（すべての必須フィールドに入力した場合）Send.
アクセシビリティを忘れないでください。 さまざまなこと があります。それらの1つは、ユーザーがモバイル向けの人気のスクリーンリーダー（VoiceOver for iOS、TalkBack for Android）を使用している場合、視覚障害者がボタンに対して聞く「ヒント」を、視覚的に表示されるものとは異なり、長くすることができることです。 ）。詳細 ここ および ここ 。たとえば、メッセージには、「名、姓、および電子メールのフィールドに入力してください」と言うことができます。スクリーンリーダーでテストしてください。
これは、Googleサインアッププロセスが行う方法です。それはあなたのプロセスに非常に似ているはずです。 主ボタンは常に有効であり、機能のみが変更されることに注意してください！
- あなたはかなり自明の形で提示されます
- 次へボタンには原色があり、クリックできます。セカンダリボタンをクリックすると、完全に異なるプロセスに移動します（この場合はサインイン）。
- Nextボタンを使用して無効なフォームを送信すると、最初の無効なフォームにスクロールされ、すべてのコントロールが検証されます（ダーティでない場合でも）。これにより、すべての無効なコントロールが表示されます。 次へボタン。
唯一の違いは、オプションのフィールドがあるように見えることです。これらを（オプション）でマークするか、またはNextに加えてSkipボタンがある完全にオプションのフォームにまとめます（これは電話でよく使用されます）番号。）
フォームが大きくなりすぎた場合は、必要なすべてのデータが本当に必要かどうかを考えてくださいサインアップ時ユーザー自身が、オンラインストアでの購入など、より多くのデータを必要とするアクションをトリガーする場合は、より良い方法ですその後、支払い方法と住所が必要になります。
「情報に基づく意思決定」の概念を踏まえると、ユーザーが間違いを犯すのではなく、間違いを犯さないように、十分な指示をユーザーに提供することが常に優れています。フォームフィールドにアスタリスク*またはその他の方法で他の設計意図をマークする必要がある場合、フォームは正しく入力され、送信ボタンを無効にする必要はありません。本当に必要でない限り、無効にしたボタンは使用しないことをお勧めします。
私には、「次へ」ボタンを実際に無効にしているのではなく、その動作を切り替えただけのようです。だから代わりに
enabled (action a) ↔︎ disabled (no action)
あなたは今持っています
enabled (action a) ↔︎ enabled (action b)
実際に無効としてレンダリングしない限り、それ自体は必ずしも問題ではありません。これを行うと、ユーザーは他の「無効な」ボタンが動作することを期待します。実際に無効になっているボタンに遭遇すると（つまり、動作がない場合）、「無効になっている」ボタンはフィードバックを提供する（または少なくとも何らかのアクションがある）ことが期待されるため、ボタンが壊れているという印象を与える可能性があります。
これは、私が理解しているように、あなたの現在の解決策です：
ユーザーは、最後の2つのボタンのどちらが操作に反応するかを示すことはできません。
代わりに、「有効」、「無効になっているが実際には無効」、「実際には無効になっている」の視覚的な違いを検討してください。例：
このようにして、通常の状態、フィードバックの状態、および実際に無効になっている状態を区別します。
あなたがそれを説明した方法は理にかなっていると思います。すべて必須のフィールドですが、すべての必須フィールドにアスタリスクを含めます。すべてのフィールドが必須であることを示すメモを上部に表示することもできます。ユーザーが複雑なフォームで何をすべきかを理解するのに役立つものは何でも最良です。
モバイルの垂直方向の画面スペースは（ほとんど）無制限なので、無効なボタンのすぐ上にpermanent visibleメッセージを追加します。
続行するには、名前、携帯電話番号を入力し、T＆Cに同意する必要があります。
メッセージは、誰かが[次へ]ボタンまで下にスクロールした場合にのみ表示されるため、必要なフィールドすべてに入力せずに、ボタンに到達したユーザーにのみ表示されます。そして、無効にしたままにすることができます=反応ポリシーはそのままにします。
ユーザーが私のアプリをどのように使用するかを観察したところ、無効化されたボタンがユーザーの大部分、特に技術的にあまり詳しくないユーザーによって押されていることがわかりました。これは、無効になっているボタンがはっきりとグレー表示されている場合でも起こりました。
私の解決策は、通常、無効化されたボタンが押された場合に実際に検証応答をトリガーすることです。そのような検証メッセージを実装する前後の動作を観察することから、これは確かに望ましい効果をもたらしました。
他の解決策は、アクションボタンを無効にせず、通常どおりに検証メッセージを表示することです（ 例 on stackexchange）。
まず、ユーザビリティテストを行って、これが問題になるかどうかを確認します。ユーザーを含めずに優れたユーザーエクスペリエンスを保証することはできません。ユーザービリティテストを行って、ボタンが無効になっている理由についてユーザーが混乱していないかどうかを確認します。特定のユーザーはそれが無効になっている理由を理解している可能性があり、これは問題にならない可能性があります。ヘルプバブルやその他のものを追加することは、必要なことを知らないインターフェースを複雑にするだけです。
ユーザーが常に無効になっているボタンをクリックしている場合は、その理由を特定する必要があります。無効になっていないように見えるので、彼らはクリックしていますか？多分それは視覚的なアフォーダンスの問題ですか？必要なフィールドの1つを誤ってスキップしているため、クリックされていますか？これは、ユーザーが条件に同意するためにチェックボックスをオンにしなければならず、画面上の他のすべてのコンテンツでは表示されなかったときに発生しました。その後、フォームの最後に到達しても、ボタンが無効になっている理由がわかりませんでした。