認知コストとUIの使いやすさ 第1回 認知コストとは

第1回目では、UIの使いやすさを大きく左右する「認知コスト」とは何かを解説します。人間がUIをどのように認識するか、その認知の特徴を理解しましょう。

発行

著者 小原 司 UIデザイナー
認知コストとUIの使いやすさ シリーズの記事一覧

はじめに

UIの使いやすさを支えている要素のひとつに、「認知コスト」があります。普段、筆者が取り扱うUIデザインの業務では、視覚的な表現をメインに利用したUIの作成を行っていますが、そのUIから使いやすさを感じられるものにするためには、認知コストへの気配りは欠かせません。

この連載では、UIの使いやすさに関わる認知コストを、見た目で変動する認知コストと、ユーザー自身の理解や文脈で変動する認知コストに分けて解説をします。

認知コストってなんだろう?

視覚を使用して端末を利用するユーザーは、Webアプリケーションなどから情報を得たり操作をする時に、画面上に表示された文字情報やアイコンが何を表しているか判断をします。

もしそれが、分量のある文字情報であれば、ひとまず内容を大雑把に理解しようとするかもしれませんし、見出しを探すかもしれません。その時点で確実に必要な情報であると確信していれば、じっくりと読み込むかもしれません。

もし、表示されている要素がアプリケーションを操作するためのインターフェースだったとしたら、ユーザーは自分が操作できるかどうかを判別して、それがどんな機能かを理解しようとするでしょう。

文字情報であれインターフェースであれ、画面に表示された内容が何であるかを判断するのは、それを見ているユーザー自身です。画面を提供する側はユーザーの表情や動きから察して、適切なアドバイスを見計らったタイミングで提供することは現時点ではできません。

ですので、そういった混在する内容を適切に区別して、何のための表示であるかをユーザー自身が解読する必要があります。そのための労力を認知コストと呼びます。

コストならゼロにするのが必須?

認知コストはアプリケーションを利用しようとすると、必ず発生する労力です。ですので、UIを作成する上で認知コストゼロを目指す必要はありません。

仮に認知コストゼロを目指すなら、自動ドアやセンサーライトのように完全な自動化をして、それが実行されていること自体を気づかせない設計になりそうですが、そうなると、それは「ユーザーインターフェース」という名前ではなくなりそうです。

UIを作成する上で認知コストはゼロにはなりませんが、かといって無用な労力がユーザーにかかかるのを見過ごしてよいわけではありません。アプリケーションの利用に際して認知コストがかかりすぎると、それはやがてストレスに変換されます。ストレスにはまったくといって良いことがありません。それは誤認を招く原因にもなりますし、ストレスがたまった状態では、物事を肯定的に考えることができなくなってしまいます。

ストレス発生の原因となりうる無用な認知コストは、なるべくかからないに越したことはありません。認知コストは必ず発生するものですが、その労力はできるだけ少なく済ませられるように心がける必要があります。

既知の認知コストと弊害

さて、それではどのような点に着目して認知コストの低減を図ったらよいでしょうか。ここでは筆者がUIデザイン時に重要視しているいくつかの視点を紹介します。

既知の認知コストは低い

認知コストに気を遣ったUIデザインをする上で、筆者が重要視していることに「人間の認知の仕組み」があります。それは既知の物事に対する認知コストは低いということです。

視覚から入ってきた情報の高速な認知のポイントは、連想が可能だったり記憶に似通ったものがあるかどうかです*。

*注:高速な反応

人間の反応のひとつに「反射」があります。何か大きな物体が突如として近づいて来たら、それを反射的に避けるとか、砂が飛んできたら反射でまぶたを閉じるなどです。これらの反射の動作は、通常の認知よりも速く自動的に体が反応するもので、本人の顕在意識の判断を待ちません。認知が介在する以前の事象ですので、反射の動作はこの記事では扱いません。

人間は高効率かつ高速に認知と判断を繰り返す生き物です。視覚から入ってきた情報すべてをそのまま認知しようとすると、状況を理解したり、判断をするのにとてつもない労力と時間がかかってしまいます。そのため、人間は視覚から送られた情報を圧縮したり間引いたり、経験済みの記憶と結びつけたりすることで、判断までの時間を効率化しようとします。その結果、経験済みの記憶と合致する対象が目に入った時は、詳細な考慮をすることなく判断して、高速に対象を認知することが可能になるのです。

次の画像をみてください。何が映っているでしょうか?

なぞなぞではありませんので、答えはシンプルにです。あなたは画面に映っている動物が、猫であると深く考えることなく認知することができたと思います。

「そりゃあ、猫だし……」と思うのは当然なのですが、あなたはそれと同時に、画面に映っている動物が本物の猫ではなく、画像であるということも無意識のうちに認識していたはずです。

それは、その動物が猫なのか虎なのか認知を進めつつも、対象が本物なのか画像なのかという判断も、今までの経験に結びつけながら認知コストをかけることなく、瞬時に実行していたことにほかなりません。

この仕組みはUIデザインを作成するのに有効に利用できます。たとえば、次の画像にある要素はWebでは頻出するUIです。

これらは実際に操作をした経験も豊富で、記憶との結びつきも強く、その機能や動作を認知するのにさほどコストが発生しません。

一番上はテキストリンクでしょうし、2番目はドロップダウンリストです。項目をクリックすると、きっと選択肢のリストがその場で表示されるでしょう。最後は検索用のテキスト入力エリアです。当たり前に認知できてしまうので目新しい発見を感じることはありませんが、考えることなく利用できるというのは非常に重要です。

このような、既知の要素を上手に再利用することが認知コストの増加防止に役立ちます。

判断を省略することの弊害

既知の物事に対する認知は、記憶や経験と結びつけることで高速に実行していますが、それゆえに弊害も発生します。それは誤認や錯覚です。次の画像を見てください。

この画像、ひと組だけアイコンの左右が入れ替わっています。アイコンの配色は入れ替わっていません。初見でアイコンの入れ替わりに気がついた人もいるかと思いますが、最初の印象としては「同じ見た目のボタンが縦に並んでいる」というものだったのではないでしょうか。

このように、繰り返しの中で同じであると記憶された要素は、後続の似た要素の詳細な認知を省略してしまいがちです。その事実が高速な判断を可能にしているのですが、それゆえに、誤認という副産物を生み出してしまいます。

生活の中で発生する勘違いや見間違いも同じ現象です。既知のUI再利用は認知コストの増加防止に役立つと前述しましたが、状況を構成する要素が既知の記憶や経験と比べて類似点が多く、同一と判断されてしまえば、多少内容が違っていたとしても同じものであると判断されてしまうのです。

UIはユーザーの意思を受け取るための簡素化された手段です。ですので、表現しようとするUIのパターンが増えるほど、どうしても似たような見た目のUI形状に、違う役割を与えることになってしまいがちです。

今回挙げた例は、意図的に誤認が発生しやすいように創作したものです。しかし、UIデザインの現場でも開発の規模が大きかったり、UIの種類や変化の多いものを作成すると、結果的にこのような誤認の引き金となるような「思わず同一と判断してしまう、機能の違うUI」を作り出してしまう場合があるので注意する必要があります。

まとめ

今回は認知コストについて解説しました。認知には、次のような特徴と弊害があることがわかりました。

  • 認知コストは少ないほうが良い
  • 認知コストがかかりすぎるとストレスになる
  • 知っていることの認知は高速
  • 高速に認知する分、似たものは誤認しやすい

次回は、この特徴と弊害が発生する具体的な例を取り挙げながら、UIの見た目から変化する認知コストについて解説します。

小原 司
PixelGrid Inc.
UIデザイナー

紙媒体をメインに制作しているデザイン事務所で広告デザインの基礎を学ぶ。2000年に独立。化粧品関連媒体の販促物を中心に、店頭グラフィック、パッケージ、POP、グッズ立案など多岐にわたるデザインを担当。2007年頃からWeb媒体へのデザインにも積極的に取り組み、クロスプラットフォームアプリのデザイン、画面設計、実装に携わる。2013年にピクセルグリッドに入社。現在では利用者にストレスを与えず迷わないユーザーインターフェースの設計とデザインに励んでいる。 著書に『ノンデザイナーズ・デザインブック[第4版]』(日本語版補足解説:マイナビ出版、2016年6月30日)などがある。また、マンセル色相環とムーン&スペンサー配色理論を採用した配色アプリ『HUE360』を1人でデザインから開発まで行い公開している。

Xにポストする Blueskyにポストする この記事の内容についての意見・感想を送る

全記事アクセス+月4回配信、月額880円(税込)

CodeGridを購読する

初めてお申し込みの方には、30日間無料でお使いいただけます