開発者とデザイナーのコラボレーションにより、マイクロインタラクションとUIアニメーションを実現

マイクロインタラクションとUIアニメーションにより、ユーザーに楽しい体験を提供できます!

こんにちは、キムキョウです。CapitalOneで約2年間プロダクトデザイナーとして働いています。私はここでの仕事を通して、あなたが自分で使ったかもしれないいくつかのモバイルプロジェクトを含め、マイクロインタラクションとアニメーションを使ってきました。テクノロジーの仕事を始める前、私のバックグラウンドは映画でした。映画では、観客を引き付けるストーリーを作成するためのストーリーテリングと編集がすべて焦点です。その多くはトランジションを使用して実現されます。今日、これらのスキルは、デジタルツールの経験とストーリーを作成するのに役立ちます。

私がデザインしているとき、トランジションとストーリーテリングの素晴らしい、楽しい体験をユーザーに与える要因について考えます。

製品がユーザーに楽しい体験を提供するためには、見た目に美しいデザインと印象的なアニメーション効果以上のものを提供する必要があります。

製品がアプリベース、ウェブベース、またはその他の形式のデジタル製品であるかどうかに関係なく、ユーザーを引き付け、使用するのが楽しく、直接かつ有意義な方法でそれに関与する機会を与える必要があります方法。

マイクロインタラクションには、多くのデザイン要素にはない方法でユーザーエクスペリエンスを楽しく満足のいくものにする力があります。製品設計のコンテキストでマイクロインタラクションに入る前に、基本から始めましょう。

彼らは何ですか?ユーザーエクスペリエンスに適しているのはなぜですか?なぜデザイナーと開発者は彼らを彼らの作品に組み込むべきなのでしょうか?製品設計チームはどのように協力して改善できますか?

マイクロインタラクションとは何ですか?

マイクロインタラクションまたはUIアニメーションとは何ですか?人々はしばしばそれらをきれいなアニメーション、モーショングラフィックス、または動画デザインと呼びます。しかし、彼らはそれ以上のものです。

動きの錯覚を作成するためだけに存在する他の形式のアニメーションとは異なり、マイクロ相互作用はユーザーを直接関与させ、ユーザーがさまざまなタスクを達成し、直感的かつ効果的な方法で製品と対話できるようにします。

これを優れたシステム設計の原則に結びつけると、ユーザーへのシステムフィードバックが強化され、有効になります。正しく実行された場合、ユーザーは、ユーザー(システム)がユーザーのニーズに応じて実行すべきことを実行しているというユーザーからのメッセージとして、マイクロ相互作用を受け取ります。

マイクロインタラクションが何であるかわからなくても、定期的にそれらと対話します。アプリまたはWebベースの製品を使用して特定のタスク(ニュースの読み取り、購入、ゲームのプレイ、プロファイルの作成、設定や通知の設定の調整など)を実行するたびに、あなたが行うすべてのアクションが構成されますマイクロ相互作用。マイクロインタラクションは製品のプラットフォームにシームレスに織り込まれ、その機能を透過的でアクセスしやすくし、ユーザーの全体的なエクスペリエンスを効果的に向上させます。

これらの「アクション」にはさまざまな形式がありますが、一般的な例には次のようなものがあります。

  • 仮想ショッピングカートにアイテムを「移動」するとき。
  • CTAのようなトグルボタンで2つのオプションから選択する場合。
  • ニュースフィードを更新して最新の更新を確認するために「プルダウン」するとき。
  • 長いフィードまたはページで「上下にスクロールする」とき。

マイクロインタラクションを設計するとき、ユーザーエクスペリエンスに本当に必要かつ不可欠であるかどうかを調べる必要があります。そうしないと、製品を効果的に使用しているユーザーフォームの注意をそらすか、視覚的なノイズになる可能性があります。

マイクロ相互作用の原理

マイクロインタラクションを設計する際に私が常に考慮する3つの原則があります。

  1. 連続性(および微妙)

ユーザーがアクションを実行したときに、ユーザーのエクスペリエンスに継続的なフローが生じるように、マイクロ相互作用要素は微妙でなければなりません。たとえば、長いフィードでスクロールアニメーションを作成する場合、ユーザーはスクロールアニメーション自体ではなく、ページのコンテンツに集中できるはずです。

2.予測可能性

高品質のマイクロインタラクションには、ユーザーが製品を効果的かつ効率的にナビゲートできるようにする予測可能性の要素があります。ユーザーは、自分の行動の効果を正確に予測し、それらを逆に快適に感じ、期待どおりに実行する能力に自信を持つことができます。

3.変換性

複数の画面間での流体遷移と、画面内のさまざまなオブジェクトの明確な変換は、高品質のマイクロインタラクションの重要な側面です。ユーザーは、画面と画面内の要素との関係を直感的に理解することができます。

これらの原則に従って設計された場合、マイクロインタラクションは、ユーザーとの対話方法をユーザーに知らせることにより、設計のコンテキストを提供します。マイクロ相互作用は、単一のタスクを完了する瞬間的なイベントです。おそらく、ウェブサイトやアプリのデザインの最小のインタラクティブ要素であるマイクロインタラクションは、さまざまなコア機能を提供するため、最も重要な要素の1つです。

トリガー(タップ、スワイプ、ドラッグなど)は、上記のセクションにリストされているアクション(連続性、予測可能性、変換可能性)のすべてを開始します。ユーザーは、Webサイトまたはアプリでアクションを実行して、プロセスを開始します(最初のステップの後で続行する場合でも)。これは、ユーザーからの行動を促すパターン、インターフェースによって決定されるエンゲージメントのルール(何が起こるか、どのように起こるか)、ユーザーからのフィードバック(機能するかどうか)、およびパターンまたはループ(アクションを行う)に従います。 1回発生するか、スケジュールに従って繰り返します)。

-開発者とデザイナーが協力してマイクロインタラクションを実現する方法

ご覧のとおり、マイクロインタラクションはユーザーエクスペリエンスの形成に重要な役割を果たします。このため、彼らは製品デザイナーとしての私の仕事のますます重要な部分になっています。複数のプラットフォームと用途にまたがるさまざまなプロジェクトに取り組んできた私は、これらの要素の価値や効果的な作成方法を誰もが認識しているわけではないことに気付きました。さらに重要なことは、多くの場合、チームメンバーはトランジションとマイクロインタラクションの設計に関するアイデアをお互いに表現する方法を知らないことです。

私はそれがすべてコミュニケーションに要約されていることに気付きました-私が開発者にデザインのアイデアを説明したとき、翻訳で何かが失われました。孔子からこの引用を聞いたことがあるかもしれません。「教えてください。忘れます。見せてください、覚えているかもしれません。そして、デザイナーと開発者のチームとして素晴らしい経験を生み出すのは、関与を通してです。

最初に、設計プロセスの簡単な説明を実行しましょう…

理想的な状況では、デザイナーがマイクロインタラクションのアイデアを思いつくと、従来のワークフローは次の順序で進みます。

  1. デザイナーは、自分のアイデアを実現するために必要な視覚要素とアニメーション効果を開発します。
  2. 設計者は、最終モデルとその基礎となる概念を他のチームメンバーに提示します。

しかし、設計プロセスが理論上のように実際に機能しない場合はどうでしょうか?ストーリーボードまたは不完全なモデルを提示している場合はどうなりますか?または、チームの他の誰かがモデルを設計していますか?

これが発生すると、プレゼンテーションまたは開発で問題が発生する可能性があります。これらの問題は通常、次の3つのカテゴリのいずれかに分類されます。

  1. アニメーションのアイデアは十分に明確に伝えられていません。

アニメーションのコンセプトを言葉や静止画像で説明しようとすると、視聴者の顔にしかめっ面が見えることがあります。つまり、彼らはあなたのアイデアを理解しようと最善を尽くしていますが、実際には理解していません。たとえ彼らが基本的な概念を理解していても、彼らが心に思い描いた絵は、おそらくあなたが思い描いているものと一致しません。人々は動画、静止画像、および言葉による説明をさまざまな方法で知覚する傾向があるため、アニメーションのアイデアを伝えるために言葉や画像に依存することは、誤解の余地をもたらし、多くの場合、チームのメンバー間の不必要な緊張を生み出します。

2.デザイナーは、開発者のプロトタイプを確認してテストするまで、アニメーションがうまく機能しているかどうかを知りません。

デザイナーにプロトタイピングスキルがない場合、ストーリーボードを介して開発者にアイデアを提案することに制限されます。デザイナーがマイクロインタラクションモデルを強く信じている場合でも、開発者がプロ​​トタイプを完成させるまで、その可能性を最大限に発揮しているかどうかを言うことはできません。これはいくつかの理由で問題があります。主な理由は、このようなアプローチがプロセスに導入する誤通信の可能性が高いことです。さらに、それはチームのメンバーからの疑いへの扉を開き、アイデアの実現可能性についての質問につながります。これは、開発の観点から見ると時間の面でコストがかかる可能性があります。

3.デザイナーと開発者が同じページにいない

デザイナーがUIアニメーションまたはマイクロインタラクションを作成するとき、カスタムイージング、スクリプト、エクスプレッション、その他の効果などの複雑なデザインの詳細を含めるようにします。これらのアイデアを開発者に提示すると、「タイムラインでこれを作成することはできません」または「まったく同じにすることはできませんが、試行します。」と聞くかもしれません。開発者とのさまざまな詳細および技術的な問題を明らかにします。ただし、設計者が開発者が使用するツールや言語の実用的な知識を持っていない場合、これらの議論は無駄に終わる可能性があります。これらの要素は、マイクロインタラクションが開発者のデフォルト設定と互換性があるようにアイデアを策定および議論する際に考慮する必要があり、最終製品がデザイナー(および他の全員)の基準を満たす可能性が高くなります。

これらの問題の解決策は何ですか?

すべてのデザイナーと開発者は、アニメーションのコンセプトについて独自のコミュニケーション方法を持っていますが、チームが使用している方法の1つを共有したいと思います。この方法は非常に成功しており、会議が少なくなり、チームのコミュニケーションが大幅に改善されました。

現在、マイクロインタラクションを含めるかどうかについては議論していませんが、それらをさらに改善する方法を模索しています!

スケルトンインタラクションコンセプト&インタラクションガイド

「スケルトンインタラクションコンセプトとインタラクションガイドには解釈の余地がなく、すぐに作業を開始でき、デザイナーのビジョンに一致する自信があります。」–Jesse M Majcher /リードIOSエンジニア

UXデザインに関するコミュニケーションに使用する標準的なプロセスは、UIアニメーションにうまく変換されません。まず、UXの設計とフローは画面ごとに設計されており、静的です。 UIアニメーションはそれ自体がフローであり、流動的で、タイミングに基づいています。静的設計を作成するとき、アイデアを理解してフローを議論できるように、大まかなワイヤフレームを作成します。これにより、最終バージョンを作成する前に、設計を簡単に修正および微調整できます。すべてのチームメンバーがデザインを開発者に引き渡す準備ができたことに同意したら、デザイナーはスタイルガイドと、デザインに関する詳細、仕様、その他の重要な情報を含むレッドラインを開発者に提供します。

アニメーションに同様のプロセスを使用した場合、プロセスははるかに高速で改善される可能性があります。

  1. スケルトンインタラクションコンセプト(モーションスタディ)

スケルトンインタラクションの概念は、フローを設計するときに作成するワイヤフレームに似ていますが、主な違いは、これが再生可能/クリック可能なプロトタイプデモであることです。これを会議に持ち込むと、チームメンバーは想像力を使って概念を理解する必要がなくなります。デザイナーは、再生可能/クリック可能なデモまたは静的なストーリーボードを使用して、デザインの視覚要素とアニメーション要素を直接参照できます。これにより、誰もが自分の考えを明確かつ正確に理解できるようになります。また、パートナーは非常に具体的なフィードバックを提供できるため、デザイナーにとって非常に価値があります。同時に、製品管理チームと開発チームは、プロジェクトの内部コミュニケーションと時間の見積もりを改善するための情報を取得します。

2.インタラクションガイド

チームがコンセプトに同意すると、デザイナーはインタラクションガイドを作成します。これは、要素の位置、回転、スケール、およびタイミングの概要を示すという点で、スタイルガイドに似ています。アニメーションに関する詳細をすべて追加できます。これにより、パートナーはアニメーションを明確に理解できます。デザイナーがパートナーに相互作用ガイドを表示すると、アニメーションコンセプトの動きと測定についてより明確になります。これは、コラボレーションを通じて作業を完了するために非常に役立ちます。また、デザイナーがアニメーション/マイクロインタラクションデザインでより思慮深くなるのに役立ちます。

3.デザイナー向けのプロトタイピングスキル

私の経験では、デザインコラボレーションを成功させるためには、製品デザイナーがアニメーションのドライバーであり、開発者がサポートを提供する必要があります。これは、製品設計者がパートナーシップの責任の大部分を負うことを意味します。彼らは自分の考えを非常に明確に説明する責任があるだけでなく、概念実証を提供することで実現可能であることを示さなければなりません。また、製品設計者は独自のアニメーションプロトタイプを作成できる必要があります。製品設計者がプロトタイプを作成し、会議中にそれを提示できる場合、以下の議論はより明確になり、時間がかかりにくくなり、全体としてより効果的なコミュニケーションプロセスにつながります。

それでは、デザイナーはどのようなプロトタイピングツールに慣れるべきですか?そこには多くのツールがありますが、特定のマイクロ相互作用タスクに最適なものが誰もが知っているわけではありません。これらの要素を設計した私の個人的な経験に基づいた私の推奨事項を以下に示します。

コーディングに精通している場合:

  • モバイル:Xcode、Androidスタジオ
  • モバイルまたはWeb:フレーマー
  • Web:CSSアニメーション

画面のようなプッシュとモジュール間の相互作用を設計する場合:

  • インビジョンとマーベル

より詳細なインタラクションを作成する場合:

  • 原則、Adobe CC、origami Studio、Pixate

詳細なインタラクション+アニメーションを作成する場合:

  • エフェクト後

現在、私はプロトタイプ作成にAfter Effectを使用しています。インタラクティブではない(クリック可能な)場合でも、アニメーションのコンセプトを提示するのに最適な方法です。また、効果に制限はなく、細部の動きを制御できます。 ARやVRのように、3D空間でインタラクションを行うために使用することもできます。

楽しいチームインタラクションが楽しい製品を生み出します

マイクロ相互作用は、Web、モバイルデザインなどの要素として、重要ではないにしても重要になっています。デザイナーと開発者の両方がUIアニメーションの価値を認識し、UIアニメーションを作成する意欲があるとしても、効率的で効果的な方法でのコラボレーションに苦労することがよくあります。優れたマイクロインタラクションを時間通りに出荷するには、強力なチームが必要です。このようなチームには、明確な役割の描写、効果的なコミュニケーションスキル、手元のタスクに適したプロトタイピングツールが必要です。

成功のためにマイクロインタラクションを設定するには、チームがこれらの特性を備えており、これらのプロセスに関与していることを確認してください。そして、あなた自身のマイクロ相互作用の旅で幸運を!

開示声明:これらの意見は著者のものです。この投稿で特に断りのない限り、Capital Oneは言及された企業のいずれとも提携しておらず、承認されていません。使用または表示されるすべての商標およびその他の知的財産は、それぞれの所有者の所有物です。この記事は©2017 Capital Oneです。

Capital OneのAPI、オープンソース、コミュニティイベント、開発者カルチャーの詳細については、ワンストップ開発者ポータルであるDev.Exchangeにアクセスしてください。developer.capitalone.com。