web-dev-qa-db-ja.com

フルスクリーンオーバーレイの下でWebサイトが通常ナビゲーション操作をブロックするのはなぜですか?

私はウェブナビゲーションの研究プロジェクトに取り組んでいます。調査中に、フルスクリーンオーバーレイがあると、ウェブサイトがナビゲーションバーの操作をブロックする傾向があることがわかりました。 Web Twitterのように、画像をクリックすると、サイトオーバーレイによってページ全体がブロックされます。この時点では、検索や他のページへの移動はできません。このアプローチの目的はあるのでしょうか?どうもありがとう!

11
Cary Liu

あなたが引用した例を見てみましょう:Twitterのツイートモーダル

UX.SE Tweet

ここでのフルスクリーン背景オーバーレイは、2つの目的を果たします。

  1. 必須ではないコンテンツを視覚的に薄暗くすることで、ユーザーの注意をモーダルに集中させるのに役立ちます。
  2. 本質的でない相互作用をブロックします。

2番目の目的は、具体的に尋ねていることです。ここでTwitterは、「ツイート」ボタンをクリックしたり、ナビゲートしたり、検索したりすることは、ユーザーが今気にする必要のある対話ではないと決定しました。代わりに、特定の一連のアクション(つまり、返信、リツイート、お気に入り)に焦点を当てる必要があります。

Twitterの全体的な目標は、ツイートを作成するか、他のツイートとやり取りすることです。重要なアクションに集中することで、選択肢を制限することで認知負荷を軽減しました。これで、使用可能なアクションと次に実行するアクションをより迅速に識別できるようになりました。

人は、フィードから以前のすべてのアクション(返信、リツイート、お気に入り)を実行できます。個別のツイートをクリックすると、ユーザーは特定のアクションアイテムやコンテンツに集中できます。以前は、特定のツイートリンクにアクセスすると、Twitterはユーザーをスタンドアロンのページに移動していました。ユーザーのプロファイルを取得し、そこにツイートを表示するように変更しました。これには、特定のツイートに注意を向けるという利点がありますが、モーダルをすばやく終了して、そのユーザーによる他のツイートの表示を開始できます。ここでも、彼らの目標は継続的な関与です。スタンドアロンのページは行き止まりの体験です。

15
Hynes

これは、モーダルの非常に一般的な意味です-一度に1つのタスク。

-モーダルのコンテキストを理解するための背景。-

アプリケーションはユーザーにとって圧倒的すぎる可能性があり、ユーザーが一度に1つのことを実行するようにガイドすると、ワークロードの量が減るため、思考プロセスにより、処理時間とプラットフォームの全体的なエクスペリエンスが減少します。

ヒックの法則: "この法則は、ユーザーに公開されるオプションが多いほど、決定に時間がかかることを示しています。これは、選択する製品や見る画像など、ユーザーに提供するオプションが多いほど、対話の次のステップについて決定するのにより多くの時間とエネルギーが必要になることを意味します。ここで考えられる結果は、ユーザーが製品を使用した後、選択したが不快感を感じる場合や、最悪の場合、それほど大きな努力を払わずにそのままにしたくない場合があります。そのため、ボタン、画像、ページなどのオプションを最小限に抑えることをお勧めします。不要な選択肢を取り除くことで、製品の使いやすさが向上します。 "(1)

アクティブなモーダルを強調するために背景を暗くすることの重要性を理解するには:

ゲシュタルト原則: "図/地面。この原理は、オブジェクトを背景から分離する目の傾向を示しています。オブジェクトまたは背景のどこに目が合っているかに応じて2つの顔を表示する写真の例。 "(1)

特定の質問について:

モーダルの定義: "モーダルダイアログは、メインコンテンツの上に表示され、システムをユーザーの操作を必要とする特殊モード。ユーザーが明示的にモーダルダイアログを操作するまで、このダイアログはメインコンテンツを無効にします。 "(2)

一方

非モーダル(またはモードレス)の定義: "非モーダルダイアログおよびウィンドウはメインコンテンツを無効にしません:ダイアログボックスを表示しませんユーザーインターフェースの機能を変更しないでください。ダイアログが開いている間、ユーザーはメインコンテンツの操作を継続できます(ウィンドウを移動したり、最小化したりすることもできます)。 "(2)

したがって、情報を提示するために利用できるさまざまな要素を理解し、UXの習慣と設計原則を考慮に入れることで、モーダルの主な目的は、あらゆる種類の「気を散らすこと」を無効にしながら、プラットフォームの特定のウィンドウにユーザーの注意を引くことです"または、混乱を引き起こしたり、特定のタスクを完了するための処理時間を増やしたりする可能性のある無関係な要素。モーダルの背景では、プラットフォームのどこに立っているかを理解するためにコンテキスト情報が必要な場合に備えて、メインページを表示できることを説明することが重要です。 (例えば、あなたはあなたのプロフィールにいますが、特定の要素を編集していて、あなたのプロフィールの他の要素と相互作用することができません)

(1) https://uxplanet.org/psychology-in-design-principles-helping-to-understand-users-10bcf122f4b (2) https://www.nngroup。 com/articles/modal-nonmodal-dialog /

13
UX Research

オーバーレイの目的は、Webサイトがその主要なアクションであると考えるものに注意を向けることです。例えばニュースレターのサインアップ、画像の表示、登録など。LinkedInやPinterestなどの一部のサイトは、コンテンツへのアクセスをブロックする方法としてこれを使用します。オーバーレイの背後にあるコンテンツを垣間見ることができますが、実際にコンテンツの表示を開始するために、サイトが望むことは何でもしなければなりません。他のサイトでは、画像の表示など、オーバーレイの目的に注意をそらすために、同様の追い越しオーバーレイを使用しています。これらのケースでナビゲーションを使用すると、オーバーレイで行われていることをユーザーが単にスキップできるため、望ましくありません。

0
Wendy Wojenka