ユーザー体験の向上の鍵！ウェブのインターフェイスにおける6種のアフォーダンス
ウェブのインターフェイスにおいて「ユーザーが思わぬところで躓いてしまう、想定通りに使ってくれていない」ということが、意外と多いものです。特にインターフェイスが複雑なウェブサイトやアプリほど、パフォーマンスが落ちてしまいがちなのではないでしょうか。
今回は、そんな時にユーザー体験を向上させることができるアフォーダンスについて詳しくお伝えしていきます。
アフォーダンスとは何か
アフォーダンスとは、その物自体がどう取り扱ったらいいかについての強い手がかりを示している、という考えです。ユーザーが説明書などなくても、それ自体がどのような機能なのかを即座に理解することができる状態を指します。
突然ですが、この形を見て「どうすれば何ができるのか」をイメージしてみてください。
ノブをひねればドアが開くということが直感的にわかるはずです。このように、あなたも日々の生活のなかで多くのアフォーダンスを受け取っているのです。
この「アフォーダンス」という言葉ですが、元々はアメリカの知覚心理学者ジェームズ・J・ギブソンが作った言葉です。D・A・ノーマンが1988年に出版した“The Psychology of Everyday Things”をきっかけに世に広まることとなりました。機能や利用においてビジュアル的な手掛かりを使い、そのものがどう使われるべきなのかをデザインの側面で示唆する。そのためにアフォーダンスを使うべきだとノーマンは述べています。※
ウェブのインターフェイスにおける6種類のアフォーダンス
ここから本題の、アフォーダンスをウェブのインターフェイスでも上手く活用していきましょう、という話にうつります。ウェブの場合、リアルの世界のなかとは違って表現に制限が出てくるものです。そんななか、ユーザー体験を向上させるためのアフォーダンスを種類別にご紹介していきます。
1.明示的なアフォーダンス
言葉や見た目で明示されているケースです。以下のPayPalの画面が良い例でしょう。
空欄には携帯の番号を書くという指示があります。見ただけで、携帯電話番号を入れて下のボタンを押すということがわかりますよね。このインターフェイスを使った経験がなくても、何をすべきかを予想することができます。
文字で明示することについては、特にユーザーの過去の経験に関係なく有効です。Webに触れた経験が乏しい人にとってはもちろん。過去の経験に前例がないような革新的なインターフェイスを使うシーンで、文字は助けになるのです。
しかし、ページ内に明示的なアフォーダンスが多くなりすぎないよう注意しましょう。散らかったインターフェイスになったり、当たり前のことを解説しすぎてユーザーが見下されたような感覚に陥ったりすることがあります。
本当に必要なのか、明示的なアフォーダンスがなければ利用することができないのかを考えたうえで使っていくようにしましょう。
2.パターン化したアフォーダンス
これまでの経験が積み重なって、共通言語のようになったもののことです。パターン化したアフォーダンスを使えば、迅速にコミュニケーションをとることが可能です。あなたも、以下のようなものを見れば、何を表すかイメージできるのではないでしょうか。
こちらの色が異なる下線部分のテキストは「押せる」場所だとわかります。
言葉の書かれた箱の右に矢印があればプルダウンで選択肢が表示されることがわかるはずです。
虫眼鏡の入った箱は、検索ボックスであるということも容易に想像できるでしょう。
これらのパターン化されたアフォーダンスは、過去の経験によって作り上げられています。
ユーザーがウェブサイトやアプリケーションなどをたくさん利用するなかで、無意識のうちに無数のアフォーダンスを処理・分析しながら学んでいっているのです。
そのため、一部の人には効かないこともあります。小さい子どもやお年寄り、ネットアクセス環境が限られている人などには通じない可能性があるということも、覚えておく必要があるでしょう。
3.隠れたアフォーダンス
隠れたアフォーダンスは、マウスオーバーやタップなどユーザーが何等かの行動をすることによりクリックできることがわかるものです。以下のPinterestの画面をご覧ください。通常の状態では、アフォーダンスは見えません。
ホーバーすることで、アフォーダンスが出現します。そこで初めて画像をピンすることができるのです。
左のキャプチャはアフォーダンスが隠れた状態。右はホーバーしたことでボタンが表示された状態。
隠れたアフォーダンスは、複雑なインターフェイスを作る場合に有効です。全ての要素を表示してしまうとゴチャゴチャしてみえるようなときに使いましょう。一部の要素を通常では見えない状態にしておくことで、使いやすいインターフェイスになるはずです。特にサイトを使うにあたって必須ではない機能の存在を、控えめに伝えることに向いています。
問題は、ユーザーが一目でアフォーダンスが現れるかわからない、というところにあります。そのため、重要なアクションでは利用してはいけません。むしろ重要なアクションの周りをスッキリさせるためのものなのです。
4.比喩的なアフォーダンス
実世界に存在するものに例えるケースです。よく見かけるのはメールを意味する封筒のアイコンや、電話を意味する受話器のアイコンでしょう。説明がなくてもすばやく理解することができますよね。
注意しなければいけないのは、比喩が人によって違うものに理解されることです。例として、以下にあるNESS のiPhoneアプリを見てみましょう。車のアイコンは、下に記載されている「方向」という言葉をとっても意味が伝わるでしょうか。
目的地まで車で行く人には伝わるかもしれませんが、公共の交通機関で誰かと行き方を共有したい人にとってはわかりにくいと思います。地図のアイコンのほうがよいかもしれません。
5.偽物のアフォーダンス
見た目にはクリックできるように見えるのに、本当はクリックできないものです。何かの機能があるように見えるけれど、実際は何もなく単に誤解を与えるものを指します。以下の例を見てみましょう。
テキスト部分に色がついていて、別ページにリンクしてあるように見えます。しかし実際はリンクではありません。ユーザーはクリックしても何も起こらないため、混乱するでしょう。このように、偽物のアフォーダンスはユーザーの時間を無駄にします。偽物のアフォーダンスになるようなものがないかを意識し、誤解を受けないようなものに作りかえましょう。
6.ネガティブ・アフォーダンス
ネガティブ・アフォーダンスは、機能がないことを意味するアフォーダンスです。もっとも一般的なのはグレイアウトするケースです。Rdioのアプリの入力画面を見てみましょう。
このパスワードの入力項目は、グレイアウトしています。なぜなら、このままでは入力ができないからです。入力するにはまず、右にある「変更」のボタンを押さなければならないことを示唆しているのです。
こちらは「変更を保存」ボタンはグレイアウトしています。なぜなら、何も変更していない状態では変更するものがないからです。グレイアウトにすることによって、ユーザーが次に進むにあたって必要な手続きを踏んでいないことを伝えているのです。
このように、ネガティブ・アフォーダンスは何かのアクションしてもらう際の補助として有効なのです。
それぞれのアフォーダンスのメリットを理解して活用しよう
アフォーダンスはユーザーにとって操作方法の強い手掛かりになります。もし今まであまり意識せずに、アフォーダンスとなるものを作っていたなら、今後は、今回ご紹介した種類別にメリットや注意点を意識してみるようにするとよいでしょう。アフォーダンスをうまく活用することで、ユーザーがより使いやすいインターフェイスを実現することができるようになります。そして結果的には、サイトやアプリなどのパフォーマンスを向上させることにつながるはずです。