web-dev-qa-db-ja.com

Wizardを使用して最初の入力と後で編集する

私のWindowsアプリケーションでは、ウィザードを使用して、人や不動産などのビジネスオブジェクトを作成しています。

Wizardは、データをフォームのグループに明確に配置して表示できるため、最も論理的な順序で入力できるため、完璧です。また、Wizardページ間での処理および検証手順も可能です。一部の入力は他の入力に依存していますが、Wizardはシーケンシャルなので、それは問題ではありません。

mockup

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

ここに問題があります:ユーザーは後ですべての入力を編集できる必要があります。例:入力Cは後で編集する必要があります。

  1. Wizardを介して再度送信することができます。ただし、探しているものが見つからない場合は、ウィザード、彼らはそれがどこにあるのか、それがウィザードで見つかるかどうかさえ知らなくても、それを検索する必要があります。
  2. ウィザードではない個別の編集ダイアログを提供できます。基本的に、同じデータを処理する2つのダイアログ(1つは追加用、もう1つは編集用)です。それはより多くの努力を意味し、一貫性がないと解釈されるかもしれません。
  3. ウィザードを破棄できます。追加と入力は同じダイアログで行われます。

Wizardの概念はあきらめたくないので、データ入力は快適です。追加と編集の両方を可能な限り快適にするソリューションを考えられますか?

6
J_rgen

私の意見では、ウィザードは、搭乗プロセス、アカウントの作成、または設定の変更にのみ適しています。タスク関連の機能(製品の作成、予定のスケジュール)など、フォームに頻繁にアクセスする必要があるシナリオにはあまり適していません。したがって、私はあなたが提示した3番目のオプションを支持します。

説明した内容によると、ユーザーはフォームを使用して、重いタスク(オブジェクト作成)関連のアクティビティを実行する必要があるようです。フォームには [〜#〜] crud [〜#〜] 機能も必要です。

私の意見では、必要なのは、入力フィールドを簡潔かつ順次に整理して、明確にする方法です。フォームの効率も考慮すべき重要な要素(CRUD)だと思います。すでに述べたように、ウィザードは1回限りのプロセスに最適であり、フォームを複数回再訪問する必要がある場合は効率が低下します。タブを使用して関心のあるフィールドにすばやく移動したい洗練されたユーザーを遅くすることさえあるかもしれません。


アコーディオンアプローチ


フォームをモジュール式のステップに分割する必要がある場合は、アコーディオンを使用してセクションのコンテンツを探索し、それらを順次のステップで表示できます。ユーザーが空のフォームを送信できないようにするには、送信ボタンを無効にする必要がある場合があります。ここでは説明しませんが、空のフォーム送信用の他のインタラクションデザインを含めることができます。

フォームを編集すると、アコーディオンが展開され、すべての入力とそのエントリが表示されます。これにより、編集する対象のフィールドの検索がはるかに簡単になり、フォームの検証を実装する労力も軽減されます。

mockup

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

この方法を使用すると、ユーザーはウィザードをステップ実行するのに時間を浪費する代わりにフォーム全体を表示し、入力が快適ではない(またはその時点で回答がない)フィールドを見つけることができます。

ウィザードではない別の編集ダイアログを提供できます。基本的に、同じデータを処理する2つのダイアログ(1つは追加用、もう1つは編集用)。それはより多くの努力を意味し、一貫性がないと解釈されるかもしれません。

これは、編集用に別のダイアログを作成することの懸念にも対応していると思います。同じ機能を実行する2つの別々のフォームを維持することは、技術的な実装とメンテナンスの面で危険なことです。開発者に親切に:)

Wizardの概念はあきらめたくないので、データ入力は快適です。

起こり得る最悪の事態の1つは、デザイナーが自分のデザインに執着しすぎて他のオプションを探求できなくなった場合です。これは、設計の課題そのものよりもはるかに大きなハードルです。

1
adamsoh

最初のセットアップフロー用のウィザードと、継続的な編集のための別のメニュー方式のUIの使用を妨げるものは何もありません。結局のところ、ユーザーのニーズは時間とともに変化します。例えば:

初めて何かをセットアップするときは、ウィザードは、長くて複雑で重要なタスクをユーザーに案内するのに最適です。

将来何かを変更する必要がある場合、特定のメニュートリガーを使用すると、編集タスクを小さくして、ユーザーの目標に焦点を合わせることができます。

1
SteveD

オンボーディング用のウィザードの機能を組み合わせて、編集したいときにすべてのステップを展開した同じフォームを提供します。スタイリングと、場合によっては検証/ JavaScriptにいくつかのマイナーな変更を加えると、ウィザードビューを標準のフォームレイアウトに非常に簡単に変換できます。

これを実現するのに役立つプラグインは Accordion Wizard で、「モード」を「ウィザード」から「編集」に変更できます。

1
digout

さまざまなウィザードページへのリンクを含む進行状況バーを表示できます(下の画像を参照)。ウィザードが2ページより長い場合は、ユーザーがプロセスのどこにいてどれだけの労力が残っているかをフィードバックするため、(使いやすさの観点から)必須です。このようにして、ウィザードとすべてのフィールドへのクイックアクセスの両方を使用できます。ステッパーまたはプログレスバーの詳細については、 こちら をご覧ください。

Progress barマテリアルデザインの仕様 から取得した画像。

プログレスバーも水平にすることができます: enter image description here

0