😺

Fluent UI Blazorにおけるダイアログの使用法に関するガイドライン

2023/12/24に公開

始めに

ダイアログを使用するとブラウザ画面の中にオーバレイされたウィンドウを開くことができます。
ここでは大きく分けて何かの入力をするためのダイアログとアラートやファイルの削除など破壊的変更についてユーザからのアクションを確認や選択を求めたりするためのダイアログがあります。

さらに、モーダルウィンドウと非モーダルウィンドウと2つに分類できます。

モーダルウィンドウでは裏側にあるコンテンツを暗くします。さらに、コンテナの外側の領域をクリックすることでモーダルウィンドウを閉じることができます。
また、ESCキーを使用するか、フッターにキャンセルボタンがない場合にはモーダル画面の右上に閉じるボタンを追加することができます。

非モーダルウィンドウでは右上に閉じるボタンがあります。
非モーダルダイアログを閉じるには、閉じるボタンを選択するか、ESCキーを使用するか、フッターボタンを選択します。
非モーダルダイアログではダイアログの外側の領域を選択して閉じることはできません。

ここでは、必ずしもアラートだけではありませんがアラートダイアログとします。
アラートダイアログはフッターに配置されたボタンを選択することでのみ閉じることができます。右上の閉じるボタンを配置したり、ESCキーで閉じるなどはできません。

ダイアログは3つの部分に分かれています。

ダイアログのタイトルは必須です。
明確でかつ具体的な文章を書く必要があります。
タイトルは本文の説明であってはいけません。

悪い例として、「エラー」などのタイトルを使用しないでください。あまりに一般的すぎてユーザーはこの本文からは何をしてよいのか分かりません。例えば、「入力された文字数が多すぎます」のような説明的なタイトルにしたほうがよいでしょう。

タイトルが質問出ない限り末尾の句読点を使用しないでください。

必要に応じて本文のコンテンツ領域を利用して追加情報や手順を説明します。

タイトルの言い直しにならないようにしてください。

タイトルの情報に対する具体的な応答をボタンラベルに記述します。
例えば、「このファイルを削除」といったタイトルには「削除」と「キャンセル」というラベルのついたボタンを含めることができます。
通常、ラベルは単一の動詞が最適です。
ボタンのラベルについては句読点は使用しません。

ダイアログの入れ子をしないようにしてください。
ダイアログが多すぎるとコンテンツを操作しにくくなります。