フォームを作成するWizardできるだけ友好的にする
私の聴衆がすでにコンピュータに習熟しているか、どういうわけかコンピュータを使用する知識を持っているなら、それは簡単でしょう。
初めての方のためのデザインです。
私は元々キャンセル/戻ると次へボタンを持っています これのように 。
ボタンをパネルのフッターに移動して、ウィザード全体でボタンの位置を一貫させます これのように 。
しかし、何かが正しくないと感じたり、自分が偏見を持っているかどうかわかりません。
それはさておき、
手順1のリストにない場合に備えて製品カテゴリを作成する手順2の2つのバージョンを作成しました。
ここには2つの目標があります。
- 各オプションが何をするかを説明する
- それらの選択をガイドします。
2多少異なる形式が提示されます
バージョン1
オプションを選択すると、フォームのステップ3に進みます。
バージョン2
説明とフォームは、ナビゲーションタブで区切られた1つのページに既に含まれています
-編集-
これまでのところよく見える私の最終的なデザイン：
フォーム
モーダル
現時点では、ユーザーフローはあまり明確ではありません。先に進む前に、いくつかの相互作用フローとワイヤーフレームをスケッチする価値があるかもしれません。
第一印象に基づく提案：
1）ユーザーがどのステップにいるかを明確にし（上部のアイコンがマルチステップウィザードのステップを表していると思いますか？）、ユーザーがフォームの入力をどの程度進めたかを明確にします。
2）キャンセルの代わりに「前へ」を使用します
3）ユーザーが「リストにないカテゴリー」を選択したときに、ページを離れることなくカテゴリーとサブカテゴリーのどちらかを選択できるようにするときに、アコーディオンを開く可能性はありますか（追加のステップを保存して）
上記の目的から得た2つの主要なポイントは、ページ/タブで何が行われているか、および一貫性を明確に説明する方法です。
これを容易にするために、タイトルを含む上部にあるパネルと非常によく似た下部にパネルを作成します。
ここに、[次へ]、[前へ]、[キャンセル]ボタンを配置します。
ページの説明、または選択したフォーム要素の説明を表示する必要がある場合は、通常、説明したパネルの上に追加のパネルを作成して、その情報を保持します。
簡単なグーグル検索は例として私に以下の画像を与えました。
「説明/ヘルプ」のもう1つのオプションは、同じボタンパネルのヘルプボタン/アイコンを使用することです。このボタンパネルは、必要に応じてページを説明できますが、必要な場合を除いて占有しません。
ぐるぐる回って、これはウィザードを提示するかなり普通の/標準的な方法のように見えます。
いくつかの提案：
最初の画像で、「戻る」ボタンを左端に移動し、「次へ」ボタンを右端に移動します。 （私は、ユーザーが左から右に読むことを前提としています。）
アイコンを含む色付きのグラフィックを、その下のコンテンツと同じ幅にします
ボタンに「戻る」と「次へ」のラベルを付ける代わりに、宛先にラベルを付けます。たとえば、「<-基本情報」や「製品カテゴリ->」などです。 FontAwesomeを使用している場合は、fa-caret-rightおよびfa-caret-leftを使用できます。
2番目の画像のように、2つのドットをナビゲーションとして使用しないでください。慣例により、フォームウィザードは通常、ナビゲーションにフォームウィザードを使用しません。通常、画像を含むカルーセルに使用されます。