今回のテーマは、概念モデル（conceptual model）とシステムイメージです。作り手が考えた使い方は、画面や製品の形、説明書などを通して使う人に伝わります。こうした手がかり全体を指すのが、システムイメージです。作り手の意図と使う人の理解が、どこでずれるのかを見ていきます。
ふだん気にも留めないシャワー室の石けん置きやタオル掛けにも、UI/UXの考え方は働いています。初めて入った浴室で迷わずに済むのは、形と置き場所が、使い方を先に伝えているからです。
出張先のホテルで、見慣れない浴室を前に一瞬とまどった経験はありませんか。認知科学者のドナルド・A・ノーマンは、エッセイDesign as Communicationの書き出しで、まさにそんな朝のことを書いています。ノーマンの描写を言い換えると、浴槽の石けん置きは「石けんを置くための場所です」、取っ手は「ここにつかまってください」と伝えているように感じたそうです。
壁の低い位置には、何に使うのか分からないフックもありました。見上げると、シャワーヘッドを留めている金具と同じ形をしています。そこでヘッドを外して下のフックに掛けてみると、ぴったり収まりました。形を見比べ、実際に試したことで、使い方が分かったのです。
ノーマンはあとから、浴室の設備を使いながら、設計した人の意図を一つひとつ読み取っていたのだと振り返ります。意図されたとおりに使った設備もあれば、石けんを置く場所のように、自分の好みで変えたものもありました。設計した人がそばにいなくても、形や置き場所から、どのように使ってほしいかが伝わっていたのです。
Webサイトでも、画面を見ただけで使い方が伝わることが大切です。使う人のそばで、作り手が一つひとつ操作を説明することはできません。そこで、ボタンの名前や操作後のメッセージを通して、「どこを押せばよいか」「入力した内容は保存されたか」が分かるようにします。私たちサンアンドムーンがUI設計の出発点を「画面が、作り手の代わりに説明すること」に置くのは、説明を受けなくても安心して操作できるようにしたいからです。
この記事の要点
- 概念モデルとは、ものがどう動くのかを理解するための筋書きで、使う人はそれを頭の中に組み立てながら操作する
- 作り手のモデルと使う人のモデルは直接つながらず、あいだに立つのは画面や製品、説明書やヘルプからなるシステムイメージだけ
- ずれは作り手の頭の中と画面のあいだで生まれるため、作り手ではない人に画面だけを見せて、筋書きが読み取れるかを確かめる
概念モデルとは──ものの動き方を、簡単に説明した筋書き
概念モデルとは、ものがどう動くのかを、使う人が理解できる形にまとめた筋書きです。この連載の第1回発見可能性と理解──使い方が見ただけで伝わる設計｜デザインの原則 #1では、「この機械は、たぶんこういうしくみで動いている」と使う人が頭の中に組み立てるもの、として紹介しました。ノーマンは『誰のためのデザイン？ 増補・改訂版：認知科学者のデザイン原論』で、発見可能性を支える5つの手がかりに続く6つ目にこれを置き、真の理解を与えるのは概念モデルだとしています。
ノーマンはエッセイの中で、概念モデルを「文脈の中の物語」と考えると分かりやすいと説明しています。何のために使うものなのか、どのように動くのか、なぜその操作が必要なのか。それらを、ひとつながりの説明として理解できるようにするものです。動くしくみが分からないままでは手順を覚えるだけになり、うまくいかなかったときに、どう対処すればよいかも分かりにくくなります。
ホテルの石けん置きも、同じです。ほかの場所で見かけたら、何に使う皿なのか迷ったかもしれません。シャワーを浴びる場所にあり、石けんを置くのに合う形をしていたから、その用途を読み取れました。ノーマンは、このように使う場面と結びつけて理解することを、「物語」として説明しています。
作り手のモデルと使う人のモデル──あいだに立つのはシステムイメージだけ
作り手のモデルと使う人のモデルをつなぐのは、システムイメージだけです。ノーマンはエッセイで、作り手と使う人のやりとりを三者の図で表してきたと書いています。作り手が考えているしくみや使い方が「作り手のモデル」（designer's model）、使う人が自分なりに理解したしくみや使い方が「使う人のモデル」（user's model）です。その2つをつなぐ手がかりが「システムイメージ」（system image）にあたります。この三者の関係は、ノーマンが1986年にドレイパーとまとめた本で示し、その後も『誰のためのデザイン？』などで繰り返し使ってきた図式です。
ノーマンは、製品をうまく使うには、使う人が理解したしくみと作り手が想定したしくみが一致する必要があると説明しています。作り手は、そのしくみを製品の形や表示などを通して伝えます。このように、作り手と使う人のやりとりを仲立ちするのがシステムイメージです。そのシステムイメージには、製品に加えて、説明書やヘルプのような付属の資料も含まれます。
たとえば、留守番をする家族に置き手紙を残す場面を考えてみてください。「冷蔵庫のカレーを温めて食べてください」とだけ書かれていたら、鍋に移すのか、容器のまま電子レンジにかけてよいのか、迷うかもしれません。書いた人にすぐ確認できないときは、手紙の内容から方法を考えることになります。Webに置き換えるなら、画面の並び、ボタンの言葉、エラーの文面、ヘルプのページまでが、この置き手紙にあたるでしょう。
ずれは、作り手の頭の中と画面のあいだで生まれる
ずれが生まれやすいのは、作り手の頭の中にはあるのに、画面には出ていない部分です。サンアンドムーンの観察では、作り手ほど、画面に書いていないことを頭の中で補って読めてしまいます。一方、使う人は作り手の説明を知らないため、画面の情報や自分の経験を頼りに、しくみや使い方を理解しようとします。
ノーマンは同じエッセイで、人は説明を求める生き物で、身のまわりの出来事に筋書きを作って理解しようとする、と書いています。手がかりが十分にあれば、何が起きているのかを理解しやすくなります。反対に、情報が足りなければ誤った理由を考えたり、理由が分からず、同じところで何度もつまずいたりすると説明しています。
たとえば、フォームに入力したのに、送信ボタンが灰色のまま押せない場面を考えてみます。灰色は「いまは押せない」ことまでは伝えます。ですが、なぜ押せないのか、どうすれば押せるようになるのかは伝えません。ノーマンも、メニューの灰色の項目を例に、使えない理由や使えるようにする方法が伝わらないことを指摘しています。理由の見えない画面の前で、使う人は「故障かもしれない」「入力が消えたのかもしれない」と、ボタンを押せない理由を、自分なりに考えることになります。
もう1つは、一覧の件数がいつもより少ないときです。以前選んだ絞り込みの条件が残っているためなのか、登録されているデータ自体が少ないためなのかが画面から分からなければ、使う人は「データが消えた」と受け取るかもしれません。こうした取り違えから起きる誤りは、誤操作の8割は、設計のせい｜スリップ vs ミステイクで扱ったミステイクにあたります。作り手が想定したしくみと、画面を見た人が理解したしくみの違いが、誤りにつながるのです。
画面から筋書きが読み取れるかを確かめる
画面から使い方が伝わるかを確かめるには、作り手ではない人に画面だけを見せ、どう理解したかを聞いてみます。「これは何をするための画面だと思いますか」「このボタンを押すと、何が起きると思いますか」と尋ね、感じたことを言葉にしてもらいます。その答えを作り手の説明と比べると、意図したとおりに伝わっていない部分を見つけられます。
説明が足りないと分かった箇所には、操作の手順に加えて、なぜその操作が必要なのか、なぜ今は操作できないのかも添えます。ノーマンもエッセイで、方法に加えて理由を伝えることを勧めています。必須項目の未入力で送信できないのであれば、ボタンのそばに「必須の項目が1つ未入力です」と表示し、該当する入力欄を示す方法があります。理由と直す場所が分かれば、入力を続けやすくなります。
私たちが画面を見直すときも、作り手の説明を聞く前に、まず画面だけを見て「何をするための画面か」を言葉にしてみます。説明を聞いたあとでは、画面に書いていないことまで分かった気になってしまうからです。
注意点
使う人のモデルは1つではありません。毎日業務で使う人と、年に一度だけ開く人とでは、同じ画面を見ても、しくみや使い方の理解は異なります。慣れた人には十分な説明でも、初めての人には手がかりが足りない場合があるのです。評価は利用状況によって変わります。使う人が過去の経験から持ち込む予想については、人は過去の経験と予想に基づいて行動する：メンタルモデルについてが扱っています。
もう1つ、システムイメージには説明書やヘルプも含まれます。すべてを1つの画面で説明しようとすると、ラベルや注記が増え、かえって操作の流れが分かりにくくなることがあります。画面には操作に必要な情報を示し、詳しい説明はヘルプで読めるようにするなど、伝える場所を分けて考えることも必要です。
よくある疑問
概念モデルとメンタルモデルは、同じものですか
意味が重なる部分はありますが、どちらの視点で説明するかに違いがあります。ノーマンのエッセイは、使う人のモデルを「メンタルモデル」とも呼んでいます。ものの動き方をまとめた筋書きを概念モデル、使う人が自分の頭の中で理解しているしくみをメンタルモデルと捉えると、2つの関係がつかみやすくなります。
説明書やヘルプを充実させれば、ずれは防げますか
説明書やヘルプもシステムイメージの一部なので、充実させる意味はあります。ですが、サンアンドムーンの観察では、使う人は説明を読む前に画面から理解を組み立て始め、ヘルプを開くのは迷ったあとになりがちです。ヘルプは、画面が伝えることを補う場所として考えるのが確実です。
使う人のモデルを、作り手のモデルに合わせるべきですか
ノーマンは、使う人のメンタルモデルが作り手の考えた概念モデルと重なるようにシステムを設計することを、長く説いてきたと書いています。ですが、その手段はシステムイメージしかありません。使う人の頭の中を直接変えることはできないので、画面の言葉や表示を見直していきます。使う人が画面から理解した内容と、作り手が伝えたい内容が合うように整える、という考え方です。
第1部で取り上げた手がかりのうち、見た目で「できること」を知らせるシグニファイアはアフォーダンスとシグニファイア──「押せそう」を伝えているのは、どちらか｜デザインの原則 #2で、並びで使い方を伝える対応づけは前回の対応づけ──並びそのものが、使い方を伝える｜デザインの原則 #3で扱っています。私たちはUI／UXコンサルティングで、作り手の方の説明と、画面だけを見て私たちが読み取った内容を、1画面ずつ突き合わせています。
参考文献
この記事の作成に参照した資料
ホテルの石けん置きは、その形だけでなく、シャワーを浴びる場所に置かれていたことからも、使い方が伝わっていました。Webサイトでも、使う人は画面の言葉や配置、操作への反応などを手がかりに、しくみを理解していきます。ボタンを押せない理由を添えたり、いま適用されている絞り込みの条件を表示したりすることも、その助けになります。作り手には分かっていても、画面には示されていない情報を見つけ、必要な説明を補っていくことが大切です。私たちサンアンドムーンは、作り手の説明を聞く前に、まず画面だけから何が読み取れるかを確かめています。画面が作り手の代わりに説明できるようにすることが、初めて開いた人にも使い方が伝わる画面への第一歩になります。
執筆・監修
株式会社サンアンドムーン｜代表取締役
1976年創業のデザイン事務所を前身に、Webコンサルティング・UI／UXデザインを専門とする。国際標準のUX設計プロセスを学ぶ Google UX Design Professional Certificate を取得し、上級ウェブ解析士 としてデータ主導のサイト改善にも精通。デザイン思考を軸に、ユーザー認知・行動・文脈からWebサイトの課題を捉え直し、成果につながる設計へ落とし込むことを使命としている。システム設計、フロントエンド技術、SEO・パフォーマンス改善まで技術知識を横断し、サイト全体を見通したディレクションを得意とする。自動車メーカー、銀行・クレジットカード、保険などの大手から中小企業まで、数値で検証しながら改善を積み重ねる実践的なコンサルティングを提供している。
