web-dev-qa-db-ja.com

有効な文字をユーザーに明確に伝える方法

入力が特定の特殊文字を受け入れることをユーザーに通知する最良の方法を決定しようとしています。英数字は非常に単純ですが、などの文字に到達すると、明確さが失われるように感じます。そして-。私が試した1つのスタイルはこれです：

Valid characters include A-z, 0-9, and (._-).

かっこが有効な文字をラップするが、かっこが有効でない場合、それらがリストの一部と間違えられるのは簡単すぎるようです。

私が傾いているスタイルは次のとおりです。

Valid Characters include A-z, 0-9, '.', '_', and '-'.

しかし、一重引用符は混乱を招くように感じ、特にリストが大きくなるにつれて、リストから抜け落ちやすくなります。 「より良い」と認められているこの情報を伝える方法はありますか、または実際にこれを完全に行うためのより良い方法はありますか？

labelsvalidation
39
MildWolfie

クラッターは問題があります。有効な文字を強調するだけで十分な場合があります。例えば。：

有効な文字は[〜＃〜] a [〜＃〜] -[〜＃〜] z [〜＃〜]a- z -9。_-。

異なる色で表示することも役立つ場合があります。

48
NonNumeric

ここにいくつかのアドバイスがあります：

  • 絶対に必要な場合にのみ文字を禁止します（ニックネームに_を使用できないときは嫌いです）
  • これらのいずれかを使用しようとしたユーザーにのみメッセージを表示します。他のユーザーは気になりません
  • ユーザーが禁止された文字を入力した場合は、それを考慮せずに理由を説明してください。

mockup

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

32
Renaud

無効な文字の数は必要な入力に対して常に少ないため、許可されない文字について言及することをお勧めします。これは混乱を減らすのに役立ちます。 Windowsエクスプローラーの例を参照してください。

enter image description here

13
SSuad

次のように、各文字タイプのブロックを表示できます。

使用できる文字：A-Za-z0-9-_.

12
rybo111

これらは明らかに許可されているはずなので、AからZと、場合によっては0から9は省略します。 追加文字の場合、記号ではなく名前を使用します

アンダースコア、ダッシュ、ピリオドも使用できます。

10
Roman Reiner

tl; dr

allvalidまたはallinvalid charactersbeforeユーザーがフィールドへの入力を開始します。これはヒントになるはずです。短く、理解しやすく、簡単にしてください。

デモンストレーション

mockup

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

詳細な説明

プレースホルダーの例

有効な入力例を示すプレースホルダーのあるフィールドを使用してください。プレースホルダーの例は、入力の優先フォーマットを示しています。これは、たとえば電話番号フィールドで役立ちます。

注目のメッセージ

ユーザーがフィールドに入力したときに、固定ラベルまたはポップアップバブルを表示します。
ユーザーは、入力を開始する前にヒントbeforeを表示するため、必要な値がある場合は別の値を考えることができますエントリへの誤り。これにより、ユーザーが入力を行う前に尋ねる可能性のある質問も解決します：「ここに何を書けばよいですか？入力は正しいですか？」。

短く太字の文字リスト

「英数字のみ」のようなものではなく、「a-z」のような有効な文字の短い形式を使用してください。
承認さ​​れた文字を監視および理解する方がはるかに簡単です。 「わかりました。英数字はaからzまでの数字付きの文字です」のような単語の意味を見つける必要はありません。また、「大文字は許可されていますか？」のようなあいまいさを明確にします。

また、許可されている文字リストで太字を使用する @ NonNumericのソリューション をお勧めします。これは、ポップアップメッセージの本質への注意を導きます。

ぼかしに関するフィードバック

ユーザーがフィールドに入力し、フォーカスが失われた後、フィールドを検証する必要があります。

  • 入力が有効な場合は、有効な入力であることを示すチェックマークを表示します。
  • 入力が無効である場合は、ポップアップをそのままにして、ポップアップまたはユーザーフィールド（またはその両方）を赤にして、何か問題があったことを示します。

これのおかげで、ユーザーが入力前にガイドを見逃した場合、ユーザーは入力後にフィードバックを受け取ります。エラー/チェックマークは、入力されたフォームの概要も簡略化します。

3
totymedli

これに対処する1つの方法は、最初は何も言わないで、許可されていない文字が入力されたときにユーザーに通知することです。インライン検証を使用して、各文字入力の後に適用する場合、ユーザーは（ほとんど）禁止されている文字を通知する必要さえありません。

それは現場で何をすべきかによる。フィールドに入力する必要があるデータが特定の形式（たとえば、郵便番号など）に従う場合、最終的にそこに入力する必要がある文字のセットは非常に限られます。 Type-Oおよびデータを入力するための非常に代替的な方法はエラーメッセージによって処理され、残りは通知せずにフロートします。

ただし、フィールドは、その形式に関する規則の少ないデータ用に作成されている可能性があります。そのような場合、誤った入力の数は許容できないレベルに達する可能性があり、事前入力の指示が必要です。

インラインエラーメッセージでも、情報テキストが必要な場合でも、「AZ、aZ、0-9」ではなく「文字と数字」を書くほうがわかりやすいので節約できます。特殊文字の乱雑さ。

例：文字、数字、およびこれらの特殊文字（_。-）のみを使用してください

1
Babossa

私はあなたの最善の策はテーブルのような構造を使用して各ルールを明確にラベル付けして分離することだと思います：

[〜＃〜] css [〜＃〜]

table{
    border-collapse:collapse;
}
td{
    padding:3px 6px 3px 6px;
    vertical-align:top;
    border:solid 1px #000;
}

[〜＃〜] html [〜＃〜]

<h3>Allowed characters</h3>
<table>
    <tr><td>Alphabet: lower-case and UPPER-case</td><td>A through Z<br>a through z</td></tr>
    <tr><td>Numbers</td><td>0 through 9</td></tr>
    <tr><td>Punctuation: period, underscore, hyphen</td><td>.<br>_<br>-</td></tr>
</table>

http://jsfiddle.net/F74L8/

そのため、リストが大きくなった場合でも、将来の文字が以前の文字に対して選択した可能性のある書式設定に干渉することを心配する必要はありません。

1
MonkeyZeus

すべてのutf8文字を入力として許可するだけであれば、それをユーザーに説明する方法を心配する必要はありません。そしてそれはあなたのアプリ/ウェブサイトでグローバルに行くときあなたに大きな頭痛を節約します。

メールを入力する必要がある場合は、「このメールアドレスはインターネット標準RFCに従って無効です」と書くことができます。それははるかに簡単であり、人々はあなたが意地悪だと考えずにそれらの文字だけを入力する必要がある理由を理解します。

0
awsm

すべての混乱を避けるために、必要なすべての説明情報を事前に提供するために、「ここで有効な文字は何か」のような入力フィールドの近くに「リンク」を置くことができます。人がマウスをリンクに移動する（マウスを上に置く）と、有効な内容を説明する「ツールチップ」が表示されます。

0
Kevin Fegan

スペースが問題にならない場合は、Wordと実際の手がかりを使用して垂直リストを使用します。

使用できます

  • 数字（-9）、
  • 文字（A-Zおよびa-z）、
  • アンダースコア（_）、
  • ハイフン（-）、および
  • 期間（。）

いずれの場合でも、有効な文字を説明してくださいbeforeユーザーは、送信後や入力時にではなく、データを入力します。

0
Tim Huynh