キラーなUXデザインの秘密: すべてはマイクロインタラクションにある
公開: 2016-11-13デザインは細部に宿る。
先日、母を亡くしたお悔やみを伝えるメッセージだったので、書きにくい古い友人へのメッセージを作成しました。 私たちはその週の初めに何度か電話で話しましたが、私が彼女のことを考えていることを知らせるために、Facebook Messenger アプリで彼女に簡単なメッセージを送りたかったのです。 メッセージの作成を終え、最後に小さな「ハート」を追加することにしました。
ハートをタップするというこの単純な行為が、私の携帯電話の画面に浮かぶ赤いハートの楽しい爆発に変わり、いくつかのばかげた効果音も伴いました. この瞬間は短くつかの間でしたが、困難な時期に数秒間の驚きと喜びをもたらしました.
これは、赤いハートをタップした後に画面に起こったことです。
マイクロインタラクションとしても知られるこれらの小さな詳細は、ユーザーとデバイス/製品の間のエクスペリエンスをより楽しく、簡単に、効果的で、人間的なものにすることができます。 多くの場合、これらのマイクロインタラクションに気付かないことさえあります。
それらは巧妙に微妙で、時にはほとんど見えません。 しかし、彼らは製品をユーザーが生ぬるいものではなく、愛するものにすることができます.
言い換えれば、マイクロインタラクションは、ユーザーとテクノロジーの間のギャップを感情的かつ人間的なつながりを通じて魔法のように橋渡しする可能性を秘めていると同時に、より多くのことを求めて戻ってくるように促します。
マイクロインタラクションとは?
マイクロインタラクションは、ユーザーに楽しい体験と有用なフィードバックを提供することで、単一の瞬間またはタスクを達成することに基づいています。 これらのマイクロ モーメントは、最終的に直感的かつ効果的な方法でユーザーをフローに導くものです。
本「マイクロインタラクション」の著者であり、Mayfield Robotics の製品担当副社長であるダン・サファーは、マイクロインタラクションを次のように定義しています。 設定を変更したり、データやデバイスを同期したり、アラームを設定したり、パスワードを選択したり、ログインしたり、ステータス メッセージを設定したり、何かをお気に入りまたは「いいね」したりするたびに、マイクロインタラクションに関与しています。 それらはどこにでもあります。私たちが持ち運ぶデバイス、家の中の電化製品、携帯電話やデスクトップのアプリ、さらには私たちが生活し、働いている環境に組み込まれています。ほとんどの電化製品と一部のアプリは、完全に 1 つのマイクロインタラクションを中心に構築されています。」
Saffer 氏によると、マイクロインタラクションは次のことに適しています。
- 単一のタスクと単一のタスクのみを達成します。
- 温度や曲の評価など、単一のデータを操作する。
- Spotify での曲の音量など、進行中のプロセスの制御
設定を調整します。 - Facebook のステータスなど、小さなコンテンツの表示または作成
機能または機能をオンまたはオフにする。
マイクロインタラクションを設計に組み込む理由
- ボタンをクリックする、コンテンツを共有する、メッセージや通知に応答するなど、ユーザーがサイトを操作するのを促進します。
- ユーザーにすぐにフィードバックを提供します。
- ユーザーがサイトをナビゲートするのに役立ちます。
- これらは、直感的かつ簡単な方法でユーザーをフローに誘導するのに役立ちます。
Saffer は、マイクロインタラクションの 4 つの部分を、トリガー、ルール、フィードバック、およびループとモードとして説明しています。 これらの各ステップの意味をもう少し詳しく見てみましょう。
引き金
トリガーは、対話を開始するものです。 これは、ユーザーが行動を起こすように促す、視覚的またはその他の合図です。 トリガーは、ユーザーがアイコンをタップまたはクリックするように促すアイコンの羽ばたきにすることができます。 Twitter フィードの一番上に浮かぶ青いボタンは、上向きの矢印が付いた「新しいツイート」と表示され、クリックすると、離れてから投稿されたすべての新しいツイートが表示されます。
最良のトリガーのいくつかは、ユーザーがニーズを表明しなくても、実際にユーザーのニーズを予測するものです。 これには、デザイナーがユーザーの調査と行動データを収集して、ユーザーのニーズが何であるかを予測し、それに応じてトリガーを設計する必要があります。
ルール
トリガーはルールと連動します。 これらのルールは、対話中に何が起こるかを示しています。 ルールは、ユーザーが実行するのが自然に感じられるべきであり、エラーを最小限に抑えるために存在します。 この好例は、件名を入力せずに Gmail 経由でメールを送信しようとすると、「メールに件名がありません」というメッセージが表示され、送信するかどうか尋ねられます。
あなたにおすすめ:
メタバースがインドの自動車産業をどのように変革するか
反営利条項はインドのスタートアップ企業にとって何を意味するのか?
Edtech スタートアップがインドの労働力のスキルアップと将来への準備をどのように支援しているか...
今週の新時代のテック株：Zomatoのトラブルは続き、EaseMyTripはスト...
インドの新興企業は資金調達を求めて近道をする
デジタル マーケティング プラットフォームの Logicserve が 80 億ルピーの資金を調達し、LS Dig...
フィードバック
フィードバックはルールに基づいており、その時点で何が起こっているかについての情報をユーザーに提供します。 ユーザーを念頭に置いて設計されたフォームについて受け取るフィードバックが特に気に入っています。 適切なコンテキスト内でインライン検証を設計に組み込むことは、ユーザーにとって非常に役立ちます。
たとえば、ユーザー名の入力中に緑色のチェックマークが表示されたら、パスワード フィールドの入力に進むことができます。 ユーザー名とパスワードのフィールドに入力して [送信] を押すと、ユーザー名またはパスワードが間違っていると赤いメッセージが表示されたことが何回あるかわかりません。
この状況の問題は、どのフィールドまたは文字が間違っているのかまったくわからないことです。 途中で正しい変更を加えることができれば、プロセス全体がずっと簡単になります。 これらの小さな緑色のチェック マークは、取るに足らないように見えるかもしれませんが、フォーム入力プロセス中とその後のユーザーの感じ方に大きな違いをもたらし、完了率の向上につながる可能性があります。
Twitter のサインアップ フォームは、インライン検証を使用する方法の優れた単純な例です。 アクションを完了すると、フォーム フィールドの右側にチェック マークが表示されます。 赤いエラー メッセージは、フォームを正しく入力するために何をする必要があるかを教えてくれるので、役に立ちます。
Hopper 旅行アプリも、マイクロインタラクションを賢く利用しています。 詳細を知りたい日付と目的地を入力すると、アプリが「考えて」結果を表示している間、かわいい小さなウサギが飛び回ります。 待つのが好きな人はいません。 ただし、バニーが飛び回るのを見ると、その短い待ち時間の経験に少しの喜びがもたらされると同時に、実際に何かが起こっていて、結果がすぐに表示されることをユーザーに知らせます.
ループとモード
ループとモードは、インタラクションのより大きなメタルールを決定します。 マイクロインタラクションが繰り返し使用される場合、それに応じてインタラクションがどのように変化するかを考慮することが重要です。 ユーザーの行動に基づいて、このインタラクションがどのように適応するかを考えてみてください。 初めて使用したマイクロインタラクションと 7 回目に使用したマイクロインタラクションの違いは何ですか?
時間の経過とともに適応するループを作成して、操作するたびにエクスペリエンスを豊かにしてみてください。 Facebook の On This Day Memories 機能は、エンゲージするたびに適応するエクスペリエンスを作成する方法の良い例です。
Facebook ユーザーの大半は、1 日に数回ニュース フィードをチェックしています。 ときどき 4 年前のステータス更新や写真を取得する機能があると、ユーザーに感情的な (できればポジティブな) 効果をもたらすことができます。 この特定のマイクロインタラクションが悪影響を与える可能性があります。 たとえば、ユーザーを悲しませたりストレスを与えたりする可能性のある古い投稿を表示すると、意図しない悪影響が生じます。 私はFacebookに、こうしたネガティブな経験が起こらないようにする方法を検討することを提案します。
マイクロインタラクションを設計する際の留意事項
デザインしすぎないでください。 マイクロインタラクションは、奇妙に感じたり、読み込みに時間がかかりすぎたりしてはいけません。 デザイン全体にシームレスに流れながら、目的を果たす必要があります。
マイクロインタラクションを初めて体験した人は、10 回目や 100 回目に使用したときと同じように感じる必要はありません。 マイクロインタラクションをコンテキストに適応できるようにします。 ユーザーが初めての場合は、矢印を使用してアプリをナビゲートします。 今後迷惑にならないように、そのメッセージを再度表示しないオプションを提供してください。
これにより、3 番目のヒントが表示されます。 何もないところから始めないでください。 ユーザー調査を実施して、ユーザー、その動機、およびコンテキストを理解します。 収集した情報は、意思決定をより効果的で使いやすいものにするために必要な情報を提供します。 彼らが 20 回目の訪問の場合は、彼らの動機と目標を把握し、その結果に基づいてマイクロインタラクションを作成します。
目標は、これらの相互作用を巧妙かつ効果的にすることです。 マイクロインタラクションのスタイルが、全体的なインターフェイス デザインのスタイルに自然に適合することを確認してください。 インタラクションは場違いに見えたり、混乱したりしてはならず、マイクロインタラクションはアプリの全体的なデザインに結び付けられている必要があります。
適切に行われたマイクロインタラクションの 6 つの例
サプライズ・オン・ユア・スリーブ
柔らかく着心地の良い同じ長袖シャツを何年も着ていると誰かが言っているのを聞いたことがあります。 ある日、同じ長袖シャツを着て日陰の並木道を走っていると、ランナーは寒くなり、寒い日に手を覆うための余分な布を引っ張って、上をひっくり返して手の上に置いたと説明しました. 下の生地には、「あなたは愛されています」という文が現れました。
これらの言葉は、生地の正確な場所に密かに印刷されており、喜びのマイクロモーメントでそれを身に着けている人々の驚くべき瞬間に表示されるように隠されていました.
スラック絵文字
Web サイトの Little Big Details では、マイクロインタラクションの優れた例をいくつか紹介しています。 彼らが紹介するものの 1 つは、Slack で絵文字を検索し、探している絵文字が存在しない場合に、「泣く」絵文字がオプションとして提案されることです。 ユーザーが欲しいものを見つけられなくてイライラするのではなく、「泣く」絵文字がユーザーを楽しませてくれます。
グーグル翻訳
Google 翻訳で「聞く」ボタンを 2 回押すと、翻訳の内容を理解するのに少し余分な時間が必要であると想定して、ゆっくりとした速度で翻訳が繰り返されます。
Googleマップのナイトモード
時間に応じて Google マップ アプリの背景が黒くなるのが好きでした。 ナイトモードは、ナイトビジョンと安全性を支援することを目的としており、完全に自動です。
メイク・ミー・パルス
このサイト Make Me Pulse をチェックして、本当に楽しいインタラクティブな体験をしてください。 マイクロインタラクション (プログレス バー、サウンド、色) を使用すると、ユーザーはトリガー、ルール、フィードバック、ループを通じてフローをガイドできます。
スクロールバー
このページの右側にある小さな灰色のスクロール バーでさえ、マイクロインタラクションがどのように有用で効果的であるかを示す素晴らしいシンプルな例であり、読者はこの記事の残りの資料がどれだけあるかを知ることができます。
この記事が、マイクロインタラクションを設計に組み込むきっかけになることを願っています。 それらは、ユーザーがあなたのデザインで経験することを、普通のものから真に記憶に残るものに変える可能性を秘めています.
[この投稿は Proto.io に最初に掲載されたもので、許可を得て転載しています。]