意図的な相互作用の設計

公開: 2021-07-19

目的のあるインタラクションデザインの主要な原則、インタラクションが解決できる設計上の課題、およびそれをプロセスに組み込む方法を発見してください。

ユーザーエクスペリエンスでインタラクションデザインとアニメーションを考えるとき、それを派手なものと間違えがちです。ベルやホイッスル、または「ウェブサイトにすごい要素を与える」ランダムな飛行オブジェクトです。それは短期的な喜びをもたらすかもしれませんが、それはすぐに一般ユーザーにとって苛立たしいものになる可能性があります。

この種の無駄と戦うために、意味のある相互作用を設計するためのコア原則、それが一般的な設計の課題を解決する方法、およびそれを設計システムとプロセスに導入する方法を見ていきます。インタラクションは、「必要なもの」としてスコープから外れる最後の仕上げではなく、全体的なユーザーエクスペリエンスの不可欠な部分である必要があります。

意味のあるインタラクションデザインの4つの主要な原則

1.障害物の作成を避けます

インタラクションやアニメーションは、ユーザーにとって障壁となることはありません。

全画面をアニメーション化するのに2、3秒かかる「ハンバーガーメニュー」を考えてみてください。ユーザーがサイトをナビゲートしたいときはいつでも、彼らは待たなければなりません。ユーザーのタスク時間を長くすることは、競合他社のWebサイトまたはアプリにユーザーをバウンスする確実な方法です。

ただし、インタラクションの進行を遅らせることが有益な場合があります。インタラクションが複雑な場合、それを遅くすると、ユーザーにより良いコンテキストとフィードバックを与えることができます。インタラクションとアニメーションを遅らせる可能性のある例を次に示します。

新しいユーザーを新しいインターフェースにオンボーディングします。スキップオプションを使用して障害物を減らすようにしてください。
原因と結果を示すインターフェースをドラッグアンドドロップします。速すぎると、ユーザーはそのファイルがどこに行ったのか不思議に思うかもしれません。
カートに商品を追加します。これにより、チェックアウトの障壁が長くなることはありませんが、タスクが成功したことをユーザーに知らせるために十分なフィードバックをユーザーに提供する必要があります。

原則として、ユーザーがコンテキストを理解できるように、単純な対話は迅速で、複雑な対話は十分に遅らせる必要があります。

2.モーションをメッセージに一致させます

インタラクションは常にブランドのトーンの範囲内で快適に行われる必要があります。

もしAppleが、iOSでのすべてのやりとりがあなたの顔の中で速く、鋭く、そしてとげのあることをたくさんするだろうと決定したとしたら、あなたはApple製品を使っているように感じますか？ Alton Towersアプリを使用していて、ゆっくりとフェードするアニメーションと豊富なKen Burnsスタイルのトランジションを見た場合、それは魔法のような楽しさと興奮の場所、またはM＆S TV広告のように感じますか？

インタラクションがアニメーション化する方法は、常にユーザーが適切に感じる目的のトーンを表す必要があります。これにより、エクスペリエンスがより没入型で一貫性のあるものになります。それが子供向けの娯楽サイトである場合、それは少し風変わりで派手なものになる可能性があります。高級ブティックの場合は、ゆっくりと洗練された上品な雰囲気を保ちましょう。

3.目的を与える

それがユーザーを助けたり、ユーザーのエクスペリエンスを向上させたりしない場合は、それが必要ですか？

インタラクションデザインは、ユーザーエクスペリエンスを向上させる可能性が非常に高いため、目的なしに使いすぎて使用したくなるのです。 Flash Webサイトを覚えていますか？

もう少しスクロールして、インタラクションデザインが解決できる8つの課題を見てください。インタラクションがこれらのパターンに従わない場合、ユーザーを喜ばせる以外の目的がない可能性が高くなります。

4.非表示にする

最高のインタラクションデザインは目に見えず、ユーザーが気付かないうちにエクスペリエンスを向上させるはずです。

インタラクションの設計に時間を費やしたことを考えると、それは非常に悲痛なことのように聞こえますが、気づかれない場合は、おそらく彼らが素晴らしい仕事をしたためです。私たちは、テクノロジーやインターフェースがうまくいかなかったり、何かが不格好だと感じたりしたときに、それを使用することにもっと注意を払う傾向があります。物事がスムーズな場合、ユーザーはコンテンツに集中できます。

Facebook、Pinterest、Twitter、Google製品など、広く使用されているアプリやWebサイトでのインタラクションデザインの考慮事項の量は理解できません。それでも、誰かがあなたにそれを指摘するまで、あなたは本当に気付くことはありません。それらはデザインを見えなくするので、あなたは経験を楽しんで、製品、サービスまたはコンテンツとのより強い感情的なつながりを築くことができます。

インタラクションデザインが解決できる6つのデザインの課題

1.オリエンテーションとコンテキスト

インタラクションデザインは、たとえ見えなくても、ユーザーが物事がどこにあるのかを理解するのに役立ちます。

これは、画面スペースが限られている場合のモバイルデザインにとって特に難しい課題です。すべてを公開して表示すると、ユーザーは認知的に過負荷になります。重要なものを示し、重要性の低いものを隠すことが私たちの努力です。しかし、それは経験の一部を隠します。したがって、意味のあるインタラクションを使用することで、物事がどこにあるかをユーザーに視覚的に教えることができるため、覚えやすく直感的です。

インタラクションを使用してコンテキストを作成する例をいくつか示します。

Googleフォントの背景色チェンジャー。色は、ペイントバケツアイコンの中にあるように感じます。
コットンビューローでのカートへの追加とチェックアウトのプロセス。新しいバスケットページに移動するのではなく、表示されているページの右側にあるカルーセルのようなものです。

2.原因と結果のデモンストレーション

インタラクションとアニメーションを使用すると、何が起こっているのか、何を期待できるのかをユーザーに示すのに役立ちます。

この典型的な例は、ドラッグアンドドロップインターフェイスです。メディアオブジェクトを拾い上げて「ドロップゾーン」に移動すると、ユーザーがそれを拾い上げてアイテムをドロップする適切な場所に移動したことを知らせるフィードバックが表示されます。ドロップインしたら、タスクが成功したことをユーザーに通知するための検証が必要です。これは、色の変更、肯定的な検証メッセージ、さらには効果音を通じて行うことができます。

ドラッグアンドドロップ原因効果ドラッグアンドドロップインターフェイス

3.フィードバックの提供

インタラクションは、タスクのステータスを通知するための肯定的または役立つフィードバックを提供できます。

この例では、支払いボタンを見てみましょう。その素敵で光沢のある「今すぐ支払う」ボタンをクリックしたときに、実行が不十分なeコマースゲートウェイをいくつ経験しましたが、処理中であるためにクリックしたかどうかについて混乱が生じましたか？それがやっていることだとは言わなかった。そのため、インタラクションによってボタンのステータスを変更でき、少しアニメーションを使用して、「支払いが処理されている」ことをユーザーに通知し、注文確認ページに移動する前に「支払いを受け取った」ことをユーザーに通知できます。 10秒間何が起こっているのか疑問に思ったり、インターネットが壊れたかどうかを質問したりする必要はもうありません。

ボタン-ユーザーフィードバック

4.重要な情報を強調表示します

アニメーションは、静的なコンテンツよりも重要な情報を宣伝し、注目を集めることができます。

同じ画面ビュー内で一部のコンテンツの優先度が高い場合、それを宣伝するために色とタイポグラフィを使用すると、デザインシステムの一貫性が損なわれたり、使いすぎると見当違いになる可能性があります。インタラクションは、レイアウトを損なうことなく重要なコンテンツを強調するのに役立ちます。

フィットネスアプリを考えてみましょう。ダッシュボードを最初にロードするときに、今日の主要なアクティビティと統計を確認する必要があります。簡単なアニメーションを使用すると、画面に表示されるものの量を薄めることなく、このコンテンツを引き出すことができます。

ハイライト情報統計-相互作用-デザイン

5.パフォーマンスの認識を作成します

インタラクションデザインは、心理的にウェブサイトやアプリのパフォーマンスが向上しているとユーザーに感じさせることができます。

速度は、バウンス率に関連する一般的な要因であるため、ホットなトピックであり、正当な理由があります。ページ上の速度の最適化を最大限に活用しても、ページの読み込みに少し時間がかかる場合があります。ユーザーに何も表示しない、または読み込みアイコンを表示する代わりの方法があります。

スケルトンロードを使用して、ワイヤーフレーム形式で予測可能なレイアウトを表示できるため、ページがロードされる前に、ユーザーはどこを見ればよいか、インターフェイスとどのように相互作用するかを大まかに知ることができます。心理的には、何も起こらない場合に比べてページの読み込みが速いように感じますが、実際には同時に読み込まれます。

また、読み込み時間を使用して、待機時間を拡散するフレンドリーなメッセージングで何が起こっているのか、何が起きようとしているのかをユーザーに教育する機会として使用することもできます。

骨格ローディング — 骨格荷重は、従来のプリローダーよりも速い荷重時間の予測可能性と認識を高めるための要素の位置を示します。

6.ブランドの個性を追加する

インタラクションデザインとアニメーションは、ブランドのトーンを設定し、より緊密な感情的なつながりを生み出すことができます。

キャラクター主導のブランドは、インタラクションを導入して個性を体験に取り入れることで大きなメリットを得ることができます。マスコットの人間性を活かすことができます。ブランドに視覚的なものがない場合でも、速度と頻度を使用して個性を追加できます。簡単な方法でフレンドリーで楽しいアプローチをもたらすGoogleとその風変わりなドットプリローダーまたは音声コマンドアクティベーションを考えてみてください。

ユーザーとの感情的なつながりを構築することは、定期的に訪問するための優れた方法です。インタラクションデザインは、テクノロジーをより人間中心に感じさせることができます。これは常に目指すのに適しています。

trello-taco-プリローダー neokids-インタラクションデザイン

設計プロセスに相互作用を導入する

忠実度の低いスケッチとコンプ

アイデアをすばやく伝達し、簡単なスケッチや注釈を通じて開発者と協力して、相互作用を実装するための最良の方法を見つけます。

インタラクションデザインスケッチ

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

市場にはますます多くのインタラクションデザインツールがあり、それらを構築する前に作成およびプロトタイプ化できるインタラクションのスタイルに関して、それらはより高度になっています。

基調講演：アイデアを広めるための大雑把でシンプルなものを探しているなら、基調講演はすぐに成功します。
Adobe Animate：すべてをAdobe内に保持し、他のツールとシームレスにクロスオーバーします。これは、例示的なアニメーションに最適です。
Tumultの誇大宣伝：Sketchインターフェイスに精通していて、タイムラインの使い方を知っている場合は、Tumultをすぐに使用できます。
フレーマー：これは、アニメーションをJavaScriptに一致させるための非常に高度な機能を備えた専用のインタラクションデザインツールです。
Principle：素晴らしいSketchリンクがアップしたことで、Principleは相互作用の頼みの綱になりつつあります。学ぶのは比較的簡単で、そこで達成できることは素晴らしいです。
アトミック：データ、ロジック、変数を追加して、最終ビルドと同じくらい実用的なインタラクションを作成します。これは、コーディングの知識がある上級設計者向けです。
Invision Studio：まだ初期の段階ですが、InvisionStudioにはいくつかの優れた機能とPrincipleとの類似点があります。これがプロトタイピングおよびコラボレーション市場を支配するのに十分に進んでいるかどうかは、時が経てばわかります。