発見可能性と理解──使い方が見ただけで伝わる設計｜デザインの原則 #1

今回のテーマは、道具の使い方が伝わるしくみです。使い方が分からないのは、使う人の不注意ではなく、道具の側に手がかりが足りていないからです。「見つけられること」と「腑に落ちること」。この2つの違いから、Webサイトの画面へつなげていきます。

ガラスの扉の前で、押すか引くかを一瞬迷ったことはないでしょうか。取っ手も、蝶番も、縦の板も見えず、美しく仕上がった扉ほど、どちら側に手を当てればいいのかが分かりません。認知科学者のドナルド・A・ノーマンは『誰のためのデザイン？ 増補・改訂版：認知科学者のデザイン原論』の第1章を、この扉につかまった友人の話から始めています。

迷ったのは、その人がうっかりしていたからではありません。押す側を教える印が、扉の上に置かれていなかった——理由はそれだけです。私たちサンアンドムーンがUI設計の出発点を「手がかりを、道具の側に置くこと」に置くのは、説明を覚えた人だけが使える道具を作りたくないからです。

この記事の要点

• 使い方が分からないときは、使う人の注意力ではなく、道具の側に手がかりが足りているかを先に見る
• 発見可能性と理解は別のもので、「どこを押せるか」が分かっても「それが何を意味するか」が分からなければ、道具は使えないままになる
• 画面には触って分かる手がかりが乏しいため、Webサイトでは制約と慣習が発見可能性を支えている

発見可能性と理解──道具が備える2つの性質

ノーマンは、良いデザインの最も重要な特徴として、発見可能性（discoverability）と理解の2つを挙げています。前者は「そもそもどんな操作ができるのか、それをどこで、どうやって行うのかを見つけられるか」を指します。後者は「それは何を意味するのか、この製品はどう使われることを想定しているのか、並んでいる操作部はそれぞれ何を表しているのか」という問いに答えられるかどうかです。

この2つは、ふだんまとめて「分かりやすい」と呼ばれていますが、支えているものははっきり違います。券売機の画面で押せる場所がはっきり光っていても、そこに並んだ券種の違いが読み取れなければ、人は指を止めたまま動けません。逆に、何を買えばいいかは分かっているのに、それを選ぶ操作がどこにあるのか見つからないこともあります。

つまり発見可能性は「入口が見えているか」、理解は「入ったあとの見取り図があるか」。前者だけを整えると、迷わず押せるのに何が起きたか分からない画面になります。後者だけを整えると、説明は親切なのに操作の場所が探せない画面になります。両方そろって、はじめて道具は「使える」ものになるのです。

迷いは、手がかりが足りないところで起きる

操作につまずいたとき、人はまず自分を責めます。「私はこういう機械に弱くて」「よく読まないから、いけないんですよね」。実はこれ、扉の話とまったく同じ構図です。押す側を示す縦板が無かっただけなのに、押せなかった人の側に理由を探してしまう。

見えていないものは、探しようがありません。操作部が背景に溶け込んでいれば、そこに操作があること自体に気づけない。押した後に何も変わらなければ、届いたのか届いていないのかを確かめる方法がない。注意力や慣れの問題に見える出来事の多くは、こうして手がかりが欠けた場所で起きています。誤操作を人の性質と設計の両面から扱った誤操作の8割は、設計のせい｜スリップ vs ミステイクも、同じ見方に立っています。

ノーマンは扉の解決策として、押す側に縦の板を付けるか、支柱を見えるようにすればいいと書いています。ラベルは要りません。「PUSH」と貼るのは、形が伝えそこねたぶんを文字で埋め合わせる作業だからです。責任をどこへ置くかという話そのものは、この連載の後半でもう一度扱います。

使い方を伝える5つの手がかり

発見可能性は、5つの心理的な概念が適切に働いたときに生まれる。ノーマンは第1章でそう整理し、さらに6つ目として概念モデルを置いています。この連載は、その並びをそのまま道しるべにします。

1つ目がアフォーダンスで、物と、それを使う人との間に成り立つ「できること」の関係です。椅子は支えることができるから、座ることができる。ただし、画面の上で見た目が伝えているのは、その関係そのものではなく、関係を知らせる手がかりのほうです。この手がかりを、ノーマンはシグニファイアと呼んで区別しました。2つの違いは次回、「アフォーダンス」は、優れたUI/UXの静かなナビゲーターを書き直しながら扱います。

3つ目が制約で、できないことをあらかじめ閉じておく働きを指します。4つ目が対応づけで、つまみの並びと、それが動かす対象の並びをそろえ、説明なしに関係が読めるようにする考え方です。5つ目のフィードバックは、操作が届いたことをその場で返すしくみで、フィードバックがないと、人は続けられない｜反応の即時性で詳しく書いています。

そして6つ目が概念モデルで、「この機械は、たぶんこういうしくみで動いている」という、使う人が頭の中に組み立てる筋書きです。ノーマンはこれを、おそらく最も重要なものとし、真の理解を与えるのは概念モデルだと述べています。人が持つ予想そのものについては人は過去の経験と予想に基づいて行動する：メンタルモデルについてが扱っており、UI全体の考え方を先に俯瞰したい方にはUIデザインに“センス”は不要？──本質を押さえる7つの原則があります。

画面の上では、手がかりが慣習に置き換わる

物の手がかりは、手で触れて確かめられます。ところが画面の上で指が触れているのは、どこまでも平らなガラスだけです。ここが、扉と画面のいちばん大きな違いになります。

ノーマンはAffordance, conventions, and design（Interactions 6(3)、1999年）で、この点をはっきり書いています。画面上のグラフィックが「クリックできるというアフォーダンスを持つ」という言い方は誤りである、と。どこをクリックしても、クリック自体はできてしまうからです。そこで働いているのはアフォーダンスではなく、慣習とフィードバックのほうだ、というのが同論文の整理でした。

同じ論文は、設計者が画面で使える道具として3種類の制約を挙げています。カーソルが画面の外へ出られないような物理的制約、5か所を押すよう求められて4か所しか見えなければ残りは画面の外だと推測できるような論理的制約、そして文化的制約です。右端の細長い図形をつかんで下へ動かせば先が読める——というスクロールバーの約束ごとは、この文化的制約にあたります。

慣習は、共同体の中で時間をかけて育つものです。ノーマンは、慣習は採用されるのも遅く、いったん採用されると消えるのも遅いと書いています。だからこそ、独自の操作方法を思いついたときほど慎重になったほうがよさそうです。「みんな知っているはず」で済ませず、使う人がその約束ごとを本当に共有しているかを、実際の場面で確かめる必要があります。

自分のサイトで、どこから確かめるか

自分のサイトなら、難しい道具を使わずに、3つを順番に見るだけで足ります。初めて開いた人の目になって、上から順にたどってみてください。

見るのは、そのページで何ができるかを数秒で言えるかどうかです。トップへ戻ってから、口に出して言ってみると分かります。「資料を請求できるサイト」なのか「事例を見るサイト」なのか、迷わず言えないなら、発見可能性のほうが足りていません。

押せるものが押せると分かるかどうかも、同じ場所で確かめられます。文字の色だけで押せる場所を示していると、色の見え方が違う人には手がかりが1つも残りません。そのうえで、押した後に何が起きたかが返っているかを見ます。送信ボタンを押してから画面が変わるまでの数秒に何も出ないままなら、人は同じボタンをもう一度押します。サンアンドムーンの観察では、フォームの二重送信はこの空白の時間に集まっています。

注意点

手がかりを足せば、それだけ分かりやすくなるとは限りません。押せる場所を目立たせ、説明を添え、注意書きを重ねていくと、画面はやがて手がかりだらけになります。「全部を目立たせた画面」は、何も目立たない画面と変わりません。ノーマンが扉の解決策を「ラベルは要らない」と書いたのも、文字を足す前に形で伝えられないかを試すためでした。

もうひとつ、評価が利用状況で変わることも見落とせません。毎日使う業務システムと、年に一度だけ開く申請フォームでは、覚えてもらってよい量が違います。前者では手がかりを減らして操作を速くしたほうがよく、後者では初めて開いた人に合わせたほうがよい。どこに寄せるかは、使われ方を見てから決めることになります。

よくある疑問

発見可能性とアフォーダンスは何が違うのですか

発見可能性は「操作を見つけられるか」という結果のほうを指し、アフォーダンスはそれを支える要素の1つです。ノーマンの整理では、アフォーダンス、シグニファイア、制約、対応づけ、フィードバックの5つが適切に働いたときに、発見可能性が生まれます。どれか1つの言い換えではありません。

シンプルにするほど分かりやすくなりますか

要素を減らすことと、手がかりを減らすことは別です。装飾を削っても操作の場所が分かるなら、それは要素を減らしただけです。削った結果、「いま何が選ばれているのか」が読めなくなったなら、手がかりのほうまで削っています。冒頭の扉は、線も支柱も見えない状態まで整えられた結果として、押す側が分からなくなりました。

手がかりを足すと、デザインが野暮ったくなりませんか

かならずしもそうはなりません。ノーマンは扉の例で、縦の板を付けるか支柱を見せるという方法を示し、これらは美しさを損なわないと書いています。手がかりを文字で足すと画面は混みますが、形・位置・余白で足すぶんには、見た目の静けさと両立します。

このあたりを自分の画面で確かめたい方は、あわせて誤操作の8割は、設計のせい｜スリップ vs ミステイクと人は過去の経験と予想に基づいて行動する：メンタルモデルについてをご覧ください。私たちはUI／UXコンサルティングで、実際の画面をたどりながら、どこで手がかりが切れているかを一緒に探しています。

執筆・監修

中谷 浩和

株式会社サンアンドムーン｜代表取締役

1976年創業のデザイン事務所を前身に、Webコンサルティング・UI／UXデザインを専門とする。国際標準のUX設計プロセスを学ぶ Google UX Design Professional Certificate を取得し、上級ウェブ解析士 としてデータ主導のサイト改善にも精通。デザイン思考を軸に、ユーザー認知・行動・文脈からWebサイトの課題を捉え直し、成果につながる設計へ落とし込むことを使命としている。システム設計、フロントエンド技術、SEO・パフォーマンス改善まで技術知識を横断し、サイト全体を見通したディレクションを得意とする。自動車メーカー、銀行・クレジットカード、保険などの大手から中小企業まで、数値で検証しながら改善を積み重ねる実践的なコンサルティングを提供している。