認知の違いから分かる効果的な情報の見せ方

情報は単に配信すれば伝わるというわけではありません。仕様書を読んで理解できる人もいれば、噛み砕かれた解説書を読むことで理解できる人もいます。また、文章を読んで論理的にアイデアを組み立てる人もいえば、絵から全体像を掴みながらアイデアを考える人もいます。伝えるための情報デザイン、文章デザインで、情報(文章や絵図)をいかに構成することで人に伝わりやすくなるという話をしました。今回は情報を受け取る人に注目し、人が情報をどのように認知しているのかを考えてみます。

今回、Cognitive style and learning strategies という文献を参考にしました。認知の視点から人がどのように学習をするのかを簡潔にまとめています。その文献によると、段階的に学習する Serialist と、メタな観点から学習する Holist の二種類の学習方法があるといわれています。使い分けて学習する方もいるかもしれませんが、基本的に人はいずれかの観点で学習することを得意としていて、情報の受け取り方もそれぞれ異なります。

Serialist であれば、ステップバイステップで情報を取得し、トピックがフォーカスされていればされているほど自分の知識として身に付きやすいです。Holist であれば、まず全体の意図を示し、それを基に詳細・分類化されていることを好みます。

いずれも得意な学習方法があるのと同じように、不得意なところもあります。Serialist は全体ではなく詳細をひとつひとつ見ていくことから、ちょっとした違いに気付きやすいものの、全体的に見てどこが似ているのか、共通しているのかを見つけるのが得意ではありません。最初に道筋をつくってそれに沿って学習するので、プラニングが重要になります。それ故、学習過程での突然の変化に対応するはそれほど得意ではありません。Holist は抽象的なところから学習をスタートできるものの、一般化し過ぎてしまったり無視するべきではない細かな違いを見逃してしまうことがあります。

もちろん、コンテンツがいずれかの学習タイプのみをターゲットにして設計されていることはありませんが、様々な工夫がいずれの学習タイプにとって分かりやすい構成になっていることがあります。では、これが Web デザインやコンテンツの組み立て方にどう影響するのか見ていきましょう。

Flow 会員画面右図はタスク管理アプリ Flow の会員登録画面です。ページを移動することなく、その場で登録作業を進めることが出来る UI を採用しています。ページ全体の明度が下がり、会員登録に注目してもらいやすいように工夫されています。明度を下げ過ぎて、どこにいるのか認識できないわけでもないですし、表示アニメーションがページを移動していないということを理解させてくれます。

会員登録をしている時点でも、一体自分が何に登録しようとしているのか、どのようなメリットがあるのかが分かる文章がフォームの右側に添えられています。フォームを途中まで記入して、ページを読み直した後に会員登録へ戻っても情報を記入しなおすという手間がないのもこの UI のメリットですね。

フォームにも細かな工夫がされています。会員登録画面を開くと、自分の名前を記入フィールドが自動的にフォーカスされており、ハイライトも付いています。最初はボタンをクリックすることが出来ませんが、情報を記入するとボタンがクリック出来ることを示すかのようにテキストの色がアニメーションで変わります。

このように全体を違いを捉えながら操作を進めやすくするための工夫 (Holist) と、ステップバイステップで進みやすくするための補助 (Serialist) の両方が組合わさっているのが分かります。

Flowのトップページ画面

UI デザインだけでなく、コンテンツの組み立て方にも Holist と Serialist 両方が学習しやすいように工夫してあります。例えば上図のように概念的なアイデアから徐々に具体的なアクション(この場合は会員登録)へ繋げるための情報構成になっているのが分かります。ページ全体を見ると分かりますが、概念を説明てから機能紹介するという流れは Holist タイプには分かりやすいかもしれません。

機能紹介ビデオを機能紹介の情報構成

抽象的なことはさておき、もっと具体的な形で理解したい方にとっては動画がオススメです。ストーリー仕立てになっているので順番に情報を得て学習したい Serialist には最適です。ページ全体の構成は、どちらかというと Holist に最適化されていますが、機能紹介の分類の仕方や大きな絵を使った説明は Serialist にとってやさしいコンテンツです。大きなヘッドラインに書かれている機能紹介コピーは抽象的ですが、順に見ていくことで理解が深まりやすくなっています。基本的に縦に流れる情報構成なので順に見て行きやすいですし、下にいけばいくほど上級者向けの機能紹介になっているのも注目です。

人によって情報の受け取り方は様々。どのように違うのかを理解することでコンテンツをどのように提示したほうが効果的なのかを知るキッカケになるでしょう。

Yasuhisa Hasegawa

Yasuhisa Hasegawa

Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。