デザインと聞くと、意匠性や独自性を重視すべきだと考える方もいるでしょう。もちろんそうした視覚的要素も重要ですが、機能を重視するアプリケーションのインタラクションデザインでは、装飾美よりも機能美の考え方が重視されます。平凡でよく見かけるデザインは一見するとありきたりに思えるかもしれません。しかし、ユーザーにとって使いやすく良質であるからありふれているのだと言えます。特にリテラシーがあまり高くないユーザーであれば、より直感的で分かりやすいデザインを求める傾向にあるでしょう。
4年以上の実績があるアプリケーションデザイナーであれば、独自性があっておしゃれだけど使いにくいアプリケーションよりも、平凡でつまらなくてもユーザーにとって使いやすいデザインをあえて選ぶシチュエーションも出てくるでしょう。インタラクションデザインの観点での制作を意識するためにも、押さえるべき５つの要素やUXデザインとの違い、良質なインタラクションデザインの定義を紹介します。
押さえるべきインタラクションデザインの5要素
インタラクションデザインは、ただ単にアニメーションつけるのではなく、動きに意味を与え、使いやすさを向上させるデザインです。インタラクションデザインの本質を理解するうえでは、「情報」「視覚的要素」「オブジェクト/空間」「レスポンス時間」「アクション」の5つの要素をまずは押さえるべきでしょう。5つの要素を踏まえることで、インタラクションデザインの良し悪しを検証できます。
要素1：情報
情報はボタンやラベルなどを示します。インタラクション特有の情報と言えます。ボタンやラベルではユーザーが認識できるように、十分な情報を与える必要があります。ただし、過度に目立たせるなどユーザーに負担がかかる情報量や配色にすることは避けましょう。
要素2：視覚的要素
視覚的要素はアイコンや画像、タイポグラフィ、フォントなど、視覚でユーザーと関わる要素を示します。それらはユーザーへ情報を伝える際の補助的な役割があり、配置や余白などを考慮することで見やすい画面設計につながります。
また、モーショングラフィックやアニメーションロゴなどの動きがあるデザインも視覚的要素です。たとえば、Twitterの「いいね」（ハートマークの表示）のように、押すと花火が弾け飛ぶモーショングラフィックは、ユーザーに喜びを体験してもらえます。他にもモーションを入れると操作上でスワイプができるなど、ユーザーへの分かりやすさにつながります。
要素3：オブジェクト/空間
オブジェクト/空間はマウスやキーボードなど、ユーザーが使用する製品を示します。つまり、これはユーザーと製品間に相互作用が発生する際にユーザーが使用するデバイスとのタッチポイントです。スマートフォンやPC、タブレットなども該当します。
要素4：レスポンス時間
レスポンス時間はユーザーのアクションに対する応答時間を指します。特にインタラクションデザインでは、アクションに対しての応答時間の快適さが求められます。具体的にはページの読み込みスピードです。ページの読み込みスピードが遅ければユーザーが不快に感じやすい傾向にあります。一方、応答時間が短ければシステムやWebサイトに対して信頼感や快適性を感じてもらいやすくなるでしょう。
要素5：アクション
Webサイトやアプリなどでユーザーがどんな行動を起こすかに着目したのがアクションです。ユーザーの行動の流れをつかみ、ユーザーの目的を達成できる設計になっているかをアクションによって判断できます。ユーザーがいかにアクションしたかは、インタラクションデザインの精度を高めるうえでも重要な検証材料です。
インタラクションデザインとUXデザインの違い
インタラクションデザインと混同しやすい用語にUXデザインがあります。UXとは「User Experience」の略称であり、日本語に直訳すると「ユーザー体験」です。ユーザーがサービスを通して得られる顧客体験を意味します。インタラクションデザインもユーザーの直感性を重視するだけに、UXデザインとの関係性をきちんと整理しましょう。
UXデザインはユーザー体験の設計
UXデザインは一連のユーザー体験を設計することが主目的です。たとえば、アプリなら「見つける」「ダウンロードする」「利用する」「また使いたいと思う」という一連の行動や感情。ECサイトならば「おしゃれで使いやすいWebサイトから購入して、商品がすぐに届いてうれしかった」などがUXに該当します。ユーザーが最終的に「うれしかった」「使いやすかった」「面白かった」「便利だった」などのポジティブな感情になれば良質なUXと言えるでしょう。
UXデザインではWebサイトやアプリにおける情報設計が肝となります。そのため、UXデザインを担当するクリエイターやデザイナーは、ユーザービリティテスト、マーケティング調査、アクセス解析、情報設計、ワイヤーフレーム制作などを行い、ユーザー視点での丹念な設計が重要となるのです。
インタラクションデザインはUXデザインの一部
インタラクションデザインは、ユーザーとシステムの相互作用をもたらすものであり、ユーザー視点が欠かせません。つまり、UXデザインの一部なのです。UXデザインにおける「使いやすいアプリ」「使いやすいWebサイト」というユーザーの直感的な反応に着目したのがインタラクションデザインです。つまり、ユーザーが知覚・反応し、操作できる視覚的にも感覚的にも伝わるデザインを指します。この2つのデザインは似て非なる面がありますが、それは粒度の違いと言えるでしょう。
高品質のインタラクションデザインを形成する4つの定義
直感的に分かりやすく、ユーザー満足度の高いインタラクションデザインを目指すうえでは、アプリケーションデザイナーは何を意識すべきでしょうか。品質が高く、高評価を得ているインタラクションデザインには4つのポイントがあります。この4点を高品質なインタラクションデザインの定義と捉え、日々のデザイン制作においてユーザーの観点を追求しましょう。
定義1：説明がなくても操作ができる
ユーザーが細かな説明を読まなくても直感的に操作できる場合は、優れたデザインと言えます。それはアフォーダンスと呼ばれ、「ボタンを押せばリンク先のページにアクセスできる」などのシチュエーションが該当します。多くの人が日常的に使用しているものには、直感的に操作できる仕様にデザインされているものが多いでしょう。Webサイトやアプリで考えるのであれば、先の例の「ボタン＝押す」という認識を踏まえて、ページ上にボタンを配置する設計が考えられます。ボタンが分かりやすく視認できれば、ユーザーも迷いにくくなるでしょう。
定義2：操作がしやすい
Webサイトやアプリのデザインは機能や配置を考える必要があります。ユーザーはPCやスマホ、タブレットなどの複数のデバイスを操作するため、各デバイスに応じた機能・配置が求められます。
スマートフォンであれば片手でも操作できるため、テーブルなどに置いて両手で操作するデザインはユーザーが使いにくいと感じるでしょう。さらに「次のページへ」「ページTopへ戻る」「ショッピングカード」などのアイコンが常にフッターバーにあると、ユーザーはいちいちページ上部まで画面をスクロールする必要がなく、目的の画面にたどり着きやすくなります。ユーザーがどんな状況でWebサイトやアプリ、システムを使うのかを想定してデザインすることがポイントです。
定義3：素早いレスポンス
先述の通り、Webサイトやアプリを使う時のレスポンスが適切であるかも大切です。読み込みに時間がかかるWebサイトやアプリは、ユーザーに不便さや不快感を与えます。特に構造が複雑になるとレスポンス時間が長くなる傾向にあります。ユーザーの利便性を追求することは大切ですが、デザインに凝りすぎると逆効果になる恐れがあるので注意しましょう。
定義4：お約束パターンの利用
「このボタンを押すとあの画面に移動する」など、お約束のパターンを用いるとユーザービリティが高まります。購入画面に進むためにショッピングカートアイコンをクリックすることなどが代表的なイメージでしょう。デザインでよく使われているパターンは、「使いやすいと考えられているパターン」と言えます。個性や独自性を出すことは必要ですが、奇抜になりすぎてユーザーが使いにくさを感じる恐れもあるでしょう。定型パターンを導入することでユーザービリティの高いデザインが実現します。
ユーザーが直感的に分かりやすいを常に意識
【アプリデザイン インタラクションデザインのまとめ】
- インタラクションデザインの5要素と本質を理解
- 2つのデザインの違いは粒度の違いと言える
- ユーザー視点で考えた際に4つの定義が意味を持つ
馴染みのないUIだと、ユーザーの操作に悪影響があることは明白です。独自性があっておしゃれだけど使いにくいアプリケーションよりも、平凡でつまらなくてもユーザーにとって使いやすいデザインにすることが重要になります。今一度、インタラクションデザインは「装飾美＜機能美」の構図となることを意識しましょう。
また、インタラクションデザインの難しさの1つとしては「ユーザーのドメイン知識（業界の知識）量の違い」が挙げられます。自社アプリケーションを利用するユーザーは「昔から自社アプリケーションを利用しているユーザー」「競合アプリケーションを利用したことがあるユーザー」「ドメイン知識はあるユーザー」「ドメイン知識がないユーザー」など多岐にわたるので、どのターゲットを想定しているのかという選定を間違えずに行うことが大切です。
