web-dev-qa-db-ja.com

複数列フォームデザイン

特定のWebフォームのデザインに関して、利害関係者が直面している状況について、フィードバックをお願いします。私はUXデザイナーとしての役割が初めてなので、ここで経験豊富な人々から学びたいと思っています。

現在、複数のページに分割できない長い形式があります。これは私が利害関係者にもたらした解決策ですが、残念ながら離陸しませんでした。

私は複数列のフォームフィールドデザインを採用しました。複数列フォームは読みやすさの点で悪いことを承知しています。可能な場合は、単一列フォームに固執する必要があります(これはフォームの長さが原因で不可能であり、複数のページに分割することはできません)。私はこれらのリスクを受け入れます-少なくともこれに関するより多くのユーザーフィードバックを得るまでの最初の製品反復では、しかし今のところ、以下を仮定しましょう:

  • 複数列のフォームデザインがあります。
  • フォームの各行には、最大3〜4つのフォームフィールドがあります。
  • フォーム全体がモーダル内に配置されます(これも、技術的な制約のため、これから離れることはできません)

現在、フォームは次のようになっています(情報がマスクされています)。

current form design

利害関係者からの重要な問題の1つは、次のとおりです。

  • ドロップダウンとカレンダーの場合、通常はフィールドに付随する視覚的なインジケーター(つまり、下向きの矢印、カレンダーアイコン)があります。モーダル幅の100%で完全に伸ばした場合、ユーザーはフィールドがドロップダウンまたはカレンダー。
  • 90%のモーダル幅で完全に伸びるフィールドは避け、長さを短くすることをお勧めします(たとえば、スクリーンショットの国籍フィールドを参照してください。性別や名前と同じ長さにすることをお勧めします)。

それについての私の考えは:

  • これはデスクトップベースのアプリであり、人々はこれを通常のサイズのモニター画面で見ています。彼らは周辺視​​野の中でフィールド(現在、90%のモーダル幅で拡大されている)が実際にはドロップダウンまたはカレンダーであることを確認できます。
  • 私は通常、ドロップダウンの「現在アクティブ/デフォルト値」または日付フィールドの日付をクリックし、「下矢印」のあるフィールドの端までカーソルを移動しないと思います(ドロップダウン)または[カレンダーアイコン](datefield)をクリックします。したがって、90%のモーダル幅でフィールドをストレッチしても問題ありません。

残念ながら、プロジェクトの性質上、製品の発売後までユーザビリティテストを実行することはできません...これらは、現在組織のUXデザイナーとして直面している非常に現実的な制約であり、アドバイスのために他のデザイナーの経験で。

2
Kuan E.

いくつかの提案:

  • フォームフィールドを論理的にグループ化し、折りたたみ可能なグループに表示します。この方法では、最初のグループのみが展開されて表示されるため、フォームは最初の見た目では乱雑に見えません。ユーザーはさらにグループを展開し、必要なプロパティを設定できます。
  • フィールドを100%の幅に引き延ばすのは良い経験ではありません。各コントロールタイプ(ドロップダウン編集ボックス、ステッパーなど)は、変更する必要がない限り、幅が定義されている必要があります。添付画像の国籍欄に隣接して表示する欄がない場合は空欄にできます。

  • 必要なフィールドを見つけやすくするためにコントロールを配置します。

まだ見ていない場合に備えて、フォームのガイドラインを学ぶために訪れるリンクはほとんどありません。

https://msdn.Microsoft.com/en-us/library/windows/apps/jj839734.aspxhttps://uxplanet.org/designing-more-efficient-forms- structure-inputs-labels-and-actions-e3a47007114fhttps://www.nngroup.com/articles/web-form-design/

2
Saadia