ユーザーがウェブサイトやアプリを開いたとき、まずロゴ、色、アイコン、イラスト、画像など、明らかなデザイン要素に目を奪われるでしょう。 これらの要素は全体的なユーザーエクスペリエンスに貢献しますが、実はもっと大きなパズル、つまりインタラクションデザインの一部なのです。 この概念は、エンドユーザーにとっては、派手で新しいホームページよりも目立たないかもしれませんが、魅力的で直感的なデジタル エクスペリエンスを生み出すためには不可欠なものなのです。 インタラクション デザイン財団によると、”インタラクション デザインの目標は、ユーザーが目的（複数可）を達成できるような製品を最高の方法で作成することです。” とあります。 言い換えれば、インタラクション デザイナーは、クリック、スワイプ、タップ、または何らかのアクションによって、ユーザーが相互作用する可能性のある画面上のすべての要素を作成する責任を負っています。 インタラクションデザインの学者であるジリアン・クランプトン・スミスによって最初に紹介されたこのモデルには、4つの次元しか含まれていませんでした。 IDEXX LaboratoriesのシニアインタラクションデザイナーであるKevin Silverは、5つ目の次元を追加しました。

1D：言葉は理解しやすく、ユーザーに適切な量の情報を伝えるべきです（詳細すぎると圧倒され、情報が少なすぎると混乱します）

2D： 画像、タイポグラフィー、アイコンなどの視覚表現は、ユーザーに情報を伝えるために言葉を補足するべきです

3D： 物理オブジェクトまたはスペースは、ユーザーが操作する実際のハードウェアとオブジェクトを指します。 例えば、スマートフォンを使っているのか、それともマウス付きのノートパソコンを使っているのか。 また、デスクにいるのか、混雑した地下鉄にいるのか、どこにいるのか。 時間」は、ユーザーが最初の3つの次元とのインタラクションに費やした時間と同様に、たとえば音やアニメーションで進捗を測定する方法について言及します。 また、ユーザーと製品の反応も含まれます。

関連記事 UXデザイナーがジェスチャーによるインタラクションを探求すべき6つの理由

10 Examples of interaction design

デザインのインタラクションは、実際のところどのようなものなのでしょうか？ Dribbble で見つけたお気に入りの例をいくつか紹介します。

By Jony vino. 友人と会計を割り勘にするのは、必ずしも見かけほど簡単ではありません。特に、あなたが数字よりも視覚的な人間である場合は、なおさらです。 このアプリのコンセプトは、合計金額を入力し、チップの割合を選択すると、各自が支払う金額が表示されます。 一番の魅力は 手動で各人の部分を調整し、常にみんなのシェアを更新するのではなく、あなたは、単にアプリで各人のセクションのサイズを変更することができ、数字が自動的にeveryone.

で再計算されますプレムGurusamy。 ほとんどのEコマースサイトでは、カートを見るためにウェブサイトやアプリのまったく別の場所に移動する必要があります。 このインタラクションでは、「カートに入れる」ボタンをクリックすると同時に、商品がカートの中に「飛んで」いくのを瞬時に確認することができます。 カートは、サイトの他の部分を探索するときでも、商品を視覚的に表示し続けます。

By Igor Pavlinski. ソーシャルメディアのアプリは、トップストーリー、トレンドの動画や記事、ニュース速報などを一度に表示するため、情報過多であることで有名です。 この新しいソーシャルメディア・アプリのコンセプトは、コンテンツをソース（YouTube、Vimeo、Twitter、Redditなど）ごとに整理し、どのチャンネルを探索するかをユーザーが選択できるようにし、コントロールをユーザーの手に取り戻そうというものです。 このカードのようなレイアウトは、お気に入りのコンテンツを楽しむためにアプリを切り替える必要をなくします。 その代わり、同じエクスペリエンス内でソースを交互に表示させることが簡単にできます。 ハンバーガーをカスタマイズする方法は、100万通り以上あります。 スマートフォンで注文する場合、小さな画面で個々の食材を選択するのは器用な訓練になります。 Tasty BurgerアプリのこのUIコンセプトは、食材を種類別に分類することで、注文時の体験をシンプルにするものです。 チーズ、野菜、肉、バンズのあらゆるバリエーションを長いリストで表示するのではなく、まず食材のカテゴリー（チーズなど）をクリックし、次にゴーダやコンテなど、さまざまなタイプを表示します。 家探しをしていて、実際に物件を見ることができない場合、次善の策としてバーチャルツアーを利用することがあります。 不動産アプリ「Spec」のこのコンセプトは、新しい空間を見るときの私たちの自然な行動を利用したものです。 キッチンやリビングなど、どの部屋でもクリックして、スマホを動かせば、360度見渡すことができます。 ワンタップで簡単に部屋を切り替えられます。

By Forest Plasencia. フィルターは、さまざまな情報の断片を表面化する強力で簡単な方法を提供します。 しかし、多くのフィルターのインタラクションの問題は、アプリのポップアップや新しいページを開き、フィルターしたい情報そのものを隠してしまうことです。 このマイクロインタラクションは、フィルタリングを行う際にも、すべてを同じビューに表示することができます。 この方法では、異なるフィルタリング基準を選択したときに、データが瞬時に変化するのを見ることができます。 スマートフォンのアプリのおかげで、これまで以上に簡単に家を武装し、監視できるようになりましたが、94%-99%

関連。 ユーザーのインタラクションを記録するツールを作る

By Gil. このシンプルなページ インタラクションは、現場でのユーザー エクスペリエンスを向上させ、訪問者をより長くそのページにとどまらせるのに役立ちます。 このサイトの主な目的は、これらの物件が自然の中で、オフィスとして、そしてエクステンションとしてどのように使用できるかを紹介することです。 このページでは、それぞれの用途について個別の体験を作るのではなく、異なる用途を比較対照し、それらの間をシームレスに行き来するユーザーフローを模倣しています

By Dominik Martin. インタラクションは、インパクトを与えるために大胆で目立つものである必要はありません。 このアプリのコンセプトは、長いリストから居住国を選ぶという、誰もが嫌がる行動を簡略化するものです。 ユーザーにリストをスクロールして自分の国を探させるのではなく、このマイクロインタラクションでは、まず自分の国の最初の文字を選ばせ、その後、より小さい、フォーカスされた国のリストから探させます。 より多くの小売サイトでは、すべての詳細ページをクリックし、検索結果に戻ってより多くのアイテムを閲覧するのではなく、アイテムを「クイックビュー」することが容易になってきています。 このコンセプトでは、さらに一歩進んで、カテゴリ ページを離れることなく、各製品をさまざまな色で表示することができます。 Twitter で私たちと共有しましょう。 InVisionApp.

までご連絡ください。