web-dev-qa-db-ja.com

ポップアップ/モーダルウィンドウの下部バーの目的は何ですか?

モーダルウィンドウの下部に、コンテンツから少し離れて見える領域が含まれるという一般的なパターンがあるようです。私はこの習慣がどこから来ているのか、そしてどのようなユーザビリティの原則がその背後にあるのかを調べようとしています。

なぜ、またはいつ使用しますか?そこにボタンがない場合でも?これはどこから来たのですか?

モーダルウィンドウ(または一般にポップアップ)には、多くの疑似触覚特性があります。彼らはアプリケーションの通常のフローから抜け出し、その上に嘘をついているようです。これは、この領域の下部にあるバーの色と関係がありますか?私たちが模倣しているある種の現実のアイテムはありますか?

いくつかの例:

Facebook modal

Pinterest modal

Google's modal

補足として;誤ってすべての例がソーシャルネットワークですが、他の場所でも発生します。

私のユースケースについてもう少し詳しく

現在、プロジェクトで、その領域をドロップするかどうかを決定しています。分離すると、モーダルのコンテンツからかなりのスペースが離れます。 T&Cから連絡先フォームに至るまで、かなり少数の異なるユースケースがあり、さらに複雑な機能もいくつか追加されています。

一部の新しい機能は、約3または4つのステップからなる特定のユーザー生成コンテンツの入力プロセスの一部であり、モーダルの下部にボタンがあるものとないものがあります

12
Dirk v B

このバーの背後にある考え方は、ゲシュタルトの相似則まで遡ることができます。

さまざまなオブジェクト内の要素は、互いに類似している場合、知覚的にグループ化されます。

An example of Gestalt law of similarity

これが、(a)に2列、(b)に2行表示される理由です。後者は、色が形に勝っている(少なくともこの特定の例では)ことも示しています。

あなたが提供したいくつかのスクリーンショットでは、類似性はしばしばバックグラウンドにあります。

これを見る別の方法は、共通領域の法則の例です。

共通領域内に含まれるオブジェクトは、構成オブジェクトの類似性や近さに関係なく、グループに属していると認識される可能性があります。

この図のように:

A box containing items, with more items outside the box

境界線(通常はノイズが多い)または色を使用してグループを分離することにより、グラフィック要素(グループ内にあるものとグループ外にあるもの)の論理的なグループ化を促進します。

アイテムをグループ化することにより、それらを別のグループのアイテムから分離することにも注意してください。

ダイアログボックスでは、バーによってコンテンツが操作から分離されます。メニューでは、単に強調表示するために使用されます。

Pinterest Example

Googleの場合、上部のダイアログボックスで「バー」が共有されるコンテンツのタイプから実際のコンテンツを分離します(視覚的に分離しないと、これを理解している人を見ることができません)。

下部のダイアログでは、上部領域と下部領域の区別により、データ操作の相互作用がタスク/進行の相互作用から分離されます。また、バーボタンはダイアログを閉じますが、他のすべてのインタラクションは閉じません。私に尋ねた場合、メールのチェックボックスはそのバーではなく、Toフィールドの下にあるはずです(その理由が表示されますが、「このダイアログを閉じる直前に、メールを送信しますか?人々も?」):

Google screenshot

18
Izhaki

実際に受け入れられた答えは、なぜこのように作られたのか主な理由を示していません。

視覚的な認識だけではなく、アクション(例では「OK」ボタンなど)のあるモーダルポップアップの下部に固定バーを配置すると、コンテンツであってもユーザーに可能なアクションを表示できますセクションが大きすぎて小さな画面に収まりません->スクロールバーがあります

このようにすると、最小の画面サイズでも、コンテンツの最後までスクロールしなくてもアクションボタンを表示できます。

そうでなければ、ユーザーがコンテンツに関連付けられているアクションがあることを知る前にコンテンツをスクロールしなければならない場合、それは非常に混乱します。

このデザインにより、非常に明確になり、コンテンツのどの部分を読んでいても、メインのアクションはいつでも下部のバーに収まります。

2
Leths

これは、開いているモーダルのタスクを呼び出して、それらにもっと注意を向けるためのかなり一般的な方法です。タスクボタンが目立つ場合、バーの色を変える必要はないと思います。

1
jeff

他の質問「これはどこから来たのですか?」に答えるために:これで模倣する実際のアイテムは、メモにクリップされた標準のインデックスカードです。

ゲシュタルトの法則が現実に適用されるのは、インデックスカードが下のメモの一部ではないことを警告する奥行きがあるからです。フラットOSの新たな標準により、これはより有効な質問になります。

でもAppleは、どのインターフェイスがまだ模倣に十分関連しているのかを理解するのに時間がかかりました。確かに、ダイヤル電話は初期のiPodインターフェイスに影響を与えました。更新するiOSオブジェクト。

UXでの長い経験から学んだことの1つは、すべてが議論の余地があるということです。

0
user45865