【初心者向け】インタラクションデザインとは？UI/UXデザインの必須知識

こんばんは。フォトピザです。
今回は昨今よく耳にするようになった言葉「インタラクション」について解説していきます。

UI/UXを検討する上で重要な要素の一つであり、アプリケーションが膨大に存在する現在では、インタラクションデザインに力を入れることで様々な効用があります。
インターフェースをより使い勝手の良いものとすることで競合との差別化、顧客満足度の向上、サービスやアプリへの愛着を抱かせるなど多くのメリットがありますね。
それではどうぞ。

インタラクションとは

インタラクションとは、ユーザーがアプリやソフトウェアに対して、特定の操作を行った際にシステム側から返される反応のことを指します。
またフィードバックに止まらず、ユーザーとアプリ間のコミュニケーションをデザインするのが、インタラクションデザインということになりますね。

下の例を見てください。

出典：https://www.pinterest.jp/pin/569494315361461642/

画像のような感じで、ユーザーがpcを操作していてwebサイトを訪問し、ボタンを押す、という操作をした時のことを例にとりましょう。
ユーザーはまずボタンにマウスカーソルを合わせ、それからクリックし他のページに飛びます。この際、webサイト側から返される反応の例としては、ボタンをホバーした際に色が変わり、クリックした瞬間に押したと分かるアニメーションが発生する。そして、別ページに遷移する間にローディングのアニメーションが発生する、といった具合ですね。

ユーザーの行動に対して、webサイト側からフィードバックがあるとユーザー側の理解が促され、より考えるストレスが減るわけです。逆にいうと、ユーザーもwebサイト側からのフィードバックを期待しているといえます。
もし反応がなければ、「ボタンじゃなかったのか？」「そもそも押せないものだったのか？」と困惑しそれがストレスになってしまいサイトを離脱する一要因にもなってしまうでしょう。

なので、インタラクションデザインを活用・改善することはより良いUXを提供する上で重要なポイントといえますね。

どうすれば良いインタラクションデザインができる？

では、ユーザーにより良いインタラクションを提供するにはどんなことに気をつければ良いでしょうか。以下に僕が重要だと思う要素をいくつか書きたいと思います。

なお、インタラクションデザインに限らないですが、デザインの原則に関してはとても奥が深く紹介している要素以外にも色々あります。海外のサイトが詳しく書いていたりもするのでそっちも見てみると良いかもしれません。例でいくつか書いておきますね。

それではより良いインタラクションデザインをする上で頭に入れておいた方が良いことをいくつか示します。

ユーザーの予測に従ったデザインにしよう

僕たちは直感に基づいてインターフェースを操作しています。
webサイトで言えば、ボタンを押したら別ページへ行く、ブログを読んでいる時にサイドカラムにある目次を押したら目的の場所まで飛ぶ、といった具合ですね。

現実世界でいうとドアノブを押したらドアが開く、スイッチを押せばライトがつく、といった感じです。

現実世界であれネットの世界であれ、僕たちは何がどのように作用するのかを直感・経験に基づき、どうすれば自分の目標が達成できるかを予測し行動しますよね。（このプロセスをメンタルモデルといいます）
その予測を裏切るようなデザインにしてしまうと混乱の元になるので、ユーザーのメンタルモデルに従ったデザインを心がけましょう。

直感的なデザインにしよう

①と若干被りますが、微妙に意味合いが異なるのでここでは分けています。

新しいアプリや初めて訪れるwebページにおいて、少なからず僕たちは不安な気持ちを抱くと思います。それが自分でも気づかないレベルの小さい不安であるかもしれませんが、どのように操作したら良いか、知りたい情報が本当にこのページにあるのかといったストレスを僕たちは抱えています。

また新しいアプリを操作する場合、使い方を覚える必要がありますよね。
でも僕もそうですが、新しいことを覚えるのってめんどくさいし疲れるんですよね笑

なので、自分の直感・経験に基づき、新しいことを出来るだけ学習することなく操作できるインターフェースが優れていると言えるでしょう。

モーショングラフィックスを導入しよう

モーショングラフィックスを導入することは、優れたインタラクションデザインを制作する上で重要です。

ユーザーの理解を促す上で代表的なアニメーションといえば、こんな感じでしょうか。

アニメーションには、ユーザーの操作に対するフィードバックを補助することに有効なだけでなく、使っていて心地良い・楽しいといった感情面に良い影響を与え、サービスのファンになってもらう効果もあるといえます。

ユーザーの利用環境を考慮しよう

これは操作性の向上とも言い換えることができます。
そのアプリやwebサイトがどのようなシーンで利用されるかをユーザーの行動に基づいて分析し、最適なインターフェースを検討するようにしましょう。

例えば、スマートフォンやタブレットであれば外出先で使うことが想定されますよね。
またスマートフォン単体でみれば片手で操作することが圧倒的に多いはず。ボタンに関してもpcの時はホバーアクションがありますが、スマホ・タブレットに関してはタップのみです。

これらを考慮してデザインすることで各ユーザーに最適なインターフェースを提供できるでしょう。

一貫性を意識しよう

デザインの4原則、近接・整列・反復・コントラストを学んでいる方であれば理解しやすいと思います。
ここでは反復が意味が近いですね。

例えばアプリ内のボタンの色・タイトルのフォントサイズを統一することで、一度それらを認識したユーザーは別ページで同じ要素に出会った時、「あ、これはボタンだな」と認知するスピードが上がりますよね。
また一つの製品内だけでなく、またがるwebサイト・アプリ・グラフィックなどのトンマナを揃えることでユーザーの認知コスト・学習コストを下げることができるでしょう。

まとめ

いかがだったでしょうか。
今回は今抑えておきたいインタラクションデザインについて解説していきました。
インタラクションデザインに必要な要素はまだまだありますし、また記事にしていきたいと思います。

デバイスやアプリケーションは今後より多様化・複雑化の一途を辿ると予想されます。
そんな中でユーザー視点を常に考慮するインタラクションデザインは必要不可欠です。
細部までユーザーに配慮したデザインにすることで、プロダクトのクオリティがより向上するのではないでしょうか。

それでは本日はここら辺で。