「インタラクションデザインってなに？」「最近聞くようにはなったけど具体的にはさっぱり」
聞き覚えのない人も実は多いのではないでしょうか。
インタラクションデザインは私たちにとって切り離せないものです。
専門的にインタラクションデザインを学ぶ人も増えてきました。
インタラクションデザインはユーザーの動作を考えたデザインです。
パソコンをはじめとした「機械：人」の環境を整えてくれます。
使いやすいデザイン、購買につながりやすいデザイン、ストレスを減らすデザイン。
様々なインタラクションデザインが世の中にあふれています。
具体的な例を使ってインタラクションデザインを解説します。
インタラクションデザインとは何か
インタラクションデザインの定義は、技術的・生物学的・環境・組織・サービスなど様々な分野での対話（＝インタラクション）を生成する模範です。
(英語の「inter（相互に）」と「action（作用）」を合成したもの)
インタラクションデザインは人間が行動したことに対してシステムが正しく反応することです。
人とインターフェースをつなぐ時に見た目が分かりやすく設計されています。
インタラクティブを辞書で引いてみると「対話」や「双方向」と出てきます。
一方通行ではなく指示をすれば答えが返ってくる動的なイメージです。
- ① 人がこれをやってほしいと意図する
- ② 機械が理解し反応する
- ③ 満足のいく答えが得られる
これがインタラクションデザインの基本です。
次にインターフェースについてもまとめてみましょう。
一般的に、ハードウェアインターフェース・ソフトウェアインターフェース・ユーザーインターフェースがあります。
1-1.ハードウェアインターフェース Hardware Interface
複数の機器を接続し通信する際の規格で、電気信号や接続するツールの形状を決めたもの。
機械と機械を接続する部分の端子。
パソコン内部のデータのやり取りやパソコンと周辺機器のデータのやり取り、パソコン間の通信など用途に合わせたインターフェースがあります。
1-2.ソフトウェアインターフェース Software Interface
アプリケーションソフト同士やアプリケーションソフトとOS（オペレーティングシステム）間のデータのやり取りのための手順・データ形式のこと。
アプリケーション同士やソフト同士で行われる処理のことです。
エンジニアが使うAPI（アプリケーション・プログラミング・インターフェース）などがそうです。
1-3.ユーザーインターフェース User Interface
ユーザーとコンピュータとが情報をやり取りをする際に接する、機器やソフトウェアの操作画面や操作方法を指します。
ハードウェアではキーボード、マウス、ディスプレイなどがこれを指し、ソフトウェアでは画面上のメニュー、アイコン、ウィンドウなどの操作方法がこれに当たります。
UIと呼ばれ、人と機械を結びつけます。
スマートフォンもインターフェースの一つです。
より私たちが指示しやすいように設計されたデザインになっています。
これは人間の行動原理、心理学を考え抜いた結果です。
使いやすいデザインにするには、課題を見つけ出さなければなりません。
カランを上げれば水が出て、下げれば止まります。
突然、カランの操作が逆になれば戸惑いますよね。
ユーザーがごく自然に戸惑うことなく行動できて、満足いく結果が得られるようにします。課題に対して、どのように設計すれば解決できるかが重要です。
また、課題の検証にはデータ分析を行うことが不可欠です。何度も課題と解決を繰り返して完成度を上げていきます。
インタラクションデザインの基本原則
インタラクションデザインの基本原則は大きく３つに分類されます。
基本原則を一つずつ解説していきましょう。
2-1.ヒックの法則
これは1951年にウィリアム・ヒック氏が提唱しました。
Webサイトの画面にある選択肢をユーザーが操作するのにどれほどの時間がかかるのかを測ります。
原則に当てはめてはめることで、最適な画面設計をしましょう。
Ｔ：入力が終わるまでの時間
ａ：意思決定を除いた時間
ｂ：平均的思考決定時間（実験により≒150）
画面に多くの選択肢があるとします。
その中から一つを選ばないといけないとき、確認する時間がたくさん必要です。
一つ一つを見て考えながら選択しなければなりません。
入力をし始めたばかりでも、画面から離脱したくなりませんか。
これがユーザーのことを考えていない設計。
いわゆるインタラクションデザインに反したデザインなのです。
初めに問題点を洗い出し、ユーザーにとって何が良いかを考えてデザインを行います。
選択肢を分類化し、まとめてみましょう。
結果的に見やすく離脱せず最後まで選択してもらえます。
通販サイトであれば購入にスムーズに流れていくでしょう。
2-2.フィッツの法則
ヒック法則をうけて、1954年に提唱されました。
フィッツ法則が初めて使われたのが製造ライン上だったとされています。
画面設計された入力装置（マウスやキーボード）で操作を行うとき、どれだけの時間がかかるかを計算できます。
ボタンの大きさとマウスからの距離を計算式に当てはめます。
T：ポインターを動かすのにかかる時間
D：ポインターとボタン中心までの距離
W：ボタンの大きさ
ａ：ポインター移動開始・停止の時間
ｂ：ポインターの速度
この法則は、ボタンの形や色によってユーザーが行う動作が変わってくるという法則です。
マウスをどのように動かすかでボタンの大きさや形を変えます。
インターネット通販ではボタンの色を変えるだけで購買行動に差が出るようです。
提唱された計算式に当てはめて時間を測ります。
分かりやすく最短でクリックできるように設計しましょう。
スマートフォンは画面に直接指示する入力方法です。
画面を大きくスクロールしなければ次の行動に移れない。
そのような選択項目は現実的ではありません。
一つの行動ですが、一つで結果が大きく異なります。
2-3.テスラーの法則
複雑性保存の法則といいます。
アプリケーションを操作して目標を達成するためには必要最低限の情報と時間は必要です。
デザイナーがどれだけ頑張って設計しても、それ以上単純化できない要素があると提唱したものです。
優れたデザインは、複雑さの負担がユーザーではなくサービス提供側で処理するように設計できています。
それほどデザインというのは複雑であるとされています。
複雑な部分をどこまで取り除くことができるのかが、インタラクティブデザイナーに求められるところです。
2-4.その他参考にしたいUIUX関連の法則
2-4-1. ヤコブの法則
ユーザービリティーの父であるヤコブ・ニールセンが提唱する法則。ユーザーは、アプリやプロダクト、Webサイトなどに、既存のものと同じような動作体験を望む。ユーザーは慣れ親しんだプロダクトに対して抱いていた期待を、似たような製品にも持つというもの。
2-4-2. 80/20の法則
結果の80％は、たった20％の原因から生み出されているという法則。「パレートの法則」「ばらつきの法則」「働きアリの法則」とも呼ばれている。標準的には、売上の80％は、20％のチャンネルから生み出されている。10ページのスライドのうち、最も重要な2ページで全体の80%が伝わるなど。ユーザー体験の中で最も重要な20%が何かを特定するのが重要になる。
2-4-3. パーキンソンの法則
正式には「仕事の量は、完成のために与えられた時間をすべて満たすまで膨張する」と表現される法則。時間に余裕があるとわかると、脳がリラックスしてしまい集中力が下がる。コンバージョンを高めるためにユーザーに制限時間を設けるテクニックがある。Amazonで表示される「いつまでにオーダーすると明日中に届く」や、ワンタイムパスワードにカウントダウン時計が表示されるのもこの手法を活用している。
2-4-4. ミラーの法則
平均的なユーザーがいっぺんに覚えられるのは最大で7つ (±2)であるという法則。プリンストン大学教授、ジョージ・ミラーによる研修では、即時記憶と絶対判断のスパンは、ともに7個程度の情報に限られるとの結果がでている。画面に表示されるオブジェクトを7つ以下、もしくは5つまでに抑えると、ユーザーが覚えやすかったり、選択肢を7つ以内に設定することで、ユーザーにストレスを与えないようにしたりするUXデザインのテクニックがある。
2-4-5. FBMモデル
ユーザーの習慣や行動を作り出すためには３つの不可欠な要因がある。その3つの要因とは “モチベーション、能力、引き金” である。これらの要因は互いに関連しており、プロダクトやサービスが3つの要因すべてを満たさなければ、ユーザーはそれを自分の行動や習慣の中に取り入れない。
2-4-6. ドハティのしきい値
人間が認識→判断→処理→反応する際のスピードが、平均で0.4秒であることから、UXにおけるスピードを0.4秒以内に納めることで、ユーザーへのストレスを下げ、ユーザビリティをあげることにつながる。ページのロードスピード、ボタンが反応するまでの時間、メニューが開くまでの時間などの基準として利用される。
2-4-7. 3対1の法則
ポジティブな感情がネガティブな感情を上回るには3つのポジティブな感情が必要であるという理論。これはGoogleも採用している、ユーザーが受け取るポジティブな感情とネガティブな感情を“瓶”の中に入れ、その“重さ”を天秤にかけるという方法。
人はマイナス面を真っ先に評価するので、考慮が必要。
インタラクションデザインの要素
インタラクションデザインは双方向にやり取りのできる状態にあることを言うと説明しました。
それでは具体的にどのような要素(element)があるのか見ていきましょう。
今回は全部で５つの項目に分けて説明します。
3-1.情報
インタラクションデザインの特徴である情報です。
ユーザーに伝えるためのボタンやラベルのことを言います。
操作に負担がかかることなく、短時間で行動できるように配置することが必要です。
3-2.ビジュアル（視覚的要素）
ユーザーが簡単に操作できるような設計が必要です。
直感的に入力できれば時間が短縮できます。
入力間違いを少なくする工夫をしましょう。
ユーザー負担を減らすことができます。
”一目でわかりやすい設計”にすることです。
3-3.ユーザーインターフェース（接点）
機械（ここではパソコンとします）と人をつなぎ相互にやり取りを行う場合にユーザーが使用します。
マウスやキーボード、ディスプレイなどです。
マウスが良いのか、キーボードが良いのか、タッチペンが良いのか。
機械によって変える必要があります。
パソコン用画面にスマートフォンの画面表示だと環境が悪すぎます。
パフォーマンスが悪いとユーザーに悪影響を与えるでしょう。
操作環境を整えることもインタラクションデザインの一部です。
3-4.行動
ユーザーにどのような行動をとってほしいかを考えます。
このボタンを押すとどのような反応が起こり、処理が流れていくのかをデザインしましょう。
ユーザーが行動を起こした後のこともデザインします。
行動後の印象や正しい結果が得られたという満足感が必要です。
3-5.待機時間
ユーザーが行動を起こした時にレスポンス時間が長いとストレスです。
待機時間のストレスを与えないような設計をします。
シンプルかつ分かりやすいシステムを構築することで待機時間は短くスムーズです。
なかなかページが表示されなければユーザーは画面から離れます。
次のアクションにつながるようなユーザー心理を考えるとよいでしょう。
インタラクションデザインのメリット
どのような設計をすればメリットにつながるのか見ていきましょう。
入力が簡単であれば、どのような人でも使うことができます。
見たまま操作ができるのであれば、無駄に説明を聞く必要もありません。
どうしても入力しなければならないときに、まとまった入力画面があればストレスも軽減できます。
ユーザーが使いやすくエラーも起きないデザインができると提供側にもメリットがあります。
エラーの解消をしなくても良いので作業の必要がありません。
問い合わせがなくても購買につながり、利益も上がるでしょう。
インタラクションデザインを極めることができれば、ユーザーも提供側もメリットばかりです。
成功例の一つ、メルカリ公式が発表している商品検索方法をお伝えします。
名前の分からない商品を画像により検索できる機能です。
数多くの入力をしなくても似ている商品を検索してくれます。
入力を極端に減らし、ユーザーのストレスを削減できます。
買えない確率を減らし、提供側の利益にもつながっている成功例ではないでしょうか。
インタラクションデザインの失敗例
成功例があればもちろん失敗もあります。
失敗例を参考により良いデザインに変更しましょう。
5-1.入力に関する違いがある。
郵便番号を入力すると想像してみてください。
数字を入力する項目を選択しても文字入力になっていれば入力エラーになります。
住所も入力することになるとユーザーの手間が増えます。
連動して表示できるところは表示させましょう。
入力フォームが曖昧な表現であればユーザーが戸惑います。
その分、入力に時間がかかり環境が悪くなるでしょう。
ユーザーが「ここでは何をしなければならないのか」が明確に分かる必要があります。
入力エラーをゼロにすることは難しいです。
エラー内容を的確にユーザーに伝えることが出来なければどうでしょうか。
ユーザーのストレスにつながってしまいます。
正しい情報を正しいタイミングで知らせる必要があります。
5-2.時間がかかる
一度にたくさんの情報を詰め込みすぎて表示に時間がかかるとストレスです。
画面の離脱につながるでしょう。
一度に表示する情報はシンプルにしましょう。
ユーザーに過度のストレスを与えることはあってはなりません。
5-3.デザイナーの勘違い
デザイナーは過度に綺麗な画面を作ろうと思ってしまいます。
あまりにもデザイン性に富んだものになればユーザーに戸惑いを与えます。
デザイナーにどのような注文を行いますか。
「スタイリッシュに」「可愛くまとめて」と抽象的になっては駄目です。
それではデザイナーの好きなデザインです。
ユーザーの事を考えて詳細に関して明確に記載事項を列挙して発注してください。
色や形、大きさや位置を細かく設計をしましょう。
まとめ
インタラクションデザインは双方向のやり取りをスムーズに行えるようにデザインしたものです。
ユーザーが回答を得られるまでの流れを設計します。
行動を研究し、レスポンス時間を減らすことでユーザーのストレスを軽減しましょう。
問題点がまったくなくなることはないのかもしれません。
問題が発生したらその都度対応し、より完璧に近づけてください。
ユーザーの環境を整え反応の良いものを作りましょう。