エキスパートユーザーがIPアドレスを入力できるようにするための最良のUI？ （IPv4）
ユーザーが実行する必要のある主要なタスクのほとんどについて、ユーザーにIPv4アドレス（ドット付き4進10進表記）の入力を要求するWebアプリケーションに取り組んでいます。私たちの主なターゲット「ユーザー」は、中小企業のIT管理者です。彼らはIPアドレスに精通しています。
フォーム入力を受け入れるのに最適なスタイルはどれですか。現在オプション1を使用しています。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
煩わしい検証を行わないオプション3。
それは標準外なので、1つは吸います。コピーアンドペーストは機能する場合と機能しない場合があります。次のフィールドへのタブ移動は機能する場合と機能しない場合があります。人々は間違いを訂正するのが得意で、限られた分野は彼らの筋肉の記憶を台無しにします。たとえば、次のように入力します
1912
私が意味したとき
192
私の指はほぼ瞬時にそれを修正しますが、3桁に強制するフィールドは、バックスペースを2回押してから「2」を入力して修正することで、最終的に「12」になるか、最初のボックスに191で終わり、第二。どちらの場合でも、私はUXデザイナーをののしりました。
オプション2は、オプション1とまったく同じですが、視覚的に異なります。スペース区切りまたはピリオド区切り。同じ問題が発生します。おそらく、今はピリオドをタイプするのか、しないのか？どうしたらいいですか？次にピリオドを入力すると、ピリオドが挿入されなかったため、マッスルメモリでDELを押すと間違いが消去され、数字が消去されます。うわっ！
オプション3が最適ですが、検証は、送信ボタンをクリックするまで待つか、少なくとも検証が邪魔にならないようにする必要があります。つまり、ポップアップとは異なり、上記と同じ理由で入力に影響を与えるものではなく、ページの別の場所に表示する必要があります。
入力するかもしれません
19w
私が意味したとき
192
私の指はずれましたが、知覚と私の筋肉の記憶は十分に速いので、すぐに修正しようとします。検証によって入力が中断された場合は、UXデザイナーを再び呪います。たとえば、「w」を入力するとアラートまたはモーダルダイアログが「数値のみ！」と表示される検証付きのフォームを使用しました。私はすでにそれを修正している途中だったので、それは結局私をつまずかせてしまいます。
そこにいた間、aaa.bbb.ccc.dddはIPアドレスの標準ですが、セパレータが何であるかを気にしませんか？入力した場合
1-2-3-4
または
1 2 3 4
なぜそれらは同じように受け入れられないのですか？これは、電話番号の入力を求められ、XXX-YYY-ZZZZや（XXX）YYY-ZZZZなどを単に受け入れてコンピュータに認識させるのではなく、XXXYYYZZZZである必要があると言われると非常に煩わしいためです。 CC番号も同様です。 AAAABBBBCCCCDDDDおよびAAAA BBBB CCCC DDDDおよびAAAA-BBBB-CCCC-DDDDを受け入れます。実際には、数字を抽出して、その数字が有効なCC番号になるかどうかを調べてみてください。 IPアドレスについても同様です。多分探すことによってそれを解析します
- ゼロ以上の非数字
- 1桁以上
- 1つ以上の数字以外
- 1桁以上
- 1つ以上の数字以外
- 1桁以上
- 1つ以上の数字以外
- 1桁以上
- ゼロ以上の非数字
そのように
[スペース] 1.2.3.4 [スペース]
また、コンピュータが完全に処理できる場合、入力の修正に関する愚かなメッセージでユーザーを悩ませることもありません。
エキスパートユーザーにIPアドレスを適切に提示する方法についての簡単なブレインストーミングとして、オプション1と3の組み合わせを選択します。
それを実装する方法は、StackExchangeのタグ付けシステムと非常によく似ていますが、スペースキーを区切り文字として使用する代わりに、入力時に.を使用して、入力を個別のボックス：
例を使って説明する方がはるかに簡単です。 <kbd>要素の粗末化を許してください：
1
19
192
192。
192.1
192.16
192.168
192。168。
192。168.1
192。168。1。
192。168。1.2
192。168。1.20
[フィールドがフォーカスを失う]
192。168。1。20
もちろん、この方法で解決する必要のある実装の詳細はたくさんあります。ほとんどの場合と同様に、正しくするよりも間違って行う方が簡単です。
Notオプション1.別のソースからIPアドレスをコピーして貼り付ける時間の90％。これらのエキスパートユーザーもこれを行っているに違いありません。このため、オプション3が最善の策であると言わざるを得ません。
オプション2または3は可能性が高いが最も使用可能です-テストしないと誰も確認できません。おそらくオプション3は、IPアドレスにピリオドがあることをエキスパートが知っているためです（マスクは必要ありません）。
オプション1は、ウェブ全体の電話番号入力フォームでよく見られますが、インタラクションデザインでの慣例の欠如のため、扱いにくい場合があります。場合によってはフィールドが自動で前進することもあれば、そうでないこともあります。そのため、経験豊富なユーザーが、カーソルがすでに進んだ後に余分な時間をタブに移動することになります。
フィールドで収集するのは数値と期間のみなので、検証は十分単純である必要があり、ユーザーは専門家なので、とにかく適切にエントリをフォーマットする方法を知っています。
社会保障分野に入るとき、私は前にオプション1を見ました。それは私だけかもしれませんが、これらを使用しているときはいつも間違って「タブ」を押して次の入力フィールドに移動します。どういうわけか、私はそれが自動前進しないといつも思います。これは、視覚的には1つではなく2つの別々の入力フィールドとして表示されるためです。
パワーユーザーの場合、オプション3のみ。素人の場合、3つのうちのどれでも、おそらく順番にランク付けされます。
IPv4アドレスは、10進表記で記述すると、ピリオドで区切られた4つのバイナリオクテットです。パワーユーザーはこれを知っており、IPアドレスを正しく入力することに慣れています。
多くの場合、最良のUIは邪魔にならないUIです。
Timが示したように、オプション1はハンドホールドを必要としないため、パワーユーザーにとっては少しイライラします。ただし、オプション2のオクテット間でのタブ移動またはキーボード矢印入力のあいまいさが混乱を招くため、オプション1は素人にとって最も直感的であると直観的にわかります。
ところで、オプション3のシングルボックスフィールドを使用するもう1つの利点は、インターフェースを変更せずにIPv6アドレスもサポートできることです（IPv4が32ビットでIPv6が128であるため、バックエンドでそれらを区別するのは簡単です）ビット）。
オプション3！ぼかしのフィールドの右側にある素敵なインスタントフィードバックを使用します。
私は同意します。IPを記憶しておらず、人々はそれほどばかではないので、あなたは頻繁にこの情報をコピーします。特に中小企業のIT管理者。
他の形式は、ユーザーのやり方に入ります（連邦政府のように）！
オプション3、およびマスクも必要な場合にスラッシュ表記を使用する機能。さらに、10進数または16進数の表記も入力できるはずです。
間違いなくオプション3。
あなたは自分のブリーフでパワーユーザーと取引しているので、オプション1はありません。
オプション2は必要ありません。パワーユーザーは、IPアドレスとは何かを知っています。彼らはできるだけ早くそれを入力したいだけです。彼らはタイプすることもできるので、基本的に彼らにそれを続けさせるだけです。
境界線の色を変更することによってフィードバックを提供するonchangeハンドラーを持つオプション＃3。単一のフィールドは、ユーザーが好きなように入力できること、タイプミスを修正できること、そして熱心な検証プロセスによってバグが発生しないことを約束します
3つのオプションはすべて、実装の詳細に応じて適切に機能します。たとえば、ドット1の文字列を分割し、残りのボックスを自動的に埋めて、ユーザーが入力/削除できるようにすることで、オプション1に完全なコピーペーストを実装できます。 1つのフィールドから次のフィールドに移動し、タブまたはピリオドで次のフィールドに移動します。ただし、IPフィールドが十分に実装されていないため、経験豊富なユーザーは、適切に実装されているとは期待しません。
オプション3.メールアドレスの場合、ローカルパーツの入力フィールドとドメインの別のフィールドを表示しません。特に、ユーザーが何をしているのかを考えている場合はそうです。
確かにオプション3です。しかし、このようなものに対していくつかのフィードバックを実装して、ユーザーが誤った入力の場合に正しいIPアドレス形式を表示できるようにするのが適切です。
オプション3が最適です。 Windowsはオプション1を使用します。これは、他のフィードバックで指摘されているように、エラーが発生したときに非常に苛立たしいものです。
内線：オプション3を使用して、3桁の数字が入力された後にピリオド（。）を自動的に入力できます。これにより、ユーザーは1921681001と入力するだけで192.168.100.1になります。入力に脚注を置くだけでこの関数を提案できます。そうしないと、ユーザーが期間を速く入力した場合、余分な192..168を削除するために多くのバックスペースが生じます。