【社労士解説】ジョブ型雇用時代におけるフリーランスの生存戦略とは?
- コラム
- とは
- フリーランス/個人事業主
「マイクロインタラクション」をご存知ですか?
マイクロインタラクションとは、Webにおけるユーザーとのコミュニケーション手法のひとつ。快適に扱えるWebコンテンツには、細かなマイクロインタラクションが活用されています。
今回は、マイクロインタラクションとはどのようなものか解説し、WebサイトやモバイルアプリのUXにどのように取り入れて行くべきかをご案内します。
アプリやWebサービスを利用するとき、ユーザーは細かなタスクを数多く行なっています。その一つひとつの瞬間に生まれる、ユーザーとサービスの小さな相互作用を「マイクロインタラクション」と呼びます。
たとえば次のようなものがあります。
▲出典:Mattia Astorino / dribbble
Webサイトで行われる「見る」「読む」といった行為は、単純なタスクです。またそれは同時に、ユーザーにとって「やらなくてもいいもの」でもあります。そのような単純なタスクを魅力的に感じさせるテクニックが「マイクロインタラクション」です。
マイクロインタラクションは、さまざまなWebサイトやモバイルアプリで使われています。たとえばFacebookやInstagramのような、ずっと心地よく使えるアプリでは、ほぼすべてタスクに対して細かなマイクロインタラクションが取り入れられています。
マイクロインタラクションを採用すべき理由、それはユーザーの承認欲求を満たせるためです。
タスクが完了するごとに視覚的・感覚的なフィードバックを与えることで、ユーザーはギフトをもらったような気分になり、「もっとコミュニケーションをとりたい!」と思うようになります。
例えばGoogleマップは、州境を越えると「新しい州に入りました」とメッセージを伝えます。Instagramではスクリーンショットを撮ると、シェアを促す通知が表示されます。このような、マイクロインタラクションによる細かなフィードバックにより、ユーザーはWebサイトやアプリに好感を持つようになるのです。
どのようなタイミングでマイクロインタラクションを使うのが良いでしょうか。
適切な場面で用いなければ、単にサイトを重くするばかりで、かえってユーザーにストレスを与えてしまい、UXを低下させます。
ここからはマイクロインタラクションを実装すべきおすすめの利用タイミングを7つご紹介します。
アプリ内で何らかのプロセスが進行中であるばあい、ユーザーにその進行状況を知らせるのとても大切です。
特に、プロセスに少し時間がかかってしまうばあいは、必ずステータスを表示しましょう。
たとえば、データのダウンロード / アップロード画面では以下のような表示が考えられます。
▲出典:xjw / dribbble
もしくは、進行状況をスクロール方式で表示するのも良いでしょう。
ポイント:ユーザーを退屈させないこと。多くの情報を表示た上で、現在の進行状況も分かりやすく表示しましょう。ローディングバーは、ユーザーの注意を引きやすく混乱も防げます。
何かしらの変更が発生した際には、通知機能を使いましょう。
たとえば新着メールが届いた時など、ユーザーが情報を見逃してしまうのを防ぐのに活用できます。
▲出典:Russ Rosenberg / dribbble
ポイント:インタラクティブな要素以外はシンプルに。アニメーションエフェクトはユーザーに大事な通知をする時だけ使いましょう。
モーションを使って情報の前後関係(階層関係)を明確化し、スムーズなナビゲーションを心がけましょう。
特にモバイル機器やスマートウォッチでは、小さい画面で表示できる情報量には限界があります。モーションを使って情報の階層をあらわすことで、使いやすいインターフェイスを実現できるでしょう。
ポイント:異なるページ間を移動する際、クリアーなナビゲーションを使って「何がどこから出てきたのか」をはっきりさせましょう。またインタラクションのテーマを統一し、サイト全体の一体感を向上させUXを改善できます。
データ入力は多くのアプリで行われます。
マイクロインタラクションを使うことで、このプロセスを特別なものにしてみましょう。
▲Ramakrishna V / dribbble
ポイント: ユーザーが入力した情報をクリエイティブに表示し、ユーザーのタスク完了を補助しましょう。
マイクロインタラクションには、感情に訴えかけてユーザー行動を喚起する力があります。行動換気をスムーズに行うため、適切なアニメーションを取り入れましょう。
100回繰り返し見ても気に障らないような、控えめかつクレバーなデザインを心がけましょう。
ポイント: 「このマイクロインタラクションはユーザーにどのような感情を与えるのか」ユーザーの感情を常に先回りして予測しましょう。飽きのこない、繰り返し使えるデザインであることも大切です。
「アクションを受け取りましたよ」というフィードバックを可視化することで、ユーザーとサービス双方向のコミュニケーションが成立します。
たとえば音楽アプリなら、「曲を変える」「曲をスキップする」のようなアクションに対してもマイクロインタラクションを追加するチャンスです。ユーザーがボタンを押した際に、そのボタンが””凹んだジェスチャー””を見せれば、「指示を受け取りました」というコミュニケーションに繋がるのです。
設定を変更する、カートへ商品を追加する、オンオフを切り替える、何かを共有する、デバイスを接続する等……。
このようなアクションに対して、マイクロインタラクションは効果的に働きます。
マイクロインタラクションは、ユーザーの行動をサポートする方法でもあります。フィードバックや行動の結果を提供し、ユーザーの操作を助けています。
最後に、どのようにマイクロインタラクションをデザインすべきか、基本的な4つのポイントをご紹介します。
シンプルなデザインを心がけてください。マイクロインタラクションが複雑だと、ユーザーの混乱を招きます。
またマイクロインタラクションを導入するばあいは、その分多くのデータ通信が必要になります。Googleは2018年7月に「読み込み速度の遅いページの検索ランクを下げる」と発表していることからも、極端に重いマイクロインタラクションは極力避けるべきでしょう。
一方で、単に淡々としたマイクロインタラクションを取り入れるのではなく、そのマイクロインタラクションがユーザーにどのような価値と意味を与えられるのかよく考えましょう。価値と意味が固まってから、デザインを始めてください。
シンプルは複雑だ。よけいな要素を簡素化してUXを向上させるコツ
Workship MAGAZINE
マイクロインタラクションはユーザーを喜ばせるものですが、一方で主張しすぎないことも大事です。アプリのスタンスをはっきりさせれば、それに沿ったコミュニケーションのとり方が見えてくるはずです。
たとえば、Webサイトやアプリのカラーパレットがあるならそれを活用し、テーマがあるならテーマに沿って制作しましょう。マイクロインタラクションとコピーを組み合わせて、一貫性を保つことでより効果的に機能します。
マイクロインタラクションは、ユーザー体験を楽しくデザインするために必要です。一方で、それが「ユーザーの目的に沿っているか」を忘れてはいけません。
デザインの見た目を優先させると、UXが低下することもあります。マイクロインタラクションがユーザーに不快感を与えていないか、注意深く観察しましょう。
あなたがどんなに良いアイデアを持っていたとしても、ユーザーに伝わらなければ意味がありません。
プロトタイプを作成して、マイクロインタラクションがユーザーに正しく伝わるものであるか、テストを繰り返しましょう。
マイクロインタラクションは、ユーザー体験を向上させる有効なコミュニケーション手法です。そしてそれは、Webサイトやアプリの利用を快適で魅力的なものにすると同時に、ユーザーに不快感を与える可能性もあるものです。
マイクロインタラクションのデザインで最も大切なポイントは、あくまでユーザー体験を向上させるためにそれを取り入れるべきであるということ。ユーザーがWebサイトやアプリを使うシーンを常に考えながら、最適なデザインを心がけましょう。
(執筆協力:Yuri Tanaka, Juri Ando 参考 The beginner’s guide to mobile microinteractions / Microinteractions: The Secret of Great App Design)
こちらもおすすめ!▼
思わず魅了されるモーショングラフィックス10種類。活用シーンや事例も紹介
Workship MAGAZINE
ネイティブアプリをデザインする際に気をつけたい、AndroidとiOSの違い
Workship MAGAZINE