コンテンツ
- 1.必須フィールドにマークを付けないでください
- 2.スピナーを使用しないでください
- 3.ボタンのタイプを1つだけにするか、フォームごとにボタンを1つだけにすることをお勧めします
- 4.チャンクフィールド
- 5.なぜあなたが何かを求めているのか、そしてそれがユーザーにどのように感じているのかを考えてください
- 6.ナツメヤシはうずくまる小さな仲間です
- 7.開発者クラフトとしてのフォーム
- 8.フォームで列を使用しないでください
- 9. 1つのフィールドを使用する場合は、2つのフィールドを使用しないでください
- 10.優しくしてください
フォーム、多くのデザイナーがフォーム以上に嫌いなものはありません。彼らは必ずしも創造性を引き出すとは限りませんか？フォームをもう一度見て、フォームは、最も基本的には、ユーザーとソフトウェアの間の会話であることを理解するときかもしれません。
ポイントアンドクリックを忘れて、フォームはデジタルデザイナーとして私たちが直面する最も豊かな相互作用を表しています。次回フォームが登場したときは、CSS効果を適用したり、jQueryを追加したりするだけではないと思います。フォームのデザインにはさらに深みがあります。
私は何百ものフォームをユーザーテストし、保険会社、休日の予約のやりとりなどのためにいくつかの複雑なフォームを設計しました。過去数か月間に私のフォームの1つを使用した可能性があります。
フォームのデザインを始める前に学びたかった教訓は次のとおりです。
1.必須フィールドにマークを付けないでください
必須フィールドを示す小さなアスタリスクをご存知ですか？ユーザーテストで何度も失敗するのを見てきました。概念として、必須フィールドはあまり意味がなく、オフラインに相当するものはありません。それらは完成への素晴らしい白黒のアプローチを提供するので、開発者にとって素晴らしいです。アスタリスクと必須フィールドは、学習された動作であるため失敗します。ユーザーテストで私が見た典型的な動作は、ユーザーが上部のフォームに入力し、停止するものがあるか、ボタンを押したときに終了することです。
解決策は簡単です。オプションのフィールドにマークを付け、素敵なユーザーが立ち止まってそのフィールドに入力する必要があるかどうかを考えなければならない場所にマークを付けます。
2.スピナーを使用しないでください
HTML5は素晴らしいですね。それは遊ぶための刺激的な新しい光沢のあるツールの負荷を提供します。新しいおもちゃの適切性について考える必要があります。数値フィールドには、ユーザーが数値を循環できるように、小さな上向き矢印と下向き矢印が含まれるようになりました。
ここには2つの問題があります。まず、矢印のデフォルトのブラウザ表示により、矢印が非常に小さくなります。クリックするのが非常に面倒で、私たちの間で指で触れられた脂肪はiPhoneで苦労するでしょう。これはフィッツの法則と呼ばれ、小さいものをクリックするのが難しくなります。
しかし、あなたが叫ぶのを聞きます、あなたはただ番号フィールドに直接番号をタイプすることができます。はい、できますが、ブラウザの表示を見てみましょう。上下のスピナー矢印は、信頼できる友人の選択ボックスに似ています。スピナーを初めて提示されたユーザーは、選択ボックスに似ているため、入力できないと想定します。
私のアドバイスは、それらがより一般的な場所になるか、ブラウザ開発者がデフォルトのデザインを整理するまで明確に操縦することです。
3.ボタンのタイプを1つだけにするか、フォームごとにボタンを1つだけにすることをお勧めします
ヒックの法則と呼ばれるあまり知られていない心理学の原則があります。ヒックの法則は、私たちが提供される選択肢が多ければ多いほど、選択するのが難しくなると述べています。私が知っているロケット科学ではありませんが、覚えておく価値のあるルールです。
あなたは彼らが選択をするのを助けることによってあなたの素敵なユーザーを助けることができます。すべてのプライマリボタンを1色にし、ページごとに1つだけにすることで、選択が容易になります。どのボタンを押す必要がありますか？ああ、それは簡単です、それは大きな色のものです。
4.チャンクフィールド
私は前世で神経科学を研究したので、記憶の心理学、特に短期記憶または作業記憶を研究しました。今あなたがそれを言う前に;いいえ、短期記憶容量は7 +/- 2、4 +/- 1ではなく、人間の場合は3〜5チャンクです。私たち人間は視覚刺激の評価に長けていますが、数が少ないほど良いという制約があります。フォームを小さなグループにチャンクすると、ユーザーがフォームに入力する必要があるものがメモリから取得されることが多いため、評価が容易になります。
フィールドのグループの長さが約4であることを確認してください。
5.なぜあなたが何かを求めているのか、そしてそれがユーザーにどのように感じているのかを考えてください
これはおそらく私が提供する最も簡単なアドバイスですが、ほとんど利用されていないことがよくあります。
次のことを考えてみましょう。
あなたが尋ねるすべての質問に質問してください。それは必要ですか？これを聞かれるとどう感じますか？
多くの場合、ビジネスで質問をする必要があり、デザイナーとしての私たちは、顔が真っ青になるまで必要性について議論することができます。質問をする必要があります。このデータのビジネスニーズを理解する上で、私たちはしばしば妥協することができます。
素敵なユーザーに、なぜその質問をする必要があるのかを伝えることで、私たちは助けることができます。そのデータの使用法と共有について安心してください。
もう一度例を見てみましょう。
まだ難しい質問ですが、ピルを甘くしたことを願っています。
6.ナツメヤシはうずくまる小さな仲間です
日付を入力することは実際の課題になる可能性があり、回避できるいくつかの落とし穴があります。最大の問題はエラーの処理です。
最も簡単なアプローチは、カレンダーを起動することです。週は英国では月曜日に始まり、米国では日曜日に始まることは注目に値します。ユーザーが集中していない場合は、月曜日を意味する日曜日を選択することをお勧めします。
国際的な日付形式についても言及する価値があります。米国は月を最初に、日本は年を最初に配置します。したがって、4/5/12のような日付は3つの方法で解釈できます。
そのため、選択ボックスを使用するのが最適です。
7.開発者クラフトとしてのフォーム
フォームは、開発者だけでなくデザイナーにとっても巧妙です。データの入力とそれに対処するためのバックエンドコードの設計で起こりうる間違いを理解することは困難です。
これが簡単なものです。通貨の値を入力します。ユーザーが犯す可能性のある間違いは非常に大きいです。ユーザーが満たさなければならないデータ形式を強制することは、ユーザーにとって苛立たしいことであり、それに直面してみましょう。開発者側では少し怠惰です。
防弾フォームを作成するよりも、開発者にとって何より良い挑戦です。
8.フォームで列を使用しないでください
フォームで列を使用する際の大きな問題はフローです。フォームは上部から開始し、下部で終了します。列を導入すると、フォームのフローが中断される可能性があります。
ユーザーがフォームをタブで移動すると想定しないでください。したがって、フォーカスは列内のフォームをナビゲートする方法です。ユーザーテストでそれを見たことはめったにありません。ほとんどの場合、詳細の入力が表示されます。マウス/トラックパッド/指で次のフィールドをクリックしてから、詳細を入力します。
9. 1つのフィールドを使用する場合は、2つのフィールドを使用しないでください
ほとんどの人はタッチタイピストではありません。ユーザーテストでは、入力時にキーボードを見ている人がいます。
フォームフィールドを分割して電話番号を入力するとき、たとえば市外局番と番号を追加すると、実際の問題が発生します。ユーザーは2つのフィールドがあることを認識していないか、実際に覚えていないため、最初のフィールドに完全な数値を入力します。フィールドが特定の文字数に制限されている場合はさらに悪化します。
電話番号には1つのフィールドのみを使用します。家番号/番地についても同じことが言えます。テキスト入力ボックスは、1つだけ使用してください。
10.優しくしてください
かなり失礼なエラーメッセージがたくさんあることに驚かれることでしょう。
これは私が最近出会ったものの例です。
彼らがあなたが将来の日付を喜んで入力し、それからかなりファッショナブルな応答をすることを示唆しているという事実は、まあ、それはあまりいいことではありません。
もう一度、ユーザーの代わりに自分自身を置きます。このエラーをどのように感じますか？イライラしますか？たぶんさらに悪い。素敵になるのは簡単です。
より良いフォームをデザインするのに役立つ、ダウンロード可能なベビーベッド/チートシートを作成しました。より良いフォームを設計するためのより多くのベストプラクティスの方法が含まれています。
