UX向上のために守りたい、ダイアログ表示のデザインルール5選

ダイアログ表示は、適切に使えばユーザーが実行したいアクションを素早く実行するためのUI要素となります。

一方、的を得ない選択肢や問いかけをしてしまった場合、ユーザーに不満を抱かれかねません。

今回は、ダイアログの適切な表示法について学びましょう。

ダイアログデザインの役割とは？

ダイアログ表示とは、ユーザーによる選択が必要なときや問題が起こったときに、画面上にポップアップする表示です。

Web、もしくはアプリにおいて画面から離脱することなくユーザーに特定の作業を実行してもらうための手段として利用されています。ユーザーの目的を達成させる上での有益な情報を与え、クリックや入力などのアクションを喚起させます。そのためには適切なデザインが必要なのです。

ダイアログ表示デザインのポイントは5つ

1．ユーザーの作業を妨害しない

突然現れるダイアログ表示は、ユーザーの邪魔になりやすいです。作業を妨害し、目線をダイアログ表示へ強制的に向けさせます。

ユーザーは作業を中断し、ダイアログ表示に対応しなければなりません。必要最低限、どのような場合に使うべきか見ていきましょう。

再確認を促すために使う

ユーザーの間違ってアクションにより、大きな損失が出てしまう場合があります。大きくなミスを防ぐために、ダイアログを表示しましょう。

突然表示しない

ユーザーが何もしていないのに突然ダイアログ表示を表示するのは良くありません。
多くのサイトでは下の画像のように突然ダイアログ表示が立ち上がり、メールマガジンのサブスクライブ購読を勧めてきます。

ダイアログ表示はユーザーがボタンをクリックする、選択するなど何かアクションした場合に表示すべきです。

2．ダイアログ表示とユーザーが実行するアクションとをリンクさせる

ダイアログ表示には、システム用語ではなくユーザーの言葉を使いましょう。

明確な質問・選択肢を使う

ダイアログ表示内の質問、説明事項は「ストレージを削除しますか？」「アカウントを削除しますか？」のように明確なものにしましょう。基本的に、「警告！」「本当に良いですか？」のような曖昧なものは避けるべきです。

下の2つの写真を比較してみてください。左は「本当に良いのですか？」と曖昧です。右は「Googleの位置サービスを使いますか？」と明確です。

以下のダイアログ表示では「NO（いいえ）」という選択肢は、その選択後に何が起きるのか提示していません。

Material Design

以下のダイアログ表示のように「Discard（捨てる）」という選択肢を表示すると次に何が起きるのか明確です。

Material Design

重要な情報を提供する

ダイアログ表示ではユーザーにとって重要な情報を明示すべきです。たとえば、「削除」に関わる選択をさせるときは、以下の画像のように削除される具体的なアイテムの確認を促しましょう。

ダイアログ内に、「詳細」を表示するするリンクを含むのは避けましょう。必要があるならば、ダイアログ表示内でのインライン展開で代用すると良いでしょう。

ベストなのは、ダイアログ表示を表示する前にユーザーに情報を提供しておくことです。

完了通知を出す

ダイアログ表示のアクション実行後、完了した旨をユーザーに通知しましょう。

3.ミニマリズムを心がける

ダイアログ表示はシンプルにしましょう。具体的な文字数制限を設けるということではありません。ダイアログ表示のすべての情報はユーザーにとって意味があり関連あるものにすべきということです。

スクロースさせない

ダイアログ表示が画面上で途切れ、スクロールする状態は避けなければなりません。

下の画面は、銀行の支払いプロセスです。ポップアップ下ダイアログで、多くの入力項目と文章を入れました。そのために、一部画面が途切れスクロースしなければなりません。小さい画面のスマートフォンにとってはなさおら問題です。

Barclays

一方、以下の画像にあるようなダイアログでは必要最低限の情報だけを求めています。

アクションの数に気を付ける

ダイアログで選択させる場合、3つ以上の選択肢を含まないようにしましょう。混乱を招き、ユーザーが離脱してしまう可能性があります。

ダイアログに複数のステップを設けないこと

込み入った作業を複数のステップに分けるのは良いアイデアに思われます。しかし、ダイアログ表示に複数のステップを含むと逆に面倒臭さがましてしまいます。

4．適切なダイアログ表示を選択する

ダイアログ表示は2種類に分かれます。適切な方を選びましょう。

モーダルダイアログ

回答やアクションが必須なタイプ。ユーザーの意思で回避することも、何も選択しないなどアクションを未完了にすることできません。

モーダルダイアログは、「アカウントの削除」や「同意」などの重要なやり取りの場合にのみ表示しましょう。

例えば、以下のダイアログ表示ではユーザーは”Delete（削除）”を押すか、”Cancel（キャンセル）”を押すか選択します。選択しなければモーダルダイアログ表示は閉じられません。

モードレスダイアログ

ユーザーはダイアログ表示の外部をタップ、クリックして閉じることができます。

5．ビジュアルの一貫性を保つ

ダイアログ表示の背景は暗く

ダイアログ表示に目を向けさせ、背後のページが動作していないことをユーザーに対して示します。以下のAndroidのモーダルダイアログ表示が良い例です。

このとき色調に気をつけましょう。暗くしすぎるとユーザーは背景を確認できませんし、明るくしすぎてもユーザーはページが動作していると考えてしまい、ダイアログ表示を認識しずらくなります。ちょうど良いデザインを目指しましょう。

閉じるボタンを明確に示す

ダイアログ表示の右上の角に閉じるためのボタンは、必ず置きます。

しかし、小さなボタンは一般的なユーザーにとってわかりにくい上に、カーソルを合わせてクリックするのは手間です。

煩わしさを少しでも減らすためには、外部をクリックすると閉じられるモードレスダイアログ表示がおすすめです。

ダイアログ表示からさらにダイアログ表示を開くのは避けるべき

ダイアログ表示で追加のダイアログ表示を開くのは避けましょう。画面が複雑になってしまいます。

まとめ

ユーザー自身が実行する作業をどうすればより容易にできるのかは、さほど難しい問題ではありません。適切なデザインによって解決します。

以上のポイントを考慮しつつ、ダイアログ表示のプロトタイプを作ってみてください。

（翻訳：Shinya Morimoto）