インターフェイスのマイクロインタラクションとマイクロプロンプト

微小相互作用を使用する経験は、経験とともに私たちの生活に導入され、生涯を通じて発展します。 この貯金箱に新しい知識を補充するだけです。 私たちのビジネスは、これらの確立されたルールとアソシエーションを製品で使用し、それらの使用方法を学ぶことです。



微小相互作用は、情報と特定の感情をエンドユーザーに伝える要素です。



マイクロ相互作用とマイクロプロンプトは詳細ではありません。これはデザインと製品そのものであり、高品質の製品が所有する詳細を形成します。詳細は、主にそれらを競合他社と区別するユーザーエクスペリエンス、総質量、および製品の全体像から構成されます。



まず、検討中の例では、マイクロインタラクションはリクエストのように見えるか、耳の近くで叫ぶ声のように見え、退屈なスローガンを叫びます。

マイクロインタラクションは、実世界からのユーザーインタラクションとアソシエーションの経験、人の生きた経験、他のWebリソースに費やされた時間、インターネットリソースの使用中に確立されたルールとパターンを取る必要があります。







リクエストにおけるマイクロインタラクションは、侵入的であってはならず、強制的に脅迫してはならず、クライアントが忘れているかもしれないアクション、または興味があるか気づいていないアクションを奨励すべきです。

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

Instagramは、ユーザーに興味のある投稿にコメントする形でアクションを実行することを思い出させるマイクロインタラクション機能を追加しました。これは、投稿に興味があるときだけアニメーションで注目を集めている下からのボタンの外観の小さなアニメーションのように見えます、つまり、このリクエストは邪魔になりません簡潔に、ユーザーは関心のある人からフィードバックを得ることができます。これは、プロジェクトのベースとなるものについてコメンテーターに役立つ可能性があります マイクロ相互作用。

また、マイクロインタラクションの要素への関心は、ユーザーのアバターの存在を引き付けます。そして、私たちが知っているように、私たちが知っているものは注目を集め、そしてそれをより好きになります。







インタラクションのユーザーエクスペリエンスに対するあまり良くないソリューションの例としては、コンテンツへの関心に関係なく、各投稿にこのリクエストが表示されることがあります。小さなアクションを実行し、強制的に完了させないことが重要です。



ユーザーに行動を起こすことを求めるという目標を追求するために、ユーザーにとって具体的にどのように役立つかを明確に示すこと、プロセス全体を引き伸ばさずに利点をもたらすこと、明確に、本質的かつ簡潔に話すことが重要です。 情報ノイズが私たちの意識をますます満たすにつれて、完全に不要なものから重要なものを選別することがますます困難になります。



例：ユーザーが用語集の作成を探しています。 多くの場合、サイトにアクセスすると写真が表示され、魅力的な販売見出しと良い仕事の例が表示されますが、最も重要な点を見逃しています。重要な情報が存在しないため、すべてを取得できません。 申請書を送信し、コンサルテーションを行ってから作業のコストを調べることによってのみ入手できます。



ユーザーに必要なすべての情報（価格、サービス、価格ケース）を提供して、サイト構造にスクリプトの最後の要素を入力し、アプリケーションを送信するためのボタンの形で、または少なくとも読書の最後に、便利な方法で連絡してアドバイスを得る機会を思い出させる方がはるかに効率的です、これは侵入的なアプローチではありません熟練した手でマイクロ相互作用の効果的なグループになります。



ユーザーを制限するのではなく、ユーザーを支援することをお勧めします。ユーザーにとって明らかに有益な選択をすることが重要です。



このタイプの「リクエスト」のコールバックのジャンプは効果的でしたが、サイトでの対話の確立された経験を完全に理解していないユーザーにのみ効果的でした。 今、このタイプのジャンプ、点滅、発光要素は、インターネットとほとんど関係のない人との相互作用に役立ちます、私は個人的に

サイト上のこの要素は、タブを閉じるためにマウスでボタンに到達し、リソースに表示されないようにするという大きな欲求を引き起こします。



アンカー要素のないサイトの軽率なスクロールがある場合、または情報の構造化されていない階層を持つリソースがある場合、この機能は便利です

フィードバックを得るための迅速かつ簡単な方法として。 この要素は、機能サイトの外観に少し近い松葉杖と見なすことができますが、フィクションにすぎません。



明確なセグメンテーション構造と情報の正しい配布により、ユーザーが情報を読み取らずにコマンドを聞いてデータを残すことを期待して、実際に顔をモニター画面に突っ込むよりもはるかに効率的で楽しい連絡先情報を見つけることができます。



「リクエスト」が引用符で囲まれているのはなぜですか？ この要素はリクエストではなく、上記で説明したように、「耳の下の叫び声に執着する声」によるものです。

マイクロビジュアルビジュアルダイアログ

マイクロインタラクションは、小さなリクエスト、リマインダー、アナウンスメント、注目を集め、ユーザーにとって特定の意味を持つ要素である必要があります。



以下のインターフェースでは、このトピックの例をご覧ください。ヘッダーのヘッダーに焦点を合わせてアニメーションページを読み込んだ後、トレーラー表示ユニットとのマイクロインタラクションを確認し、ボタン領域でビデオの再生を開始し、注意を集中して作成するタスクがある場合、ユーザーの目を自分自身に向けますまず、特定のボタンをクリックすると、この例はこの問題に対する建設的な解決策になります。







ショットドリブルネイサン・ライリー

デザインとテキストによるユーモアのミクロ相互作用

このお気に入りの例は、私たちの最愛のハブによって使用され、読者をそれ自体に引き付け、同時に伝達される情報の全体的かつ建設的な意味を保存します。



以下のスクリーンショットは、Habr Vkontakteの公式コミュニティのヘッダーです。







登録前のhabrテストのページも特別な喜びに値します。これは、この手法の優れた例です。



YOTAは顧客との素晴らしい相互作用を持ち、Yotaは利点、条件、関税を提示せず、内なる声でクライアントの期待に基づいて見事な動きをしました。 現時点では、提案やスローガンの代わりに、「Yota Advertising」または「Here is Yota Advertising」という碑文が表示されます。

ヨータは、視聴者のユーモアの感情を演じ、広告を思い出深いものにしました。







また、ユーモアはかなり滑りやすいパスであり、自分自身に対する信頼と気質の宮殿につながります。そのような相互作用の経験は非常に成功して魅惑的と呼ぶことができますが、ユーモアと楽しみのメモを誤って偽って、会社を拒否して無能のラベルを付けることができますプロフェッショナリズムではなく、このようにクライアントとやり取りする誇大広告の波から逃れようとするとき、神は誰かの感情を傷つけることを禁じます。

視覚的な相互作用とリクエスト

製品またはサービスを販売することを目的としたリソースをスクロールすると、多くの場合、自分自身に注意を向け、引き付ける変換要素またはアニメーションに重点を置くことができます。この例は良い解決策と考えることができます。



ひいては、悪い例は、時間全体に渡って自分に注意を引くこと、一定のちらつき、長いアニメーション、または自分だけに焦点を当てることを考慮できますが、痛みのない方法で他の要素に注意を切り替えることはできません。

成功したアニメーションはほとんど目立たないはずですが、2度目に注意を引くと同時に、アニメーションの継続時間は0.4秒以下で、他の要素に注意を切り替えます。



デザインの重要なルールを覚えておく価値があります。デザインは問題を解決する必要があり、アニメーションは視覚的に美的ではなく機能的な役割を果たすべきです。 製品に特定の問題を解決しないアニメーション要素が含まれている場合、それらを何も考えずに使用することを拒否するのは理にかなっています。







ショットクリスギャノン

連想と注意による色の微小相互作用

カラーマイクロインタラクションは、関連付け内で再生され、ボタン内にオレンジ色が表示されるため、iPhoneのロックボタンを切り替えることもできます

組み込みのユーザーエクスペリエンスを見ると、現実の世界の色から、関連性が理解され、電話がサイレントモードになったと結論付けられます。



ユーザーの注意に基づいて要素の色を配置し、重要な要素、ボタン、テキストをユーザーのパターンを考慮した色で色付けするのと同じ動きが行われます。一般的な概念を理解し、配置する要素の調和を守ることが重要であり、モニターの四方に注意を散らすことはありません。 サイト上の色の微小相互作用の重要な側面は、インターフェイス要素で使用されるセマンティックロードと感情的な色付けです。 また、二次色の寒さと暖色のグループとそれらの使用規則を覚えておく価値があります。







ショットロマンパスランド

ユーザビリティの緩和としてのマイクロ相互作用とリクエスト

マイクロインタラクションは、リソースを方向付け、その機能を提案し、新しいユーザーエクスペリエンスを簡単に教えるのに役立ちます。最も重要な側面の1つは、特定のアクションを達成するための以前の長い手順の加速と簡素化であり、同じ結果を達成するためのアクションの数と負荷を減らします。



私たち全員が、見つかったリソースのフィールドに入力してサイトを登録または入力することを好むわけではありません。 オートコンプリートにより、快適なユーザーエクスペリエンスが実現し、日常の行動が促進されます。 オートコンプリートはマイクロインタラクションと呼ばれ、ボタンはリクエストでオートコンプリートを使用します。このリクエストは最良の例の1つであり、ユーザーはボタンを1回クリックするだけでニーズに応えることができます。

微小相互作用における少しのゲーミフィケーション

行われたアクションの重要性を示すマイクロインタラクションは、ゲーミフィケーションによってユーザビリティを改善する1つの方法です。 リソースは、実行されたアクションの重要性を示すことにより、ユーザーが行ったアクションまたは計算に時間と労力を浪費していることを明確にします。



たとえば、愛され、偶像化されたHabréでは、アカウント確認レターをメールに送信すると、ダウンロードが送信され、アクションが

ユーザーに対して処理および実行されるため、ユーザーのアクションの重要性と努力を理解することは、製品に関する意見を形成する上で重要な役割を果たします。



もちろん、Ajaxフォームをダウンロードしてレターに関するメッセージをサーバーに送信する時間は不要であることは、私たち全員が理解しています。



以下の例では、「キーホルダーの設定」ページでのみ同じ画像を観察します。







必要なユーザー情報を入力する必要のあるポータルでは、クライアントが製品を使用する際に受ける改善点を説明する非侵入型メッセージボックスの外観によってデータを入力するようユーザーに求める価値があります。



この例は、ユーザーに役立つリクエストです。 ユーザーが必要としない情報を入力するように強制しないでください。また、サービスのすべてまたはほとんどの機能へのアクセスを遮断しないでください。 クライアントが制限されていないが、彼の側の小さなサービスと引き換えにもっと多くを提供したいという認識は、リソースについての意見を形成する上で大きなプラスになります。 そしてご存じのように、意見はマイクロインタラクションの使用に費やされた時間の長さ、および良い経験と悪い経験の数に依存しません。 形成は、リソースを使用することの利便性の最高点と、リソースを使用する最も不快な瞬間から生じ、感覚パラメータによってわずか2の平均値を形成します。

マイクロインタラクションの習慣

設計全体のスレッドを介して、特に特定のマイクロインタラクションを実行し、すでに開発されたインタラクションで同様の問題を解決することが重要です。 特定のマイクロインタラクションをより頻繁に使用することによるユーザー習慣の発達は、製品内のユーザーエクスペリエンスに好影響を与えます。

簡単なアニメーションとアクションの期待

完璧なユーザーアクションは、できるだけ明確でわかりやすいものにする必要があります。また、ユーザーが完了した後のアクションも同様です。



利点は、ユーザーの注意を過度にかけないことです。再生されるアニメーションは、不必要な動きがなく、ユーザーの操作が理解できないほど、単純で理解しやすいものでなければなりません。

上記を引用して、「成功したアニメーションはほとんど目立たないはずですが、注意を引き付ける必要があります。アニメーションの継続時間は0.4秒以下でなければなりません。」



よく理解できるアニメーションの例。







美しく、審美的に楽しいアニメーションの例ですが、過負荷で完全に明確ではありません。







アニメーションバプティストブリール

おわりに

協会に定められた建設の原則と、特定の要素との確立された建設、行動、および相互作用の原則で遊ぶ。



各ささいなことは、ユーザーとの相互作用、感情的な負荷、伝えられた情報の感情、実行されたアクションの痛みのない、深い分析的および論理的分析に値します。



繰り返しますが、私たちが知っていること、理解していることは好きです。 インターフェイスがどれほど美しいものであっても、まずは便利で機能的で問題を解決する必要があることを覚えておく価値があります。 重要な階層の次のステップでは、製品の美的要素が重要です。