web-dev-qa-db-ja.com

別のモーダルポップアップの上にモーダルポップアップを開くことは許容されますか?

ウェブ上で、モーダルポップアップ(B)を別のモーダルポップアップ(A)から開くことを許可するのは賢明ですか?

モーダルポップアップBを閉じると、ユーザーは再びモーダルポップアップAを表示します。

私はいくつかの問題を想定することができるように求めています。 2番目のポップアップを閉じると、オーバーレイがクリックされた場合、両方のモーダルが閉じますか、それとも2番目のモーダルだけですか?ユーザーは、最初のモーダルがなくなったと思いますか、それとも、2番目のモーダルを閉じることで元のモーダルに戻れることを知っていますか?等.

モックアップの例:

  1. モーダルA enter image description here

  2. モーダルB.モーダルAで「ボタン」をクリックすると開きます enter image description here

23
Dave Haigh

一般に、私はモーダルを使用するために次のガイドラインを使用します。

集中していますか?ユーザーの前にモーダルを投げるたびに、ユーザーのワークフローを混乱させています。混乱は必ずしも悪いことではありません。時々それがあなたが望むものです。しかし、あなたは自分がそうしていることを理解し、利益のためにそれを使用する必要があります。モーダル内のアイテムは自己完結型でなければなりません。目安としては、モーダルは、そのコンテンツがフォーカスされている場合、またはモーダル自体のページに表示できる場合にのみ使用する必要があります。この例はPinterestカード、Trelloピン、またはBehance投稿です。それらはすべてディープリンク可能な自己完結型の投稿ですが、すべてモーダルをインラインで使用して、ユーザーの注意を1つの特定のアイテムに集中させます。ユーザーは、操作するために他のアイテムを覚えておく必要はありません。

一貫性はありますか?モーダルなどのアイテムをいつどのように使用できるかについて明確なガイドラインがないと、どこでも使用されるため、効果が失われる可能性があります。残念ながら、これの不適切な例はStack Exchange。にあります。ユーザープロファイルのトップレベルメニューには、「編集•特権•設定•Flair•アプリ」へのリンクが含まれています。他のページ。そのリストの最後の項目「マイログイン」がモーダルで開きます。これは、モーダルが他の場所でユーザーに警告したり、タスクに集中したりするためにどのように使用されているかとは異なります。

過度に複雑ですか?別のモーダルの上にモーダルを使用することは、ワークフローで何かが故障したという大きな赤い旗です。ワークフローで2番目のモーダルが必要な場合は、モーダル内の複雑さに関するいくつかの大きな問題が発生する可能性があります。覚えておいてください:モーダルの最適な使用例のいくつかは、焦点を絞ったシンプルなコンテンツです。 Squarespace特定のコンテンツを追加するときに複数のモーダルを使用します。そして、私は製品を愛していますが、これは私が製品で最も嫌いな項目です。混乱して退屈です。

モーダルは素晴らしいツールです。ただし、それらを使いすぎると、ワークフローでの効果が鈍くなる可能性があります。

24
Hynes

いいえ。最初のダイアログの上に2番目のモーダルダイアログを追加することは、ポップアップウィンドウをポップアップウィンドウで使用することと同じです(ブラウザーでブロックされ、すぐにWebデザインで非推奨になるのには十分な理由があります)。代わりに、次に何を期待するかの明確なインターフェイスを備えたモーダルダイアログウィザードを使用してユーザーをガイドしてください。ユーザーは、次に何を期待するかを知っているとき、アプリケーションを安心して信頼します。次の例のように:

enter image description here

所定の順序でタスクを実行するために、段階的にインターフェイスを介してユーザーを導きます。

いつ使用するか

長くて複雑なタスクのUIを設計している場合、それは通常ユーザーにとっては目新しいものであり、ユーザーが頻繁に行ったり細かく制御したりすること(ソフトウェアパッケージのインストールなど)を行うものではありません。 UIの設計者は、タスクを実行するための最善の方法についてユーザーが知っている以上のことを知っていると合理的に確信しています。

リファレンス: Designing Interfaces:Wizard

enter image description here

8
Benny Skogberg

モーダルウィンドウは、何らかの形式の依存関係を作成する場合、つまりモーダルで必要なことが完了するまでユーザーが他の作業を実行できないようにする場合に使用されます。モーダル2がモーダル1から開くことができる場合、ポップアップウィンドウと何の違いもありません。したがって、私の意見では、あるモーダルを閉じて別のモーダルを表示することは、そもそも避けるべきです。技術的な理由により、モーダル2がモーダル1にオーバーレイする場合、シームレスである必要があります。つまり、ユーザーが2つの異なるモーダルを表示することはありません。モーダル2を閉じると、モーダル1 ... imhoが閉じます。

複数のウィンドウ間で何らかの比較/参照が必要な場合に備えて、別のデザインにする必要があります。

2
user35509

モーダルウィンドウは、下のレベルから抽出された追加の複雑なレイヤーです。別のレイヤーを追加する場合は、さらに複雑なレイヤーを追加します(レイヤーに含まれるコンテンツの量に関係なく)。

ここで行っているのは、ユーザーにyourメンタルモデルを作成させ、彼女のownを作成させないことです。

1
uxfelix