web-dev-qa-db-ja.com

大きなフォームのデザインガイドラインとルール

私は、主に入力、選択、ラジオ、チェックボックスなど、10から60の異なるタイプのフィールドを含む大きなフォームのページがたくさんある内部企業CRMシステムのWeb GUIに取り組んでいます。そしてもちろん、たくさんのラベル、小さなテキストとボタン-すべてが完全に混乱したように見えます。

そもそも、ブランドブックのようなルールのリストを作成したいと思います。何ができるか、何ができないかは、新しいフォームと既存のルールをどのように再設計する必要があるかです。今の私の目標は、デザイナーとcss/html-codersのためのクリーンで透明で一義的なセットまたはルールです。

誰かがこれをどのように行うことができるかについて私にアドバイスを提供できたら？列、カラースキーム、スタイルなど、あらゆるアプローチが適用されます。

formsgui-designguidelines
2
shershen

私はあなたがあなたのフォームを小さな塊で壊すべきだと思います。 1）個人情報2）連絡先情報または製品情報（重量、身長、素材など）のような異なるブロックまたはカテゴリを言うことを意味します

＆ もっと。各ブロックを代替の背景色で塗りつぶします（2つ以上の背景色は使用しません）。

すべての入力フィールド、テキスト領域、その他のフォームフィールドの上部にラベルを配置します。

フォームのユーザビリティに関するすばらしい記事を次に示します。 http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/

3
Surendra Vikram Singh

システムの柔軟性はニーズを圧倒します。いくつかのデザインルールを考え出すこともできますが、一般的すぎて長すぎます。

あなたが説明するシステムは一般的に、usable、編集可能な形式で、さまざまな形式と関係で多くのデータを配置することについてです、および視覚的に魅力的な方法。インスピレーションを得るために、- nimble からfacebookまで、これを実行するオンラインのシステムがたくさんあります。

interactionまたはgraphic Designersで座って、モックアップの描画を開始しますペンと紙。そして、おそらく、全体的な設計の代わりに、特定のピンポイントの難問について質問を投稿します。

3
JOG

これがまさに、現在、労働省で X Framework を使用して行っていることです。私たちのUXチームは、内部と外部の両方のアプリケーションに取り組んでいる20を超えるアプリケーション開発チームが使用するスタイルガイドラインを指示しています。

フロントエンドフレームワークを使用して、デフォルトのグリッドシステム（ 960.gs ）、基本的なカラースキーム/スタイル、基本的なJavaScript開始ライブラリ（jQueryなど）を提供し、追加でサポートされるライブラリを遅延ロードする機能を提供します（ DataTables 、 Sugar 、 jQuery UI など...）開発チームは追加の機能を必要とするため、要求に応じて新しい機能とスタイルを追加します。開発チームは、コーディングを開始する前にUXチームと共有するワイヤーフレーミングプロセスも開始しています。

フレームワークを使用している開発チームは、基本的なアクセシビリティ、テンプレートとコンポーネントに直接組み込まれたユーザビリティ、一貫したルックアンドフィールなどのメリットを享受しています。また、コンテンツに関するガイダンスも提供しており、まもなくウェブデザインパターンの原則と手順に関する情報も公開します。

私たちの資料を調べて、役立つ情報を引き出してください。

1
JeffH

スタイルに関するあなたの質問に答えるために、私は新しい開発者/アナリストが標準の慣習に従うことを確実にするのに役立つスタイルガイドを使用します。スタイルガイドには、次のガイダンスが含まれます。

  • フォントサイズ
  • メニュースタイル
  • 日付/時刻形式
  • ハイパーリンク
  • フォーム標準：ラベルのサイズ/向き、必須フィールド、タブ順、
  • 標準のテーブルレイアウト：見出しスタイル、セルスタイル、値タイプのセル位置揃え、行の色（スイカストライプ？）、
  • アプリケーション全体で使用される共通のウィジェット
  • 代替テキスト
  • ボタン/画像ガイド：使用するフォント、色、グラデーションなど.
  • 使用するアイコン
  • ホバースタイル/遅延
  • ブレッドクラムの使用
  • ツリースタイル
  • ポップアップの使用
  • エラーメッセージのスタイル（エラー、情報、警告、カスタム）

私は「ガイド」という用語を使用しています。状況によって解決策が異なるため、これは必須ではありません。ただし、逸脱がある場合はチームと話し合って、それが正しいアプローチであることを確認する必要があります。おそらく、新しいスタイルをガイドに追加する必要があります。

アプリケーションについて....私は同様の状況があります。私が作業しているアプリケーションの1つはすべての人のために構築されており、今では誰も満足していません。システムをきれいにすることはそれをより機能的にすることはできません。そして、すべてのフィールドがどこで使用する必要があるかを知っている上級ユーザーに悪影響を与えるような変更を加えることはできません。

データを分析すると、常に使用されているフィールドの20％だけが表示され、残りの80％のフィールドが特定のケースでのみ使用されていることがわかります。

0
Nick P