第2章 読まなくても分かる — 手がかりを置き、記憶に頼らず、アイコンには言葉を添える
連載の入口 → UI設計の基礎
ひとことで
説明文を読まなくても、見れば「何ができるか」「どう操作するか」が分かる画面にします。文字を減らすのであって、文字をなくすのではありません。
なぜ
人は画面の文章を読みません。NN/g が1997年に発表した調査の題は「人は Web をどう読むか」、答えは「読まない。拾い読みする」でした（How Users Read on the Web）。説明文で使い方を補おうとしても、その説明文が読まれないのです。
ソシオメディアのガイドラインも「使い方を説明するより、使い方が自明なインターフェースにする」という立場で書かれています。NN/g の10原則の最後、10番目は「ヘルプと文書（Help and Documentation）」ですが、要点は「文書が要らないのがいちばん。要るなら探しやすく、作業に沿った形で」です。くわしくは第7章の「助けは必要な場所に短く」で扱います。
三つの手段
1. 手がかり（シグニファイア）を置く
押せるものは押せそうに、入力できるところは入力できそうに見せます。この「見せる手がかり」を、ノーマンはシグニファイアと呼びました（『誰のためのデザイン？ 増補・改訂版』）。ソシオメディアのガイドラインにも「シグニファイア」の項があります。
| 手がかりがない | 手がかりがある |
|---|---|
| 文字だけのボタン。周りの文章と区別がつかない | 枠と色がついていて、押せそうに見える |
| 入力欄が線一本で、どこに書けばいいか分からない | 枠で囲まれ、空欄が見える |
| リンクが本文と同じ黒い文字 | 下線と色で「飛べる」と分かる |
| 横にスクロールできるが、はみ出しが見えない | 次の要素が少し見切れていて、続きがあると分かる |
2. 記憶に頼らない
前の画面で見た番号や、さっき出たメッセージを、利用者が覚えている前提で作ってはいけません。
システムが表示するメッセージの内容やプロパティの値などについてユーザーが覚えていることを前提にしてはいけない。 参照すべき情報はそれが必要となるその場で参照できなければいけない。
— ソシオメディア「ユーザーの記憶に頼らない」
NN/g の10原則では6番目「記憶より認識（Recognition Rather than Recall）」にあたります。選択肢は見せる、エラーは起きた場所のそばに出す、前の画面の値は次の画面にも出す、が具体策です（Recognition vs. Recall in UX）。
3. アイコンには言葉を添える
「読まなくても分かる」を「アイコンだけにする」と取り違えると、逆に分からなくなります。NN/g は、ほとんどのアイコンに標準の意味はなく、曖昧さを消すにはテキストラベルが必要だと言い切っています。
To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning.
— NN/g「Icon Usability」
デジタル庁デザインシステムも、ボタンには「テキストのラベルを持たせることを原則」とし、アイコンだけのボタンを使わざるを得ないときは「必ず代替テキストを指定」するとしています（ボタン: アクセシビリティ）。
例外として扱えるのは、虫眼鏡（検索）や ×（閉じる）のように、世の中で意味が固まっているごく少数のアイコンだけです。それでも画面には見えない代替テキストは必要です（第6章）。
避けたい例と改善例
| 避けたい例 | 改善例 |
|---|---|
| 画面の上に「このページの使い方」が5行ある | 使い方が要らないように、ボタンの言葉と並び順を直す |
| アイコンが8個並んだツールバー。意味は長押しで出る | アイコンの下に短い言葉を添える。使わないものは外す |
| 「前の画面で表示された申込番号を入力してください」 | 申込番号を次の画面にも表示する。入力させない |
| 入力エラーが画面の一番上にまとめて出る | エラーはその入力欄のすぐそばに出す |
| 設定項目の意味を説明するアイコン「?」が各行にある | 項目名を、説明なしで分かる言葉に変える |
やってみる
AI に作らせた画面を、初めて見る人に3秒だけ見せて「この画面で何ができる？」と聞いてください。答えられなければ、手がかりが足りません。この「3秒テスト」はこの連載の提案で、出典のある手法ではありませんが、説明文を読む前の第一印象を測るには十分です。
出典
- NN/g「How Users Read on the Web」
- ソシオメディア「シグニファイア」「ユーザーの記憶に頼らない」
- NN/g「Recognition vs. Recall in UX」「Icon Usability」
- デジタル庁デザインシステム「ボタン: アクセシビリティ」
- D. A. ノーマン『誰のためのデザイン？ 増補・改訂版』（新曜社）
次の章 → 言葉とスイッチ