大きなフォームを持つWebアプリの優れたデザイン
私は良いテンプレート/テーマを求めてウェブを閲覧してきましたが、ページあたり20〜40のフィールドとその間に2〜5つのタブがある典型的なビジネスアプリの本当に良い例を見たことがありません。 WPテーマ、管理ページテーマ、または一部のCMSテーマのほとんどは、ほとんどのユーザー（または少なくとも私が会った人）がビジネスアプリに期待するものとうまく調和していないようです。
以下のような考慮事項のいくつか：
- 1ページに多数のフィールドがある（上記のとおり）
- 他のほとんどのテーマで目立つテーマのように見える大きな読みやすいフォントとは対照的に、これらのすべてのフィールドのためのスペースを作るための小さいフォント
- 1つの画面にすべての関連情報
- 「プロフェッショナル」な感覚（退屈で退屈なキュービクルグレーの本格的なXD）
ビジネスアプリに適した例やテーマ、およびビジネスアプリのデザインに適したチュートリアルを教えていただけますか？テーマやチュートリアルは、マーケティングよりも機能的な使用に重点を置いています。ビジネスアプリのユーザビリティに関する私の考えが間違っている場合は、私を修正できます。
ここにあなたのためのいくつかの素晴らしいリンクがあります...多分あなたはあなたが探しているものを見つけるでしょう：
- http://ui-patterns.com/blog/100-sign-up-forms
- http://patternry.com/p=one-page-wizard/
- http://patterntap.com/?terms=&sort_by=created&type=43&style=All&platform=All
そして、Lukewからフォームデザインについて多くを学ぶことができます： http://www.lukew.com/ そして、Lukewのプレゼンテーションは次のとおりです： http://videos.visitmix.com/MIX09/C17F
私のおいしいからの追加記事： http://www.delicious.com/rolficak/form
今は似たようなものに取り組んでいるので、自分の考えを共有したいと思っていました。
1つの「組織の編集」ページに40の入力フィールドがあるとします。
最初のステップ-タブ：それらを個別のセグメントに分割できますか（つまり、ページ上の他のフィールドに依存しないフィールドがありますか？） 「アドレスの編集」、「連絡先の編集」、「火災安全情報の編集」など、独自のタブ/ページに配置できるフィールドがあるかもしれません。
2番目のステップ-ステップ：これは段階的なプロセスですか？入力の1つのセットを別のセットの前に完了する必要がありますか？別のページに分割し、進行状況インジケーターと次/前のリンクを提供します。
第3ステップ-段階的な開示：一部のフィールドは、必要になるまで非表示にできますか？たとえば、1つのオプションを選択することで複数のサブオプションを選択できる場合は、サブオプションが画面に必要であることが確実になるまでサブオプションを非表示にします。
4番目のステップ-ブロック：上記を実行できない場合は、ページを、同様の情報を含む別々のブロックに分割し、見出しを付けます。 ルークの例 。
第5ステップ-ナビゲーション：個々のタブ/ページにアクセスする方法について考えます。 [組織の編集]ページが表示されたら、クリックしてアドレスを編集しますか？以前に画面の[アドレスの編集]に到達できますか？分離された情報を簡単に見つけてアクセスできることを確認してください。
私はもっと収まるように何かのサイズを変更するのは非常に気が進まないでしょう。短い乱雑な混乱よりも、長くてよくレイアウトされたフォームの方が優れています。また、別の基本的な原則として、入力フィールドを入力データに含める必要があることを忘れないでください。たとえば、郵便番号フィールドはメールアドレスフィールドよりも短くなります。
お役に立てば幸いです。
一般に、大きなUIを持つビジネスWebアプリの明るい例はありません-そのようなUIデザインは本当にそれほど良いアイデアではないためです。
私は、健全な演習は各分野を調べ、その分野が本当に必要かどうかを判断することだと思いますか？その場合、データを他の入力データから計算または推論できるかどうか、または合理的なデフォルトを利用できるかどうかを検討してください。また、空白のテキストフィールド（ユーザーを怖がらせる可能性がある）の代わりに、フィールドをよりアクセスしやすい（制約された/視覚的な）方法で表現できますか？
ただし、これもシステムの種類と使用状況によって異なります。 Webアプリの目的を具体的に説明できますか？
オンラインバンキングがあなたの答えだと思います。銀行がオンラインアカウントを提供している場合は、複雑なマルチレベルナビゲーション、1つの画面にできるだけ多くの情報を詰め込む試み、そしておそらくは少々ドライなルックアンドフィール（おそらくブランド化されますが）を見つけるでしょう。銀行の色で、しかしそれでも、それはそれに対してしっかりした、ビジネスのような感触を持っています-それがうまくいっていれば）。
しかし、おそらくそこには多くのフォームが見つかりません。それらのために、あなたはビジネススクールへのオンラインアプリケーションを開こうとするかもしれません（例えば Harvard ）。またはアメリカのビザのオンライン申請、税金に関すること、実際には政府官僚に関連するあらゆるもの。
Googleアナリティクスは、複雑で「鈍い」データ集約型のWebアプリの良い例でもあります。
納税シーズンです...ターボ税が思い浮かびます。確かに、そのUIは単一のページではありませんが、基本的には彼からの巨大なフォームを単純化するのに優れていることはありません。
私はagibにも同意し、それを分解し、フィールドを評価して、UIと優れたUXを構築します。フォームに入力された、またはデータベースフィールドに入力された可能性が高い場合は、データ送信後にプログラムで処理できます。ユーザーを拷問しないでください。
私は今、UXデザインに取り組んでおり、ウィザードで複数のステップに分割されたフォームを再構築しています。追加するのは、各ページのパーセンテージインジケーターです。これは、「状況xはあなたに当てはまるか」という一連の質問に答え、フォーム入力を条件付きで表示することに重点が置かれます。これらの質問は、完了率を示すための基礎となります。私たちの仮説は、ユーザーがそれらがどこまで進んでいるかを知る方法をユーザーに提供する場合、より完全なフォームの使用法を取得することです。
すぐに利用できるアプリのテンプレートを100％入手できないと思います。良いことは、あなたがインスピレーションを得て、ローランド氏がアプリでそれを実装すると述べたように、ということです。このようにして、2つのことを実現します。 1.要件に応じてUIデザインをカスタマイズする2.ユーザビリティパースペクティブUIデザイン。