フォームをよりシンプルにするにはどうすればよいですか？
私は、エントリを追加できるWebベースのアプリケーションを設計しています。各アプリケーションには、20のフィールドがあります。
ほとんどの場合、エントリを追加した後は、後で編集する必要はありません。ただし、フィールドを編集するオプションはまだ存在している必要があります。また、任意のフィールドで検索を実行し、一致するレコードをプルする方法が必要です。
これらのフォームが3番目のフォームのように見えないように設計するにはどうすればよいですか？
AppleとGoogleの製品が彼らの見た目と同じように見える理由は、彼らが設計上の決定をしたからです。追加する機能を探す代わりに、削除する機能を探しています。
これは非常に一般的な質問なので、私が提供できるのは非常に一般的な答えです。
- ユーザーはこれほど多くのフィールドを必要としますか？-1つの情報単位に20の異なるデータフィールドが必要なケースを想像できません。フィールドを削除して組み合わせることから始めます。既に機能しているアプリを再設計する場合は、過去数週間のランダムなフォームを10個表示するよう依頼してください。フィールドが空のままになっている（またはスキップできないためゴミでいっぱいになっている）フィールドがある場合は、それらを省略することができます。
- 上級ユーザーのみが使用するフィールドはありますか？すべてのユーザーがめったに使用しないフィールドですか？-20のフィールドから、おそらくいくつかを見つけることができます。 セカンダリ画面にそれらを延期する 、それらは乱雑にならず、メインのユーザーワークフローを妨害しません。前のヒントと同様に、実際のデータにアクセスできる場合は、それを利用して、ほとんど使用されないフィールドがあるかどうかを確認します。
- フォームデザインのベストプラクティスに従う-Angeltveit氏がリンクしたルークブロブルスキーの記事を読み、この記事をご覧ください ウェブフォームのトラップとトリック 。
他のすべての場合と同じように、最適なフォームの組み合わせが見つかるまでスケッチ、テスト、反復します。幸運を！
1） ゲシュタルトの原則 、特に グループ化の原則 について読んでください。これにより、脳がページの視覚的構成をどのように解釈するかについての洞察が得られます。
2）Luke Wroblewskis ウェブフォームデザインに関する記事 （または彼の本）を読んでください。これにより、機能的なWebフォームの作成方法がわかります。
GoogleとAppleも、ユーザーが自分の製品で1つのことを実行したいというアプローチを採用し、そのために1つのエントリと1つのコントロールを作成しました。
したがって、Yosef（およびもちろんKrug）のように、問題が発生するまで問題を取り除き、問題を解決し、問題が解決できなくなるまで問題を取り除きます。そして、「人々がこれから何をしたいのか」という焦点から始めます。「人々から何を得ることができるか」ではありません。
IMEは、エンドユーザーに焦点を当てることはまれであり、生産性が高いです。グーグルとAppleします、そして彼らはそれのためにそれほど悪いことをしていません-収益の面だけでなく、ユーザーの愛の面でも。MS、OTOH、これをうまくやってはいけません、そしては市場シェアを失っており、Appleのようなユーザーの愛を感じたことはありません。
安っぽい製品で短期間でお金を稼ぐことができます。あなたは良い製品でのみ長期（最近）にお金を稼ぐことができます。
フォームをデザインするとき、それをユーザーがAからBに最も簡単で快適な方法でどのようにして取り込めるかを考えます。
私はフォームをjavascriptを介してステップに分割することを検討します。そうすることで、フォームが長くてユーザーに気が遠く見えなくなります。
ラベルとインラインの説明をフォームの右側とフォーム要素の側面に移動し、ユーザーが特定のフォーム要素に焦点を合わせたときのみ表示するか、ポップの使用を検討することで、フィールドに焦点を合わせてみてください情報アイコンの上に。
彼らの場所のように集めることができるものについて、彼らのためにフォームに記入してください。郊外、郵便番号、または「一部の郊外で自動入力」リンクで提案します。
自動提案を使用して、入力の手間を減らします。
ユーザーがページを上下にスクロールする必要がないように、コンパクトにしてください。
過酷な、失礼な、または侮辱的な音を鳴らすことなく、特に繰り返しロボットのように聞こえることなく、すべてのエラーメッセージで直接的な言葉を最小限に抑えます。例えば。必須...必須...必須...
ラベルに必要なWordの使用は避け、必要のないフィールドでは（オプション）を使用してください。
ユニークにしようとしないでください。ラベルの新しいファンシーな名前でクールになるのに苦労しているように、ホイールを作り直さないでください。要点を直視し、人々がこれらのフィールドをすでに知っているものを使用してください。レベル（例：子供、親、祖父母）。
この方法を検討する場合にのみ、プレースホルダーテキストではなくラベルを使用してください。入力フィールドに何を入力する必要があるかを確認するために焦点を合わせ、ユーザーに何を書き込むかを示唆する手段としてプレースホルダーテキストを使用する必要があることは常に煩わしいことです。
チェックボックスとラジオを1行にしてください。
フォームに入れることができるすべてのものを考えるのではなく、私がそれを作るために何を取り出すことができるか、またはユーザーが実際にそれを指定する必要があるかを考えます。
あなたが始められることを願っています！
他の多くの人が言ったように、グループ化について考えてください。また、階層化の原則は、これらのグループで多くの役割を果たす。フォームで多くの情報を要求する場合、情報グループの見出しを明確にすることが重要です。
私は最近、大規模で複雑な承認プロセスの一部である非常にデータ量の多いフォームを持っていました。このフォームは、承認のためにさまざまな人々によってマークされたときに、完成したフォームをさまざまなキューに強制的に移動させます。組織を解決するために、フォームは左側にある「タブ」に分割されており、ユーザーが領域を完了するとユーザーとともに移動し、そのときに入力する情報の種類をユーザーに知らせました。スクロールはありませんが、トピック間を移動するための「次へ」ボタンがあります。
すべてのフィールドラベルは、簡単にスキャンできるように、入力フィールドと右揃えでフィールドの上にあります。
この記事 Smashingは、いくつかの素晴らしいヒントとリソースを提供します。
私の推奨事項、およびすべてのデータ入力と対話が向いていると私が信じているのは、コンテキストに基づいたフィールドのインテリジェントで動的なプレゼンテーションです。これが最も簡単な例です...
[〜＃〜] example [〜＃〜]登録フォームは、3つのフィールド（エンゲージメントの向上）ですばやく簡単に表示され、ユーザーがタスクを完了するとフィールドが追加されます。
関連性と文脈学習文脈形式は同じ方法で設計されているので、誰かに自分の家を所有しているか尋ねると、次の「何年にあなたの家を所有したか」という質問は表示されません。答えが否定的な場合。彼らは子供がいないと答えた場合、あなたは彼らの年齢のためのフィールドを持っていません。等.
ヘルプメニューは、状況に応じて簡単に管理できます。たとえば、ユーザーが描画ツールを使用していることがわかっている場合、関連するヘルプはそのツールセットに関するものです...誰かがAdobeとAppleでこれを助ける必要があります。