ソフト最大値でテキスト入力フィールドの文字制限に近づいていることをユーザーに警告する方法は？
動画の字幕テキストを生成するための内部Webアプリケーションを書いています。このプロジェクトの要件の一部は、各行がX文字を超えないことです状況が正当な場合を除いて。
私は必ずしもpreventユーザーがX文字を超えて入力できないようにする必要はありませんが、その数に近づいている（そして場合によっては超えている）ことをユーザーに示したいと思います。
理想的には、通常は制限を超えないでしょう。アプリケーションは、ベストプラクティスのある程度のトレーニングを受けた人、またはこのタイプの作業を以前に行った人が社内で使用するものです。私は自分自身の経験をこのプロジェクトに取り入れようとしました。私は自分自身の前にこの種の仕事をしたからです。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
方法1-カウントアップ
テキスト入力フィールドの横にゼロからカウントupする文字カウンターを実装し、それらが制限に近づいていることを示すようにスタイルを変更し、さらにいくつかの劇的な彼らが限界を超えていることを反映する方法。
方法2-カウントダウン
制限からdownをカウントするテキスト入力フィールドの横に文字カウンターを実装し、n文字だけ制限を超えていることを示すようにスタイルを変更します（たとえば、負の数を使用して）？
方法3-純粋にグラフィックキュー
入力フィールドの下にプログレスバーを実装します。これは、ソフト最大文字数まで入力し、その後、スタイルを変更して、制限を超えたことを示します。この方法では、通過した正確な文字数をユーザーから隠すことができます。
プログレスバーまたはカウントアップを非常に好みます。主な理由は、キャプションが極端に認知的に負担がかかり、ユーザーがexactlyによって過度に煩わされないようにするためです。実際に問題になるまでに残っている文字数。さらに、2つまたは3つの入力後、ユーザーは入力できる量についての良いアイデアを開発し、この警告メカニズムの必要性を減らしました。
追加：
Ben Brockaのコメントについて：TwitterとSEのコメントカウンターは、実際にはエミュレートしたくないものです。どちらの場合も、数分かけて慎重に作成できるメッセージを1つだけ入力します。この状況では、最大数が厳密に適用され、すべての文字が重要であるため、カウンターを持つことは適切です。私のシナリオでは、ユーザーは数秒でテキストを入力でき、（実際にはever）目を数値カウンターにドラッグする必要はありません。私の場合もsoft maximumを追跡するという点で異なります。3文字を超えることがあるかどうかは気にしません。
さらに、SEのコメントボックスの文字カウンターのスタイル変更が直接見なくても明らかである唯一の理由は、「残りの文字」という単語が含まれているため、直接見なくても色の変化を認識できるかなり広い領域になっているためです。このページのレイアウトはおそらくかなりタイトになることを最初に述べたはずです。
編集2：考えてみましたが、入力フィールドの横にある大きな数字（モックアップの赤い16）はおそらく完全に読みやすくなっています。
コード構文の蛍光ペンで私が見たのは、次のような制限を超えるテキストの色を変更してコードの長い行を示すことです。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
この方法の利点は、追加のスペースをとらないことです。ただし、限界に近づいていることを示すものではありませんが、ユーザーは限界に達する前にどれだけ入力できるかをすぐに感じると思います。
ソフトリミットは実際の文字数ではなく、使用可能なスペースに基づいているように見えるので、視覚的に表示してみませんか？使用するフルテキストボックスと、限られたスペースを表示するオーバーレイを提供します。
テキストフィールドは、推奨されるテキスト量に対応できるだけの幅が必要です。
制限はビデオプレーヤーの幅とほぼ同じであることを想定しているので、表示されるテキストのフォントサイズと書体に一致するように入力フィールドをスタイルし、ビデオプレーヤーの幅にします。テキストが入力フィールドからオーバーフローし始めると、ユーザーは行き過ぎていることを知るでしょう
色や進行状況バーなどの手がかりを学習する必要があります。カウントダウンにより、ソフトリミットであることを伝えるのが難しくなります。入力の実際のサイズを制限することはすぐにわかります。
カウントダウンは私の観点からすると間違っていると言いましょう。ここで私が見る問題は、あなたが0までカウントダウンすることです。これは、ユーザーが絶対制限に達したことを示唆します。提案された最大値を示したいだけです。それはあなたが望むものではありません。
私は他の2つのアイデアが好きです-そして、それはかなり型破りかもしれませんが（それは悪いことを意味するわけではありません）、プログレスバーは興味深いものだと思います。入力フィールドの上に静的ラベルの形式で。すでに使用されている文字を示し、ユーザーが制限を超えた場合でも、それらを（両方向に）関連付けます。バーの場合、推奨されるより多くの文字を使用しても、スケールは成長します。
一般的に、ここでは色を使用するのが最適だと思います
JavaScriptを使用して、入力時に残っている使用可能な文字の数を表示しますか？、Twitter UIに従って、「ソフト」超過を「-」記号で示します。
ブラー、これは私がタイピングしている
（-6文字、長すぎます！）
私は、このような状況で進行状況バーを使用して、結果が混在しています。ほとんどの人はプログレスバーの目的を理解しているようですが、可変幅フォントの測定に関する技術的な制限により、正確ではない場合は混乱します。また、プログレスバーにはハードリミットのメタファーが組み込まれています。
なぜ単純なテキストではないのですか？
推奨される残りの最大文字数（x）（i）
Xはカウンターを表し、（i）はアイコンをクリックします。アイコンをクリックすると、より多くの情報が提供され、このソフト最大値が存在する理由を適切に設計/説明した例が示されます。 OKの場合はカウンター番号を緑色にし、ソフトリミットを超えるとオレンジ色にします。それは赤ほど劇的ではありませんが、それでも注目を集めます。
私はあなた/私たちがおそらくこれをオーバーエンジニアリングしようとしているような気がします。特にあなたが職業訓練について言及した後。これらは、私が想像しているように、彼らがしている仕事（字幕の作成/タイピング）にある程度の親和性を持っています。
ユーザーが入力するときに解説を提供することを考えましたか？ユーザーがソフトリミットに到達するか、ソフトリミットに近づくと、次のような小さな、目立たない黄色の吹き出しが表示されます。
「注意してください。このキャプションはおそらく長すぎて画面に収まりません」
彼らが不当なレベルのキャラクターに留まる場合：
「このテキストは画面上で正しくフォーマットされません。可能であれば、削減することをお勧めします」
理想的には、ユーザーが入力を続けると吹き出しが消えるようにし、おそらく入力ボックスの境界線を黄色/赤に変更して問題を示し、入力ボックスの長いホバーで吹き出しを表示します。
これの利点は、これが問題である理由についてユーザーに前向きであることです。そのため、トレーニングを受けていないユーザーでも、絶対に必要でない限り、キャプションが長すぎないことを理解できます。また、エキスパートユーザーに行動を指示するのではなく、アドバイスするだけであることも明確になります。
Na7coldwaterの答えを読む前に、色付きのテキストのアイデアについて考えました。これは、入力ボックスでのテキストの色の変更が本当だと思います。** Na7のアイデアが本当に気に入りました**。
私たちが日常生活で使用していて、私たちの中に細かいことをすることが、良い解決策になると思います。
出身地に応じて、信号機または信号機を停止します。
私DID彼/彼女の考えを落とさないで、あなたはこれに私を信頼する必要があります。彼/彼女の答えを見る前にそれがちょうど私の頭に飛び込んできたので、私は約45分費やすことに悩みました。この質問に答える！