おそらく以前にもそこに行ったことがあるでしょう。ユーザーにモーダルを表示するかどうかをどのように選択するのでしょうか?また、いつユーザーを別の新しいページに移動するのでしょうか?そして、それはまったく重要ですか？ 実際、そうなります。この決定は、ユーザーのフロー、コンテキスト、詳細を検索する能力に影響を与え、それに伴いエラーの頻度やタスクの完了にも影響します。どちらのオプションも、不適切なタイミングや不適切な場所で、混乱をもたらしイライラする可能性があります。 ですから、それを正しく理解したほうがいいでしょう。では、その方法を見てみましょう。 モーダル vs. ダイアログ vs. オーバーレイ vs. ライトボックス 私たちは単一のモーダル UI コンポーネントについてよく話しますが、さまざまな種類のモーダルすべての間の細かく複雑なニュアンスを無視することがよくあります。実際、すべてのモーダルが同じというわけではありません。モーダル、ダイアログ、オーバーレイ、ライトボックスはすべて似ているように聞こえますが、実際にはまったく異なります。
Dialog「会話」（ユーザー↔システム）の総称。 オーバーレイページの上部に表示される小さなコンテンツ パネル。 ModalUser はオーバーレイと背景を無効にして操作する必要があります。 NonmodalUser はオーバーレイと背景を有効にして操作する必要があります。 ライトボックスモーダルに注目を集めるため、背景が薄暗くなります。
Anna Kaley が強調しているように、ほとんどのオーバーレイは間違ったタイミングで表示され、重要なタスク中にユーザーの邪魔をし、不適切な言葉遣いを使用し、ユーザーの流れを壊します。これらは本質的に中断的なものであり、通常、その必要性がなくても重大度が高くなります。
確かに、ユーザーのアクションの結果が大きな影響を与える場合は、ユーザーの速度を落としたり中断したりする必要がありますが、ほとんどのシナリオでは、非モーダルの方がはるかに微妙で、ユーザーの注意を引くためのよりフレンドリーなオプションです。どちらかといえば、私は常にそれをデフォルトにすることをお勧めします。 モーダル → 単一の自己完結型タスク用 デザイナーとして、私たちはモーダルを無関係で煩わしいものとして無視することがよくありますが、多くの場合、実際にそうなのです。 — しかし、それらにも同様の価値があります。これらは、潜在的な間違いについてユーザーに警告したり、データ損失を回避したりするのに非常に役立ちます。また、ページの現在の状態を中断することなく、関連するアクションを実行したり、詳細をドリルダウンしたりするのにも役立ちます。 しかし、モーダルの最大の利点は、ユーザーが現在の画面のコンテキストを保持できることです。これは UI だけを意味するのではなく、編集された入力、スクロール位置、アコーディオンの状態、フィルターの選択、並べ替えなども意味します。
場合によっては、ユーザーは選択内容 (上記のようなフィルターなど) をすぐに確認し、そこからすぐに続行する必要があります。もちろん、自動保存でも同じことを実現できますが、常に必要または望ましいとは限りません。また、UI をブロックすることは多くの場合得策ではありません。 ただし、モーダルはどのタスクにも使用されません。通常、これらはユーザーが参加してタスクを完了し、元の場所に戻る必要がある単一の自己完結型タスクに使用されます。当然のことながら、これらは優先度の高い短いインタラクション (アラート、破壊的なアクション、素早い確認など) にはうまく機能します。 モーダルが役立つ場合: 🚫 モーダルは多くの場合、破壊的で、侵入的で、混乱を招きます。🚫 比較やコピーアンドペーストが困難になります。✅ しかし、モーダルを使用すると、ユーザーは複数のコンテキストを維持できます。✅ 取り返しのつかないエラーやデータ損失を防ぐのに役立ちます。✅ ユーザーを新しいページに送ることが混乱を招く場合に役立ちます。 ✅ ユーザーが中断を重視する場合にのみモーダルを表示します。 ✅ デフォルトでは、非ブロック ダイアログ (「ノンモーダル」) が優先されます。 ✅ ユーザーが後でダイアログを最小化、非表示、または復元できるようにします。 ✅ 複雑な入力を確認するなど、ユーザーの速度を低下させるにはモーダルを使用します。 ✅ 「閉じる」、ESC キー、またはボックスの外側をクリックして回避策を提供します。 ページ → 複雑な複数ステップのワークフロー用 ウィザードやモーダル内のタブ付きナビゲーションは、複雑なエンタープライズ製品であってもあまりうまく機能しません。通常、サイド パネルやドロワーのほうがうまく機能します。問題は、ユーザーがデータ ポイントを比較または参照する必要があるときに始まりますが、モーダルがこの動作をブロックするため、代わりに同じページを複数のタブで再度開きます。
より複雑なフローや複数ステップのプロセスの場合は、スタンドアロン ページが最適に機能します。また、ページはユーザーの完全な注意を要求する場合に効果的に機能しますが、前の画面への参照はあまり役に立ちません。また、ドロワーは、単純なモーダルには複雑すぎるが、ページ全体のナビゲーションを必要としないサブタスクに対して機能します。 モーダルを避けるべき場合: 🚫 エラー メッセージにはモーダルを避けてください。🚫 機能通知にはモーダルを避けてください。🚫 オンボーディング エクスペリエンスにはモーダルを避けてください。🚫 複雑で長い複数ステップのタスクにはモーダルを避けてください。🚫 複数のネストされたモーダルを避け、代わりに prev/next を使用してください。🚫 絶対に必要な場合を除き、自動トリガーされるモーダルは避けてください。 両方を避ける繰り返しのタスクの場合 多くの複雑でタスクの多い製品では、ユーザーは同じタスクを何度も繰り返し実行することになります。そこでは、モーダルと新しいページのナビゲーションの両方がフローを中断したり、ユーザーがすべての異なるタブやビュー間で不足しているデータを収集することを強制したりするため、摩擦が生じます。 多くの場合、ユーザーは、終わりのない確認、大げさな警告、冗長な指示、または単に参照ポイントの欠落に満ちた、壊れたエクスペリエンスを経験することになります。 Saulius Stebulis 氏が述べたように、このようなシナリオでは、展開可能なセクションやインプレース編集の方がうまく機能することが多く、タスクが現在の画面に固定されたままになります。 実際には、多くのシナリオで、ユーザーは単独でタスクを完了することはありません。タスクを実行する際には、データを検索したり、値をコピーして貼り付けたり、さまざまな場所でエントリを調整したり、同様のレコードを確認したりする必要があります。 オーバーレイとドロワーは、タスク中にバックグラウンド データへのアクセスを維持するのにさらに役立ちます。その結果、コンテキストは常にその場所に留まり、参照またはコピーアンドペーストが可能になります。特に重大な間違いを防ぐために、モーダルとページ ナビゲーションを、中断によって真に価値が追加される瞬間まで保存してください。 モーダルとページ: デシジョン ツリー 少し前に、Ryan Neufeld は、デザイナーがモーダルとページのどちらを選択するかを支援する非常に役立つガイドをまとめました。便利な PNG チートシートと、7 つのセクションに分かれた質問を含む Google ドキュメント テンプレートが付属しています。 長くて非常に詳細ですが、従うのは非常に簡単です。
難しそうに見えるかもしれませんが、非常に簡単な 4 ステップのプロセスです。
画面のコンテキスト。まず、ユーザーが基になる画面のコンテキストを維持する必要があるかどうかを確認します。 タスクの複雑さと期間。シンプルで集中力があり、気が散りにくいタスクにはモーダルを使用できますが、長く複雑なフローにはページが必要です。 基になるページへの参照。次に、ユーザーがバックグラウンドでデータを頻繁に参照する必要があるかどうか、またはタスクが単純な確認や選択であるかどうかを確認します。 適切なオーバーレイの選択。最後に、オーバーレイが実際に良いオプションである場合、モーダルか非モーダル (非モーダルに傾く) のどちらかを選択するようガイドされます。
まとめ 可能な限り、UI 全体をブロックすることは避けてください。ダイアログをフローティングにして、UI を部分的に覆いながら、ナビゲーション、スクロール、コピー＆ペーストを可能にします。または、モーダルの内容をサイドドロワーとして表示します。または、代わりに垂直アコーディオンを使用してください。または、多くの詳細を表示する必要がある場合は、ユーザーを別のページに誘導します。 ただし、ユーザーの効率と速度を向上させたい場合は、どんな犠牲を払ってでもモーダルを避けてください。これらを使用して、ユーザーの速度を低下させ、注意を集中させ、間違いを防ぎます。テレーズ・フェッセンデン氏が指摘したように、誰しも邪魔されることを好みませんが、どうしても邪魔されなければならない場合は、そのコストを払うだけの価値があることを確認してください。 「スマート インターフェイス デザイン パターン」に対応 モーダルと代替案に関する全セクションは、実際のプロジェクトからの数百の実践例を含む 15 時間のビデオ コースであるスマート インターフェイス デザイン パターンでご覧いただけます。今年後半にはライブ UX トレーニングも開催されます。メガ ドロップダウンから複雑なエンタープライズ テーブルまで、あらゆるものに対応し、毎年 5 つの新しいセグメントが追加されます。無料のプレビューにジャンプします。コード BIRDIE を使用すると 15% オフになります。 インターフェイス デザインと UX に関するビデオ コース、スマート インターフェイス デザイン パターンをご覧ください。
ビデオ + UX トレーニングビデオのみビデオ + UX トレーニング$ 495.00 $ 699.00
ビデオ + UX トレーニングを入手 25 ビデオ レッスン (15 時間) + ライブ UX トレーニング。100 日間返金保証。ビデオのみ$ 300.00$ 395.00
ビデオ コース 40 ビデオ レッスン (15 時間) を入手してください。毎年更新されます。2 つのビデオ コースを含む UX バンドルとしても利用できます。
役立つリソース
さまざまな種類のポップアップ、Anna Kaley 著 UI モーダル設計のベスト プラクティス (Uxcel 著) 私たちはあまりにも多くのくそーなモーダルを使用しています: UX ガイドライン、Adrian Egger 著 モーダルおよびノンモーダル ダイアログ、テレーズ フェッセンデン著 最新のエンタープライズ UI デザイン: モーダル ダイアログ、James Jacobs 著 デザインシステムのモーダル
