インタラクションコストを最小限に抑えて 優れたUIデザインを作るには？
先日、「UIデザイン必携 ユーザーインターフェースの設計と改善を成功させるために」を読了したので、その中から「インタラクションコスト」にフォーカスを当てて様々な記事も参考に深掘りを行なっていきます。
そもそもインタラクションコストとは？
ユーザーがWEBサイトやアプリを利用する際に受ける負担。
サービスを使う際ユーザーは様々な事を考え、理解し、手を動かしながら自分自身の目標を達成しようと試みます。その時にユーザーが受ける負担のことをインタラクションコストと言い、その際のエネルギーが少なければ少ない程、そのサービスは「使いやすい」と言えます。
本書では
【インタラクションコスト＝アタマの負荷＋カラダの負荷】と表現しています。
認知負荷（アタマの負荷）とは
インタラクションコストの中でも、WEBサイトやアプリを利用する上で考えたり悩んだり頭脳的な負担に当たるものを認知負荷と言います。
いわゆる「わかりにくい」という場面です。
認知負荷となる例…
・判断がしにくい
・探さないといけない
・考えて操作しないといけない
具体例1:ボタン
右のボタンのようにボタンであるのが分かりづらく、ユーザーにかかる負荷が多くなってしまいます。左のように見ただけでタップできるとわかるボタンにすることが大切です。
具体例2:入力フォーム
サービスの初回登録などでは、インタラクションコストを下げようと、任意の項目は設けず、ステップ数を減らしている場面が多く見受けれらます。
上はよく見かけるフォームの一例です。
ステップを踏まず1回で登録できるという点においては良いのですが、ステップ数を重視したため入力項目が多くなってしまい、認知負荷は増えます。
上の図は手順が多いですが、認知負荷が軽減される流れになっています。各ステップでの達成感や入力内容の確認が可能なので、認知負荷が低くなります。ただし、目標までの手順数が多くなるためその辺に関しては最後の「認知負荷（アタマの負荷）と身体的負荷（カラダの負荷）の優先度は？」を読んでいただければです。
具体例3:選択時のUI
上の図ではドロップダウンメニューから色やサイズを選択する必要がありますが、この場合だとどのような色のオプションがあるのかはわからなく、ユーザーはその存在に気づかない可能性があります。
そのため、欲しいものを見つけるのが難しくなり、チャンスを逃したりフラストレーションを感じたりする可能性があります。
改良された例では、ドロップダウンメニューではなく、色見本を直接表示することで、ユーザーが選択肢を即座に理解できるようなUIになっています。
具体例4:利用規約の要約
利用規約などの非常に長文で、ユーザーは読むのが疲れるものです。実際、ほとんどのユーザーはこれらの文書を読まずに進んでしまいます。
そんな中、コミッション支援サービスサイトのSkebでは利用規約に要約をつけた施策を行ったそうです。
そうすることで理解しやすくなることはもちろん、誤解による炎上などを防げたようです。
身体的負荷（カラダの負荷）とは
身体的な負荷とは、画面をタップする・スクロールするなど、ユーザーが物理的に体を動かすことで発生する負担を身体的負荷と言います。
いわゆる「使いにくい」という場面です。
身体的負荷となる例…
・移動が多い、遠い
・同じことを繰り返す
・手や指を伸ばす
具体例1:指の可動範囲を考えて作られたUI
iPhoneでは身体的な負担を減らすために、ホーム画面ではよく使用するアプリが画面下部に配置されており、片手で簡単に操作できるように配慮されています。
また、大画面のiPhoneモデルでは、画面上部に配置されたアイテムにアクセスするのが難しいことがありますが、Reachability機能を使うことで、画面を下部に引き下げて操作しやすくなります。
具体例2:One-Click Orderingの導入
注文頻度の高いECサイトなどでは事前に保存された配送先と支払い情報を利用し、1クリックで購入を完了できる機能がよく実装されています。
簡略化できない複雑な設定やプロセスがある場合には、ユーザー側にその作業の労力を負担させるのではなくデザインやシステムで吸収できるようにしましょう。
Amazonの購入ページでは、「届け先」や「支払い方法」「支払いに基づいた住所」などの注文に必要な情報は過去の注文を参照して自動で入力されており、ユーザーは複雑さを感じずに購入作業を行うことができます。
認知負荷（アタマの負荷）と身体的負荷（カラダの負荷）の優先度は？
アタマとカラダのどちらかの負担は軽減できたが、一方で片方の負担が大きくなる…。そんな場面では利用目的によって使い分けすると良いと本書では記載がありました。
①利用頻度が少ない場合＝認知負荷（アタマの負荷）を優先
新規登録フォームなど、一度あるいは少ない回数しか使われないものであれば手数が多くなってもわかりやすさ（アタマの負荷軽減）を優先した方が良いでしょう。
②利用頻度が多い場合＝身体的負荷（カラダの負荷）を優先
何度も使用するものや繰り返し利用する場面では、身体的負荷を減らすことを優先した方が良いでしょう。
ユーザーは利用頻度が多くなるにつれ学習してしまうため、認知負荷が低減されていくからです。
まとめ
インタラクションコストはUIデザインをする上で重要な考え方の一つで、インタラクションコストを下げる意識をすることで、直感的に操作できるWEBサイトをデザインすることができると感じました。
エネルギーをできるだけ使わず、最低限の労力でできるだけ大きい成果を上げるためには、人間の持つ特性を有効活用し、シンプルで一貫性のあるデザインを心がけでいきたいです。
参考URL
インタラクションコストを最小限に抑えて UI デザインを 2 倍良くする
UIデザインをする上で重要な「インタラクションコスト」とは？
270万人が登録、月間5億円が取引される「Skeb」のクリエイターファースト戦略。SNSで広まる仕組みと、「やらないこと」を決めるとユーザー体験が変わる話。
この記事が気に入ったらサポートをしてみませんか？