第13章

クリックできる場所を隠すな

ボタンがボタンらしく見えなければならない理由

2013年頃、デザイン業界は視覚的な手がかりを、取り除くべき邪魔もののように扱い始めた。影が消えた。枠線が消えた。盛り上がったボタンが消えた。グラデーション、奥行き、質感。一つの要素が別の要素の上にあることを示す手がかりが、次々と消えていった。画面は平坦に、すっきりと、洗練されていった。私の知るデザイナーの多くは、それを気に入った。私もそうだった。だが、ユーザーは間違ったところをタップするようになった。あっという間に広がったのを覚えている。

偶然ではなかった。その年に登場した Apple の iOS 7 は、6年分の視覚的な合図を、たった一度のリリースで iPhone のインターフェースから取り去った。12か月前には、Windows 8 も似たことをしていた。業界の多くが後に続いた。理屈はもっともらしかった。人々はタッチスクリーンに慣れた。初心者向けの補助はもういらない。インターフェースも大人になっていい。影や枠線は本当に補助輪だったのか。それとも、どこをタップするかを伝える唯一のものだったのか。立ち止まって考える人は、ほとんどいなかった。

見た目のスタイルとしてのフラットデザインは生き残った。すべての視覚的な合図を消しても、使いやすさを保てるという考えは、生き残らなかった。その理由には名前がある。そしてデザイナーは、今もその名前を取り違える。

デザイナーは、問題を取り違え続けている

1979年、心理学者の James Gibson は、著書 The Ecological Approach to Visual Perception でアフォーダンスという考えを提示した。Gibson にとって、アフォーダンスとは物と人の関係だった。椅子には座れる。取っ手は握れる。地面の上は歩ける。Gibson が述べた重要な点で、デザイナーが忘れがちなのは、アフォーダンスは見えていてもいなくても存在するということだ。世界についての事実であって、手がかりではない。ドアは、取っ手があろうと平らな板があろうと、何もなかろうと、押すことができる。

Don Norman は1988年、The Psychology of Everyday Things でアフォーダンスをデザインの世界に持ち込んだ。デザイン界はこの概念を気に入り、盛んに使った。ただ、一つ問題があった。デザイナーは意味を誤解しており、Norman 自身も、その混乱の一部は自分が招いたと認めている。1999年には説明を修正し始め、2013年には、より役立つ言葉に置き換えていた。The Design of Everyday Things で、彼はこう書いている。

シグニファイアは、人がそうした可能性をどう見つけるかを示す。シグニファイアとは、何ができるかを伝える、知覚できる目印や合図である。
— Don Norman（英語からの翻訳）

さらに踏み込んで、デザイナーは可能な行為について考えるのをやめ、人が実際に知覚できるものに目を向けるべきだと述べた。

重要なのは、その点だ。操作自体は可能かもしれない。でも、その操作に気づく助けになるのは手がかりだ。何十年も、自分の用語が誤って使われるのを見てきた Norman の結論は単純だった。デザイナーにとって大切なのは、人に何が見えるかだ。

示しても示さなくても、できる操作は存在する。人がその操作を見つけるには、手がかりがいる。ボタンがタップできそうに見えれば、合図は役割を果たしている。見出しに見えてしまえば合図は失われ、ユーザーは押すのか引くのか迷うことになる。

会議でデザイナーが「アフォーダンスを足す必要がある」と言うとき、ほぼ必ず、シグニファイアを足すことを意味している。言葉が違う。数え切れないほど聞いてきた混同だ。この区別が大切なのは、デザインをすっきりさせすぎると何が失われるのかを説明してくれるからだ。

フラットデザインが問題を露わにした

Nielsen Norman Group は、iOS 7 の正式なユーザビリティ評価を発表し、実際のユーザーの行動を見ていれば予想できたであろうことを確認した。ユーザーは、操作できる要素と飾りの要素を見分けるのに苦労していた。文字に見えるボタンは見過ごされた。フラットな見た目を取り入れたアプリでは、どこから行動すればよいのか、NNG の言葉で言えば「判断しにくい」（英語からの翻訳）というインターフェースが生まれた。

人々は、何年もしてきた操作でつまずき始めた。アフォーダンスは変わっていない。ボタンをタップすれば、以前と同じように動く。Apple が取り去ったのは、シグニファイアだった。操作はできる。ただ、人々がそれを見落とした。

リンクがラベルに見える。タブが説明文に見える。操作部品が普通の文章に溶け込む。動作は同じままなのに、画面は、人々が覚えてきた視覚の言葉を話さなくなった。コントラスト、輪郭、ハイライト、強調、質感といった、なじみのある目印が抜き取られていた。

NNG は、Windows 8 もその1年前に同じ問題を起こしたと指摘している。パターンは明確だった。すっきりした見た目のために手がかりを取り去ると、その代償を払うのはユーザーだ。立ち止まる。間違ったところをタップする。諦める。Apple はその後の iOS で方向を修正し、奥行きやコントラストを戻して、操作できる要素を再び読み取れるようにした。

平坦な見た目は残った。手がかりをすべて取り除くという考えは、残らなかった。それでも今なお、ただの文字ラベルが、実は主要な操作の入口になっている画面を見る。

黙ってクリックを見てみよう

簡単で、費用のかからないテストがある。「無言の使いやすさチェック」とでも呼ぼう。つくった人ではない誰かに、インターフェースを見せる。何も言わない。指ささない。説明しない。ただ見る。

ためらう瞬間には、シグニファイアが足りない。間違ったタップには、誤った合図がある。操作できそうなのにできないもの、ただの表示に見えるのに操作できるものだ。指を何かに向けてから止めるたびに、デザインのどこかが役割を果たしていない。

黙って見る理由は単純だ。口を開いた瞬間、インターフェース自身が伝えられなかったことを、代わりに補ってしまうからだ。デザイナーはユーザビリティテストで、気づかずにこれをする。「あ、そのボタンは上にあります」「そうですね、先に下へスクロールしてください」。こうした助けの一つひとつが、問題を物語っている。その仕事は、プロダクトがすでに果たしているべきだった。

私もいまだに、指さしたくなる。

Gibson の椅子や Norman のドアを、この場面に当てはめるとこうなる。操作は可能だ。問題は、ユーザーがそれを見つけられるかどうかだ。それがシグニファイアの仕事だ。黙って見ていて誰もためらわなければ、手がかりが役割を果たしている。身を乗り出して指さしたくなるなら、果たしていない。

私にとって、これは弱いインターフェースを見つける最も速い方法の一つだ。

すっきりした画面でも、人は迷う

インターフェースの見た目をすっきりさせるほど、何を残すかには注意が必要になる。取り除く影は、奥行きの手がかりだ。消す枠線は、境界だ。平坦にするグラデーションは、押せそうに見えていた面だ。その多くは取り除いていい。取り除いてはいけないものもある。その違いは、人が使うところを見て初めてわかる。枠線だけで十分な場合もある。コントラスト、塗り、下線、カプセル形、小さなアイコンで伝わる場合もある。飾りが目的ではない。どこで操作できるかを、画面が伝え続けることが目的だ。

うまく示せていてもいなくても、操作の選択肢はそこにある。注意を向けるべきなのは、シグニファイアだ。何をすればよいかわかる人と、立ち止まってしまう人を分けるのは、それなのだから。

誰も使えない、すっきりした画面は、美しく仕上げられた鍵のかかったドアでしかない。