ダイアログとポップアップDialogs and flyouts

ダイアログ ボックスとポップアップは、通知、許可、またはユーザーからの追加の情報を必要とする状況が発生したときに表示される一時的な UI 要素です。Dialogs and flyouts are transient UI elements that appear when something happens that requires notification, approval, or additional information from the user.

重要な API:ContentDialog クラスFlyout クラスImportant APIs: ContentDialog class, Flyout class

Dialogs

Example of a dialog

Dialogs are modal UI overlays that provide contextual app information. Dialogs block interactions with the app window until being explicitly dismissed. They often request some kind of action from the user.

Flyouts

Example of a flyout

A flyout is a lightweight contextual popup that displays UI related to what the user is doing. It includes placement and sizing logic, and can be used to reveal a secondary control or show more detail about an item.

Unlike a dialog, a flyout can be quickly dismissed by tapping or clicking somewhere outside the flyout, pressing the Escape key or Back button, resizing the app window, or changing the device's orientation.

適切なコントロールの選択Is this the right control?

ダイアログとポップアップにより、ユーザーが重要な情報を認識していることを確認できますが、ユーザー エクスペリエンスは中断されます。Dialogs and flyouts make sure that users are aware of important information, but they also disrupt the user experience. ダイアログはモーダル (ブロック) であるため、ユーザーは中断され、ダイアログの操作を行うまで他の操作を行うことはできません。Because dialogs are modal (blocking), they interrupt users, preventing them from doing anything else until they interact with the dialog. ポップアップの煩わしさはダイアログより低くなりますが、多用すると、煩わしくなります。Flyouts provide a less jarring experience, but displaying too many flyouts can be distracting.

ダイアログかポップアップを使用すると決めた場合には、どちらを選択する必要があります。Once you've determined that you want to use a dialog or flyout, you need to choose which one to use.

ダイアログは操作をブロックし、ポップアップはブロックしないため、ダイアログの使用は、ユーザーが他のすべてを中断して情報や回答の提供に集中する必要がある状況に限定する必要があります。Given that dialogs block interactions and flyouts do not, dialogs should be reserved for situations where you want the user to drop everything to focus on a specific bit of information or answer a question. 一方ポップアップは、ユーザーに情報を知らせるが、ユーザーがそれを無視してもよい場合に使用します。Flyouts, on the other hand, can be used when you want to call attention to something, but it's ok if the user wants to ignore it.

ダイアログの用途 Use a dialog for...

  • 続行前にユーザーが読んだり確認したりする必要のある重要な情報を表示する場合。Expressing important information that the user must read and acknowledge before proceeding. たとえば、次のものがあります。Examples include:
    • ユーザーのセキュリティが侵害される可能性がある場合When the user's security might be compromised
    • ユーザーが重要な資産に永続的な変更を加えようとしている場合When the user is about to permanently alter a valuable asset
    • ユーザーが重要な資産を削除しようとしている場合When the user is about to delete a valuable asset
    • アプリ内購入を確認する場合To confirm an in-app purchase
  • 接続エラーなど、アプリ全体の状況に適用されるエラー メッセージError messages that apply to the overall app context, such as a connectivity error.
  • アプリからユーザーにブロック質問を表示する必要がある場合 (アプリで自動的に選ぶことができない場合など)Questions, when the app needs to ask the user a blocking question, such as when the app can't choose on the user's behalf. ブロック質問とは、無視したり先送りにしたりできない質問です。この質問では、ユーザーに明確な選択肢を提示する必要があります。A blocking question can't be ignored or postponed, and should offer the user well-defined choices.

ポップアップの用途 Use a flyout for...

  • 操作を完了する前に、必要な追加情報を収集する場合。Collecting additional information needed before an action can be completed.
  • 一部の場合のみに意味がある情報を表示する場合。Displaying info that's only relevant some of the time. たとえばフォト ギャラリー アプリで、ユーザーが画像のサムネイルをクリックした場合に、大きな画像を表示するためにポップアップを使用できます。For example, in a photo gallery app, when the user clicks an image thumbnail, you might use a flyout to display a large version of the image.
  • 詳細やページ上の項目の長い説明などの詳しい情報の表示。Displaying more information, such as details or longer descriptions of an item on the page.

ダイアログとポップアップを使用しないようにする方法Ways to avoid using dialogs and flyouts

伝える情報の重要度が、ユーザーを中断させる必要があるものかどうかを、よく検討する必要があります。Consider the importance of the information you want to share: is it important enough to interrupt the user? また、情報の表示頻度を検討し、数分ごとにダイアログや通知を表示している場合には、代わりにプライマリ UI でこの情報用の領域を割り当てることを検討します。Also consider how frequently the information needs to be shown; if you're showing a dialog or notification every few minutes, you might want to allocate space for this info in the primary UI instead. たとえばチャット クライアントで、友人がログインするたびにポップアップを表示させるよりも、その時点でオンラインである友人の一覧を表示し、ログインが行われたときには強調表示させるなどの方法を検討します。For example, in a chat client, rather than showing a flyout every time a friend logs in, you might display a list of friends who are online at the moment and highlight friends as they log on.

ダイアログは、アクション (ファイルの削除など) を実行する前に確認するために、よく使用されます。Dialogs are frequently used to confirm an action (such as deleting a file) before executing it. ユーザーが特定の操作を頻繁に実行することが想定される場合には、ユーザーがアクションを毎回確認する必要があるようにするよりも、誤って操作した場合に、ユーザーが元に戻せる方法を提供することを検討します。If you expect the user to perform a particular action frequently, consider providing a way for the user to undo the action if it was a mistake, rather than forcing users to confirm the action every time.

ダイアログの作成方法How to create a dialog

ダイアログに関する記事を参照してください。See the Dialogs article.

ポップアップの作成方法How to create a flyout

ポップアップに関する記事を参照してください。See the Flyout article.

Examples

XAML コントロール ギャラリーXAML Controls Gallery
XAML controls gallery

XAML コントロール ギャラリー アプリがインストールされている場合、こちらをクリックしてアプリを開き、ContentDialog または Flyout の動作を確認してください。If you have the XAML Controls Gallery app installed, click here to open the app and see the ContentDialog or Flyout in action.