検証が不完全な場合、フォームの[続行]ボタンを無効にする必要がありますか？
フォームでは、必要なフィールドがすべて入力されるまで「続行」ボタンが非アクティブであることがよくあります。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
これは実際にはユーザーの助けですか、それとも邪魔ですか？
このProは、フォームへの入力やエラーの処理が完了していないことをユーザーに視覚的に示すものだと思います（インライン検証を行っても、実際に操作したことがない場合はユーザーに通知されないためです）フィールドなので、その時点でのエラーは表示されません）。
しかし、この場合の主な欠点は（これもユーザビリティテストで判明したことです）、ユーザーがボタンをクリックできない理由が混乱することです。
検証が完了するまで[続行]ボタンを無効にするパターンは、実際に否定的なユーザーエクスペリエンスを提供していますか？
取得した情報のタイプと必要なフィールドの数
それは本当にあなたが求めている情報の種類と範囲、そして入力する必要があるフィールドの数に依存します：
このパターンをテストし、ログインとパスワードの作成に使用しました。インターフェースは非常にシンプルで、必要なフィールドの数が限られているので、続行ボタンをアクティブにするために必要な情報に関して曖昧さがなかったと思います。
（私の意見では）ユーザーは一般的にタスクに集中しているので、アクションにコミットしてタスクを完了する前に、タスクを開始することが最初です。
例として、特定のパスワード要件（私が設計した状況）を使用したパスワード作成ページの場合を考えます。この特定のケースでは、パスワードのすべてのルールが満たされるまで続行ボタンを無効にしました。警告は、ユーザーが新しいパスワードを入力し、入力がすべてのパスワード要件を満たしていることを確認するときに視覚的なフィードバックを得る必要があったことです。
システムは、適切な時間内に適切なフィードバックを通じて、ユーザーに何が起こっているかを常に通知する必要があります。
以下は、このアプローチの優れた例であり、ゲーミフィケーションロジックも組み込まれており、他のバリエーションと一緒に実物 here をテストできます。
エラー防止
一般的なルールとして、私は（可能な場合）ユーザーの不満を増し、ユーザーの信頼を損なうエラーメッセージを回避しようとします。したがって、続行ボタンをアクティブにしてエラーメッセージを表示する代わりに、必要なフィールドに関するヒントと情報を可能な限り積極的に伝えようとします。
優れたエラーメッセージよりも優れているのは、最初から問題が発生しないようにする注意深い設計です。エラーが発生しやすい状態を解消するか、それらを確認して、アクションを実行する前に確認オプションをユーザーに提示します。
インライン検証：コンテキストでのエラーメッセージの提供
以下は、無効なボタンのあるシンプルなフォームのもう1つの 素晴らしい例 です。フィールドはインラインで検証され、無効なボタンは「シェイク」してフォームの不完全性を示します。また、あなたのポイントに関して：
インライン検証を使用しても、実際にフィールドを操作したことがない場合はユーザーに通知されないため、その時点でのエラーは表示されません
フォームを操作すると、進行状況（チェックマーク）または（インラインエラーメッセージ）に変換されます。これが機能しない唯一のケースは、ユーザーが情報を提供せずに「サインアップ」をクリックしたときであり、非常にありえない/不合理な動作であり、それに応える必要はありません。
より長く、より複雑なフォームを扱う場合は、情報をチャンクするによってフォームを構造化し、段階的なプロセス/ウィザードまたは関連する場合は類似のパターン。これは、設計を最適化し、エラー防止に焦点を合わせ続けるのに役立ちます。
エラーメッセージの内容
「送信」または「続行ボタン」が有効になっている場合に考慮する必要のある他の領域は次のとおりです。
これはEdgeのケースかもしれませんが、それでも言及する価値はあります。ログインボタンが有効になっている一般的なログインフォームを考え、ユーザーが詳細を入力せずにログインをクリックすると、エラーメッセージはユーザーにシステムのセキュリティを侵害せずにtelと表示します：私が見た最も簡単なメッセージは次のとおりです：またはパスワード "
これは、ユーザーが行ったこととシステムがユーザーにフィードバックすることの間の明らかな不一致です。したがって、この特定のケースでは、必要なフィールドが入力されるまで、ログインボタンを無効にすることを選択します。
無効化されたボタンはいつ使用できますか？
無効なボタンの目的は、エラーメッセージを先取りして防止することであり、次の場合に最適な方法でこれを実現できます。
- フォームには限られた数のフィールドがあり、ユーザーは欠落しているフィールドを一目で確認できます。
- 必須フィールドを視覚的に強調および各フィールドが入力されたときに明確なフィードバック（ボタンをアクティブにするために満たす必要がある目標）
- フィールドラベルは短く、簡単にスキャンできます、たとえば、名前、ユーザー名、町/都市など、1番目のポイントを補強します。
すべてのフィールドは必須ですこれは、ユーザーがボタンをアクティブにしてアクションにコミットするための明確なパスを提供するためです*。
*オプションのフィールドがある場合、ユーザーがボタンをアクティブにするために実際に必要なものを誤って解釈する可能性があるようですが、これをサポートする証拠はありません。
無効化されたボタンは邪魔ですか？
明らかにではありません。その救いの手それは古い格言を具現化します「予防は治療よりも優れています」しかし、警告があり、私が言及したいくつかの要因を比較検討する必要があります上記とターゲットオーディエンスでテストして、意図したとおりに機能することを確認します。
機械ではなく人のために設計する
エラーメッセージは、マシンのように動作しないことで人々を罰します。人々に人々のように振る舞わせる時です。問題が発生した場合は、人為的エラーではなく、マシンエラーと呼びます。マシンは誤って設計されており、その固有の要件に準拠することを要求しています。私たちの要件に適合するマシンを設計および構築する時が来ました。私たちとの対決をやめる：私たちと協力してください。
私が主張しようとしている点は、「ユーザー」は私たち全員と同じように人々であり、私たちは彼らの知性を過小評価して、彼らを軽蔑的に扱ってはならないということだと思います。
- これらは読み、理解しますこれらが明確で、読みやすく、簡潔な場合
- 彼らはチェック彼らから何が必要かをチェックしますフォームが適切に構成されている場合そして彼らが達成したいこととインラインします（タスク中心）
この動作はユーザーエクスペリエンスの妨げになると言わざるを得ません。
あなたがこれまで読んだことがあるなら スティーブ・クルーグによる私を考えさせないでください そして、あなたはこのパターンがタイトルで述べられたルールに違反していることにすぐに気付くでしょう。
なぜこれが無効になっているのですか？
ユーザーにこのフープをジャンプさせるメリットはありません。
基本的に私が示唆しているのは、ユーザーがアクションを実行できないフォームで迎えられ、発見またはさらに悪いことに、提示されたフォームを適切に使用する方法を理解する必要があるということです。
これの回避策は、必要なフィールドにすぐに注意を向けることですが、フォームに触れていなくても、赤いエラーの束で迎えられた理由を不思議に思うので、パニックに陥ります。
ユーザーが送信ボタンを押すという意図したタスクを実行するのを止めないでください。フォームが最小限の影響で試行できることを知っておくのは良いことです。 「フォームのエラーを赤でハイライト表示してください」という穏やかなエラーメッセージで十分です。
その他の考え：
これが頻繁に表示されるWebサイトまたはページはわかりませんが、Googleで見つかった最初の10件の「お問い合わせ」Webサイトフォームを一目見ただけでは、あなたの観察に反論しているようです。
私の2セント：
私が推測する必要がある場合、[送信]ボタンを無効にすることは、人気のある検証プラグインのデフォルト機能になり、「開発者」は単にそのままにします。
「続行」ボタンが非アクティブになることがよくあります
これはかもしれないと思うfalse。読む！
価値のあるものとして、私は現在人気のあるWebサイトのサインアップフォームに関するいくつかの古い調査を更新していますが、ごくわずかな割合（約5％以下）で[送信]ボタンを無効にしていることがわかりました（それが最終的なものかどうかsign upまたはacontinuetype button）は、データが「有効」と見なされるまで続きます。
非常に多くのフォームを調査した後、送信ボタンが無効になっていると、invisible動作ではなく、noticeable動作になります。これが、実際よりも頻繁に見ているようなfeelかもしれないと思う理由です。
ボタンが無効になっているという追加の問題もあります。フォームが同時にユーザーの注意をそらすことなくオンザフライでデータを検証するという驚くべき仕事を行わない限り、ユーザーが何が悪いのかを見ることができなくなります。コンテンツ。
これを容認できるサイトの1つはBBC ID用です
ただし、有効なものと無効なものをオンザフライで例外的に明確にします。
ボタンを無効にするサインアップフォームのもう1つの注目すべき例はMailChimpですbutpasswordが受け入れられるまでそれを無効にします-フォーム全体ではなく、パスワードを入力してボタンを有効にすることができます。フォームに他の有効なデータはありません。
彼らは、フォームの送信を検討する前に、絶対に正しいパスワードでなければならないことを明確に理解しています。残りのデータは送信時に検証できます。ログイン用の送信ボタンを無効にすることはありません。
Mailchimpサインアップフォームは、私の意見では、多くの点で非常に優れています。
GoDaddyは、送信ボタンを無効にするサイトの3番目の例です。ただし、ここでは、データがすべてvalidになるまでボタンを無効にしません。フィールドは空白以外にする必要があるため、各フィールドに1文字ずつ入力します。
ここで無効化されたボタンは、ユーザーが無効フィールドではなくミスフィールドを見つけるのに役立ちます。
要約すると：
すべてのデータが実際に有効になるまでボタンを無効にしたい場合は、フォームは非常に短くする必要がありますおよび例外的に十分に検証済み）その場で。長い形式では何が問題なのかが不明確になり、必要な検証レベルがすべてのフィールドで過度に煩わしくなります。
そうすることであなたは小さな少数派になるでしょう、特に完全な検証のために-あなたがそれを「しばしば」見るという感覚が何であれ:)
ボタンを無効にしないでください
ユーザーの立場から考えてみてください。ユーザーを2つのグループに分ける
- 続行できると現在考えていないため、続行する方法を探していない
- 彼らが進む準備ができていると信じ、そうする方法を探している人々。
前者のグループでは、「続行」ボタンを無効にすることは、自分のビジョンの隅に見られる視覚的なアーティファクトにすぎません。これは役に立ちますが、フォームの状態を表す他のどのグラフィックよりも役立ちます。これらの人々にとって、グラフィックの変更（続行ボタンを指す矢印や強調表示された続行ボタンなど）は、ボタンが灰色から黒に変わるのと同じくらい意味があります。
後者のグループについては、フォームが完成したと信じています。無効にされたボタンは、彼らが間違っていることを彼らに知らせますが、何が悪いのかを特定するのを助けません。彼らは今、フォーム全体をスキャンする必要があります。フォームが正しく入力されていると考えて、セクションが不完全であることを示すために欠落している表記を探します。これは、ユーザーと対話する機会を逃します。その相互作用は、完全に記入されていないフォームのセクションを見つけるのに役立ちます。この相互作用を見逃すと、フォームがパズルに変わります。「ウェブ管理者は、あなたが何か間違ったことをしたことを知っていますが、それを見つける必要があります。」
フォームが完成したことを示すグラフィカルなヒントを処理する方法は他にもあり（私は強調表示されたボタンが好きです）、続行ボタンはユーザーに支援を求める方法を提供するため、ボタンを無効にする理由はありません。
これは表現された多様な意見から引き出されたメタアンサーです。
ボタンを無効にする場合でも、クリックをチェックして、ボタンが無効になっている理由を説明する必要があります。これには2つの利点があります。表示されるエラーが少ないことと、何らかの理由で以前にフォームを送信できない理由を伝えなかった場合は、明示的に送信することができます。
ボタンはクリックするためのものです。ユーザーがボタンを見た場合、彼はクリックしたいと思うでしょう。無効なボタンがアクティブになるのは、その特定のフォームにすべてのデータが入力されている場合のみです。すべてのフィールドは必須であり、これらのフィールドのいずれかが空のままになっているとサインアップできないことを、最初にユーザー（私が設計するフォームで行う）に伝えたいと思います。あなたのフォームは、ユーザーが別のレベルのロックを解除するために彼がプレイしているレベルを終了しなければならないゲームではありません。ちょっとした考え ：）
はい「続行」ボタンは、すべての必須フィールドに入力するまで無効にする必要がありますleastsometext（これは、必要なフィールドがユーザーに対して何らかの方法で指定されていることを前提としています）。ここでのアフォーダンスはシステムはユーザーからの必要な入力が得られるまで続行を試みることさえできませんです。
必要なフィールドに入力したら、[Continue]ボタンをすぐに有効にして、システムに必要なものがあることを示しますattempt続行します。
そこから、「続行」ボタンをクリックすると、完全検証が実行され、検証メッセージがユーザーに返される場合があります。
フォームの[続行]ボタン必須すべての必須フィールドに入力して検証に合格するまで無効にする必要があります。
どうして？まあそれは常識です、本当に：
あなたが銀行だと想像してみてください。そして、あなたはお金をあるパーティーから別のパーティーに移すことを可能にする単純なフォーム設定を持っています。 「どの口座から送金しますか？」フィールド、「受信者」フィールド、「送信金額」フィールド。
これらのフィールドのいずれかが入力されていないと、転送は行われません。そのため、3つのフィールドはすべて必須です。すべての必須フィールドからの情報がないと、この転送を行うことができません。
ここで、3つのフィールドすべてを必須にしてユーザーに通知し、ユーザーがすべての必須フィールドに情報を入力したにもかかわらず、「送信金額」フィールドに誤りがあるとどうなりますか？
ユーザーが0.00を入力したとしましょう。
まあ、私たちは0.00ドルを送ることはできません。ゼロドルの送信などのケースを処理するようにバックエンドが適切に設定されていない場合、何が起こりますか？ユーザーが[続行]をクリックすると、帯域幅と時間を失うだけでなく、帯域幅と時間も失われます。そしてビジネスでは、時間はお金と同じであり、多くの人々が常に間違いを犯したり、必要なときに詳細を入力していなかったりすると、効果的にオーバーヘッドが大きくなりすぎて（リソースが多すぎるため）、これにより、ある時点で最終的にデータの不一致が発生することに注意してください。
また、ユーザーとして、フォームを検証せずに、何かが間違っていると言わずに続行できるようにするのは非常に迷惑です。特に、ページが更新され、2回目にすべてを入力する必要がある場合。
私は中立があると信じています。視覚的に無効になっているボタンは、提案されているようにそれをクリックしても「何もしない」ことを意味する必要はありません。これにより、その主要なアクションを有効にするために必要なものが何もない場合、ユーザーは論理的に進むことができなくなりますが、それをクリックしても、無効にされた理由と有効にする方法を説明する警告メッセージをユーザーに表示できなかったわけではありません。
いくつかのWebページをデザインしているときに、私はこのサイトにアクセスして、いくつかの決定を下すために他のユーザーが何を言わなければならないかを確認しました。最善の答えは「場合によります」であると結論付けました。
私は自分が間違ったことを何もしない有効なボタンを使った自分自身の経験について考え、時にはデザインが不十分なWebページですべてをクリアしました！長いフォームでエラーがページの上部にある場合、特にイライラします... [送信]ボタンを数回クリックしてから、上部までスクロールして表示されるまで、エラーは表示されません。問題。さらに、すべてのWebサイトが、[送信]ボタンをクリックするまで何が必要かを明確にするわけではありません。私が何かを入力しなければならないという事実の後に私に知らせるウェブサイトで悪い日に私を捕まえないでください！
私はボタンを押す前にフォームで何が必要かをウェブページで完全に明確にする必要があると思うので、必要なフィールドに入る前に送信ボタンを押すと、私はそう思っていました。必要でした！一方、必要なフィールドをすべて入力するまでは、銀行のWebサイトで[送信]ボタンを有効にしたくないというJaseに同意する必要があります。私は銀行のWebサイトを他のどのサイトよりも使用しており、無効にされたボタンによって混乱が生じることはありません。
だから、私の結論は？複数のフィールドを持つ広範なフォームがある場合、一部は必須、一部はオプションであり、すべての必須フィールドを明確にマークし、[送信]ボタンを有効にし、フォームが無効または必須データが欠落している状態で送信されると、問題のフィールドを強調表示してメッセージをリストします。エラーあり。すべてのフィールドが同じページに表示されるフォームがある場合は、[送信]ボタンと一緒に、ボタンを無効にし、ユーザーがボタンを有効にするために何をする必要があるかを明確に示します。 [送信]ボタンも有効にできます。ただし、どちらの方法でも問題なく動作し、優れたユーザーエクスペリエンスが提供されます。ここに、Webデザインの美しさがあります。それはあなた次第です。最後に、どちらの方法でコーディングを行うのが難しいかを確認します。どちらの方法でも問題がないように思われる場合に、どちらか一方の方法で決定を下すのに役立つ可能性があります。クライアントのコストを抑えることは常に考慮事項です。
ああ...そして、一般的なユーザーはどのくらいの頻度でHTMLを「無効」にしますか？それは一般的ではないと思いますし、平均的なユーザー（IT以外）もその方法を知らないので、ユーザーフレンドリーなWebサイトを設計するときにそれを考慮する十分な理由にはなりません。ユーザーがHTMLを無効にするほど賢い場合は、Webサイトを完全に機能させるために、HTMLを有効にする必要があることを知っておく必要があります。幸せなデザイン！ :)
ほとんどの回答はすでに多くの有効で良い領域をカバーしているので、私はこれを短くして要点を保ちます。
付加価値はありますか？
ユーザーがフォームへの入力を完了したかどうかを確認するために、ユーザーが続行ボタンを確認する必要がある場合は考えられません。ユーザーがボタンをクリックしたいときはいつでも、彼はbelievesフォームを完成させ、この時点で必要なアクションに誘導する必要があります。原則として、これは適切に設計された形式ですでに明確になっているはずですが、ユーザーが彼が終了したと信じているという事実は、これが事実ではないことを証明します、したがって、焦点を合わせたり、一時的に点滅させたり、その他の方法でユーザーを誘導したりすることは、適切な行動計画です。
同期しない検証についてはどうですか？
まだカバーされていないことの1つは、多くのフォームがWebフォームまたはその他の方法でインターネットに依存しており、すべての検証が瞬時にできるとは限らないことです。一般的な例として、ユーザー名を含む登録フォームを示します。ユーザー名はデータベースで検索する必要があり、ユーザー名がすでに使用されている場合は、フィールドに別のユーザー名を入力する必要があります。通常、これは非常に迅速な検索ですが、たとえばユーザーがモバイルインターネットを使用していて、接続が途絶えた、または接続が非常に遅い場合はどうなりますか？続行ボタンが無効になっていると、ユーザーはフォームに記入し、クリックするボタンがない状態になります。これは、ボタンをクリックして次のページが読み込まれるのを待つよりも混乱します。 少し長くかかることに。
もちろん、検証を待機しているフィールドがこれを非常に明確に示している場合は、上記を多少防ぐことができますが、通常は行われず、allフィールドがライブでチェックされている場合ますます一般的になるように、これはユーザーを混乱させるかもしれません：「なぜ私のフルネームの横に回転するものがあるのですか？」。したがって、これを実行したい場合、検証が実行されている間、無効にされた送信ボタンにスピナーを配置することしか考えられませんでした。唯一の危険は、無効にされたボタンがクリック/プッシュされた状態に関連付けられていることが多いため、ユーザーが誤ってフォームを送信したとユーザーが思うかもしれないことです。
ネイティブHTMLフォームの制約の検証に関しては、無効にするのは悪いことだと思います。フォームの検証からすべてのユーザビリティを取り除き、検証のみを行います。
この単純なフォームを例にとると、フィールドaに何かを入力してEnterキーを押しても、何も起こりません。目に見えるフィードバックはありません。ビジュアルUIを見ただけでは何が必要かわかりません。
<form>
<input type="text" name="a" required>
<input type="text" name="b" required>
<input type="submit" disabled>
</form>
ボタンを有効にしているかのように
<form>
<input type="text" name="a" required value="sometext">
<input type="text" name="b" required>
<input type="submit">
</form>
ここで、フィールドaに何か入力した後でEnterキーを押す場所を指定すると、ポップアップが表示され、入力フィールドにもフォーカスが移動します
続行ボタンを無効にすることなく、完全に構造化されたフォーム検証を行う
- あなたはjavascriptを必要としません
- ページはリロードされません（したがって、帯域幅が節約されます）
- あなたは自分の言語で何が悪いのかについての詳細なフィードバックを受け取ります（ステップ付きの数字を話し、それに最小最大値が追加されます-「有効な数字を入力してください、最も近い2つの有効な数字はx、yです」）。
- 誤って入力されたフィールドもフォーカスされます
- ユーザーがクリックできない理由についてユーザーを混乱させないでください。実際、フォームの何が問題なのかは逆です。