人はなぜ「分かりやすいデザイン」でも失敗するのか

これは私が最近よく訪問する日本橋駅直結の商業ビル、東京日本橋ビル内のエレベーターのボタンです。

唐突に質問ですが、このボタンで操作ミスを起こすポイントがあるとすれば、それがどこだか分かりますか?

説明が必要と思いますが、このビルは7Fがオフィスロビーになっています。駅直結のB1と1Fからは7Fまで直通するシャトルエレベーターがあり、全員7Fで一度降り、セキュリティチェックをし、23Fより上にあるオフィスフロアに入ります。そのオフィスロビーとオフィスフロアを行き来するためのエレベーターのボタンがこれです。

ボタンが23Fから30Fまでしかなくて、下に大きく7Fのボタンがあるのは、そういったビルの構造からです。

私と同行したディレクター(26歳)は、打ち合わせが終わってオフィスフロアからオフィスロビーに帰る際に、操作ミスをしました。それも1度だけでありません。次の打ち合わせの帰りにもまったく同じミスをしました。普通は「ディレクターさん、うっかりモノだなぁ」と思うだけの些細な出来事かもしれませんが、私は職業柄「これは面白い行動だ」と思いました。

彼が2度にわたってやってしまったのは、「7Fのボタンではなく23Fのボタンを押してしまう」というミスです。

これを聴いて多くの人は「あ、なるほど」と思ったかもしれません。しかし、デザインする段階でこのことに気が付ける人は、意外と多くないのではないでしょうか。

人間は常時神経を集中して行動しているわけではない、というのは自分自身を振り返ってもよく分かることです。行動経済学者のダニエル・カーネマンはこのことを「システム1」と「システム2」という言葉を使って表現しています。バイアスについて詳しく解説したダニエル・カーネマンの『ファスト&スロー』はデザイナーの必読書なので、是非手に取ってみてください。

この書籍の中で詳しく述べられていますが、システム1は「速い思考」といえるものです。脳に負荷を与えず、常時自動運転し、軽微な問題を過去の経験則などからスピーディーに判断して答えを出します。例えば以下のような行動は、システム1で動かしていると言えます。

・二つの物体のどちらが遠くにあるか見て取る
・突然聞こえた音の方角を感知する
・「猫に●●●」という慣用句を瞬時に完成させる
・おぞましい写真を見せられて顔をしかめる
・声を聴いて敵意を感じる
・2+2の答えを出す
・大きな看板に書かれた文字を読む
・空いた道路で車を運転する
・将棋でうまい指し手を一瞬で考える(将棋の名人の場合)
・簡単な文章を理解する
・几帳面で物静かな人はある職業のステレオタイプだと感じる

一方、システム2とは「遅い思考」です。複雑で難しい仕事を処理し、システム1による誤った判断をチェックすることができます。例えば以下のような行動は、システム2の仕事です。

・レースでスタートの合図に備える
・サーカスで道化師の動きに注意を集中する
・人が大勢いるうるさい部屋の中で特定の人物の声に耳を澄ます
・白髪の女性を探す
・意外な音を聞いて、何の音か記憶をたどる
・歩く速度をいつもより速いペースに保つ
・社交場で自分の振る舞いが適切か、自分自身で監視する
・あるページにaの文字が何回登場するか数える
・自分の電話番号を誰かに教える
・狭いスペースに自動車を停める(腕利きのドライバーでない場合)
・二種類の洗濯機を総合的に比較する
・納税申告書に記入する
・複雑な話の妥当性を確認する

システム2は脳に大きな負荷がかかり、集中力を擁します。システム2を複数動かすことは不可能です。同時に動かせるのはシステム1だけですが、システム2の負荷が高いほど、システム1の精度が落ち、時に何もできなくなったりします。

システム2が起動しているとシステム1が機能しなくなるというのは、1999年にハーバード大学で行われた選択的注意の実験が有名です。YouTubeに動画があるので、皆さんもやってみましょう。

以下の動画では、黒いシャツを来たチームと、白いシャツを着たチームが、それぞれバスケットボールを持ってチームメイトにパスしています。このうち、白いシャツのチームが何回パスをするかだけを数えてみてください。

パスの回数は正しく数えられましたか?

では答え合わせを、と行きたいところですが、実はこの実験で調査したいのはパスの数ではありません。人の注意力がいかにお粗末かを確認するための実験です。

真剣にパスの数を考えていた人の多くは、途中に登場したゴリラの着ぐるみに気が付かなかったのではないでしょうか?あるいは、何か違和感を覚えたが、それがゴリラの着ぐるみだとはハッキリ認識できなかったのではないでしょうか?

パスを数えずにこの動画を見た人は、ゴリラに気が付かないなんてありえないと思うでしょう。しかし、高速移動するボールを追ってパスを数えるというのは、システム2を起動しないと不可能です。そしてシステム2をフル稼働させていると、人はこんな簡単なことにさえ気が付かなくなるのです。

さて、このような認知の働き方を踏まえたうえで、エレベーターの操作ミスを犯したディレクターの行動を振り返ってみましょう。

打ち合わせを終えたディレクターは、エレベーターまで見送るクライアントと私の会話に注意を払いながら私の少し後ろを歩きます。システム2が起動し、意識は私とクライアントの会話に集中していたかもしれません。

エレベーターが到着すると、彼は私より先にエレベーターに入り、「開く」ボタンを押しながら私をエレベーターに迎え入れ、さらに私たちにお辞儀をするクライアントに意識を向けて挨拶をします。システム2は、自らもお辞儀をしながら、クライアントのお辞儀を見届けることに集中していたことでしょう。その意識を引きずったまま、扉が概ね閉じたタイミングでエレベーターの操作盤に目を移し、最低限機能しているシステム1によって、以下のエレベーターのボタンを押すわけです。

先ほどの説明のように、システム1は条件反射的な簡単な行動しかできません。またシステム2が起動していると盲目になり、システム1の処理能力は著しく落ちます。

このような状態で、ディレクターのシステム1は2列に並んだエレベーターのボタンのラベルは読まず、同じ大きさと形のボタンのグループを検知し、その中で一番左下にあるボタンを目指します。

なぜこう判断するかというと、ボタンが複数列で並んでいる時、「一番下の階のボタンは左下にある」と過去に経験しているわけです。それは多くの他のビルのエレベーターでほぼ当てはまり、失敗した記憶もありません。そもそもエレベーターのボタンを押し間違えて、大きなリスクになったこともありませんから、何の疑問も抱かず、注意深くもならず、システム1は一番左下のボタンのボタンを押すわけです。そういうマインドセットが、過去の体験からできているのです。

しかし残念ながら、このエレベーターのデザインはそうではありません。

このビルでは、2列に並んだボタンの一番左下は、別の23階のオフィスフロアに行くためのボタンです。7Fのオフィスロビーに行くボタンはその場所にありません。7Fのオフィスロビーに行くボタンは大きさも形も違っており、さらにいえば距離もすこし離れた場所に配置されてます。

これが2度にわたって簡単な操作ミスを起こしたカラクリです。

一方、これをデザインしたデザイナーの気持ちを考えてみましょう。

普通のエレベーターは1Fあるいは地下階からボタンが始まるのに、このエレベーターは7階から始まります。しかも7階の次は23階と一気に飛び、23階からは各階のボタンが並びます。さらにボタンの総数は9つと奇数になり、2列に並べると一つだけ飛び出してしまいます。

こんな前提条件の下、デザイナーは「より分かりやすい」「より美しい」レイアウトをするために、以下のように考えたと推測されます。

・7Fはオフィスロビー階だからこれだけ特殊だ
・だから他のボタンとデザインを変えてしまおう
・すると、23階からのボタンの数も偶数になって綺麗に収まる
・一つだけ特殊な7Fのボタンは、横幅いっぱいの大きさにしよう
・そうすればレイアウト的にもキレイに収まる。
・さらに23Fと7Fは少し離れているので、ボタンも少し離そう
・大きなボタンだし、「7」と明確に書いてるし、場所も離してる
・まさか押し間違える人などいないはず

たしかにこれは複雑なデザインではありません。シンプルで分かりやすいデザインです。しかし、システム1が注意力散漫な状態で実行される場合、「分かる」「理解する」という判断自体がほとんど行われない可能性があります。その場合、「分かりやすいデザイン」では十分でなく、「分かる必要すらないデザイン」でなければなりません。また「綺麗に揃えてレイアウトされている」ということとミスの発生とは関係ないことも、この事例は物語っています。

「UIにオリジナリティはいらない」というのはしばしば言われることですが、このことからもそれは言えます。

あえて注意を引く以外、UIは基本的にはシステム1で処理できるものでなければいけません。デザイナーは、時間軸が存在しない静止画の状態で見て、「普通これくらいなら理解できる」と判断し、時に自らの美意識を満たすためのオリジナリティを含めたり、同業者からの評価を集めるための判断を加えたりします。

しかし、ユニークなUIや人目を引く表現を少し加えるだけで、デザイナーが意図したような行動をユーザーがしない(できない)可能性が高まります。高速で処理能力が非常に低いシステム1では「理解する」という能動的な行為そのものが行われないことが多いからです。果たして、そのリスクを冒してまで、その表現を加える必然性はあるのでしょうか。

これをwebサイトの例に置き換えると、もしコンテンツを読んでほしいのであれば、システム2はコンテンツに集中させるべきです。しかし、個性的なレイアウトやアニメーションが人の注意を引き付けてしまうと、システム1では処理できず、UIの操作をシステム2で処理しなければならなくなります。そうすると人はコンテンツに集中できなくなります。

人の間を横切る大きなゴリラに気付かないように、本当に読んでもらいたい大事なメッセージが大きく分かりやすく目立つように配置されているにもかかわらず、それでも目に入ってこない、という状況になります。全体の見た目は奇麗だし、静止画として見る分には論理的な辻褄も合ってて何も問題がない。でも使ってみると情報が何も頭に残らない。操作ミスをしてしまう。オリジナリティが高く見慣れないデザインを選択すると、そういったリスクが高まります。

エレベーターの話に戻りましょう。

一方で私が想定するこのデザイナーさんの考え方は、大きくは間違っていないとも言えます。

実は、私はこのエレベーターで操作ミスをしたことがありません。おそらく多くの人はミスをしないでしょう。しかしディレクターの行動を見ると、同様のミスをする人は他にもいそうとも思います。10人中1人だけ失敗する、という確率では起こっているかもしれません。

エレベーターの電気代は非常に安いそうなので、コスト的な損失はあまりないかもしれませんが、こんなミスを起こす確率をゼロに近づけるデザインが存在するのなら、その方が良いのではないでしょうか?

実際、これを解決するデザインが存在していました。以下は、秋葉原UDXのオフィス棟で使われているエレベーターのボタンです。

このビルも東京日本橋ビルと同じく、1Fではないところにオフィスロビー階があり、そこを経由してオフィス階を行き来する構造になっています。しかし東京日本橋ビルと異なり、オフィスロビーに行くためのボタンは他のボタンと全く同じ大きさで同じ並びで配置されています。ボタンの総数が奇数になる違和感については、「オフィスロビー」という黒いシールを貼ることで解消を試みています。

東京日本橋ビルのエレベーターのボタンと、秋葉原UDXのエレベーターのボタン、どちらが美しく、エレガントなボタンデザインかは、人それぞれの感じ方になるでしょう。(写真が悪いですが、東京日本橋ビルのエレベーターはかなり高級感があります)

しかし、どちらがミスを起こしにくいデザインかといえば、秋葉原UDXに軍配が上がるのは明らかでしょう。そしてエレベーターにおいては、ミスを起こしにくく、利用者が「分かろうとしなくても使えるデザイン」こそが「良いデザイン」ということではないでしょうか。

(余談ですが、アクセシビリティの観点で評価すると、点字が添えられている分だけ東京日本橋ビルの方がまだマシということになります。点字の並びは気になりますが…)

私たちデザイナーは、「見た目を良くすることがデザインではない」と常日頃から口を酸っぱく言われており、実際デザインしているときは、「自分は本質的なデザインをしている」と誰もが思っています。

しかしやはりそれでもデザイナー目線になってしまうとこは避けられず、レイアウトの美しさや収まりの良さなどに気を取られ、シンプルで分かりやすいデザインだからユーザーはちゃんと認識してくれると思い込み、上記のシステム1やシステム2といったユーザー心理まで思い描けずにデザインしてしまうことがあります。

だからこそ近年はUXをちゃんとやろう、という話になってるとは思いますが、ワークショップをやり、ユーザーインタビューを行い、4~5名のユーザー行動を観察し、ペルソナを作り、カスタマージャーニーを書き、プロトタイピングを作って、ユーザーテストをしても、もしかしたら上記のようなUI上の問題には気付かないかもしれません。

UXの手法を表面的になぞるのではなく、もっと本質的な、人間の理解と行動観察、というところに深く踏み込んで手法を検討するなり、思考を深めたりしないと、これは回避できないかもしれません。

このようにアンテナを高く立て、解像度の高い目を持つためには、日ごろから人の行動をつぶさに細かく観察し続けること、何事も疑問を持ち「なぜだろう?」「もしかしてこうなんじゃないか」と考え続ける習慣が必要なのではないかな、と思ったりします。UXやデザインの仕事のヒントの多くは、日常に多く転がっているからです。

なんてことを思い巡らせてくれる、エレベーターのボタンでした。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

332

Tsutomu Sogitani

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
16つのマガジンに含まれています

コメント2件

突然のコメントで失礼いたします。UIUX勉強中の者です。非常に興味深く読ませていただきました。こちらのUI、プロトタイピングの時点で上記の問題に気付けなければ、確かに既に時遅しな気がしています。この「エレベーターのボタン」のUI設計について、プロトタイピング時に問題に気がつくためには、どのような工程、思考、知識が必要とお考えでしょうか?
パスを数えていて気付いたゴリラのことなどはどうでもいいのですが、結局何回だったのか気になる人のことなど知ったことではない、という結論なのでしょうか。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。