インタラクションデザイン(IxD)とは？4つの原則UXの基本ルール

インタラクションデザイン（IxD）というコンセプトは、常に新しい機能を取り込みながら変化を続けています。

新しいテクノロジーとトレンドをカバーしつつも、基本のルールを守りつつ最高のデザインを実現できるようにしたいもの。

人間工学によって明らかにされた「人間にとって一番使いやすいデザイン」の考え方を最大限に活用し、適切なデザインを作るのがUXデザイナーの目標です。例えば、タッチスクリーン上にタッチしてほしいボタンを配置する場合は、サイズを大きくしユーザーの指に近い右下付近に配置しますよね。

インタラクションデザインとは

インタラクションデザインとは、ソフトウェアやサービス上でユーザーとオーナーの間に双方向のコミュニケーションを産むデザインのことです。これによってUX(ユーザーエクスペリエンス)を向上させます。

インタラクションデザインとは携帯やパソコンなどのデジタル環境の中で現実世界を再現しようとするデザインといえます。物理法則などを適用することで、画面内で起きていることをまるで現実世界で起きているかのように見せることができるのです。

画面内のモノがまるで生きているかのように動くことで、ユーザーはサービスと触れ合っているような感覚を覚えます。誰でも簡単で直感的に、そして抵抗なく使えることが最終的なゴールです。

インタラクションデザインの4原則

1. 最小限の動きを目指す

▲出典：Mani

スクリーンサイズが3.5インチほどのデバイス向けにデザインするときは、よく使う機能を画面の右下か左下に設置しましょう。例えば、右手でスマートフォンを持つと、一番指が届かないのは画面左上ですよね。この指を動かす距離を縮めることで、使いやすさは改善します。他にも、画面のサイドも親指で簡単にアクセスできるのでおすすめです。このように小さい画面向けのデザインが大変である一方、大きな画面の場合は上か下のどちらかに機能をまとめてあげるといいでしょう。

2. 視覚的な美しさは評価される

▲出典：Brian Hoff

人間の脳は、綺麗さと使いやすさを一緒にして考えてしまう傾向があります。身近な日用品を選ぶとき「見た目が良いから使ってみよう」思ったことがあるのでは？アプリを選ぶときも同じで、自分のお気に入りの色や形、重さや機能などが大きく影響します。

例えばイスはその形状から自然と「座るもの」というイメージがつきますよね。また、ボタンは「押すもの」ということが言われなくても自然とわかります。このように、教えられなくてもある物の使い方がわかることをアフォーダンスといいます。

アフォーダンスはその物の見た目と質感で決まるのですが、私たちの生活や文化に深く関わっている物であれば、基本的には教えられるまでもなく簡単に使うことができます。この考え方を、インタラクションデザインにも応用してください。

▲出典：Dan Baker

面白い、信頼できる、価値がある、などの感情をユーザーに持たせることで、サービス自体の印象をコントロールできます。そのために考慮すべき要素は次のようなものです。

• 割合
• 形
• 大きさ
• 重さ
• 色使いと影
• オブジェクトへの装飾

3. ボタンには十分な空白を作る

ボタンをデザインする際に守るべきルールがふたつあります。

その1：優先度の高いボタンを大きくする

実際はボタンを大きくしても、色や形を変えて目立つようにしてもいいのですが、大事なのはユーザーの注意を十分にひけるようにすることです。

その2：ボタンのクリックできる範囲をできるだけ大きくする

ボタンの中にある文字だけでなくボタン全体をクリックできるようにするのが好ましいです。クリックできる範囲が広くなることで、使いやすさは向上します。特に、CTA(行動喚起)ボタンには必ず必要な機能で、目に付くデザインでありながらも誇張しすぎないちょうど良いバランスが求められます。

また、以下のような理由で、大げさすぎるデザインは避けた方が良いとされています。。

• 画面内の貴重なスペースを取りすぎてしまう
• 要素同士のバランスを壊してしまう
• 画面内が散らかってしまい、ユーザーを混乱させてしまう
• 大きなサイズによってより使いやすくなることを当たり前だと思ってしまう

▲出典：Armand Chakhalyan

4. ユーザーの使い方とインタラクションデザイン

▲出典：Andrew Astract

ユーザーが使うのは、インタラクションデザインによって再現されるインタラクションであり、要素が持つ本来の目的を果たす助けをするものです。

コンピューターが開発された当時から、より良い見た目や使用感を求めてさまざまな設定がなされ変更されてきました。現在では基本的な設定にとどまらず、デザインというさらに高いのレベルでのカスタマイズが行われ、より良いユーザーエクスペリエンスに向けて改善され続けています。

さらに、インターネットの登場により、現実とデジタル世界の差もほとんどなくなってきています。

インタラクションデザインの構成要素とは？

インタラクションデザインがもたらす効果とは、それを構成する要素とは、どのようなものでしょうか。

インタラクションがもたらすメリット

• ユーザーとデバイスのやりとりを正確に定義する
• これから何が起こるのかを、実際に起こる前にユーザーに知らせる
• エラーの排除と行動の予測
• フィードバックとレスポンスタイムを考える
• それぞれの要素を考える
• 簡潔で読みやすくする

インタラクションデザインの構成要素

上記を実現するための、ベーシックな構成要素をいくつか挙げてみましょう。

• 【モーション】
  モーションがあることで、例えばタップやスワイプなどのジェスチャーを伝えやすくなります。
• 【スペース】
  空白をうまく使うことで、アプリやウェブサイトがどのような環境にあるかを直感的に伝えることができます。例えば２次元の環境なのか３次元なのかです。
• 【タイミング】
  それぞれのインタラクションにかかる時間を考え、長すぎもせず短すぎもしない平均的な時間を探し出して使いましょう。また、複雑なインタラクションはユーザーのレスポンス時間もより長くなります。
• 【配置】
  これはWebサイト上やアプリ上にあるすべての要素に当てはまります。まずは、それぞれの要素にどのように表示されて欲しいかの明確なアイディアを持ちましょう。そしたら、それぞれにあった目的や機能を果たすために、形や空白、色などを工夫しましょう。
• 【音】
  音は原則必要ありません。まずはユーザーとなり得るターゲット層をリサーチして、ユーザー目線で音がある方がいいかどうかを検討しましょう。

▲出典：UI Sound Kit

ここで忘れてはいけないのが優先順位の高い機能にビジュアルを適合させる作業です。例えば、ゲームのアプリで「プレイ」ボタンを大きく表示するのはうなずけますよね。また、Webサイトのタイトルも大事なので大きく、そして見やすく表示するべきです。

逆に、ゲームのレーティングはそれほど大事ではありません。つまり、画面の端っこの方に小さく表示していいのです。中間的な優先順位の代表は検索バーやサーチボタンです。これは、画面上に存在していればいい程度のものなので、大きすぎないくらいに画面の右上など、多くの人が見慣れた場所に配置しましょう。

アカウント設定も検索バーと同じように配置することをオススメします。

おわりに

▲出典：Mark Wilson

細かいアニメーションや大きさの理由を明確にして改善していくことは、長い目で見ると大きな改善となります。開発者はアプリやWebサイトの機能とそれをどうユーザーに体験してもらうかをうまく操作しなければなりません。ユーザーはこのアプリ/Webサイトに何を求めているのでしょうか？ しかし、止まることのないテクノロジーの進化を一般化して考えることは難しいかもしれません。常に改良し続けなければならないのがこの分野。

時折インタラクションの原則とはなにかを見直してみてください。

（翻訳：Juri Ando）