編集オプション付きのカードがあります。編集をクリックすると、ポップアップが3つのステップで表示されます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ポップアップにウィザードを含めることは良い習慣ですか?
UXの記事によると:複数のステップを含むダイアログを避けてください。参照: https://uxplanet.org/5-essential- ux-rules-for-dialog-design-4de258c22116#.nrl4a9ca8 [ポイント3]
これは基本的にモーダルウィンドウになります。はい、モーダルウィンドウで3つのステップを持つことができ、ユーザーに現在の状態を示すだけです。
モーダルウィンドウ
モーダルウィンドウは、メインウィンドウの上に開くセカンダリウィンドウです。ユーザーは、タスクを実行してメインウィンドウに戻る前に、それを操作する必要があります。タスクを完了する前にユーザーが実行する必要がある手順がある場合は、モーダルウィンドウを使用する必要があります。ページ全体ではなくモーダルウィンドウを使用すると、ユーザーはタスクのコンテキストを維持できます。
クリックしたボタンに一致する、明確で目に見えるタイトルを含める
モーダルウィンドウが開いたとき、ユーザーはそれがどこから来ているのかを知ることが重要です。モーダルウィンドウには、ユーザーがクリックして開いたボタンと一致するタイトルが含まれている必要があります。これは一貫した行動を示し、彼らがしていることを彼らに伝えます。
ユーザーがEscキーでウィンドウを閉じることを許可する
アクセシビリティ上の理由から、ユーザーがEscキーを押すと、モーダルウィンドウが閉じるはずです。また、ユーザーがモーダルウィンドウのコントロールを使用している場合は、それらをタブで移動できるようにする必要があります。これにより、スクリーンリーダーとキーボードを使用するユーザーがWebサイトをナビゲートできるようになります。
ユーザーがウィンドウの外側をクリックしたときにウィンドウを閉じる
ユーザーが閉じるボタンを見つけられない場合は、ボタンの外側をクリックしてウィンドウを閉じることができるようにします。ユーザーはメインウィンドウをクリックして戻ることが多いため、これにより終了が簡単で直感的になります。ただし、ユーザーがフォームに情報を入力している場合にこの方法で終了することを許可しないでください。そうしないと、フォームを失う可能性があります。
必要に応じて[キャンセル]ボタンを使用
ウィンドウのサイズを縦にしたり横にしたりしないでください
できるだけ小さくする
モードレスウィンドウは、メインウィンドウ上で非常に少量のスペースを占める必要があります。モードレスウィンドウをできるだけ小さく控えめにして、ユーザーがメインウィンドウを操作できるようにします。メインウィンドウは常にユーザーのタスクの主な焦点です。
お役に立てれば
これは、ウィザードまたは steppers (投稿した例のように)がポップアップとして通常表示される方法です。ですから、主要な質問に答えるために、はい。
ただし、カードの内容を編集するにはステッパーが必要です:
ステッパーは、一連の論理的で番号の付いたステップの進行状況を表示します。ナビゲーションにも使用できます。
ステッパーを使用するには、長さが原因で分解され、異なるクリアセクションを持つプロセスが必要です。次に例を示します。
ステッパーを使用してセクションを短い形式で分割したり、1つのページで複数回分割したりしないでください。
参照: 材料設計-ステッパー