UXに貢献。マイクロインタラクション10選

Dan Saffer氏の著書「マイクロインタラクション ー UI/UXデザインの神が宿る細部」によると、マイクロインタラクションについて以下のような記載があります。

マイクロインタラクションとは、単一のシナリオに基づいてひとつの作業だけをこなす最小単位のインタラクションのことです。

マイクロインタラクションを言葉通りに解釈するとは「細部のやり取り」と言えるでしょう。

ではマイクロインタラクションは実際にどんなことができるのでしょうか？
ハンバーガーボタンをクリックした時の「三」が「X」に折りたたむアニメーションなど、 ユーザーが何かを選択したり、ボタンをクリックしたりする行動に対して起こるアクションは至る所に実装されています。このような細部の効果によって、ユーザーにより気付きやすく、より分かりやすく、主に視覚を通じて効果的に目的を達成できるよう促すことがマイクロインタラクションの最大の目的です。
ユーザビリティを高めるマイクロインタラクションはユーザーとシステムのやり取りを円滑にし、サービス、プロダクトへの評価を高めます。

以下の内容は、UXを高めるにあたり必要なアニメーションです。

また、PANTONEが2017年秋におすすめの10色を発表しました。いずれも落ち着いた素敵な色なので、デザインに取り入れてみてはいかがでしょうか。

Webサイトの状況を伝えるとは、Webサイトで今何が起きているかをユーザーに発信し続けるということです。ユーザーは早いレスポンスを期待しますが、ユーザーの環境などでWebサイトが反応を返すまでに時間がかかる場合があります。 その際には、ローディングを表示させましょう。状況を伝えることでユーザーのストレスは軽減します。
普通であれば、ストレスとなる状況でもアニメーションを使って ユーザーにWebサイトの体験を良いものにしていけたらベストですね。

参考サイト：CodePen

CTAとは日本語では行動喚起とされています。
魅力的なアニメーションを実装することで、ユーザーの興味を引き、次のアクションへと誘導することが可能になります。

参考サイト：CodePen
参考サイト：CodePen

スペースを節約するために、必要に応じてアプリ内のボタンを別のものに置き換えることがあります。 その際にアニメーションはユーザーを引きつけ、伝えたい情報を見落とさないようにします。

参考サイト：Bootsnipp
参考サイト：CodePen

スマホやスマートウォッチという小さい画面において、たくさんの情報を表示させることは難しい場合があります。インタラクションでユーザーが今いる場所を把握でき、ユーザーの行きたいページへすぐに行くことができます。

参考サイト：Significa
参考サイト：Codyhouse
参考サイト：Tympanus

データ入力のクオリティーを高めることで、Webサイトの質はグッと高まります。
ユーザーにとってデータ入力はめんどくさい作業ですが、マイクロインタラクションを取り入れることで、ユーザー体験が向上します。

参考サイト：CodePen
参考サイト：Tympanus

いかがでしたでしょうか。
UIの向上のためにインタラクションは今では、必須の項目となっています。 サンプルのソースも探せば、たくさん出てきますので 試したりアレンジしたり、インタラクションを使うことの自分なりの答えを出してみてください。

出典：UIにマイクロインタラクションを！ より良いUXのための７つの秘訣

出典：【Webデザインの基本】今やなくては致命的？「マイクロ・インタラクション」の使用法を確認しよう

出典：2016年も大流行のマイクロインタラクション UXのカギ握る「イージング」の役割

出典：小さな変更で大きくUXを改善するマイクロデザインってなに？

出典：マイクロインタラクションで気をつけたい5つのポイント