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

今回のテーマは、道具の使い方が伝わるしくみです。「どこを操作できるか」と「操作すると何が起きるか」が分かれば、初めて使う人も迷いにくくなります。身近な扉の例から、Webサイトの画面へつなげて考えます。

ガラスの扉の前で、押すか引くか迷ったことはありませんか。取っ手や蝶番が見えなければ、どちら側を動かすのかも分かりにくくなります。ふだん何気なく使う扉にも、UI/UXの考え方が働いています。

認知科学者のドナルド・A・ノーマンは『誰のためのデザイン？ 増補・改訂版：認知科学者のデザイン原論』の第1章で、扉の開け方に迷った友人の話を紹介しています。使い方に迷ったときは、使う人の注意力だけでなく、道具に必要な手がかりがあるかも確かめたいところです。私たちサンアンドムーンがUI設計の出発点を「手がかりを、道具の側に置くこと」と考えるのは、説明を覚えた人だけが使える道具にしたくないからです。

この記事の要点

• 使い方に迷ったときは、道具の側に必要な手がかりがあるかを確かめる
• 操作の場所を見つけることと、操作の意味を理解することは別に考える
• Webでは、形や文字に加え、慣れた操作方法や操作後の反応も手がかりになる

発見可能性と理解──操作の場所と意味を伝える

発見可能性（discoverability）とは、何ができ、どこで、どう操作すればよいかを見つけられることです。理解とは、その操作や道具のしくみが何を意味するか分かることです。ノーマンは、この2つを良いデザインの重要な特徴として挙げています。

たとえば券売機で、押せる場所が光っていても、券の種類の違いが分からなければ選べません。反対に、買う券が決まっていても、選ぶためのボタンが見つからなければ操作できません。

「押せる場所を目立たせる」と「押したら何が起きるかを伝える」は、別の工夫です。場所だけが分かる画面にも、説明だけが詳しい画面にも、迷う余地が残ります。両方を確かめることで、必要な改善が見えてきます。

迷ったときは、足りない手がかりを探す

操作部が背景と同じように見えれば、そこを押せることに気づかないかもしれません。押したあとに何も変わらなければ、操作が届いたか分からなくなります。操作の前と後のどちらで迷ったかを分けると、足りない手がかりを探しやすくなります。

ノーマンは扉の例で、押す側に板を付けたり、支柱を見せたりする方法を挙げています。文字を足すだけでなく、形から使い方が分かるようにする考え方です。ただし、どの道具も文字なしで説明できるという意味ではありません。形や位置で伝わる部分と、言葉で補う部分を分けて考えます。

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

ノーマンは第1章で、発見可能性を支える5つの概念を整理しています。

• アフォーダンス（affordance）：人と物の関係として「できること」。椅子が体を支えられるため、人が座れることなどです
• シグニファイア（signifier）：できることを知らせる手がかり。取っ手の形やボタンの表示などです
• 制約（constraint）：できる操作を限り、選択肢を絞る働きです
• 対応づけ（mapping）：操作と対象の関係。スイッチと照明の並びをそろえると、どれを押せばよいか伝わります
• フィードバック（feedback）：操作の結果を知らせる反応。送信後の完了メッセージなどです

「できること」と「できると分かること」の違いは、アフォーダンスとシグニファイア──「押せそう」を伝えているのは、どちらか｜デザインの原則 #2で扱います。

さらに6つ目として、概念モデル（conceptual model）が挙げられます。ものがどう動くかを簡単に説明した筋書きで、しくみの理解を助けます。たとえば、フォームは「入力して確認し、送信すると相手に届く」と分かれば、各画面の役割も理解しやすくなります。ノーマンは、真の理解を与えるものとして概念モデルを重視しています。

画面では、慣れた操作方法も手がかりになる

画面のボタンには、扉の取っ手のように握って確かめられる形がありません。指で触れる面は平らでも、枠線や下線から「ここを押せる」と判断できます。

ノーマンはAffordance, conventions, and designで、画面の図形を描くだけでは、クリックできるという行為の可能性そのものは増えないと説明しています。使う人が操作の場所を判断するうえで重要なのは、慣習やフィードバックです。

慣習とは、多くの人が経験を通じて覚えた約束ごとです。下線付きの文字をリンクと考えたり、スクロールバーを動かせば続きが読めると分かったりすることが、その例です。ただし、経験が違えば通じないこともあります。

同論文は、画面の設計に使える制約を、物理的・論理的・文化的の3つに分けています。カーソルが画面の外へ出られないのは物理的制約。「5項目ある」と分かっていて4項目しか見えなければ、続きを探せるのは論理的制約です。スクロールバーの使い方のような約束ごとは、文化的制約にあたります。

慣れた操作を変えるときは、「新しいほうが分かりやすいはず」と決めず、使う人が実際の場面で迷わず操作できるかを確かめます。

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

まずは、初めて開く人に次の3点が伝わるかを見てください。これだけでサイト全体の使いやすさを判断できるわけではありませんが、確認の出発点になります。

1. 何ができるページか。「資料を請求する」「事例を見る」など、目的が分かるか
2. どこを操作するか。ボタンやリンクを、普通の文字や飾りと区別できるか
3. 操作後に何が起きたか。処理中や送信完了が表示されるか

リンクを色だけで示すと、色の違いを見分けにくい人には伝わりにくくなります。W3CのUnderstanding SC 1.4.1: Use of Colorも、情報を色だけで伝えず、別の可視的な手がかりを用意することを説明しています。下線などの手がかりもあるか確認しましょう。

また、送信後に反応がなければ、届いたか不安になり、もう一度押す可能性があります。「送信中です」などの表示を検討できます。

注意点

手がかりを増やすだけでは、分かりやすくなるとは限りません。すべてのボタンや注意書きを強調すると、先に見る場所を選びにくくなります。最初にしてほしい操作が伝わるかを確かめてください。

毎日使う業務システムと、年に一度の申請フォームでも、必要な説明は違います。慣れた人の操作の速さと、初めて使う人の分かりやすさを、実際の使われ方に合わせて考えます。

よくある疑問

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

発見可能性は、操作を見つけられるかという性質です。アフォーダンスは、人と物の間でできる行為を指し、発見可能性を支える5つの要素の1つです。

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

装飾を減らしても、操作の場所や選択中の状態が伝われば問題ありません。それらまで分からなくなるなら、必要な手がかりを削っている可能性があります。

手がかりを足すと、見た目が混みませんか

文字だけで補う必要はありません。ボタンの形、関連する要素の近さ、周囲の余白でも関係を伝えられます。見た目と使いやすさを両方確かめます。

関連する考え方は、誤操作の8割は、設計のせい｜スリップ vs ミステイクと人は過去の経験と予想に基づいて行動する：メンタルモデルについてでも扱っています。UI／UXコンサルティングでは、実際の画面をたどり、迷う場所と手がかりを一緒に確かめます。

執筆・監修

中谷 浩和

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

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