ポップアップウィンドウ、ドロワー、ページジャンプの違い | Web インタラクションの概要

ユーザーが閲覧ページをクリックしたり操作をトリガーしたりする場合、Web インタラクション方法は多数ありますが、ポップアップウィンドウ、ドロワー、新しいページへのジャンプの 3 つの Web インタラクション方法に大別できます。これら 3 つの Web インタラクション方法は同じように見えますが、実際には、ポップアップウィンドウ、ドロワー、および新しいページへのジャンプがインタラクティブエクスペリエンスに大きな影響を与えます。

これには、UI/UX デザイナーがさまざまな使用シナリオに応じて 3 つの Web インタラクション方法を合理的に使用し、ユーザーが統一されたインタラクティブなエクスペリエンスを実現できるようにする必要があります。3 つの Web インタラクション方法にはそれぞれ長所と短所がありますが、以下では、Pixso デザイナーが 3 つの Web インタラクション方法に適用できるプロジェクトと適用可能なシナリオを整理し、皆さんにインスピレーションを与えられることを願っています。

1. ポップアップウィンドウ

1.1 定義

ポップアップは、タスクを思い出させたり解決したりするために使用されるモーダルダイアログです。

1.2 表現形式

一般的にマスクの上には窓があり、窓の中に本体と閉じるボタンがあります。

1.3 メリットとデメリット

利点: 現在のページでの派生操作では、以前のコンテンツが失われることはなく、ユーザーはポップアップウィンドウの完了後に前の操作を続行できます。
短所: ポップアップページは一般に小さく、含まれる情報が少ないため、簡単な指示にのみ適しています。

1.4 適用可能なシナリオ

フードデリバリーアプリの配送先変更など、あまり複雑な操作を必要とせず、シンプルなコンテンツを表示します。
バッチでの情報の変更など、情報の継続的な処理が必要なシナリオ。
補助的な指示。サムネイルを表示するためのズームインなど、現在のページのコンテンツを素早く展開します。

1.5 概要

ポップアップウィンドウは内容が少なく、ページが比較的独立しているため、情報のフォーカスを失うことなくすぐに上の階層に戻ることができ、一度限りの操作内容を処理するのに適しています。ポップアップウィンドウは通常のポップアップウィンドウに追加できないことに注意してください。ポップアップウィンドウがポップアップした後は、背景ページは動作し続けることができません。確認ボタンと閉じるボタンはクリアになっており、ポップアップウィンドウを閉じることができません。

たとえば、Pixso リソースライブラリには、非常に人気のある超大型ポップアップウィンドウデザインがあり、ページの幅と高さに適応して、現在のページのコンテンツを失うことなくより多くの情報を表示できます。

システムコンポーネントの設計

2.引き出し

2.1 定義

画面の端から描画するオーバーレイパネル。

2.2 表現形式

親ナビゲーションで詳細な指示ができない場合は、ドロワーパネルを呼び出して詳細な指示を表示できます。

2.3 メリットとデメリット

利点: 現在のページから離れることなく操作を完了できます。現在の操作に影響を与えることはありません。いつでも呼び出すことも、ビューから非表示にすることもできます。ページは視覚的にすっきりしていて、乱雑ではありません。
短所: 長い時間吐き出されている引き出しに遭遇すると、情報が片側に集中してしまい、視覚的な焦点があまりにも周辺的になってしまいます。プロンプトを表示する必要があります。そうしないと、ユーザーが無視したり見逃したりしやすくなります。

2.4 適用可能なシナリオ

これは簡潔なページに適しており、より多くの操作やコンテンツを非表示にし、ユーザーが必要なときにいつでも呼び出すことができます。
複雑な操作が無い場合、新規ユーザー向けの情報処理など情報量の多いコンテンツを表示します。
情報をバッチで変更するなど、情報の焦点を失うことなく情報を継続的に処理します。
イベントの詳細、ゲームルール、その他の情報など、ページ上の追加コンテンツをプレビューします。

2.5 概要

ドロワーは、現在の操作を深く掘り下げる対話型モードです。複雑なロジックを含むページの場合、ページをより簡潔に見せるために単純化できます。明確なガイドラインにより、ユーザーエクスペリエンスを向上させることができます。ドロワーをバッチ処理に使用することもでき、業務効率が向上します。

例えば、今年流行のドロワー型サイドバー、デフォルトのサイドバーエフェクトではアイコンのみが表示され、タッチすると対応するコンテンツが表示されます。

サイドバー/ナビゲーション

Pixso リソースライブラリにはこのようなスタイルが多数あり、上の画像をクリックして表示することも、Pixso で直接編集することもできます。Pixso は、計画、プロトタイピング、デザイン、インタラクション、コーディング、配信を統合する共同設計ツールです。プロトタイプを簡単に描画し、UI/UX コラボレーションを統合し、反復的な作業時間を大幅に節約し、UX デザイナーの高忠実度のインタラクションニーズを満たし、需要のあるリサーチコラボレーション、ローコード配信などにも優れています。主流のファイル形式とも互換性があります。最も重要なことは、Pixso はすべて中国製のソフトウェアであり、学習コストが低く、習得が早いということです。これは、Web サイト構築や UI デザインにとって朗報です。

3. ページジャンプ

3.1 定義

ページジャンプとは、ユーザーの操作後に現在のページを更新して新しいページの内容を表示することを意味します。

3.2 表現形式

ページジャンプ方法には、直接ジャンプ、左右ジャンプ、上下ジャンプがあり、UI/UX デザイナーは、さまざまなページコンテンツに対するユーザーの心理的期待に応じて遷移フォームを設計する必要があります。

3.3 メリットとデメリット

利点: ユーザーの視覚的注意に影響を与えず、次のページへの接続がよりスムーズになり、一貫したエクスペリエンスが維持されます。
欠点: ページにジャンプした後、前のコンテンツを保持することはできません。

3.4 適用可能なシナリオ

ページのコンテンツには相関関係がなく、外部リンクなど比較的独立しています。
現在のページは内容が多すぎて単独で表示することができず、続けて表示するにはタブページ切り替えなど他のページにジャンプする必要があります。
プロセスの一部である機能ページでは、注文から支払いなどの表の操作と裏の操作の間に相関関係や影響があります。
ユーザーは明確な目的を持って操作しており、APP 内の私のホームページなど、現在のページはユーザーの注意を固定するのに役立ちます。

3.5 概要

ページジャンプは非常に一般的な対話モードであり、実装の難易度とメンテナンスのコストが低く、幅広い用途に使用できます。ページジャンプを多用しないように注意し、ページロジックがスムーズな場合にはジャンプを適切に使用してください。新しいページには親ページに戻るボタンもあり、新しいページを閲覧した後は前のページに戻ることができます。

ポップアップウィンドウ、ドロワー、ページジャンプは非常に一般的なインタラクションモードであり、日常的に頻繁に使用されます。UI/UX デザイナーにとって、ユーザーエクスペリエンスを向上させるには、スムーズなロジック、合理的なアプリケーション、および統一されたエクスペリエンスが必要です。ファッショントレンドの継続的な進歩に伴い、時代の要求に応じてより多くのインタラクションモードが登場しています。