マイクロインタラクションによる優れたUX
公開: 2022-03-11製品を設計するとき、ペルソナの定義、適切に構造化された情報アーキテクチャ、思慮深く書かれたコンテンツなど、ユーザーエクスペリエンスを向上させる方法はたくさんあります。 しかし、この高レベルの構造が設定された後、ユーザーに喜びをもたらすことは、より小さなインタラクションデザインの詳細になります。
マイクロインタラクションとして知られるこれらの詳細は、自然な製品の流れを強化しながら単一のタスクを実行するように設計された製品の個々の瞬間です。 スワイプしてデータを更新したり、コンテンツを高く評価したり、設定を変更したりすることは、すべてマイクロインタラクションです。 また、シンプルなUIアニメーションを含めることもできます。たとえば、タップしたときにメニューがスライドする方法や、スワイプしたときにカードが画面からスライドする方法などです。
多くの場合、マイクロインタラクションはユーザーが意識的に気付くことさえありませんが、その微妙な詳細により、製品がより楽しく使いやすくなり、ユーザーエクスペリエンスが向上します。
マイクロインタラクションの利点
マイクロインタラクションとUIアニメーションは非常に重要であり、デザインを作成または破壊する可能性があります。または、チャールズイームズのように、家具のデザインと建築で有名です。
詳細は詳細ではありません。 彼らはデザインを作ります。
マイクロインタラクションを製品に組み込むことの主な利点は次のとおりです。
- よりスムーズなUIインタラクションにより、ユーザーにポジティブな感情的効果をもたらします
- ユーザーが行ったアクションに基づいて、ユーザーに即座にフィードバックを提供する
- より流動的で直感的な方法でアプリを介してユーザーをガイドする
- 通知に応答したり、コンテンツを共有したりすることで、ユーザーがアプリを操作するように促します
- ユーザーエラーの防止
マイクロインタラクション設計のベストプラクティス
マイクロインタラクションの機能に関する定義とコンテキストを確立し、それらがユーザーエクスペリエンスをどのように改善するかの例を示したので、マイクロインタラクションを作成するためのベストプラクティスについて説明しましょう。
ユーザーの問題を特定して理解する
ユーザーエクスペリエンスデザインの最初のルールは、ユーザーの問題を明らかにして理解することです。これは、マイクロインタラクションでも同じです。 ユーザーが何を必要としているかを理解する最良の方法は、調査やインタビューを実施するか、ユーザー調査を通じて行動を観察することです。 ToptalのデザイナーであるIvanAnnikovは、彼の記事「Going Guerrilla：Affordable UX Research Tips And Alternatives」で、ユーザーのニーズを理解することについてさらに深く掘り下げています。
マイクロインタラクションを自然に保つ
目標は、直感的で自然な方法でユーザーと製品の間のギャップを埋めることです。そのため、読み込みに時間がかかりすぎたり、ユーザーの気を散らしたりする可能性のある奇妙なアニメーションは避けてください。 代わりに、製品とシームレスに流れるデザインを作成してください。 微妙さはマイクロインタラクションの鍵です。 ユーザーを困惑させて、「それは何だったのか」と考えさせないでください。
ユーザーテストの結果をテストして反復する
経験豊富な設計者でさえ、最初の試行で完全に正しい設計になることはめったにありません。 そのため、ユーザーテストと反復設計のプロセスを使用することは、製品の発売前にユーザビリティの欠陥を減らすための簡単な方法です。
ユーザーテストフェーズでは、マイクロインタラクションのユーザビリティがテストおよび分析され、次の設計フェーズで修正されます。 このプロセスは、使いやすさの問題と問題点が修正されるまで繰り返されます。
マイクロインタラクションの構造に従う
Twitterのシニアスタッフプロダクトデザイナーであり、「Microinteractions：Designing with Details」の著者であるダン・サファーによると、マイクロインタラクションには4つの部分があります。
- トリガー—トリガーがマイクロインタラクションを開始します。 トリガーの1つのタイプは、機能のオンとオフを切り替えるトグルスイッチです。
- ルール—ルールは、マイクロインタラクションがトリガーにどのように応答するかを決定し、インタラクション中に何が起こるかを定義します。 たとえば、懐中電灯アプリは、ライトをオンまたはオフにするトリガーとしてボタンを使用します。
- フィードバック—フィードバックは、マイクロインタラクション中に何が起こっているかをユーザーに通知します。 フィードバックの例は、インライン検証を使用したサインアップフォームです。フィールドが正しく入力されると境界線の色が緑色に変わり、何かが正しくない場合は境界線の色が赤色に変わります。 このようにして、ユーザーは何かが正しいか間違っているかを即座に知ることができます。
- ループとモード—ループとモードは、マイクロインタラクションのメタルールと、繰り返し使用した場合のマイクロインタラクションの変化を定義します。 たとえば、eコマースでは、ユーザーが以前にアイテムを購入したことがある場合、[今すぐ購入]ボタンが[別の購入]に変わる場合があります。
マイクロインタラクションデザインの脱構築
マイクロインタラクションの設計の背後にある思考プロセスを示すために、Googleによるマイクロインタラクションを分解してみましょう。Googleドキュメントのファイル名提案マイクロインタラクションです。
このマイクロインタラクションは、ドキュメントの最初の行を取得し、そのテキストをドキュメントの名前として提案するため、名前の作成プロセスがより直感的になります。
マイクロインタラクションを設計するプロセスは、他の設計タスクの場合と同じです。つまり、ユーザーの問題点を特定して修正します。 以前のベストプラクティスを念頭に置いて、問題の特定を始めましょう。
ユーザーの問題
ドキュメントを整理しておくための簡単で直感的な方法は、単にわかりやすい名前を付けることです。 ほとんどのテキストエディタでは、ファイル名が最終的にドキュメントのコンテンツと相関する可能性が高い場合でも、[ドキュメントに名前を付ける]フィールドは空白のままです。 これは、マイクロインタラクションで対処する価値のあるプロセスです。
Googleのソリューション
Google Docsは、ユーザーの選択に応じて、これを2つの方法で処理します。1）ユーザーは、コンテンツを入力する前に名前フィールドをクリックしてドキュメント名をすぐに変更し、「無題のドキュメント」を選択した名前に変更するか、2 ）ユーザーがテキストの最初の行を入力すると、Googleはそれをドキュメント名として自動入力します。 ユーザーはこれをそのままにすることも、変更することもできます。
詳細を調べてみましょう。
トリガー
[ファイル]>[名前を付けて保存]メニュー機能を使用するか、デスクトップアプリケーションのようにキーボードのMacではcmd + s （Windowsではctrl + s ）を押すと、ドキュメントに名前を付けるためのトリガーがいくつか考えられます。 しかし、これらはいずれもWebのインタラクティブな性質を利用しておらず、ユーザーフローを特に強化するものではありません。
代わりに、Googleドキュメントの主なトリガーは単にドキュメント名フィールドをクリックすることです。 フィールドのホバー状態には、「名前の変更」ツールチップが表示されます。 2番目のトリガーは[ファイル]>[名前の変更]で、名前入力フィールドが強調表示されます。
ルール
ルールは、トリガーをクリックした後に何が起こるかを定義します。 この場合、テキストの最初の行がドキュメント名として表示されます。 しかし、ユーザーが名前としてテキストの最初の行を使用したくない場合はどうなりますか？ ユーザーが名前入力フィールドをクリックすると、すべてのテキストが選択され、キーストロークで削除されるため、ユーザーは新しい名前を簡単に作成できます。
フィードバック
入力フィールドの境界線の色を変更することは一般的なインタラクションパターンであり、Googleドキュメントがユーザーに即座にフィードバックを提供するためにここで使用するものです。
ループとモード
ユーザーはドキュメント名を正常に作成しましたが、トリガーはそのまま残りますが、重要な違いが1つあります。ドキュメントに名前が付けられました。
この時点で、ユーザーは、以前に定義した名前全体を変更するのではなく、名前に数文字または日付を追加するだけでよい場合があります。 この場合、前のルールとは対照的に、ドキュメント名全体を強調表示するルールは無効になっています。
結果
問題を定義し、マイクロインタラクションの4つの部分すべてに焦点を当てた後、結果はより自然でユーザーフレンドリーなエクスペリエンスになります。 Googleドキュメントのファイル命名ソリューションは、ユーザーが適切な名前のファイルを整理し、ドキュメントの命名プロセスを簡素化するのに役立ちます。
動作中のマイクロインタラクション：実際の例
タスクリストの並べ替え
Apple iOSリマインダーは、ユーザーがリストアイテムをタップ、ホールド、ドラッグしてリストの順序での位置を変更できるようにすることで、ユーザーが整理された状態を保ち、いくつかの手順を省くのに役立ちます。
ソーシャルメディアの投稿に反応する
親指を立てるボタンまたはアイコンをクリックしてコンテンツを「いいね」することは、多くのアプリやWebサイトで一般的なUXデザインパターンになっています。 Facebookは、微妙なマイクロインタラクションを通じて「好み」を超えた複数のオプションを追加することにより、このインタラクションに基づいて構築されました。
ブランドテキストの強調表示
ほとんどのブラウザでは、デフォルトのテキスト選択色を上書きすることができます。 IKEAはこのインタラクションパターンを使用して、象徴的な黄色と青の色でテキストを強調することにより、微妙なブランドの詳細を追加します。
あなたの場所を共有する
Googleハングアウトでは、ユーザーが現在地を共有したい場合の1つは、誰かが「どこにいますか？」とテキストを送信したときであると想定しています。
ユーザーがこのメッセージを表示すると、「現在地を共有」ボタンがコンテキストオプションとして表示されます。 次に、そのボタンをタップして、自分の場所の地図を他のユーザーに自動送信できます。
スワイプして選択
マイクロインタラクションを使用して、アプリ内の単純な「はい」または「いいえ」の質問に答えることができます。 Tinderは、ユーザーが一致する可能性のあるものが好きか嫌いかによって、ユーザーが左または右にスワイプする（no / yes）ことでこれを行います。
検索拡張
Google Inboxアプリは、メールをバンドルでインテリジェントにグループ化するだけでなく、音声で検索したり、シングルタップで最新の連絡先から選択したりできるように設計されています。
スピード-友達の連絡先情報を追加する
SeatGeekは、[連絡先から追加]ボタンをタップするだけでユーザーの連絡先からの情報を自動的に入力することにより、フォーム入力プロセスを簡素化します。
マイクロインタラクションの詳細
マイクロインタラクションは、ユーザーエクスペリエンスを向上させるための重要な部分であり、マイクロインタラクションについて詳しく知るために利用できる多くのリソースがあります。そのうちのいくつかを以下に示します。
一般的なマイクロインタラクションの詳細については、Dan Safferによる前述の本「Microinteractions：DesigningwithDetails」のコンパニオンとして作成されたWebサイトであるMicrointeractionsにアクセスしてください。 このサイトでは、マイクロインタラクションの詳細な説明と、オートコレクト、オートコンプリート、カットアンドペーストなどのよく知られたマイクロインタラクションの起源に関する情報が掲載されています。 この本の最初の章は、無料でダウンロードすることもできます。
マイクロインタラクションのインスピレーションについては、デジタル製品のマイクロインタラクションの厳選されたコレクションであるリトルビッグディテールをご覧ください。 Apple、Trello、StackOverflowなどの企業がマイクロインタラクションとUIアニメーションを実装する方法の例を示しています。
Framerでマイクロインタラクションを作成する方法については、Toptal Designer、Wojciech Dobryの記事、Framerチュートリアル：プロトタイプを改善するための7つのシンプルなマイクロインタラクションをお読みください。
ご意見をお聞かせください。 以下にあなたの考え、コメント、フィードバックを残してください。
•••
Toptal Designブログでさらに読む：
- デザインの原則とその重要性
- 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
- ゲシュタルトのデザイン原理を探る
- Adobe XDとSketch–どのUXツールがあなたに適していますか？
- トップデザイナーが使用する10のUX成果物