web-dev-qa-db-ja.com

ステップで完了したフォームを編集するにはどうすればよいですか?

Eコマースサイトでのチェックアウトプロセスのように、1つの大きなフォームを5つのステップ(プログレッシブエンクロージャー)に再構成しました。最後のステップでは、すべてのフィールドのプレビューと送信ボタンを表示します。

このプロセスは基本的に、システムに製品を追加するためのものです。

質問は編集機能に関するもので、5つのステップのプロセスを使用するか、1つのページにすべてのフィールドを配置するかを知りたいのですが?

また、各編集にはより高い権限の承認が必要であるため、追加した値と以前の値を画面に表示する方法にインスピレーションを与える必要があります。参考にしていただければ幸いです。

2
Hemchandra

編集モードには単一ページの方が良いと思います(StackExchangeでユーザープロファイルの編集機能を確認してください)。 (Linkedinのような)各フィールドに制御を与えることができるかもしれません。

ただし、選択は、編集モードでのユーザーの習慣と各フィールドの変更頻度に依存すると思います。

1
JuClt

製品の作成に使用するステップを単一のページで表すことができます。情報を視覚的に区別できるセクションに分割します。各セクションはステップに関連しています。 (ワイヤーフレームを参照)

以下の最初のワイヤーフレームで、「セクション1の編集」ボタンをクリックすると、ページのフィールドを直接編集可能にするか、ユーザーが最初に情報を設定した画面のようなオーバーレイを開くことができます。

2番目のワイヤーフレームでは、十分な特権を持つユーザーが製品画面にアクセスし、いくつかの変更には注意が必要であるという通知が表示されます。編集されたフィールドが強調表示され(フォーム検証と同様)、変更に関する情報が含まれ、承認/却下のオプションが提供されます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

1
dennislees