認知科学から学ぶUIデザイン塾「だから、そのデザインはダメなんだ。」
使いにくいWebデザインでは、どんなに格好良いデザインでも、見る人を魅了することに限界があります。 その最大の原因は、見た目だけでデザインしてしまっているために「人が感じにくい」「人が理解しにくい」など、人間が本能的に判断する認知性能を活かして作られていないからに他なりません。 そんな「人間の本能的な性質や機能」を効率的で効果的に活用した「認知心理学」の使える法則から生まれた『デザイン事例』を通して、認知科学で考えるデザイン表現をご紹介していきます！
見た目のデザインがどんなにキレイであったとしても、それが利用する側にとって使いやすいとは限りません。 その意味で、20世紀から培われてきた認知心理学や行動経済学など「人間の性質や機能」に基づいて情報をデザインすることで、わかりやすいつかいやすいWebサイトにランクアップが可能になります。 このマガジンでは、著名な認知科学用語を解説しながら、今後は、Webデザイン表現に採用したときにポイントとなる良い表現・悪い表現を用いながら解説していきます。
UIデザインに関する嘆きや愚痴、考え方など、Twitterでつぶやく独り言をアーカイブ。
気軽に自宅からオンラインで受講できる「初心者でもわかりやすいUIデザイン講座」。大都市になかなか足を運べない地方の方にも最適！70分で構成された短時間講座だから、飽きずに楽しく受講できます！
今回は、特長や機能を知りたいユーザーに対して、どんな製品やサービスなのかを端的にイメージできて、印象に残りやすい特長一覧や機能一覧などのデザイン表現について、認知科学で考えてみたいと思います。 リストを魅力的に改善するBeforeとAfter情報を発信する側の感覚だけで、おすすめ順や機能順で並べてしまうと、ユーザーにとって「どんなメリットがあるのか」その機能の全体像を把握しにくいために、結果として印象に残らないという、リスト表示の見せ方自体に問題がある。 全体印象に影響す
今回は、サイトを利用するすべてユーザーの中でも、特に新規ユーザーに対して、わかりやすく行きたい情報へ直感的に遷移可能で、機動的な行動をサポートできるデザイン表現について、認知科学で考えてみたいと思います。 関心の高い項目からメニューを並べることで 利用を喚起するBeforeとAfter情報を発信する側だけの理由で、情報を整理し階層化してサイト構造を構築してしまうと、ユーザーの直感的な操作が制限される「目次化」されたグローバルナビゲーションになりやすい。 そのため、 ●サイト
WEBデザインのUI/UX表現に留まらず、クライアントへのプレゼンテーションや営業トークなど、さまざまなコミュニケーションにおいて、大切な人間心理を紐解くまさに「用語辞典」としてお使いください！ 認知 過程〜概念パート〜■2つの思考モード 直感や経験則で無意識に判断する「速い思考」、理性的で意識的に熟考を必要とする「遅い思考」。 ■プロスペクト理論 実際の利益と損失が同じでも、人は損失の方を大きく感じてしまう。 ■プレグナンツの法則 かんたんでわかりやすいまとまり
欠けている情報を脳内で復元したり、 囲まれた情報をグループとして認識できる。人は、すでに理解や認識している情報やオブジェクトについて、一部が欠けていたり隠れている状態でも、不足している部分や見えない部分を脳内で補完し、分断されている状態や欠けている状態から、完全な状態に復元したり、全体像を把握しようとする意識が自動的に行われる。 また、〈 〉や［ ］、破線で括られた情報は、ひとつの矩形として補完されるため、囲まれた情報は一つのグループとして認識される。 ちなみに、この考え
意味のあるかたまりに整理することで 効率的な記憶ができるランダムで一貫性のない情報や、単なる数字の羅列など、意味を持たない情報に対する人の記憶力は著しく低下する。 人が効率良く、短い時間で同時に情報を記憶するためには「意味を持った」情報として処理することが重要で、共通の意味のかたまりでカテゴライズすることを「チャンク」という。 短期記憶で記憶できる容量となるマジカルナンバー7やマジカルナンバー4で、情報を効率的に覚えるための方法として、次の二つのチャンキングが考えられる。
ボタンへの快適なアクセス性は、 ターゲットへの近さとサイズで決まる。人が快適にインタラクティブな操作をするために、ボタンへの移動距離は短く、ボタンサイズは大きいほど操作にかかる時間は短くなる現象を、定量的に示した法則。 また、マウスなどのデバイスが移動する際は、初速が早いほど操作に時間を要し、移動方向に対してボタンの幅や高さが大きい方が停止する場所を広く取れるため時間を短縮できる。 フィッツの法則では、インターフェース・デザインにおいて、人がボタンを操作するのに必要な時間を
選択肢が多ければ多いほど、 意思決定に時間を要してしまう。人は提示される選択肢の数や複雑さに応じて、意思決定に要する時間が長くなる現象を、定量的に示した法則。 また一方で選ぶ行為は、人にとって精神的なプレッシャーを感じるハードルの高い行為であるため、選択肢が多くなるほど迷ってしまうだけでなく、選択肢が多いために選ぶことを辞めてしまう。 ヒックの法則では、人が意思決定に必要な時間を公式を用いて求めることができる。 ユーザビリティの性能を定量的に比較する方法として用いられる普遍
今回は、より興味が高い情報をメニューから探したいと考えてるユーザーに対して、どんな情報なのかを直感的でスピーディに想起させ、いちいち考えることなく能動的に行動を喚起できるデザイン表現について、認知科学で考えてみたいと思います。 目的別メニューボタンの 能動的な行動を喚起するBeforeとAfter情報を発信する側は、情報の意味や内容を把握しているため、総合的に包括する言葉を選んで名称を決めるが、ユーザーにとっては、その言葉が意味する範囲や真意を言葉尻から理解したり興味を持つ
人はオブジェクトと背景を分離し、 主となるオブジェクトの「形」を知覚する。人は二つのオブジェクトを持つ領域情報は、同時に知覚することができないため、それぞれを分離して、一方のオブジェクトは「図」として浮き出て見え、もう一方は「背景」として退いて見える。 一度、意味のある情報として「図」を知覚すると、その情報は図として定着し、背景と認識することはない。 図として認識されやすいオブジェクトの形にはいくつかのパターンがある。 ●面積が狭い方のオブジェクト ●形として閉じられた方の
同じ特徴を持つ要素同士は離れていても、 関係性が深いグループとして認識される。人は、色や形・サイズ・方向などの視覚的に共通の特徴をもつもの同士は、共通性がないものよりも「関係性が深いもの」として認識する習性があり、プレグナンツの法則（ゲシュタルト原理）の中でも、もっとも重要な法則のひとつ。 同じ特徴の要素同士である場合、位置が離れていたり、分散していても同じグループとして認識されるため、近接の法則や閉合の法則とは異なる特性を持つ。 特に、同じ色を採用することで、形など他の特
位置的距離の近いもの同士は、 関係性が深いグループとして認識される人は位置的に距離が近いもの同士を「関係性が深いもの」として認識する習性があり、プレグナンツの法則（ゲシュタルト原理）の中でも、もっとも重要な法則のひとつ。 色や形・サイズが異なる要素同士であっても、余白のコントロールによって、位置的距離が近ければ同じグループとして認識する。 逆に、距離が遠いものは別のグループとして認識するため、関係性がない要素が位置的に近くに見えてしまう場合、関係性に誤解が生じやすい。また、
今回は、登録や申込などの各種入力フォームでの途中離脱を減らして、登録完了や申込完了につなげるためのきっかけ作りについて、認知科学で考えてみたいと思います。 入力フォームの完了率が変わるBeforeとAfter新規会員登録やECサイトでの購入手続きをはじめ、ユーザーとのコミュニケーションツールとして重要な役割を担う入力フォームは、個人情報を入力することもあり、その価値をユーザー側が認めてくれなければ、多くの情報を入力してくれることはありません。 そこで、入力フォームに対して、
客観的に観て危険な状態や事実に対して、 自分だけは大丈夫だと思い込む。自身に迫った予期しないできごとや変化に対して、ある程度の限界までは、「日常的な範囲内」「ありえない」など脳が自動的に処理してしまう先入観や偏見によって起こる。 都合の悪い情報は無視したり、過小評価したりするため、緊急時や危険が迫っている状態にあることが感じにくい認知特性。 正常性バイアスは、あらゆる人が持っている思考の偏りから来る現象で、個人だけでなく集団グループなど人数が多いほど発生しやすいことが知られ
周囲の人も自分と同じ意見や考え方を持ち、 それが正常で多数派だと錯覚してしまう。自分の意見や判断は多数派で正しく、周りの人も同じような考え方や意見を持っており、誰もが同じような判断を下すものと錯覚してしまう現象。 自分の考え方は少数意見ではなく、多数派だと思い込むことは、安心感を感じやすくなる「正常化バイアス」という認知の偏りによって生まれやすい。 学校や職場など、グループ内で議論した結果などに発生しやすく、小グループで合意されたことが、一般的でかつ大きなグループにおいても
頭の中の情報を直接思い出す再生記憶、 提示された選択肢から思い出す再認記憶。記憶は大きく分けて、記銘・保持・想起の３つの過程で構成されている。 「想起」とは、脳に保持されている顕在記憶やエピソード記憶を、適切なタイミングで思い出す（情報を取り出す）際に、保持されている情報を直接思い出すことを「再生記憶」、提示された情報をきっかけに思い出すことを「再認記憶」という。一般に再生記憶よりも再認記憶のほうが容易であるとされている。 再生記憶には、次の種類がある。 ・順番に囚われず自
今回は、トップページやメニューページ、またはランディングページなどに配置しているバナーやおすすめ情報パネルなどで、クリック率が上がらずコンバージョンに繋がりにくい現象について、ユーザーに行動を起こさせるきっかけ作りについて、認知科学で考えてみたいと思います。 クリックしたくなる バナー／おすすめパネルのBeforeとAfterメディアからの誘導バナーであったり、特定の情報へのバナー告知やキービジュアルエリアなどから最新情報や注目情報に誘導するおすすめ情報パネルなど、ユーザー
