1.0UX TIMEShttps://uxdaystokyo.com/articles菊池 聡https://uxdaystokyo.com/articles/author/satoshi-kikuchi/rich600338<blockquote class="wp-embedded-content" data-secret="M09w7UCamR"><a href="https://uxdaystokyo.com/articles/affordances/">ユーザー体験向上の鍵！ウェブのインターフェイスにおける6種のアフォーダンス</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/affordances/embed/#?secret=M09w7UCamR" width="600" height="338" title="“ユーザー体験向上の鍵！ウェブのインターフェイスにおける6種のアフォーダンス” — UX TIMES" data-secret="M09w7UCamR" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2016/05/affordances06.png776474インターフェイスにおいて「ユーザーが思わぬところで躓いてしまう、想定通りに使ってくれていない」ということは、意外と多くあります。特に、インターフェイスが複雑なウェブサイトやアプリは、パフォーマンスが落ちてしまいます。今回は、そんな時にユーザー体験を向上させることができる「アフォーダンス」について詳しくお伝えしていきます。 アフォーダンスとは何か アフォーダンスとは、『その物自体がどう取り扱ったらいいかについての強い手がかりを示している』という考えです。ユーザーが説明書などなくても、それ自体がどのような機能なのかを即座に理解することができる状態を指します。 突然ですが、この形を見て「どうすれば何ができるのか」をイメージしてみてください。 ノブをひねればドアが開くということが、直感的にわかるはずです。このように、あなたも日々の生活のなかで多くのアフォーダンスを受け取っています。 「アフォーダンス」という言葉は、元々アメリカの知覚心理学者ジェームズ・J・ギブソンが作りました。そして、UXで有名なD・A・ノーマンが1988年に出版した“The Psychology of Everyday Things”をきっかけに世に広まることとなりました。 機能や利用においてビジュアル的な手掛かりを使い、そのものがどう使われるべきなのかをデザインの側面で示唆する。そのためにアフォーダンスを使うべきだと、ノーマンは述べています。 ※引用元：The Interaction Design Foundation『Affordances』 ウェブのインターフェイスにおける6種類のアフォーダンス アフォーダンスをウェブのインターフェイスで上手に活用する話をしましょう。 ウェブのデザインは、リアルの世界におけるデザインとは違い、表現に制限が出てきます。この制限のなかで、ユーザー体験を向上させるために利用するアフォーダンスを、種類別にご紹介します。 1.明示的なアフォーダンス 言葉や見た目で明示されているケースです。以下は、PayPalの画面で、良い例にあたります。 「空欄には携帯の電話番号を書く」という指示があります。見ただけで、携帯電話番号を入れて下のボタンを押す、ということがわかります。このインターフェイスを使った経験がなくても、何をすべきかを予想することができます。 文字で明示することは、ユーザーの過去の経験に関係なく有効です。ウェブに触れた経験が乏しい人にとってももちろんのこと、過去の経験に前例がないような斬新なインターフェイスを使うシーンで、文字は助けになります。 しかし、注意点があります。明示的なアフォーダンスを多くし過ぎないよう注意しましょう。結果的に、散らかったインターフェイスになったり、当たり前のことを解説し過ぎることで、ユーザーが見下されたような感覚に陥ったりすることがあります。 本当に必要なのか、明示的なアフォーダンスがなければ利用できないのかを考えたうえで、利用しましょう。 2.パターン化したアフォーダンス それまでの経験が積み重なって、共通言語のようになったもの（メンタルモデル）のことです。パターン化したアフォーダンスを使えば、迅速にコミュニケーションをとることが可能です。 以下の表にある色が異なる下線部分のテキストは、「押せる（リンクがある）」場所だとわかります。 言葉の書かれた箱の右に矢印があれば、プルダウンで選択肢が表示されることがわかるはずです。 虫眼鏡の入った箱は、検索ボックスであるということも、容易に想像できるでしょう。 これらのパターン化されたアフォーダンスは、過去の経験によって作り上げられています。 ユーザーがウェブサイトやアプリケーションをたくさん利用するなかで、無意識のうちに無数のアフォーダンスを処理・分析しながら学んでいます。 そのため、まだこれらを学んでいない人には効かない場合もあります。例えば、小さい子どもやお年寄り、ネットアクセス環境が限られている人には通じない可能性があるということも覚えておく必要があるでしょう。 3.隠れたアフォーダンス 隠れたアフォーダンスとは、マウスオーバーやタップなどのような「ユーザーが行動することにより理解できる」ものです。 以下のPinterestの画面をご覧ください。通常の状態では、アフォーダンスは見えません。 しかし、hoverすることでアフォーダンスが出現します。そこで初めて画像をピンすることができます。 左のキャプチャはアフォーダンスが隠れた状態。右はホーバーしたことでボタンが表示された状態です。隠れたアフォーダンスは、複雑なインターフェイスを作る場合に有効です。全ての要素を表示してしまうとゴチャゴチャしてカオスになる場合に使います。一部の要素を通常では見えない状態にしておくことで、使いやすいインターフェイスになります。特に、必須ではない機能をデザインする際に向いています。 ただし、デメリットも存在します。それは、ユーザーが一目でアフォーダンスが現れるかわからない、ということです。そのため、重要なアクションでは利用できません。隠れたアフォーダンスのデザインは、重要なアクションをスッキリさせるために利用します。 4.比喩的なアフォーダンス 比喩的なアフォーダンスとは、実世界に存在するものに例えるデザインです。よく見かけるのは、メールを意味する封筒のアイコンや、電話を意味する受話器のアイコンでしょう。説明がなくても、素早く理解することができます。 注意しなければいけないのは、比喩が人によって違うものに理解されることです。例として、以下にあるNESS のiPhoneアプリを見てみましょう。車のアイコンは、下に記載されている「DIRECTIONS(方向)」という言葉をとっても意味が伝わるでしょうか？ 目的地まで車で行く人には伝わるかもしれませんが、公共の交通機関で誰かと行き方を共有したい人にとってはわかりにくいと思います。もしかしたら、この場合は地図のアイコンのほうがよいかもしれません。 5.偽物のアフォーダンス 偽物のアフォーダンスは、見た目にはクリックできるように見えるのに、本当はクリックできないものです。何かの機能があるように見えるけれど、実際は何もなく単に誤解を与えるものを指します。以下の例を見てみましょう。 テキスト部分に色がついていてリンクしてあるように見えます。しかし、実際はリンクではありません。ユーザーはクリックしても何も起こらないため、混乱するでしょう。このように、偽物のアフォーダンスはユーザーの時間を無駄にします。偽物のアフォーダンスになるようなものがないかを意識して、誤解を受けないようなものに作りかえましょう。 6.ネガティブ・アフォーダンス ネガティブ・アフォーダンスは、機能がないことを意味するアフォーダンスです。もっとも一般的なものは、グレーアウトするケースです。Rdioのアプリの入力画面を見てみましょう。 このパスワードの入力項目は、グレーアウトしています。なぜなら、このままでは入力ができないからです。入力するにはまず、右にある「CHANGE(変更）」のボタンを押さなければならないことを示唆しています。 上記は「変更を保存」ボタンがグレーアウトされています。何も変更していない状態では、保存するものがないためです。グレーアウトにすることにより、ユーザーが次に進むにあたっての必要な手続きを踏んでいないことを、伝えています。ネガティブ・アフォーダンスは、何かのアクションをしてもらう際の補助として有効なのです。 各アフォーダンスを理解して活用しよう アフォーダンスは、ユーザーにとって操作方法の強い手掛かりになります。もし、今まであまり意識せずに、アフォーダンスとなるものを作っていたのであれば、今後は、今回ご紹介した種類別にメリットや注意点を意識してみるとよいでしょう。 アフォーダンスをうまく活用することで、ユーザーがより使いやすいインターフェイスを実現することができるようになります。そして結果的には、サイトやアプリなどのパフォーマンスを向上させることに繋がります。 引用、参照：SMASHINGMAGAZINE『What Is The Most Underrated Word In Web Design?』