web-dev-qa-db-ja.com

フォームを送信する前に、少なくともn文字を入力してください

this question は検索に関するものなので、これは複製ではありません。

1つのテキスト領域と送信ボタンを含むシンプルなフォームがあります。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

ユーザーは、メッセージを送信する前に、少なくとも100文字を入力する必要があります。 この制限についてユーザーにどのように通知できますか?

もちろん、フィールド名の下に制限を設けることでユーザーに通知できます。ただし、ユーザーはテキストを読まない傾向があるため、少なくとも100文字が入力されるまでボタンを無効にすることにしました。ユーザーはまだこの制限について知る必要があります。

これをユーザーフレンドリーな方法でどのように解決できますか?

3
Ilias Bennani

無効になっているボタンに関する警告を含め、最小文字数に達したときにテキストを「メッセージを送信」のように変更して、ボタンを有効にします。

3
AsheraH

特定の文字数を要求することは、特にユーザーフレンドリーではありません。そのような制限を適用する前に、代替案を探すのが賢明かもしれません(スパムまたは不十分な提出に対して、私は仮定しますか?)

100文字より短い貴重なフィードバック/テキストの多くのインスタンス、または100文字の要件を満たすためだけにテキストを書き直すことを強いられる人々がいる可能性があります。

無効にされた送信ボタン:これは疑いを招く可能性があり、ユーザーはなぜそれが無効にされているのか疑問に思います。 AsheraHのソリューションの改善点は、対話が行われる前にユーザーに通知することです。これにより、対話の労力が軽減されます。あなたはボタンのロック解除に文字の量を付けることができます。 enter image description here

4
Tom.K

入力領域が100文字以上になるまで、送信ボタンを無効にしました。ボタンの横に「(100文字以上)」のようなラベルを付けるだけで十分です。

無効になっているボタンは彼らに何かが間違っていることを告げるつもりです、そしてラベルは彼らにそれが何であるかを知らせるのに十分な情報を与えています。

3
fletch254

StackExchangeをコピー

同様の制限がコメントフィールドのSEに存在します。私はそれがあなたの問題に対する高品質な解決策であり、あなたがすでに行った設計上の決定のいくつかと整合していると思います。

SE comment length restriction hint

情報

「もちろん、フィールド名の下に制限を設けることでユーザーに通知できます。」

文字長の制限を説明するフィールドヒント— "少なくとも15文字を入力してください"—がテキストボックスの下に設定されています。

エラー防止

「...少なくとも100文字が入力されるまでボタンを無効にすることにしました。」

ボタンは無効なコントロールとしてスタイル設定されていませんが、ユーザーは最小文字数に達するまでコメントを送信できません。

注意

「無効」になっている間、ボタンには二次機能が与えられます。つまり、制限を強調表示します。ユーザーがボタンをクリックすると、制限が点滅し、ユーザーの注意を引き、ユーザーがテキストを確実に読むようにします。

進行

また、ユーザーが文字を入力して最小文字数に達したことを通知すると、制限が更新されます。

SE updating comment length restriction hint

この更新のヒントは、数字の後にcharactersを含めることで改善できると思います。ユーザーがヒントを初めて表示する場合、数値が何を表しているのかを理解するのに少し時間がかかる場合があります。

2
Andre Dickson

A wireframe suggestion

こんにちは、みんな、

100文字の制限を示すことをお勧めします。

  • まず、正確に100文字に収まる灰色の領域をマークします
  • 2番目に、「100文字必要」と明示的に書いて、
  • 100文字に達するまで無効のままになる送信ボタン。

お役に立てれば!

乾杯、ニコス

2

ボックス内の警告を灰色で灰色になっている「少なくともこのテキストボックスを埋めるのに十分な量を書き込んでください」と書き込んでください。

この文章は、ユーザーが入力を始めるとすぐに消えます。

スクロールを開始する前に、テキストボックスのサイズを100文字になるように調整します。

(推論:100文字を構成するものを推測しようとすることは困難です。ユーザーは、特に使い慣れた操作では、画面上の1点のみに焦点を合わせることが多く、フォーカスの端に書かれた情報を無視します)

1
PhillipW

Stack Exchangeでは、ここに表示されている方法をいつでも使用できます。現在のコメントが長すぎるか短すぎるかを通知するだけでなく、入力時に正確な文字数を提供します。

無効な文字数で[コメントを追加]をクリックすると、テキストカウンターが点滅し、注意を引くことができます。さらに、文字数制限に近づくにつれて、スペースが不足しそうであることを警告するため、色は徐々に「攻撃的に」なります。

個人的には、 "nn more to go ..."のテキストの色を変えると思いますが、どちらにしてもかなりうまくいきます。

Several screen captures of the comment box on Stack Exchange, illustrating the above points.

1
MichaelS