web-dev-qa-db-ja.com

同じページで異なるアクションの必須フィールドを表示する最良の方法は何ですか?

私は、ユーザーが2つのアクションのいずれかを実行できる注文を作成するためのページを持っています。ユーザーのグループが異なれば、これらのアクションは異なる順序で行われます。ユーザーはすべてのフィールドを見ることができるように、ページのフィールドはページに縦に並べられているセクションにグループ化されています。ユーザーがすでに注文のドラフトを作成していると仮定します-各アクションに必要なフィールドを表示する最良の方法は何ですか? (ビジネスプロセスの変更またはアクションの順序付けはオプションではありません)

現在、フィールドのデザインにはシングルアスタリスクを使用し、請求書にはダブルアスタリスクを使用しています。ページ上部に、シングルアスタリスクとダブルアスタリスクを説明する凡例があります。 1つの提案は、ページにアクションのリストを表示し、ユーザーに実行したいアクションを尋ね、選択したオプションに基づいて必須フィールドを表示することでしたが、ユーザーにどのアクションを実行するかを尋ねるのは良い考えではないと思いますしたい-彼らは彼らが望む任意の行動を取ることができるはずです。

前もって感謝します。

enter image description here

2
maddog

これはよく知られた設計パターンです。サブワークフローを含むフォームがあり、異なる順序で異なるタイミングで起動できます。

問題:

  • 凡例(あなたの場合はアスタリスク)は、ユーザーが画面の周りをダートするように強制され、どのコントロールがアスタリスクが付いているかを判断するため、可能な限り回避する必要があります。

  • (a)ユーザーがアクションを選択するためだけに2回クリックしなければならないため、上部のドロップダウンにアクションボタンを配置することは、すばらしいことではありません。 (b)アクションボタンがワークフロー(フォームのどこかにある)と視覚的に切り離されているため、アフォーダンス/原因と結果がユーザーに明確ではない。

解決:

  • アイランドを使用して、個別のサブワークフローをグループ化します。各ワークフローの横に関連するアクションボタンを配置します。これにより、各サブワークフローの視覚的な説明がわかりやすくなります。
  • これにより、サブワークフロー自体を論理的な順序に配置することもできます。以下に1つのレイアウトを示しました(注文の詳細が最初に来て、ユーザーがデザインまたはその後に請求書を選択する)。ただし、ワークフロー全体に適合するものを選択できます。

enter image description here

2
tohster

データ入力ボックスを色分けすると、追加のアフォーダンスが得られます。

アイコンまたはシンボルで表される2つのアクション(AおよびB)の他の視覚的表現はありますか?各アクションの必須フィールドを論理的にグループ化できますか?

1
Voxwoman