🗂️ Design Materials – #インタラクションデザインとは

プロダクト・デザイナーとして仕事をする上で「インタラクション・デザイン」という言葉をよく耳にするようになりました。今日は、インタラクション・デザインについて調べてみました。ユーザビリティを考える上で、インタラクション・デザインは「ユーザーがなんらかのアクションを行なったとき、システムがそれに応じた反応を返すこと」を意味します。

💡インタラクションは、日本語で「相互作用」と訳されています。

良いデザインのプロダクトは快適に使いやすいため、ユーザーから選ばれやすくなります。同じ機能を持ったコンピューターで考えてみても、PCよりも一般的にAppleの製品が好まれるのも、潜在的に「マックの方がおしゃれで、使いやすい」というマインドを人々が考えているからだと思います。

インターアクション・デザインが上手くデザインされたプロダクトは

→ 安心感を覚える。ユーザーが行う行動によって何が起こるのかを予測できる。
→ 誤操作を防ぐことができる。わかりやすいデザインで、ユーザーに意図に沿った行動をしてもらうことができる。またシステムエラーを防ぎやすい。
→ 簡単に操作できる。簡単また正確に操作できと感じる。
→ 企業側にとっては、集客、また売り上げ向上に期待ができるようになる。

などが考えられます。

UXデザインの一部

個人的には、インタラクション・デザインはUXデザインの一部だと考えています。UXデザインと同様ユーザーの使い勝手を向上させること、またそれに伴う収益の獲得を目的としていますが、UXデザインは、ユーザエクスペリエンスの略で、ユーザーがプロダクトやサービスを通じて得る体験をデザインすることを意味します。インタラクション・デザインはその一部で、ユーザーのアクション、またシステムの反応をデザインすることに限定されます。

インタラクションデザインのルール

こちらでは、インタラクション・デザインを行う上で意識したいルールをご紹介したいと思います。

→ ユーザー側が、なんの説明がなくても操作できると感じる。
説明文を読まなくても、直感的に操作できるプロダクトやサービスはとても優れています。最近では日常生活で身近なデザインは、多くの人が直感的に使用できるようになっています。個人的に製品を購入し、受け取る上で、パッケージの中に説明書が入っているだけでがっかりすることがあります。「UXデザインに欠けているので説明書を入れなければいけない」と思ってしまうからです。

→ 簡単に操作ができる
プロダクト・デザイン上では、ユーザーのアクション、デバイス、また使用場所などを考える必要性があります。

例えば、クッキング・アプリなどを作る場合はユーザーの手が濡れていている、またはオイルなどで滑りやすい、片手で使用する可能性大などなど様々なインターアクション・デザインを検討していきます。

→ よく使用されるUX/UIデザインパターンを活用している
プロダクト・デザインには、よく使われているパターンというものがあります。よく使われるということは、それだけ皆が使いやすい、慣れていると考えられていると考えられます。
奇抜で、おしゃれなオリジナル・デザインを施すよりも、よく使用されるUX/UIデザインパターンをうまく活用することで、ユーザビリティの高いデザインになります。

同じようなデザインの手直しに人生の貴重な時間を費やしたいと思うデザイナーはいません。過去に別のウェブサイトやアプリなどで解決されている問題があるのなら、その問題の解決策がテンプレートとして既に存在するはずです。それこそが、誰にでも使えるデザイン・パターンです。

UX MILK | クリエイターのためのUXメディア
UX MILKさんで、Web上でデザインパターンを見つけるのに最適なサイトをリストアップしています。これらのリソースはすべて無料ですが、一部はプレミアム版などを支払うように求められる場合があります。

UIデザインパターンの参考になるサイト10選

インタラクションデザインを構成する要素

→ ビジュアル・デザイン
視覚的な要素は、ユーザーが操作する上でとても大切な要素です。具体的には、適切な画像や直感的なアイコン、フォントの読みやすさなどがあります。配置や余白などを検討し、一目でわかりやすい画面デザインを心がけましょう。

→ モーション・グラフィックス
モーション・グラフィックはビジュアルな要素の一つでありますが、モーション・グラフィックスはアニメーションなど、動きがあるものを示します。
モーションを取り入れるのは、ユーザーに必要な動作を説明する時などに役立ちます。またユーザーに「楽しさ」を味わってもらうための演出としても使用される場合もあります。

例えば、Noteでは「いいね」と呼ばれるハート形のアイコンを押すと、投稿者からのメッセージが表示されるなど、他のソーシャルメディアとは違い、各クリエーターが個性的なメッセージを表現できるようになっています。

→ ボイス・オーバー、効果音、サウンド・デザイン
これは必須でないことも多くあります。フィージビリティーを考え、これは最終的に省く場合も多くあります。ただ、例えば子供用のアプリをデザインする場合は必衰となることもあります。

小さな子供達は文字が読めない場合も多いので、子供向けのプロダクト・デザインでは、モーション、またサウンドデザインは重要な要素です。アニメーションを追加すると、キャラクターに命を吹き込むことができ、また小さな子供たちは、自分のアクションが何を示しているのかを明確に理解する必要があるため、すべてのアクションにサウンドのフィードバックを期待しています。そのため、子供のためのインタラクション・デザインを考えアニメーションと効果音を追加することをお勧めします。

他にもスマホについているカメラアプリは、ボタンを押すと、シャッター音が鳴ります。まるで本物のカメラで撮影したような感覚になります。これは、音を鳴らすことで、盗撮を防止する役割も果たしています。

→ レスポンス時間を考えデザインする
レスポンスにかかる時間が適切であることはとても大切な要素になります。
読み込みの重いシステムは、それだけでユーザーに不快感を与えてしまいます。また使いやすさの上では、応答やデータの読み込みなどに時間がかかりすぎないようにすることが大切です。便利な機能を取り入れることも大切ですが、凝りすぎて重くならないように気をつけましょう。できるだけすばやく、スムーズに動くようなデザインを心がけましょう。基本的には、構造がシンプルなものほど、読み込みは早くなります。

参考記事

インタラクションデザインとは何か？メリットや事例をわかりやすく解説！ | 株式会社パンタグラフ

まとめ

インタラクション・デザインは、ユーザーとシステムの相互作用をスムーズにするのを心がけることを意味していることがわかりました。便利で使いやすいプロダクトやサービスであれば、利用率が上がり、収益につながることも期待できます。今後、インタラクション・デザインの活用を心がけたいと思いました。

私も、色々勉強中なので、皆さまの、ご意見・ご感想をお聞かせください。お読み頂きまして、ありがとうございました。

メルボルンを拠点にプロダクトデザイナーとして働いています。 主にデジタル・プロダクトの制作に携わっています。