マイクロインタラクションの例

マイクロインタラクションの例

私たちが選んだ例は決して網羅的なものではなく、一般的な使い方の範囲に過ぎません。これらは、オンライン体験に付加価値を与えながらも、多くの場合、当たり前と思われている、あなたが毎日体験する可能性のあるデジタル要素の一部です。

スクロールバー

初期のインターネットでは、スクロールバーは物理的な機能を持っていました。現在では、スクロールバーは、私たちがページのどのあたりにいて、そのページにあとどれだけのコンテンツが含まれているかを示すアニメーション機能となっています。

プルしてアニメーションをリフレッシュ

スマートフォンでは一般的な機能であるプルトゥリフレッシュ・マイクロインタラクションは、ページのリロード、新しいメールの取り込み、天気予報の更新などを行うことができます。回転するホイール、ブランドのGIF、またはプログレスバーは、私たちのリクエストを認識し、それを処理していることを私たちに知らせます。

スワイプ・アニメーション

悪名高いスワイプがなかったら、出会い系アプリはどうなっていただろう？十字やダニ、ハートのひらめきをアニメーション化することで、私たちの決断に対するリアルタイムのフィードバックが得られる。

デジタルアラーム

システム主導のトリガーに対する聴覚的な反応の例：特定の時間になるとアラームが鳴る。しかし、スマートフォン、タブレット、コンピューターでは、タスク完了への反応を求める視覚的なフィードバックに支えられています。

お知らせ

通知も同様だ。オーディオとビジュアルフィードバックは、要求されたイベント、オプション、またはプロモーションに関するアップデートとアラートを配信し（そして、しばしば、あなたがサインアップしたとは思わなかったものについても！）、意欲を失ったユーザーを引き戻すように設計されています。

パスワードエラー

新しいエラーページにジャンプして入力フィールドに何度も入力する代わりに、インラインバリデーションは時間とフラストレーションを節約します。また、正しい文字数、数字、特殊文字を確認するなど、インラインのパスワードエラーフィードバックにより、新しいアカウントの設定を効率化できます。

オンボーディング・ホットスポット

新しいソフトウェアやプラットフォームを探求していると、学ぶことがたくさんあります。脈打つ小さなドットでも、うまく配置された吹き出しでも、ユーザーはこのシステム主導のチュートリアルに従う方法を即座に知ることができる。ページ上に一度にたくさんのアニメーションが表示されると、圧倒されて不器用になってしまうので、決まった道筋に従って、新しいユーザーは機能をナビゲートする方法を学び、可能な限り簡単な方法で一つずつ消化していきます。

オンライン・チャットとメッセージング・ステータス

メッセージングアプリのユーザーに視覚的なフィードバックを与えることは、アプリを粘着性のあるものにする方法の素晴らしい例だ。3つのドットが跳ね返ることで、私たちはすぐに相手がメッセージを読み、返信していることを認識できる。また、例えばWhatsAppの場合、視覚的なフィードバックはページの上部にあり、受信者がオンラインか、不在か、タイピング中かを教えてくれる。好き嫌いは別として、二重の青いチェックマークは、あなたのメッセージに関する情報を即座に提供してくれます。

複雑なナビゲーション構造を整理する

多くのウェブサイトでは、膨大な量の情報を共有するため、ナビゲートしやすい構造化された情報アーキテクチャが必要です。多くの情報があり、1つの小さなスクリーンしか利用できないことが多いため、認識しやすいアイコン（ハンバーガーとして知られる3本の水平線）の後ろにすっきりとまとめ、ユーザーが各カテゴリーをクリックするとスライドして表示されるようなアニメーションにすることで、欲しいものをシンプルかつ簡単に見つけることができます。

フォーム入力とチェックアウトプロセスの効率化

予期せぬエラーメッセージが表示されると、非常にイライラするものです。そのため、多くのフォームやオンラインチェックアウトでは、ユーザーをトリガーとしたマイクロインタラクションによってエラー防止機能を追加し、プロセスを簡素化しています。Eメールフォーマットのインラインバリデーション、必須フィールドの提案、正確な日付を指定するためのカレンダーボックスの導入など、どれも私たちが見落としていたかもしれないエラーを修正するために戻ってくることなく、ゴールまでたどり着けるように設計されています。このテクニックはまた、アカウント作成プロセスを合理化し、サインアップを容易にし、ユーザーの放棄を少なくします。

マウスオーバー効果とカーソルの変化

私たちは、画像や情報ボックス、スライドがクリック可能かどうかをテストするために、その上にローリングすることに慣れていますが、「クリックするとお問い合わせページに移動します」「長押しして移動すると、選択肢を並べ替えることができます」といった指示がアニメーションで表示されることで、ユーザーが求めているフィードバックを正確に得ることができます。

検索ボックスの拡張

あらかじめ定義されたオプションを持つ拡張検索ボックスや、入力すると自動的に候補が表示される検索ボックスも、製品とユーザーのUXに機能と価値を追加する素晴らしい例です。

チャットボックスの人間化

より感情的なチャットボックス体験を作り出すために、応答のアニメーションは効率的でありながら、人間の行動を表すようなタイミングになっている。ユーザーが質問やリクエストを送信すると、AIの応答であるにもかかわらず、誰かがタイピングしていることを示唆する3つの跳ね返るドットが表示されます。チャットボックスに人間のアバターを与えることで、あなたが人に対して感じるのと同じ感情的なつながりが生まれます。

アニメーションの賢い使い方

プログレスバーが拡大したり、回転したり、画面上で跳ねたりしながら、待ち時間の画面に情報、プロモーション、または情報を追加することで、ユーザーに付加価値を与えます。これは、買い物客、ユーザー、または会員に、彼らが検討したことのない商品についてアップセルしたり、教育したりする絶好の機会です。

もしそれがあなたのブランドに合っているなら、気まぐれやジョーク（私たちは皆、思わず微笑んでしまうようなセンスの良い楽しい404ページを見たことがある）を加えることは、ユーザーの訪問に直接的な何かを加えることはないかもしれないが、ユーザーとの関係を強化し、顧客ロイヤルティを高めることになるだろう。

マイクロインタラクションの成功例があなたを刺激する

私たちは皆、どのウェブサイトやアプリの要素が最も印象的で、私たちのインタラクションをより簡単に、より楽しく、そして最終的にはよりやりがいのあるものにすることで、私たちの体験に付加価値を与えてくれるかを知っています。ここでは、私たちのデジタル製品の使い方を大きく変えたものをいくつか紹介します。

Facebookのリアクト機能

フェイスブックが「いいね！」ボタンをシンプルな親指を立てるだけのものから、アイコンを長押しすることでリアクションを選べるものに変えたとき、新しいエモーショナルなオプションにはそれぞれユニークな小さなアイコンとアニメーションがついた。それは間違いなく、私たちが可能な限り迅速かつシンプルな方法で自分の気持ちを相手に伝える方法を変えた。

アップルとグーグルの音声コントロールの解決策

アップルもグーグルも、音声コントロールのリクエストが処理されていることをユーザーに知らせる必要があった。すべてのプロセスは、最小限の、しかしシンプルでスマートな視覚的フィードバックで行われる。

あなたがリクエストすると、Google Assistantのフローティング・ドットが現れ、それを聞いていることを知らせます。あなたが話すと、ドットは音波に変わり、あなたの声を拾っていることを知らせ、応答とともにフィードバックを伝えます。Siriも、抽象的なブランドイメージではあるが、同じことを行い、振動したり、形を変えたりして、あなたの声をロックオンしていることを示す。

概要

フラストレーションを軽減し、ユーザーがある状態や段階から別の状態や段階へとシームレスに移行できるようなスムーズなインタラクションを作成することは、理想的なユーザーエクスペリエンスにとって不可欠です。うまく設計され、提供されたマイクロインタラクションはまさにそれを提供します。

UXリサーチャーとして、マイクロインタラクションをデザインする人にとって理想的なバージョンを決定するのは私たちの役割です。ユーザーリサーチとテストによって、私たちはA-Bテストとプロトタイプテストでベストパフォーマーに磨きをかけることができます。ユーザーリサーチの段階は、私たちのフォーム送信やチェックアウトプロセスにあるマイクロインタラクションの多くがそうであるのと同じように、デリバリーの欠陥を減らします。