より良いUIデザインのために、認知負荷を減らす6つの方法 | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
ユーザーの負荷を軽減し、より高い価値を演出することで、デザイナーはアプリやサイトの有用性を高めようと努めてきました。インターフェイス操作には複雑なプロセスと多様な機能がつきものですが、それだけに、ユーザーをゴールに導く道筋を単純に保つ努力は重要です。
そのためデザイナーは、見た目と機能のバランスを完璧に保てるユーザーインターフェイスを追求します。ユーザーの目には、すべてが単純に映るべきです。では、認知に関わる負荷を回避して、デザインの複雑さを軽減するにはどのようにデザインすればよいのでしょうか？
認知負荷とは何か？
認知負荷を深く理解するには、提言者であるジョン・スウェラーの認知負荷理論に目を通すと良いでしょう。スウェラーは、メッセージの理解を支援する心理的な経路を追求しました。彼が言うには、コンテンツが提示される方法によって閲覧者の理解度が大きな影響を受けるということです。たとえば、正方形の画像を見せる方が、それを言葉で説明するよりもずっと単純です。
認知人間工学のコンセプトを借りるなら、「短期記憶の負荷を減らしつつ、表示されたコンテンツの理解度を高めることを念頭において、人の理解を助けるためのインターフェイスの仕様に関する判断を行う」ことが認知負荷を軽減するデザインだと考えられます。
脳内のワーキングメモリの処理能力を認知負荷が超えると、ユーザーに過負荷のリスクが生じます。負荷が高いと目標達成が困難になり、目標達成が困難であるほど体験は悪いものに感じられがちです。
ピークエンドの法則の元になった1993年の研究では、人は最も重要な瞬間と最後の瞬間の両方を基準に体験を判断する傾向があるとされます。悪い体験からは不安や葛藤が生まれます。こうした否定的な感情がブランドに結び付けられる可能性もあるでしょう。ユーザー体験の観点からも、効果的な認知デザインを検討することは重要です。
カリフォルニア州立サンタバーバラ校の研究者によるNine Ways to Reduce Cognitive Load in Multimedia Learning（マルチメディア学習における認知負荷軽減の9つの方法）という研究では、潜在的な認知負荷のいくつかの事例を調査し、それを軽減もしくは防止する策がいくつか提案されました。 これらの提案の多くはWebデザインにも採り入れることができるものです。
問題解決のための指針
デザインの問題を解決しようとするときは、まず、全体像をよく理解することが大切です。人々はそれぞれ異なる目標や背景を持っています。そのため、同じ課題に対する解釈はさまざまです。デザイナーには複雑に見えるものが、ユーザーにとっても同じだとは限りません。
ユーザーがどのようにインターフェイスを操作するのか、時間をかけて調査しましょう。ユーザーを観察して対話を持ち、認知負荷がかかる可能性のあるシナリオを特定してから、実際にユーザーフローの変更に着手するべきです。
また、認知負荷を軽減するには、コンテンツの提示方法と提示するタイミングを戦略的に考える必要があります。以下はその3つのポイントです。
- 経路を明確にする
さまざまなコンテンツを提示する代わりに、ユーザーが興味のあるものにすばやくアクセスできるように、目標までの道筋をできるだけ単純化します。同じ場所に多くの情報を提示するのは望ましくありません。 - ストーリーを語る
インターフェイスをデザインするのはストーリーを語るようなものです。始まり、中間、そして終わりを明確にし、一貫したストーリーの構造を維持して、ユーザーを誘導するように努めましょう。 - 基準を明確にする
UIデザインのための10のユーザビリティヒューリスティックを採り入れたり、デザインシステムを使用してパターン化を進めるなど、成功するUIデザインのためのベストプラクティスを探りましょう。
認知負荷を高める要因と解決方法
認知負荷は偶発的なものではなく、多くの要因が影響した結果として発生します。主な注意点と解決案をいくつか紹介します。
1. 過剰な演出を避ける
アニメーションとマイクロインタラクションには明確な目的が必要であることを覚えておきましょう。どのような視覚的な刺激を与えるとしても、それは誤解を招くものではなく、体験を導くものであるべきです。
ミラーの法則は、人の短期記憶には一般的に7つの情報を保持できると述べています。これはインターフェイスに7つの要素しか配置できないということを意味するものではありませんが、認知負荷を回避するように知覚できる限界に注意することへの価値を伝えてくれます。
主要なリンクが高速で動くアニメーションの上にフロート表示されているため読み取りや操作が困難 出典: UAT
一つひとつの動きの背後にある意味を再確認し、インターフェイスが提供すべき主要な目的に揃えるようにしましょう。色、アニメーション、イラスト、マイクロインタラクションは、それぞれ明確な目的を果たすものであるべきです。
Joseph Berryの個人プロジェクトでは、アニメーションが訪問者を魅力的な没入型体験に誘導する目的で使用されている 出典: Joseph Berry
2. 選択肢を絞る
「より少ないことはより良いこと」の考えは、画面内に同時に表示する要素を決定するときにも有効です。過剰な量のコンテンツは、重要なアクションから意識を逸らし、コンバージョン率の低下にもつながります。ヒック・ハイマンの法則は、選択肢が多すぎると決定に時間がかかることを指摘しています。
選択肢が多く、標準化されたグリッドが欠落しているため、視覚的要素の階層を正しく認識できない 出典: Arngren
利用される文脈に応じてコンテンツを論理的なグループに分けましょう。カードソーティングなどの分類法や、タブ、セクション、画面などの視覚的なグループ分けを行い選択肢を探るのは効果的です。
Fiverrは、分かりやすいテキストと画像を使用してコンテンツをカテゴリ別にグループ化し、箇条書きを示す視覚的な手がかりとしてアイコンを使用している 出典: Fiverr
3. 一貫性を維持する
ユーザーに馴染みのあるビジュアルデザイン、インタラクション、ナビゲーションを使用しましょう。ホームページの右上の検索バーを見て、そこから次のページのフッターに移動できると想像する人はまずいないでしょう。確認ボタンに緑色を使用することにしたなら、ほとんど目に留まることのないフォームの最後に置かれたボタンであっても必ず緑色にします。
ナビゲーションに一貫性が欠けている 出典: Cambridge
ここが、デザインシステムの威力が発揮される場面です。アトミックデザインのアプローチにより小さなコンポーネントから大きなコンポーネントまで一貫性を維持し、ナビゲーション構造やアニメーションなどインターフェイス内のあらゆるアクションを標準化するために利用できます。
フローティングカードのCTAが、スクロールによってカードが非表示になるとヘッダーに移動することで一貫したナビゲーションが維持される 出典: Airbnb
4. アクションは最小限に
特定の項目の必要性がわからないままフォームに情報を入力した経験はありませんか？タスクの完了に不可欠なもの以外はすべて排除しましょう。フィールド、情報、確認、そしてクリック数が少ないほどUIを理解するための負荷が下がります。
BestBuyは直ちにユーザーに決断を迫る 出典: BestBuy
コンテンツを分析して、重複や不要な手順がないか確認します。デフォルトのオプションを改善すると、ユーザーが行う必要のあるアクションを減らせることがあります。
必要な場合のみ介入する。醸造所のサイトには、アクセスする人の年齢を確認することが法律で義務付けられていることが多い 出典: Stella Artois
5. 馴染みのあるパターンを使用する
デザイナーとして常に新しいものをつくり出す必要はありません。さまざまなインターフェイスを長年操作してきたユーザーは、馴染みのあるパターンを期待するものです。異なる何かが提示されると、情報を処理しようとワーキングメモリに多大な負荷がかかってしまうかもしれません。
MySpaceは一般的に使われていない水平ナビゲーションを使用している 出典: myspace
検索バー、ログイン画面、ナビゲーションメニューなど、どのサイトにも繰り返し使用される要素には、確立された標準があります。新たに発明するのではなく、それらの標準を再利用しましょう。
Mercado Livreは最新のeコマースのプラクティスに従っている 出典: Mercado Livre
6. シンプルに保つ
心理学者のポール・フィッツが1954年に発表した研究で提示した内容に従うなら、ボタンは大きく、アクセシビリティに配慮されたものであるべきです。ユーザーが決断しやすい状況をつくるのはデザイナーの責任です。
シンプルにするためにアクセシビリティを犠牲にしない。コントラスト不足は、認知負荷を高める 出典: Typeset Design
明確で客観的なテキストを心掛けて曖昧さを避け、アクセシビリティの原則を適用します。また、シンプルな体験の主要な要素として、適切な量の必要な説明を提供します。
ホワイトスペースを活かして重要なコンテンツを強調すると、情報をシンプルに提示できます。混乱を避けるために、近接性、類似性、連続性といったゲシュタルトの原則を適用しましょう。
Mural. Muralは、ホワイトスペースと高いコントラストを使用して、ページ上の最も重要なコンテンツを明確に示す 出典: Mural
ここで、オッカムの剃刀に触れておきましょう。簡単に言えば、同じ結果を生み出す選択肢がいくつかあるならば、通常は最も単純なものが最適な選択肢です。
おわりに
認知負荷に関する理論や議論を用いれば、多くの場合にUIがうまく機能しているのかどうかを判断できます。まず何よりも、インターフェイスを実際に操作するユーザーを観察し、耳を傾け、意見を伝える機会を与えましょう。それにより初めて、ユーザーの問題を本当に解決するデザインができるようになります。また、大きな理由がない限り、すでに標準的になっているものを根本的に変更しないようにしましょう。
この記事は6 Ways to Reduce Cognitive Load for a Better UI（著者:KatVitor Guerra）の抄訳です