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

Creative Cloud UI/UX & Web

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

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

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

すべきこと

  • 目立たせたる必要があって、ユーザーにメリットが生まれるもののためにモーダルを使う
  • 複雑なUIがユーザーにもたらす負荷を、軽減する手段としてオーバレイを使う(詳の設定、選択肢が多い複雑な選択、ヘルプテキスト表示 …)
  • キーボードのフォーカスは、モーダルの最初に入力する要素に設定し、モーダル内だけで移動させる
  • 先に進むのに必須のアクションでない限り、ユーザーにモーダルを閉じるする手段を与える(モーダルの外側をクリック、明示的な閉じるボタン)
  • モーダルを閉じたら、モーダル起動のために操作した要素にフォーカスを戻す
  • デザインシステムに、オーバーレイとモーダルの記述を加える(オーストラリアの保険会社nibの例:overlaymodal
  • 目障りな広告に対するグーグルからのペナルティを確認する

すべきでないこと

  • 完全に特定のコンテンツだけを提示する必要がある場合以外は、モーダルを使用しない
  • 表示中のモーダルやオーバーレイに関連するコンテンツを隠さない
  • 何かを伝えたいというだけの理由でオーバーレイを使用しない
  • 終了しようとするときだけ表示されるモーダルはつくらない
  • 閉じる手段をひとつだけに頼らない。Escキー、領域外クリック、そして”X”ボタンのすべてが動作すべき。
  • モーダルの内側にさらにモーダルを表示しない。JavaScriptに頼り過ぎず、可能な場合にはCSSを使用する。
  • アクセシビリティガイドラインを無視しない

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

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)の抄訳です

POSTED ON 2018.07.2

Products Featured

関連製品はありません