ユーザー・エクスペリエンス（UX）におけるモダリティ

モーダルウィンドウは当初、ユーザーインターフェイスに表示される重要なイベントや不可欠なイベントへのアラートとして作られた。デザインの世界がますます進歩するにつれて、企業はオーディエンスを拡大するために必要なデータを収集するさまざまな方法を模索した。そのような慣習の1つに、この便利なポップアップボックス（その多くは、親ページのコンテンツを完全にブロックする）が含まれ、その後、デザイナー、利害関係者、マーケティング担当者の欲望のままに、そして悲しいことに、優れたUXを犠牲にして、乱用され、誤用されるようになりました。

その方法はこうだ。

誰だって邪魔されるのは好きではないが、時にはその邪魔が不都合に値することもある。

モーダル画面は必要なものですか、それともありがたい邪魔なものですか？

例えば、あなたが重要な会話をしているときに、誰かが割り込んできて、誰かがあなたの車に押し入っているとか、家が火事になっているとか言ってきたら、あなたはその人に深く感謝し、緊急事態を解決するために行動に移るだろう。

しかし、同じように重要な会話を中断して、天気や好きな色について尋ねられたとしたら、そのような不必要な侵入にむしろ腹を立てるだろう。

についても同様である。 モーダルダイアログ (またはダイアログ）。正しく使用されれば、それらは（少なくともユーザーにとって有益な）ライフセーバーであり、乱用されれば、それらは迷惑であり、ワークフローを阻害し、ユーザーエクスペリエンスに損害を与える。

本記事では、モーダルウィンドウとは何か、そして理想的なUXのベストプラクティスを維持するために、モーダルウィンドウの使用がユーザーや訪問者に敬意を示すことが重要である理由を説明します。

モダリティとUX

モダリティに関して言えば、UXデザイナーは常にユーザーのワークフローに特別な敬意を払い、必要な情報だけを割り込ませるべきである。

として ニールセン・ノーマン・グループ と述べている：

モーダルダイアログはユーザーを中断させ、アクションを要求します。ユーザーの注意を重要な情報に向けさせる必要がある場合に適しています。

何をもって「重要な情報」と判断するかは、よく言えば議論の余地がある。確かに、最高のユーザーエクスペリエンスのためには、その決定はユーザーの手に委ねられるべきです。もしあなたが、基本的なコンセプトを尊重できなかったり、何が「重要な情報」なのかわからなかったりするのであれば、「重要な情報」を決めるのはユーザーである。 必要不可欠 簡単なテストによって、適切なモーダルウィンドウの使用に必要なデータを得ることができます。

モダリティとは何か？

モーダルウィンドウは、親画面内または親画面の上に表示され、ページのすべての機能要素を非アクティブにします。モーダルウィンドウ モーダルダイアログ は、特定のイベントをユーザーに警告するように設計されており、コンテンツやソフトウェアとのインタラクションを以前と同じように継続する前に、ウィンドウを閉じるためのユーザーインタラクションを必要とする。

行動するモダリティ

このようなことがいかに重要であるかは一目瞭然である。 保存ダイアログ モーダルウィンドウです。このモーダルダイアログが表示されると、閉じる前に文書に加えた変更を保存するかどうかを尋ねてきます。文書の保存に失敗して仕事を失った経験は誰にでもあるはずなので、このオプションは重要な文書を作成する人にとってありがたい助け舟となる。保存する、キャンセルする、保存しないで続行するなどのオプションがあるため、その決断は作業を中断させるかもしれないが、その価値はある。作業が中断されてイライラした経験のある人なら、このシステム起動のモーダルウィンドウによって作業が保護されることに、きっと満足することだろう。

もう一方では、新しいウェブページにアクセスして数秒後に表示される、メーリングリストへの参加を要求するポップアップや、読みたいコンテンツにたどり着く前に通知で困らせることを許可するポップアップは、ユーザーにとってそれほど本質的でも重要でもありません。軽い不便さではあるが、それでもUXデザインにおいては、ユーザーのワークフローを中断させるに値しない不便さである。

新しいコンタクトを収集するための追加オプションとして、マーケティング担当者がこのアクションを好む理由はわかるが、UXに関しては、このようなコンポーネントの正しい使い方について強い議論があり、この機能がどのように悪用されるかをめぐる議論もある。

モダリティの種類

モーダルダイアログ

次の例は、今日のデジタル環境でモーダルウィンドウがどのように使用されているかを示しています：

• 画面全体を埋め尽くすポップアップとライトボックス
• アラートと通知（救命のための保存ダイアログボックスや、ユーザーのミスを防ぐその他のモーダル画面を含む）
• ソフトウェア内およびブラウザ内での警告と指示
• 複雑なアクションオプションとワークフロー
• アカウントのログインや支払い方法など、必要な入力情報を収集したり、携帯電話のカメラやフォトアルバムなどへのアクセスを許可したりすること。
• いくつかのツールチップ
• フォームが正常に送信された場合など、アクションの確認
• アプリやウェブサイトを開くと、オンボーディング・ウィザードや新機能のアラートが表示される。
• ニュースレター、アカウント、割引/オファー登録などのマーケティングリクエスト

モデルレス・ダイアログ

UXリサーチャーとして、私たちはユーザーの参加を促したいが、その流れやユーザーが製品を楽しむことに影響を与えないようにしたい。

モーダルウィンドウに代わるオプションは、それほど邪魔にならず、親ページのコンテンツをブロックすることなく、同じ仕事をすることができます。次のように知られています。 モデルレス・ダイアログ・ウィンドウ または ノンモーダルウィンドウこれらのオプションは、画面全体やユーザーインターフェイスを占有せず、一般的に同じページに表示されます。これらのオプションは、ユーザーが今やっていることを自由に続けられるようにし、追加のリクエストは無視するか、後回しにします。

オン モバイル機器スペースが限られている場合、モーダル画面と非モーダルウィンドウは非常によく似ています。しかし、主な違いはナビゲーション バーとヘッダーで、非モーダル ウィンドウでは表示されたままです。モーダル スクリーンの場合、独自のヘッダーまたはフッターがあり、要求された入力または必要な入力を行うことでキャンセルまたは進行するオプションがあります。

モーダルでないウィンドウは、モーダルな画面と比べてどのように表示されるのでしょうか？ここでは、あなたが日常的に目にし、使用しているであろういくつかの例を紹介します：

• チャットボックスや検索機能などのページ内ダイアログボックス
• 不正なフォームフィールド入力などのインライン警告
• 外部リンクボタンを使って別のページに情報を配置する
• インライン入力、アンケート、コメントボックス
• インライン・スライドショーとビデオ・プレーヤー
• ページ上部または下部のポップアップバーでのクッキー通知
• 見やすいページ内コンテンツの提供
• タブメニュー
• アコーディオン
• 電子メール・メッセージのポップアウトを作成する
• 検索ボックス
• ポップアウト・サイドバー・ダイアログ