WordPressのテーマデザインでマイクロインタラクションが重要なのはなぜですか?

公開: 2016-04-06

マイクロインタラクションとは何か知っていますか? もちろん、あなたはそうします! 用語と現象を正確に関連付けることはできませんが、日常的に複数のマイクロインタラクションに遭遇します。 マイクロインタラクションは、一度に1つの小さなタスクを実行する製品関連の瞬間またはイベントです。 基本的に、私たちが携帯電話に乗ってメッセージを送信したり、ソーシャルネットワークのステータスを更新したりするたびに、私たちはマイクロインタラクションの一部になります。

マイクロインタラクションは2016年にさらに大きくなり、モバイルアプリケーションやWebデザインにすでに実装されていると言っても過言ではありません。 個人的またはビジネス上の理由で、ますます多くの人々がオンラインにアクセスしてブログやWebサイトを立ち上げたいと考えています。

ログイン/登録フォームの概念の素晴らしい例

出典: http://www.materialup.com/posts/compact-login

では、マイクロインタラクションはどのような機能を果たしますか?

マイクロインタラクションは、ユーザーインターフェイス内で実行されるアクション、またはインターフェイスとのエンゲージメントであるため、その目的について詳しく見ていきましょう。 一般に、マイクロエクスペリエンスの機能は次のように定義できます。

  • フィードバックを提供したり、イベントやアクションの結果を示したりします。
  • 特定の孤立したタスクを実行する(モバイルをサイレントモードに切り替える、サイレントモードからオフにする、Facebookの投稿を高く評価するなど)。
  • インターフェイス環境の変更。
  • ユーザーエラーの回避。

マイクロインタラクションはどのように機能しますか?

本格的なマイクロインタラクションの達人であるDanSafferは、彼の本でマイクロインタラクションが実際にどのように機能するかについての洞察を提供します。 プロセス全体は、4つのステップのループシーケンスです。

出典:http://microinteractions.com/what-is-a-microinteraction/
出典:http://microinteractions.com/what-is-a-microinteraction/
  • トリガーは、アクションを開始する視覚的な推進力です。 たとえば、写真のWordPressテーマのいずれかでギャラリーを閲覧しているときに、ホバー時に特定の画像が点灯した場合、これはマイクロインタラクションを継続するための微妙な招待と見なされます。 ユーザーの応答がトリガーです。
  • ルールは、マイクロインタラクションが発生するための条件を設定します。 WordPressブートストラップテーマを例にとると、ユーザーがWebサイトのセクションを変更する場合は常に、組み込みのドラッグアンドドロップエディター(MotoPressエディターまたはその他)を使用して結果を取得する必要があります。
  • フィードバックは、マイクロインタラクションの結果を示しています。 つまり、変更が実行されるたびに、変更はWordPressブログテンプレートですぐに有効になり、ユーザーは自分のアクションの結果を観察できます。
  • ループとモードは、マイクロインタラクションのアクションの繰り返しシーケンスを管理します。 プレミアムWordPressテーマには、ユーザーが特定の一連のアクションを実装する方法と理由について、常にこの推論メカニズムが組み込まれています。

ここに、文字通り驚くことができるマイクロインタラクションのいくつかの素晴らしい実例があります:

SpaceNeedle-ページを上にスクロールすると、アニメーションでシアトルの最も有名なランドマークの一番上に移動します。スクロールしながら、ポップアップ内の小さな情報が徐々に表示されます。
SpaceNeedle –ページを上にスクロールすると、アニメーションでシアトルの最も有名なランドマークの一番上に移動します。 スクロールしながら、ポップアップ内の小さな情報が徐々に表示されます。

出典: http://www.spaceneedle.com/home/

エイミーワインハウスの伝記のウェブサイト-ハンバーガーメニューアイコンを押すとナビゲーションバーが表示され、すべてのメニュー項目が新しい画像を表示することでホバーに反応します。
エイミーワインハウスの伝記のウェブサイト–ハンバーガーメニューアイコンを押すとナビゲーションバーが表示され、すべてのメニュー項目が新しい画像を表示することでホバーに反応します。

出典: http://www.amy-movie.com/

Toi Digital Agency-背景のクリスタルはマウスの動きに応じて動いているので、下向き矢印も動きます。
Toi Digital Agency –背景のクリスタルはマウスの動きに応じて動き、下向き矢印も動きます。

出典: http://toi.io/

マイクロインタラクションが機能するのはなぜですか?

Safferは、マイクロインタラクションが実際に機能する理由をいくつか挙げています。

  • マイクロインタラクションは、インスタントフィードバックを介して制御を提供します。マイクロインタラクションが発生すると、ユーザーはアクションの結果をすぐに確認できるため、さらに確実に進むことができます。
  • マイクロインタラクションは微妙なガイダンスを提供します—完全に気付かれずに通過する場合がありますが、マイクロインタラクションには通常、その直感的な要素が含まれており、インターフェイス内での操作方法を示唆しています。
  • マイクロインタラクションは、視覚的手段を報酬として使用します。視覚効果は一種の報酬を表し、同時にユーザーエクスペリエンスを向上させると同時に、新しい行動パターンと習慣ループを作成します。
  • マイクロインタラクションはユーザーの期待に応えます—実際のWebデザインのトレンドであるため、マイクロインタラクションはデフォルトで期待されています。 それらなしでウェブサイトを想像することは不可能です。

なぜマイクロインタラクションがWordPressテーマデザインのトレンドになっているのですか?

WordPress CMSが無料で便利なオンラインプラットフォームとして人気が高まっているため、Webデザイナーは、多目的Webサイトのテーマを開発することにより、WordPressをよりユーザーフレンドリーにすることを目指しています。 これらのテーマは、プロのWebサイトデザイナーと初心者の両方のニーズに応え、デザインの一部としてマイクロインタラクションを提供し、ユーザーエクスペリエンスを向上させます。

WordPressのテーマを使用すると、数時間で完成したWebサイトを取得できるため、便利で時間もかかりません。 その上、TemplateMonsterまたは他のテンプレートプロバイダーによって開発されたビジネスWordPressテーマのような既製のウェブサイトレイアウトの多数のオファーがあります。 マイクロインタラクションは、応答性の高いWordPressテーマにうまく統合されており、多数の電子ギズモと画面解像度で完全にレンダリングされます。 それらは人間ベースであるため、追加のガイダンスを必要とせずに、完全に理解可能で直感的になります。

マイクロエクスペリエンスは、ユーザーが特定のWordPressベースのWebサイトを操作するのに役立つだけでなく、リソースに長時間夢中になり、スクロールしてコンテンツを共有するように促します。 デザインが不十分なサインアップフォームでも視聴者をオフにする可能性があるため、デザインの細部をすべて考慮する必要があります。 最も効果的なマイクロインタラクションは、開発者がオーディエンスのニーズを理解している場合にのみ提供されます。

TemplateMonsterによるDeltexBusinessWordPressテーマでは、マウスホバー時にゴーストボタンの色が変わります。
TemplateMonsterによるDeltexBusinessWordPressテーマでは、マウスホバー時にゴーストボタンの色が変わります。

ソース: http://www.templatemonster.com/wordpress-themes/deltex-wordpress-theme-58517.html

デザインウォールによるDWAgroWordPressテーマには、マウスホバー時にアイコンの色を白から赤に変更することで反応するトップツートップメニューがあります。
デザインウォールによるDWAgroWordPressテーマには、マウスホバー時にアイコンの色を白から赤に変更することで反応するトップツートップメニューがあります。

ソース: https://www.designwall.com/wordpress/themes/dw-argo/

WordPressテーマでのマイクロインタラクションデザインのヒント

マイクロインタラクションは、人間中心のデザインのアイデアに対応します。これにより、Webサイトを閲覧する人にとって、アクションとフィードバックが理解可能で直感的になります。 フィードバックは、インタラクションが開始されたことの証拠を提供します。 これは、マイクロインタラクションをWebデザインに挿入するときに留意する必要があります。

既成のテーマで提供されるWordPressベースのウェブサイトは徐々にインターネットを引き継いでいます。 WordPressベースのオンラインリソースのWeb開発にマイクロエクスペリエンスを注意深く実装するためのヒントのいくつかを考慮しなければならないのは当然のことです。 最も重要なものを見てください:

  • WordPressガイドラインを使用して、エンドユーザーが誰であるか、およびユーザーエクスペリエンスをより人間指向にするためのビジネスまたは個人的な要件を確実に理解してください。
  • 起こりうるエラーに留意し、マイクロインタラクションのプロセスがインタラクション自体を壊さないようにします。
  • WordPressの機能を最大限に活用してみてください。不要な場合は、機能や要素を追加しないでください。 ベストプラクティスの1つは、カーソル、ボタン、スクロールバーなどの組み込み要素を作成して、マイクロインタラクションに参加し、フィードバックを提供することです。
  • より具体的なものが必要でない限り、ほとんどの人が理解できる人間指向の言語を使用してください。
  • マイクロインタラクションが時間の経過とともに適切かつ実際のものであることを確認し、煩わしいものや過剰なものにしないでください。
  • アニメーションとのマイクロインタラクションを過負荷にしないでください。他のWebデザイン要素を飲み込んだり、機能を妨げたりしないように、巧みに使用してください。
  • 特に、全体的なデザインとマイクロインタラクションデザインの配色に一貫性を持たせ、色がうまく連携するようにします。
  • マイクロインタラクションが時間の経過とともにどのように発展するかを理解します-WordPressの更新に従って変更する必要があるのか​​、それともそのままにしておく必要があるのか​​。
TemplateMonsterによるSkyHighBusiness WordPressテーマには、マウスホバーのドロップダウンに反応する全幅のトップメニューがあります。
TemplateMonsterによるSkyHighBusiness WordPressテーマには、マウスホバーのドロップダウンに反応する全幅のトップメニューがあります。

ソース: http://www.templatemonster.com/wordpress-themes/55048.html

DesignWallによるDWTrendyBusiness WordPressテーマでは、Webサイトのヘッダーに画像スライダーがあり、マウスホバーの前/次の矢印ボタンの色を変更してスライドを切り替えます。
DesignWallによるDWTrendyBusiness WordPressテーマでは、Webサイトのヘッダーに画像スライダーがあり、マウスホバーの前/次の矢印ボタンの色を変更してスライドを切り替えます。

ソース: https://www.designwall.com/wordpress/themes/dw-gamez/

WordPressのテーマは、その使いやすさと豊富な機能と組み合わせた豊富なデザインの可能性により、Webデザインの第一人者と真の初心者の両方の間でますます人気が高まっています。 過去数年にわたって、Webデザインのトレンドは、ユーザーとWebサイト環境との間の相互作用の手段としてマイクロエクスペリエンスを導入し、物事をより人間指向にする方向に向かっています。 マイクロインタラクションは、エンターテインメント、教育、または実行したアクションが正しいことの証明を提供する、考え抜かれたWebサイトデザインの不可欠な部分です。 これらのマイクロエクスペリエンスのおかげで、私たちがデジタルの世界とつながる方法は日々改善されています。