インタラクションデザイン とは
インタラクションデザインは、製品のインターフェースがユーザーの行動に反応し、人間とコンピューターの相互作用を支援することで、UXデザインにおいて重要な役割を果たします。
主なポイント：
- インタラクションデザインは、ユーザーとデジタル製品、システム、インターフェイスとの相互作用に焦点を当てた学際的なデザイン分野である。
- ユーザーがどのように製品に関わり、体験するかをデザインし、そのインタラクションを直感的で効率的なものにすることを目的としている。
- 「IxD」とよく略される。
インタラクションデザインはUXデザインプロセスで特に難しい段階のひとつですが、UXPinのコードベースデザインツールにより、忠実でインタラクティブなプロトタイプを構築することで、この課題を軽減できます。無料相談およびトライアルはこちらから。
インタラクションデザインとは
インタラクションデザインとは、HCI（人間対コンピュータのインターフェース）を人間らしく感じさせるプロセスです。インタラクティブなデジタル製品で、エンドユーザーにフィードバックを与えられることによって、この「人間的」なつながりが作り出されます。そしてそのフィードバックは、スクロールによって誘発されるアニメーション、ボタンのクリック状態、別のページへの遷移などを通じて行われます。
インタラクションデザインはよく「IxD」と略され、トランジション、マイクロインタラクション、アニメーションなどの適切なインタラクティブ要素を使いますが、テキスト、色、ビジュアル、レイアウトもユーザーの感情や行動にも影響を与え、それによって、適切な反応を引き出すために戦略的にインタラクションをデザインできるようになります。
インタラクションデザインをうまく活用することで、以下のようなポジティブなユーザー体験がもたらされます：
- 製品満足度の向上
- ユーザビリティの深い理解
- より速い学習性
- より深い個人的なつながり
- 繰り返し使用される可能性が高まる
HCI におけるインタラクションデザイン
HCI（Human-Computer Interaction：ヒューマンコンピュータインタラクションの略）におけるインタラクションデザインとは、ボタン、メニュー、その他のインターフェースコンポーネントなどの製品のインタラクティブな要素を、直感的で使いやすく、ユーザーの操作に応答し、ユーザーとシステム間のコミュニケーションが円滑になるようにデザインすることです。
インタラクションデザインは、テクノロジーとのシームレスなインタラクションを促進する魅力的なユーザー体験を作ることが目標であり、それにはユーザーのニーズ、行動、期待を理解し、機能的であるだけでなく、使っていて楽しいインターフェースをデザインすることが含まれます。
また、HCI におけるインタラクションデザインは、ユーザーがテクノロジーとどのように相互作用するかに焦点を当てることで、ユーザビリティ、アクセシビリティ、総合的な満足度を高めることを目的としています。
インタラクションデザインと UI デザイン
インタラクションデザインは、例えば「ユーザーがある要素をタップしたときに何が起こるか」などのアニメーション、マイクロインタラクション、トランジション、検索、その他のモーションベースのデザインなど、人間とコンピュータのインタラクションに焦点を当てています。
対する UI デザインは、UI がどのように見えるかを決める色、フォント、図像、レイアウトなどのビジュアルデザインと見た目の美しさに重点が置かれています。
つまり、以下のようになります：
- インタラクションデザインは相互作用と動きに関するもの
- UI デザインはビジュアルデザインと見た目に関するもの
これは多くの場合は、中小企業やスタートアップ企業では UI デザイナーが両方を担うい、大企業では別々です。デジタル製品デザインでは何でもそうですが、役割と責任が相乗効果を生むことがあり、すべては企業、製品、組織構造によりけりです。
インタラクションデザインと UX デザイン
インタラクションデザインは、UX デザインの中でも専門的な分野であり、UX がユーザーエクスペリエンス全体と、すべてがどのように結びついているかに注目するのに対し、インタラクションデザイナーはユーザーのインタラクションとモーションに焦点を当てます。
UX デザイナーは、デザイン思考、HCD（人間中心デザイン）、ユーザーリサーチといった UX の基礎を応用して意思決定を行い、ユーザーのタスクやアクション、環境に特を気にかけます。対するインタラクションデザイナーは、デジタル製品がユーザーのアクションに適切に反応することに重点を置き、ユーザーがボタンをクリックしたとき、検索バーにフレーズを入力したとき、画像にカーソルを合わせたときに何が起こるかを考えがちです。
インタラクションデザインの原則とは
ドン・ノーマン氏（ニールセン・ノーマン・グループの共同創設者）の著書『The Design of Everyday Things』から、お気に入りの「IxD 原則」をピックアップしてみました。
可視性
多くの機能と限られたスペースの中で、可視性を優先させるのはデザイン上の重要な課題であり、ドン・ノーマン氏の理論によると、何かが目に見えるほど、ユーザーがそれを見て操作する可能性が高くなります。なのでインタラクションデザイナーは、ユーザーのニーズとビジネス目標に基づいて、可視性の優先順位のバランスを取らないといけません。
可視性の典型的な例として、モバイル端末でのナビゲーションリンクの優先順位付けが挙げられます。アプリバーから表示されるリンクは何であり、デザイナーはハンバーガーメニューの背後にあるナビゲーションドロワーに何を配置するのでしょうか。
フィードバック
フィードバックとは、デジタル製品やシステムがユーザーとどのようにコミュニケーションをとるかということであり、インタラクションデザイナーには、動きやアニメーション、触覚、音声、コピーなど、このフィードバックを表現するための方法があります。
また、アクセシビリティや、製品がどのようにあらゆる種類のユーザーや支援技術にフィードバックを伝えるかついても考えないといけません。
制約条件
可能性が多すぎる乱雑な UI だと、ユーザーは戸惑い、ユーザビリティの問題が生じますが、いいインタラクションデザインだと、ユーザーの行動を制限（制約）して、製品を通じてユーザーをより効率的に導きます。
このような制約は、ランディングページで最もよく見られます。デザイナーは、ナビゲーションやリンクなど、ユーザーがページ外に誘導されてしまいそうなものをすべて取り除き、目立つボタンの CTA やフォームだけを残します。それでユーザーは、１つのアクションに絞られることでコンバージョンにつながるコンテンツに集中できるようになるというわけです。
マッピング
インタラクションデザイナーは、デジタル製品における操作とその効果の間に明確な関係を作り出さないといけません。つまり、その関係を、ユーザーにとって自然に感じられるようにマッピングするということです。
たとえば、iPhone の上のボタンで音量が上がり、下のボタンで下がります。この直感的なレイアウトだと、ユーザーはどのボタンがどのアクションを実行するかを考える必要がありません。
製品が直感的でわかりやすいほど、より簡単で楽しい体験になるのです。
一貫性
インタラクションや UI デザインには一貫性が不可欠であり、一貫性がないとユーザーは戸惑い、ユーザビリティの問題が起こります。なのでデザイナーは、一貫性のある UI やインタラクションをデザインするだけでなく、さまざまな画面サイズやデバイスにおける一貫性も考慮しないといけません。
多くの組織は、承認された UI パターンやインタラクションとの一貫性を上げるのに、デザインシステムを構築したり、オープンソースのコンポーネントライブラリを採り入れたりしていますが、デザイナーはこのような選択について考える必要がなくなれば、UX に集中できるようになり、ユーザーが望ましい結果を達成できるよう適切なパターンを適用することができます。
アフォーダンス（インタラクションの可能性）
アフォーダンスは、ユーザーに何かの使用方法やアクションの実行方法を伝えるものであり、UI 要素を使ってタスクを完了する方法が、ユーザーにとって明白であることを保証するのがインタラクションデザイナーの仕事です。
例えば、送信ボタンの無効状態で、ユーザーは送信する前にフォームの必須項目を入力しないといけないことがわかります。また、リンクにさまざまな色と下線を使うことで、ユーザーはどのテキストをクリックできるかがわかります。
認知
インタラクション デザイナーは、UX デザインにおける認知心理学（注意と知覚、記憶、問題解決、創造的思考）の基礎を理解しておかないといけません。そしてこれは、この精神プロセスに過負荷をかけない製品と体験をデザインすることを目的としています。
認知は、以下などのデザイン心理学の原則を扱っています：
- ゲシュタルトの原理：人間の脳がどのように視覚を認識し、馴染みのある構造を作り出すか。
- フォン・レストルフ効果：物体の集団の中で、異なるものが目立つ、あるいは最も記憶に残りやすいという予測。
- ヒックの法則：相手に選択肢を与えれば与えるほど、決断に時間がかかる。
- 最小努力の原則：利用者は最小限のエネルギーで済む選択や行動をとる。
- 直列的位置づけ効果：人間は、リスト、文章、またはコンテンツの最初の項目（初頭効果）と最後の項目（新近効果）を最もよく覚えている傾向がある。
- 永続的な習慣の原則：人は馴染みのあるルーティンや習慣に依存する ‐ だからこそ、ユニバーサルデザインパターンを使うことが重要。
- 感情伝染の原理: 人間は、動物やアニメーションなどの他人の感情や行動の模倣や共感をする。なので、デザイナーは気持ちや感情を強調するのに顔（絵文字も含む）を使う。
- フィッツの法則：目標地点まで移動するのに要する時間は、その距離と目標の大きさの関数である。
以下の２記事では、認知について深く掘り下げられています：
- 優れたUXデザインを生み出す心理的トリック
- A UX Designer’s Guide to Improving Speed of Use（UXデザイナーによる利用スピード向上のためのガイド）
これらの原則は、すべての UX 分野に適用されます。
インタラクションデザインチェックリスト
米国政府の Technology Transformation Services（技術変革サービス）の Web サイトである usability.gov から、有用なインタラクションデザインチェックリストを見つけました。このチェックリストには、インタラクションをデザインする際に考慮すべき質問が含まれています。
- ユーザーがインターフェースと対話する方法を定める：クリック/タップ、プッシュ、スワイプ、ドラッグ＆ドロップ、キーボードコントロールなど。
- ユーザーが行動を起こす前に、行動に関するヒントを提供する：正しいラベル付け、リンクの色の違い、クリック可能なUI要素の一貫性の使用など。
- エラーを予測して軽減する：エラーを防ぐと同時に、問題を修正するために役立つメッセージをどのように提供するか。
- システムのフィードバックとレスポンスタイムを考慮する：ユーザーがアクションを完了した後に何が起こり、フィードバックはどのくらいで表示されるのか。
- 各要素について戦略的に考える：適切な要素／パターンを選択したか、エラーを避けるためにクリック可能な要素の間に十分なスペースがあるか、先述のデザイン心理学の原則に従っているかなど、すべての決定をユーザーの視点から精査する。
- 習得しやすいようにシンプルにする：UI やタスクをできるだけシンプルにし、馴染みのあるパターンを使い、認知力を消耗するタスクや機能を最小限に抑えることで、ユーザー体験をシンプルにする。
また、アーロン・レガスピ氏とアミット・ジャクー氏による IxD チェックリストもチェックしてみてください。
インタラクションデザインのリソース
- Interaction Design Association（インタラクションデザイン協会）
- Interaction Design Foundation（インタラクションデザイン財団）
- 50 Best Interaction Design Programs（インタラクションデザインプログラム ベスト５０）
インタラクションデザイナーの仕事
インタラクションデザイナーの役割は、ユーザーが製品、特に Web サイト、アプリ、ソフトウェアインターフェースのようなデジタル製品とどのようにインタラクションするかということに焦点が当てられ、そういったインタラクションが直感的で、シームレスで、楽しいものであることを保証することを担っています。
インタラクションデザイナーの仕事の内訳は以下のようになります：
１．ユーザーのニーズを理解する
インタラクティブデザイナーは、誰がユーザーで、何が必要なのかをリサーチすることに多くの時間を費やします。これには、ユーザーリサーチ、インタビュー、データ分析などの実施や、ユーザーが直面している問題と、製品がそれをどのように解決できるかの把握などが含まれます。このようなニーズを理解するのは、ユーザーにとって意味のあるインタラクションをデザインする上で非常に重要です。
２．ユーザーフローの作成
インタラクションデザイナーは、ユーザーに何が必要なのかがわかったら、例えば EC アプリの場合だと、カートに商品を追加し、チェックアウトプロセスを経て、確認を受け取るまでといったようなユーザーフローをデザインします。これは、そういったステップを可能な限り簡単かつ効率的にすることを目標としています。
３．インタラクティブな要素をデザインする
ここは、クリック、タップ、スワイプなど、すべてのインタラクティブな要素である、ボタン、ナビゲーション、フォームに焦点を当てるところであり、デザイナーはこのような要素を、わかりやすく、機能的で、アクセスしやすいようにデザインします。そして彼らは「このボタンは目立つだろうか？ユーザーはクリックすると何が起こるか分かるだろうか？」といったことを常に考えています。
４．試作とテスト
インタラクティブデザイナーは、プロトタイプ（製品の初期モデル）を作り、実際にそれがどのように使われるかをテストします。この段階は、仮定のテストに関するものであり、ユーザーやステークホルダーからのフィードバックを集め、何がうまくいっていて、何がうまくいっていないかを確認し、それに基づいてデザインを改良していきます。
５．他のチームと連携する
インタラクティブデザイナーは、UX デザイナー、デベロッパー、プロダクトマネージャーと密接に協力し、デザインが実現可能で、ビジネス目標に沿ったものであることを確認します。その際デベロッパーは、インタラクションがどのように機能すべきか（ボタンにカーソルを合わせるとどうなるかなど）を正確に知る必要があります。
６．一貫性を確保する
彼らの役割の大部分は、製品全体で確実にデザインが一貫しているようにすることです。それでユーザーは、さまざまなセクションを移動するときに、慣れ親しんだ感覚を持つはずです。つまり、同じようなタスクやインタラクションに対しては、同じデザインパターンにこだわるということです。
７．ユーザーニーズとビジネスニーズのバランス
インタラクティブデザイナーは主にユーザー体験に焦点を当てますが、デザインをビジネスの目的に合わせる必要もあります。例えば、登録者数を増やすことが目的であれば、ユーザーが押し付けがましく感じたり、ページを巡るのを妨げられたりすることなく、登録ページに誘導されるようなインタラクションをデザインするかもしれません。
８．最新情報の入手
あと、インタラクションデザイナーは、デザインのトレンド、ツール、ベストプラクティスを常に把握しています。インタラクションデザインは急速に進化するため、製品の競争力とユーザーに対する使いやすさの維持には、常に先を行くことが重要です。
つまり、その製品が見た目だけでなく、ユーザーにとって簡単で満足のいく方法で機能することを保証するために彼らはここにいるのであり、ユーザーと製品とのインタラクションを改善することに常に焦点を当てているのです。
UXPin – 究極のインタラクションデザインツール
従来の画像ベースのデザインツールでは忠実さや機能性が不足し、インタラクションデザイナーは複数のフレームを作成する手間がかかりますが、UXPinのコードベースデザインツールを使えば、少ない労力でより優れた結果を得られます。
以下でその方法を見てみましょう：
ステート
UXPin では、１つのコンポーネントに対して複数のステートを作成できます。例えば、デフォルト状態、ホバー状態、アクティブ状態、無効状態のボタンを作成し、それぞれに個別のプロパティとトリガーを設定することができます。
UXPin の ステートでは、カルーセル、アコーディオンメニュー、マルチレベル・ドロップダウンメニューなど、より複雑な UI パターンを１つのフレームで作成することもでき、その UI パターンはコードのように動作するため、インタラクションデザイナーはテスト中に正確な結果とフィードバックを得ることができます。
インタラクション
UXPin のインタラクションがあれば、デザイナーは画像ベースのデザインツールの能力をはるかに超えた、没入感のあるコードのような体験を構築できます。また、UXPin にはトリガー、アクション、アニメーションが幅広く備わっており、完全に機能するアニメーションプロトタイプを作成できます。
また、条件付きインタラクションで、デザイナーは Javascript のような 「if-then 」や 「if-else 」の条件を使って、プロトタイプをさらに一歩進め、ダイナミックなユーザー体験を作り出すことができます。
Variables（変数）
UXPinでは、フォームフィールドは最終製品のように見えて機能します。そして Variables（変数）により、デザイナーは、例えば「オンボーディングフォームを完了した後に、個別化されたウェルカムメッセージを表示する」など、ユーザーの入力を取得してそのデータをプロトタイプの別の場所で使うことができます。
Expression
UXPin の Expression で、フォーム検証や計算コンポーネント（ショッピング カートの更新）などのコードのような機能によって、プロトタイプが新たなレベルに上がります。
この強力な機能により、インタラクションデザイナーはコードを学んだりエンジニアに頼ることなく、機能するプロトタイプを作成できます。
UXPin を使うことで、デザイナーは構築、テスト、反復をより速やかに行うことができ、大幅に優れた結果を得ることができます。無料相談およびトライアルはこちらから。
