人間の「認知」について知り、認知コストを最小限にしたUIを作ろう

おまめ

おまめ

UIUXデザイナー

Share

  • リンクをコピーしました

この記事は約13分で読めます。

はじめまして!デザイナーのおまめ(@omame_creator)です🙌

UIを作る際は、ユーザーにとってわかりやすい設計になっているのか考えながらデザインしますよね。そんな時、自分の体験に基づく仮説ベースで基準を考えちゃうことありませんか?

人間の性質や心理についての理解があると、より客観的に、そして具体的に考えて作れたり、説明することができます。

今回は人間の「認知」についてまとめてみました。合わせてユーザビリティテストをすることでUIの認知コストを定量化する方法と、認知コストをを最小限にしたUIを作るヒントも記載しているので、デザインに活かしてもらえると嬉しいです!

認知とは

認知とは反応時間と応答時間を合計したものを指します。

より細分化すると、刺激を検出し、処理し、反応する能力のことです。反応する時間は、さまざまな要因によって異なります。3つの認知のフェーズ別に整理していきます。

知覚

刺激を素早く確実に見たり、聞いたり、感じたりできると、優れた反応時間を得ることができます。ランナーを例に挙げると、レースの開始時にスターターが銃を撃つと、その音がアスリートの耳に届きます (刺激を知覚します)。

処理

優れた反応時間を得るためには、集中して情報をよく理解する必要があります。
前の例に従って、ランナーは銃声を聞いた後、その音を他の音と区別し、ランニングを開始する時間であることを知ることができます (刺激を処理します)。

応答性

行動し、反応速度を向上させるためには、敏捷性が必要です。ランナーが信号を認識して正しく処理すると、足が動き始めます (刺激に反応します)。

これらのプロセスの一部が変更されると、結果として反応時間に差が出てきます。

認知に影響を及ぼすこと

反応時間はさまざまな要因によって異なります。認知の障壁になるもののことを認知コストと言います。

刺激の複雑さ

刺激が複雑になるほど、処理が必要な情報が多くなり、このプロセス(知覚)にかかる時間が長くなります。

例えば、一度の視覚情報の刺激がかなり複雑な登録フォームを見たとき、精神的に負荷がかかって画面を閉じてしまいます。

他にも、クリックする場所が複雑で、いちいち探してクリックしなければ進めないUIがあった時、身体的な負荷がかかり使いたくないと思ってしまいます。

慣れ、準備、期待

以前に反応したことがある刺激に反応する場合、反応時間は短くなります。また、処理する必要がある情報が少ないほど、反応時間は速くなります。ランナーの例のように、刺激を期待している (銃を待っている) 場合、反応時間はさらに短くなります。

人間の状態

刺激の検出に悪影響を与える可能性があるいくつかの要因には、疲労、注意力、眠気 、体調が悪い、老齢、さらには食べ物やアルコールや他の薬物などの物質の食べ過ぎなどがあります。これらの要因はすべて、刺激の検出、処理、および応答に悪影響を与える可能性があります。

人間の認知についての知識が整理できたので、次は認知力をテストする手法をお伝えしていきます。

人間の認知力を測定する方法を応用して、UIの認知コストを定量化するユーザビリティテストを実施することもできます。

認知力の評価テストをUIのユーザビリティ評価に応用する

今回は、人間の認知について研究している研究機関CogniFiが作成した認知力を測るテストの中から代表的な6つのテストを紹介し、UIのユーザビリティ評価に応用する方法も合わせてまとめていきます。

REST-COM 問い合わせテスト

Neuropsychological Assessment- CogniFit Cognitive Test問い合わせテスト

上図のように、さまざまなイラストが、短時間で切り替わりながら表示されます。

その後、イラストが一つずつ表示され、ユーザーはそれらが最初に提示されたかどうかを回答します。また、何回正解したと思うかを質問され、その正解率で応答力を測ります。

UIのユーザビリティテストに応用すると、イラストをユーザー体験フローごとの画面に置き換えることで、制作したUIが認知しやすい画面かどうかを正解率で測ることができます。

VIPER-NAM: デコード テスト

デコード テスト

画像が短時間画面に表示されてから消えます。4 つの文字が表示され、そのうちの 1 つだけがオブジェクトの文字に対応します。ユーザーはできるだけ早く正しい文字を選択する必要があります。評価される認知能力は、視覚とネーミング、処理速度、応答時間です。

UIに応用すると、アイコンの認知を測るのに役立ちます。アイコンを表示して、これが何のアイコンなのか、正解率が悪ければ一般的に認知しにくいアイコンになっていることがわかります。

WOM-REST: 認識テスト

Neuropsychological Assessment- CogniFit Cognitive Test

認識テスト

表示されているモデルと同一の 3 つの図のグループを特定するため、一連の 3 つのオブジェクトが画面に表示されます。ユーザーは、それらが表示される順序を記憶し、後で選択肢から正しいものを選択します。

UIに応用する場合、メニューの並べ方などを考える際に使えそうです。覚えにくい並べ方になっていると、正答率が悪くなってしまいます。

REST-SPER: 解決テスト

Neuropsychological Assessment- CogniFit Cognitive Test

解決テスト

画面に多数の移動刺激が表示されます。ユーザーは、無関係な刺激を避けながら、客観的な刺激をクリックする必要があります。このテストによってユーザーが視覚運動スキルのタスクをどのように実行するかを観察できます。

UIに応用すると、ユーザーがクリックする動線の認知コストを測るのに役立ちます。クリックする速度が速ければ速いほど、ページ遷移しやすいUIになっているといえるでしょう。

REST-HECOOR: 速度テスト

速度テスト

画面に青い四角が表示されます。ユーザーは、正方形の中央をできるだけ速く、できるだけ多くクリックします。ユーザーがクリックする回数が多いほど、スコアが高くなります。

このテストによって、ユーザーが特定の時間内に、画面の特定の部分をマウスまたは指でクリックできる回数を正確に測定できます。

UIに応用すると、ボタンの配置やサイズ感、デザインなどの認知コストを測るのに応用できます。クリックしやすいボタンを作る方法は、別の記事でもまとめていますのでこちらもご覧ください。

REST-INH: 処理テスト

処理テスト


このタスクでは、数字が入った 2 つの異なるサイズのブロックが表示されます。ユーザーは最初に大きなブロックをクリックします。その次に最も大きい数字のブロックをクリックします。

このテストでは、ユーザーの抑制能力とシフトを測定可能です。

UIのユーザビリティテストに応用すると、画面を見せて、操作する順番をテストすることができます。大きいセクションだったり、視線誘導を考えられていると、意図通りの順番でクリックされるでしょう。

競合サービス同士で認知コストを比較する方法

また、一つのUI単位ではなく、大きいサービスという枠においても、認知コストを数値化して競合サービスと比較することができます。それぞれ3つのステップに分けてご紹介します。

今回は、ショップサービスを例に上げ、ユーザーがものを選んだ後に購入するまでをメインタスクとして、認知コストを競合サービスと比較していきます。

調査の前提として、実験環境を出来るだけ同じようにすることを心がけなければなりません。例えば、PCに慣れている人とそうでない人が混じって同じ実験をしてしまうと、PCに慣れている人は、既視感があるUIに関しては早く認知しやすいし、慣れていない人は、認知するまでに時間がかかってしまいます。

PCの習熟度もそうですが、年齢や職業など、バックグラウンドが出来るだけ同じ人を調査することができると、より有用性があるデータを得ることができます。

また、実験に集める人は、サービスのターゲットにあった人だとより精度が高くなるでしょう。

ステップ1 : 測定するものの決定

ユーザーが初めてサービスに触れた時に、初回のタスクを完了する意思決定までの時間を基準に、早ければ認知コストが低く、遅ければ認知コストが高いと測定基準を設定します。

上記例だと、購入ボタンを押す→支払いが完了するまでの時間と定義します。

タスクを完了する時間とは関係がないシステムのテストをする場合は、別の測定基準が必要になります。この場合は特定のタスクでユーザーが犯したエラーの数を収集することを検討します。

ステップ2 : どのように測定するか決める

基準となるもの(同じタスクを提供している競合サービス)を1とし、調査したいサービスの、初回タスクを完了する1回あたりにかかる時間をnとします。

nの数値が下がるほど認知コストが下げられたと定義します。

例えば、0.4nになれば、0.6分認知コストを減らせたとい言うことになります。

ステップ3 : データを分析する

まずはサービスに初めて訪れるユーザーを対象に、何も説明せず比較対象となる競合のサービスを使ってもらいます。初回のタスクを完了するまでにかかった時間を基準値(1)とします。

次に、同じようなバックグラウンドを持ったユーザーに、自分達のサービスを何も説明せずに使ってもらいます。そこで初回のタスクを完了するまでにかかった時間をnとします。

各タスクにかかった時間の平均値を出し、それが競合に比べてどれだけ高かったかを算出します。

認知コストを最小化するヒント

認知コストをユーザビリティテストを通して定量化するやり方がわかったので、最後に認知コストを下げる4つのヒントを解説します。

適切なフォントサイズやカラーのコントラスト比など、色盲・色弱の人や年齢が高い人にもしっかり認知できるUIになっているかという視点について学ぶ必要があります。

視覚的な乱雑さを避ける

一貫性を持って、できるだけシンプルな表示をしてみましょう。無関係な画像や意図がないくたくさんのタイポグラフィーを使ってしまうと、ユーザーが混乱してしまいます。

ユーザーがおこなうタスクを減らす

ユーザーがテキストを読んだり、情報を記憶したり、決定をする必要がある部分を洗い出した後、別の方法を探します。

画像を表示したり、以前に入力した情報を再表示したり、スマート デフォルトを設定したりできるかなどです。すべてのタスクをユーザーから切り離すことはできませんが、なるべく不要なタスクを排除することで、多くの精神的リソースを残すことができます。

既存のメンタルモデルに基づいて考える

メンタルモデルとは、システムについてユーザーが信じていることです。例えば「バツボタンを押すと閉じる」など。ユーザーが日々別のサービスやサイトで学習した使い方をある程度踏襲すると、学習量を減らすことができます。

まとめ

今回は人間の「認知」の話と、それを応用してユーザビリティテストをすることでUIの認知コストを定量化する方法、認知コストをを最小限にしたUIを作るヒントについてご紹介いたしました。

ここまで見ていただきありがとうございました!

前の記事

次の記事