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