メンタルモデル

基本的な意味と UI における重要性

ユーザーがシステムや製品の仕組みに対して、頭の中に持っている「こう操作すれば、こう動くはずだ」という無意識の認識・理解の枠組みのこと。

実際のサイトの動きと、ユーザーのメンタルモデルが一致していると「直感的に使いやすい UI」になり、ズレていると「ストレスを感じる UI」になります。

実務における設計原則(ヤコブの法則)

UI 設計の絶対原則は「メンタルモデルは裏切らない」ことです。

UX 分野には『ユーザーは他のサイトで多くの時間を過ごしているため、あなたのサイトも他のサイトと同じように動くことを期待している(ヤコブの法則)』という格言があります。

「ハンバーガーアイコン(≡)(ハンバーガーメニュー)＝メニューが開く」
「虫眼鏡アイコン＝検索できる」
「青色で下線が引いてある文字＝クリックできる(リンク)」
「左上の企業ロゴ＝トップページに戻る」

このように、Web 業界の標準として定着した認識(暗黙の了解)には素直に従うのが基本です。実務において、差別化は「機能やコンテンツ」で図るべきであり、UI は標準的なメンタルモデルに従うのが最も安全で確実な戦略となります。

Web 担当者が陥りやすい落とし穴とリアルな対策(NG 事例)

「過剰な独自性」による学習コストの押し付けと離脱
最も陥りやすい罠が、「うちは独自路線でいきたい」「競合と同じありきたりなデザインは嫌だ」と業界標準の UI を捨てて、定着した記号を独自の記号やレイアウトに置き換えてしまうこと。

UI においてユーザーの期待を裏切ると、ユーザーに「このボタンはどう使うんだ？」という使い方を学習させるコスト(認知負荷)を強いることになります。Web において「ユーザーに考えさせること」は即座に直帰(直帰率)・離脱(＝CV(コンバージョン)の損失)に直結するため、慣れ親しんだ操作感(ユーザビリティ)を壊さないことを最優先にディレクションする必要があります。

言葉をよく利用する人

デザイナー
Web 担当者(発注側)
ディレクター

会話上での使用例

メニューのアイコンをどうするかデザイナーと相談している場面

デザイナー
ハンバーガーのアイコン、ちょっと古い印象なので独自のマークに替えてみたいんですけど、どうでしょう。
Web担当者(発注側)
気持ちは分かるんですが、利用者のメンタルモデルとして「三本線イコールメニュー」がもう完全に定着しているんですよね。独自記号にすると、押せること自体に気づいてもらえないことがあって。ここは標準のまま行きたいです。
デザイナー
たしかに、開いてもらえないと意味ないですもんね。標準のアイコンで進めます。

UIで他社と差別化したいとプロデューサーから相談された場面

プロデューサー
どうせなら操作感のところで他社と差をつけたいんだけど、何かできない?
Web担当者(発注側)
操作部分のメンタルモデルは裏切らないほうが安全だと思います。利用者が慣れている動きを崩すと、それだけで使いにくく感じられてしまうので。差別化は機能とかコンテンツの中身で出して、UIは業界標準に寄せるのがおすすめです。