オーバーレイを使うときの注意点とアドバイス | アドビUX道場 #UXDojo

連載

エクスペリエンスデザインの基礎知識

Adobe XDがオーバーレイをサポートしたことで、アートボード上にコンテンツを重ねた状態を表現するときに、アートボードを何枚も複製しなくてよくなりました。ドロップダウンメニュー、キーボードのスライドアップ、ライトボックスなど、使い道はさまざまです。

ユーザーが行う操作はどんどん複雑になっていますが、オーバーレイはその重荷を取り除くために役立ちます。そして、エラーの通知、セキュリティの確認のように、オーバーレイの使用が避けられない場面もあります。こうした役に立つオーバーレイがある一方で、邪魔なオーバーレイが存在するのも事実です。そこで、モーダルやオーバーレイをデザインする際のポイントを、何人かに聞きました。

まず、いくつかの「すべきこと」と「すべきでないこと」をご紹介します。

すべきこと

すべきでないこと

ユーザーがしたい操作の邪魔にならない

Duolingoの状況の通知は、押し付けがましくならないようデザインされている。ユーザーに主要な情報を与え、邪魔せず注目させる

デジタルCXスタジオ383のデザインチームのトップであるカール・ランデイに、オーバーレイについて聞きました。

「スムースで流れるような、ユーザージャーニーを邪魔しないオーバーレイにするには、正しいインタラクションを正しいタイミングで使うことです。オーバーレイはインタラクションを強制してしまう可能性があり、それをいつどのように使うべきかを理解するには、人々がタスクを完了しようとするときの考え方を知らなければなりません。クリックしたら何が起きるのか、個々の操作ごとに次に何が起きるのかを明確に示すべきです」

カールが言うには、適切な期待値を与える方法のひとつは、シンプルで人間くさい言葉を使うことです。複雑なタスクの場合には、言葉を減らし、丁寧に考えたコピーやボタンのラベルを注意深く使用しましょう。ユーザーの注意を引くのにオーバーレイを使うべきときと、画面全体の入れ替えが必要なときを判断しましょう。

オーバーレイを賢く使う

ユーザーがデジタル製品やサービスを使用するとき、辿るべきステップや、開始すべきイベントや、完了すべき入力にいくつも出会うことになります。「ユーザーの注意をコンテンツやインタラクションに集中させ続けるには、通常、画面全体を変え、目の前のタスクにUIの全ての注意を向けさせます」とカールは言います。

「突然ユーザーの注目が必要な事態が起きたり、追加入力が必要になったり、補足の状況説明が必要になったら、モーダルやオーバーレイを使います。そうすれば、ユーザーが実行中だった状況を背景に残したまま、追加の機能やメッセージを扱えます」

オーバーレイの種類は賢く選びましょう。なぜなら、ごく自然な流れだったかもしれない体験を、容易に邪魔でまとまりが無い不自然なものに変えてしまうからです。

ユーザーの振舞いに隠された心理を探る

Periscopeは条件別ユーザー要件の優れた例。慎重に失敗を考慮した時このようなデザインが可能になる。これらのすべてが、ユーザーがタスクを完了するために対応を必要とする。

いくばくかの認知科学とユーザーの習性の理解は、いつどのようにオーバーレイを使うべきかを判断する近道になります。

「もしUIとタスクになんとなく親しみがあったり、比較的容易に理解できたなら、ユーザーはより速く作業を終えるでしょう。これは認知流調性と呼ばれる現象で、慣れた作業には、必要な精神的な労力がかなり少ないことを指しています。ユーザーは受身になりやすく、半ば「自動運転」のような状況になります。そして、予期しないことやエラーが起きた時点で意識的に思考するようになって、壁に突き当たるのです」とカールは示唆しました。

私たちは「自動運転」中、1秒間に最大1,100万回の判断を行う能力があります。対照的に、完全に意識的な状態では、1秒間にたった40回の判断しか行えません。「つまり、自動運転から完全に意識的な状態に移行するのは、ちょうとシートベルトで固定されたクラッシュテストの人形が、壁に当たって押し出される時の力のようなものが働きます」

親しみやすさは、ユーザーに伝えんとしていることを素早く把握させるための優れた方法になります。「これは何でも適用できます。例えば、ボタンの位置やスタイルや大きさ、基本的なUI構造とデザインパターン。それから、クレジットカードの番号を4つのフィールドに分けたり、物理的に触れられるモノに似せてUIをデザインするなど、関連性の分かりやすいオブジェクトへのタスクの置き換え。実際、フォームの入力という誰も行いたくない体験を容易にする最も単純な方法は、現実世界で経験できるものを使うことです」

過ちやエラーを伝えるオーバーレイ

Hodinkeeアプリは、どんな状況で何を選んでいるのかという感覚を画面に残しつつ、ユーザーにサイズの選択を行わせる

ユーザーに、何かがおかしいと伝えるだけでは十分ではありません。それでは、何が起きたのか、その対応に何ができるのか、そして、やりかけの作業に戻る手段も理解できません。

失敗に備えたデザインの欠如の古典的な例は404ページだとカールは説明します。「404という言葉自体が、沢山存在するこの技術的な行き止まりのおかげで、一般的に話されるようになった技術用語です。オーバーレイやモーダルを使って問題を示すことはできますが、問題は明確に伝えられなければなりません。、分かりやすくて、技術的用語を排除した伝え方が必要です」

そして、いくつかのオプションを提示し、ユーザーが状況を解決して元の状態に戻るための最適な決断ができるようにしましょう。オプションが包括的である必要はありませんが、問題が起きたときのユーザーの意図が何であったかを考慮して、常識を駆使しましょう。常にダイアログを閉じられるようにすることはとても重要です。

影響を考慮する

オーバーレイをデザインするときに考慮すべきことのひとつは、異なる状況で与える影響です。

「モバイルのとても小さい画面では、ウインドウ周囲の隙間はより注意を引きます。特に視覚的に複雑な画面では、重要な情報が見落とされないようにしなければなりません」とカールは警告します。

カールが推奨するのは半透明のレイヤーをオーバーレイとその下のUIの間に使うことです。オーバーレイにユーザーの視線が集中する程度に不透明で、レイヤー下にある体験との視覚的関係を完全に失わない程度に透明にします。

オーバーレイは、ここ数年の間に多くの不当な非難を受けました。受けて当然の非難も沢山ありました。しかし、オーバーレイは、複雑なタスクを扱うユーザーの役に立ちます。この記事で示したガイドラインを使い、ユーザーをいらだたせることなく役立つようにデザインされていることを確認してみてください。

この記事に協力してくれたカールランディ、そして「すべきこと」と「すべきでないこと」を教えてくれたエリック・エガート、ディラン・スミス、ローリー・ジョーンズ、ベンジャミン・ホロウェイ、ダニエル・フィラー、ジョー・リーチ、エリック・ベイリー、スコット･コールに感謝します。

参考記事

この記事はBest Practices for Designing Overlays（著者:Oliver Lindberg）の抄訳です