Workship MAGAZINE書籍化第3弾!#ADHDフリーランス の新常識 他
- 隔週月曜更新!フリーランス・副業ニュース
ダイアログ表示は、適切に使えばユーザーが実行したいアクションを素早く実行するためのUI要素となります。
一方、的を得ない選択肢や問いかけをしてしまった場合、ユーザーに不満を抱かれかねません。
今回は、ダイアログの適切な表示法について学びましょう。
ダイアログ表示とは、ユーザーによる選択が必要なときや問題が起こったときに、画面上にポップアップする表示です。
Web、もしくはアプリにおいて画面から離脱することなくユーザーに特定の作業を実行してもらうための手段として利用されています。ユーザーの目的を達成させる上での有益な情報を与え、クリックや入力などのアクションを喚起させます。そのためには適切なデザインが必要なのです。
突然現れるダイアログ表示は、ユーザーの邪魔になりやすいです。作業を妨害し、目線をダイアログ表示へ強制的に向けさせます。
ユーザーは作業を中断し、ダイアログ表示に対応しなければなりません。必要最低限、どのような場合に使うべきか見ていきましょう。
ユーザーの間違ってアクションにより、大きな損失が出てしまう場合があります。大きくなミスを防ぐために、ダイアログを表示しましょう。
ユーザーが何もしていないのに突然ダイアログ表示を表示するのは良くありません。
多くのサイトでは下の画像のように突然ダイアログ表示が立ち上がり、メールマガジンのサブスクライブ購読を勧めてきます。
ダイアログ表示はユーザーがボタンをクリックする、選択するなど何かアクションした場合に表示すべきです。
ここだけはおさえよう! ・すべての選択、設定、警告には使用しない。 ・突然ダイアログ表示をしない。 |
ダイアログ表示には、システム用語ではなくユーザーの言葉を使いましょう。
ダイアログ表示内の質問、説明事項は「ストレージを削除しますか?」「アカウントを削除しますか?」のように明確なものにしましょう。基本的に、「警告!」「本当に良いですか?」のような曖昧なものは避けるべきです。
下の2つの写真を比較してみてください。左は「本当に良いのですか?」と曖昧です。右は「Googleの位置サービスを使いますか?」と明確です。
以下のダイアログ表示では「NO(いいえ)」という選択肢は、その選択後に何が起きるのか提示していません。
以下のダイアログ表示のように「Discard(捨てる)」という選択肢を表示すると次に何が起きるのか明確です。
ダイアログ表示ではユーザーにとって重要な情報を明示すべきです。たとえば、「削除」に関わる選択をさせるときは、以下の画像のように削除される具体的なアイテムの確認を促しましょう。
ダイアログ内に、「詳細」を表示するするリンクを含むのは避けましょう。必要があるならば、ダイアログ表示内でのインライン展開で代用すると良いでしょう。
ベストなのは、ダイアログ表示を表示する前にユーザーに情報を提供しておくことです。
ダイアログ表示のアクション実行後、完了した旨をユーザーに通知しましょう。
ここだけはおさえよう! ・ダイアログ表示では明確な文言を使う。 ・アクション完了後には、完了した旨を知らせる通知をする。 |
ダイアログ表示はシンプルにしましょう。具体的な文字数制限を設けるということではありません。ダイアログ表示のすべての情報はユーザーにとって意味があり関連あるものにすべきということです。
ダイアログ表示が画面上で途切れ、スクロールする状態は避けなければなりません。
下の画面は、銀行の支払いプロセスです。ポップアップ下ダイアログで、多くの入力項目と文章を入れました。そのために、一部画面が途切れスクロースしなければなりません。小さい画面のスマートフォンにとってはなさおら問題です。
一方、以下の画像にあるようなダイアログでは必要最低限の情報だけを求めています。
ダイアログで選択させる場合、3つ以上の選択肢を含まないようにしましょう。混乱を招き、ユーザーが離脱してしまう可能性があります。
込み入った作業を複数のステップに分けるのは良いアイデアに思われます。しかし、ダイアログ表示に複数のステップを含むと逆に面倒臭さがましてしまいます。
ここだけはおさえよう! ・ダイアログ表示に過剰な情報を詰め込まない。 ・不要な情報や関係のないコンテンツを除去する。 ・ダイアログ表示では複数のステップを設けない。 |
ダイアログ表示は2種類に分かれます。適切な方を選びましょう。
回答やアクションが必須なタイプ。ユーザーの意思で回避することも、何も選択しないなどアクションを未完了にすることできません。
モーダルダイアログは、「アカウントの削除」や「同意」などの重要なやり取りの場合にのみ表示しましょう。
例えば、以下のダイアログ表示ではユーザーは”Delete(削除)”を押すか、”Cancel(キャンセル)”を押すか選択します。選択しなければモーダルダイアログ表示は閉じられません。
ユーザーはダイアログ表示の外部をタップ、クリックして閉じることができます。
ダイアログ表示に目を向けさせ、背後のページが動作していないことをユーザーに対して示します。以下のAndroidのモーダルダイアログ表示が良い例です。
このとき色調に気をつけましょう。暗くしすぎるとユーザーは背景を確認できませんし、明るくしすぎてもユーザーはページが動作していると考えてしまい、ダイアログ表示を認識しずらくなります。ちょうど良いデザインを目指しましょう。
ダイアログ表示の右上の角に閉じるためのボタンは、必ず置きます。
しかし、小さなボタンは一般的なユーザーにとってわかりにくい上に、カーソルを合わせてクリックするのは手間です。
煩わしさを少しでも減らすためには、外部をクリックすると閉じられるモードレスダイアログ表示がおすすめです。
ダイアログ表示で追加のダイアログ表示を開くのは避けましょう。画面が複雑になってしまいます。
ここだけはおさえよう! ・ダイアログ表示の外部をクリックして閉じれるものにしましょう(モーダルダイアログ表示を除く) ・ダイアログ表示にさらに追加してダイアログ表示を開くのは避けましょう。 |
ユーザー自身が実行する作業をどうすればより容易にできるのかは、さほど難しい問題ではありません。適切なデザインによって解決します。
以上のポイントを考慮しつつ、ダイアログ表示のプロトタイプを作ってみてください。
(翻訳:Shinya Morimoto)