プロトタイプを改善するパワフルな マイクロインタラクション
マイクロインタラクションは、強化とフィードバックによってユーザーエクスペリエンスを向上させます。マイクロインタラクションがなければ、ユーザーインターフェースは退屈で活気のないものになってしまいます。
好むと好まざるとにかかわらず、デジタル製品は人間の心理を利用しています。チャットやソーシャルメディアのアプリで「入力中…」と点滅しているのを見ると、その人が何を言おうとしているのか気になってしまいます。
このようなマイクロインタラクションは、ユーザーを引きつけ、製品を使い続けたり、購入したり、ポジティブなブランド体験を共有したりする可能性を高めます。
一方で、マイクロインタラクションは、ユーザーがユーザーフローを完了するのを妨げ、結果的にネガティブな体験をもたらします。
適切なバランスを見つけるには、UXチームがユーザビリティスタディや関係者からのフィードバックを通じて、エンドユーザーとともに忠実度の高いプロトタイプをテストすることが重要です。
UXPin Mergeを使用すると、GitリポジトリやStorybookから完全にインタラクティブなコンポーネントを使用して、UXデザイナーがハイフィデリティ・プロトタイプを作成でき、インタラクションの追加プロセスをスピードアップできます。コードベースのプロトタイプを使用することで、UXチームは最終製品で使用されるマイクロインタラクションを正確にテストすることができます。UXPinを使った高度なプロトタイピングを体験するには、今すぐ無料トライアルをご利用ください。
マイクロインタラクションとは？
マイクロインタラクションは、システムやユーザーからのトリガーに基づいて、フィードバックを提供します。このフィードバックは、タスクが完了したことをユーザーに知らせたり、アクションが必要なときにユーザーに警告したりします。
マイクロインタラクションは、トリガーとフィードバックのペアで動作します。最初にトリガーがあり、次に確認のためのフィードバックがある：
- トリガー：ユーザーのアクションまたはシステムの状態変化
- フィードバック：ユーザーインターフェースへの視覚、聴覚、触覚の変化
私たちが毎日無意識に使っているマイクロインタラクションの優れた例として、プレビュー通知をスワイプで消すことが挙げられます。携帯電話を使用中に通知を受け取った場合、よくスワイプすると、通知のポップアップが画面からスライドして消えます。
上記の例では、マイクロインタラクションのトリガー-フィードバックを次のように定義することができます：
- トリガー：ユーザーが通知のポップアップをスワイプする
- フィードバック：通知が画面から消える
ポップアップで表示される通知もマイクロインタラクションです。
- トリガー：システムが通知を受け取る
- フィードバック：通知ポップアップのアニメーション
通知ポップアップは、複数の目的を果たすマイクロインタラクションの素晴らしい例です：
- ヘルプ：ユーザーに新しいメッセージを通知する
- マーケティング：通知を送信した製品の使用をユーザーに勧める
マイクロインタラクションの4つのステージ
ユーザーにとって、マイクロインタラクションはトリガー・フィードバックとして起こります。しかし、UXチームやエンジニアが知っているように、舞台裏ではさらに多くのことが行われています。すべてのマイクロインタラクションには、4つのステージまたはステップがあります。：
- トリガー：ユーザーのアクションまたはシステムの状態変化
- 条件：どのようなマイクロインタラクションがトリガーされるかを定義するシステムルール
- フィードバック：ユーザーインターフェースへの視覚、聴覚、触覚の変化
- モード：マイクロインタラクションが完了した後に起こること-ステートまたはUIの変更
UXPinは、クリック/タップ、マウスアクション、ジェスチャーなど、様々なユーザートリガーをUXデザイナーに提供します。また、プロトタイプの次のアクション（マイクロインタラクションを含む）に対して「if-then」条件を設定することができます。これは、Javascriptの関数を実行するのと同様です。
実際にお試しください。UXPinの無料トライアルにサインアップして、世界で最も先進的なプロトタイピングツールで遊んでみてください。
なぜマイクロインタラクションが重要なのか？
マイクロインタラクションは、ブランドがユーザーとコミュニケーションをとることを可能にし、わかりやすさ、次のアクション、ブランドエンゲージメントなどを提供します。
わかりやすさとシステムフィードバックの提供
例えば、Instagramのフィードを下に引っ張ると（ほとんどのアプリで）、上部にローディングアニメーションが表示され、システムがフィードを更新するために働いていることを示します。
このマイクロインタラクションがなければ、ユーザーは、システムが A.自分のアクションに応じたのか、B.タスクを完了したのかを知ることができません。
アクションを起こす
マイクロインタラクションは、ユーザーにアクションを起こさせるのにも役立ちます。最も一般的なものは、Eコマースで見られる「カートに入れる」というマイクロインタラクションです。
買い物客が商品をカートに入れると、ヘッダーにあるカートのアイコンが揺れたり、色が変わったりします。場合によっては、画面の横からカートがスライドしてきて、ユーザーにチェックアウトを促すこともあります。
ブランディング
マイクロインタラクションは、ユーザーにポジティブな印象を与えたり、楽しいアニメーションを提供することで、ブランド体験を向上させます。
例えば、DuckDuckGoのアプリを使用したことがある人は、「すべてのタブとデータを消去」をクリックすると、ブラウザが閲覧履歴を消去したことを示す炎が表示されます。
このマイクロインタラクションは、DuckDuckGoがユーザーにブラウジングのプライバシーを提供し、トラッキングクッキーをブロックすることを約束するものです。
マイクロインタラクションの重要性を示すその他の例
- ナビゲーションとユーザーフローの改善
- 特に新しいユーザーに対して、指示を与える。
- ユーザーのエラーを示す、または防止する（必須項目での入力不完全なフィールドに赤でハイライトするなど
- エンゲージメントや共有を促進する
マイクロインタラクションの例
マイクロインタラクションには無限の可能性があります。UXデザイナーはしばしば、マイクロインタラクションで創造性を発揮して楽しんでいます。
ここでは、マイクロインタラクションの最も一般的な例と、それらがどのようにユーザーエクスペリエンスを向上させるかをご紹介します。
マウスホバーエフェクト
マウスのホバー効果は、デスクトップユーザーにとって最も一般的なマイクロインタラクションの一つです。これらのマイクロインタラクションは、ツールチップを使って分かりやすくしたり、カーソルを変えてクリック可能な要素を示したりすることができます。
また、ホバーによるマイクロインタラクションは、画像カルーセルの開始／停止や、ビデオのプレビューを可能にし、ユーザーが画面を「ブラウズ」してからどこをクリックするかを決めることができます。
クリック/タップエフェクト
ほとんどのインタラクションは、ユーザーが画面上の要素をクリックしたりタップしたりすることで発生します。クリック／タップによるインタラクションには、無限のマイクロインタラクションと可能性がありますが、ほとんどの場合、製品やウェブサイトをナビゲートする方法を提供しています。
クリック/タップアクションは、ボタンを押すエフェクトのように、要素上のマイクロインタラクションをトリガーし、ユーザーが別の画面に移動したことを示すために、ページのスライドトランジションをトリガーすることがあります。
タップ／クリック／ホールドエフェクト
タップ＆ホールドのマイクロインタラクションは、ドロップダウンメニューに代わる優れた機能で、特にスクリーンスペースが限られたモバイルデバイスでは有効です。ユーザーは要素をタップ＆ホールドすることで、より多くの選択肢を得ることができます。通常、何らかのマイクロインタラクションでポップアップを起動します。
Facebookの「いいね！」ボタンがその典型例です。デスクトップでは、「いいね！」ボタンの上にカーソルを置くと、より多くの投稿のリアクションを見ることができます。モバイルではマウスカーソルがないため、同じ機能を利用するには「いいね！」ボタンをタップ＆ホールドする必要があります。
ハプティック・フィードバック
最近のスマートフォンやゲーム機のコントローラーには、ユーザーやシステムの動作に対応した振動である「触覚フィードバック」が搭載されています。
ゲームでは、撃たれたり殴られたりするようなアクションシーンに触覚フィードバックがよく使われます。この振動により、ユーザーは画面上で起こっていることを聞いたり、見たり、感じたりすることができ、没入感を得ることができます。
スマートフォンで親指を使った生体認証を行った場合、認証に失敗すると親指の下にわずかな振動が伝わります。この触覚マイクロインタラクションは、親指の位置を変えて、もう一度やり直さなければならないことを知らせてくれます。
データ入力・進捗管理のためのマイクロインタラクション
マイクロインタラクションは、データの入力や進捗状況に非常に効果的です。よく、新しいパスワードを作成するときに、「弱い」から始まり、「強い」「非常に強い」へと進行していくプログレスバーが表示されます。
また、「サインアップ」や「確認」のボタンは、シェーディングされた暗い色/クリックできない状態にしておき、次に進むために十分な強度のパスワードを作成した後に点灯させることもできます。
フローの上部にプログレスバーを設置すると、ユーザーに確認ページまでの残り時間を知らせることができます。ユーザーが進むにつれて、バーがアニメーションしたり、色合いが変わったりして、完了を促すことができます。
スワイプ／スライドによるマイクロインタラクション
UXデザイナーは、移動やナビゲーションを示すためにスライドによるマイクロインタラクションをよく使います。これらのマイクロインタラクションはモバイルで最も効果的ですが、デスクトップ画面でも画像カルーセル、セールスファネル、チェックアウトフローなどで効果を発揮します。
モバイルデバイスでは、タップする代わりにスワイプすることで、よりスムーズで高速なナビゲーションが可能になります。スライドのマイクロインタラクションは、アクションに対応しているため、スワイプとの相性が良いです。
スライドマイクロインタラクションの優れた例として、出会い系アプリでの左右へのスワイプがあります。ユーザーがスワイプすると、マッチする可能性のある相手が画面外にスライドします。一致した場合、アプリは「It’s a Match」というマイクロインタラクションと、チャットを開始するためのボタンやリンクをユーザーに提供します。
システムフィードバック
マイクロインタラクションは、システムのフィードバックをユーザーに伝える上で重要な役割を果たします。回転するローディングアイコンは、最も一般的なシステムマイクロインタラクションです。これらのマイクロインタラクションは、アプリやウェブサイトのロード中にユーザーに待つことを知らせます。
回転するアイコンがないと、ユーザーはアプリがクラッシュしたと思ってしまうかもしれませんし、クリックやタップを続けてしまい、結果的に複数のサーバーリクエストが発生してしまうかもしれません。
メッセージの通知も、システムのフィードバックの好例です。アプリは（他のユーザーから）新しいメッセージを受け取り、アプリを開くように警告します。
まとめ
マイクロインタラクションの重要性と、それを利用してユーザーエクスペリエンスを向上させる方法をご紹介しました。何事も「過ぎたるは及ばざるが如し」です。マイクロインタラクションを使いすぎたり、無駄に長いアニメーションを作ってユーザーの動きを遅くしたりしないようにしましょう。
UXデザイナーは、ユーザビリティスタディからのフィードバックをもとに、ユーザーがナビゲーションのためにマイクロインタラクションを必要としている箇所や、強力なパスワードの作成など重要な指示を見逃していないかを判断する必要があります。
UXPinプロトタイプ：マイクロインタラクションの作成
UXPinは、UXデザイナーがハイフィデリティ・プロトタイプのための没入型ユーザー体験を作成するためのトリガー、条件、およびインタラクションを提供します。
また、変数を作成してマイクロインタラクションをパーソナライズすることもできます。例えば、サインアップフォームからユーザーの名前を取得し、ユーザーがサインインに成功したときのウェルカムアニメーションをパーソナライズすることができます。
また、ページ遷移の有効化、要素の表示/非表示、トグル、状態の設定、APIリクエストの作成など、様々な機能があります。UXPinは、UXチームが完全に機能するハイフィデリティ・プロトタイプを構築して創造性を発揮するためのツールと柔軟性を提供します。UXPinで次のプロトタイプのデザインを始めましょう。世界で最も先進的なコードベースのデザインツールを使ったプロトタイピングのパワーを体験していただくために、14日間の無料トライアルをご用意しています。
