本文へ移動します

DX station

細部の工夫で UI/UX を向上させる「マイクロインタラクション」とは

CXユニット

CX ユニット

SBテクノロジー CX ユニットの児玉です。

Web サイトやアプリの快適な操作に欠かせないマイクロインタラクションについて、この記事では取り上げていきたいと思います。

「いいね」を押した際のハートが弾けるアニメーションや、入力フォームのポップアップアラートなど、気づかれないほど些細な工夫でありながら、ユーザーとのコミュニケーション手法のひとつとして、UI / UX を大きく向上させるマイクロインタラクション。今回は活用事例をまじえつつ、その効果や魅力をお伝えいたします。

マイクロインタラクションとは

私たちが Web サイトやアプリを利用するとき、意識はしませんが実は数多くの細かく単純な作業を行っています。画面を開き見る箇所を判断する、文章を読む、フォームに入力する、ボタンを選択する、次の画面がロードされるのを待つ…。その一つひとつの瞬間に生まれる、ユーザーとサービスとの小さな相互作用をマイクロインタラクションと呼びます。

「購入ボタンを押すと、買い物かごのアイコンがバウンスしアイテム数が増える」であったり、「メッセージの送信中に、紙飛行機が飛ぶ」であったりと、ユーザーの行うアクションに対して、フィードバックや現在のステータスを視覚的・感覚的に正しく伝えることがマイクロインタラクションの目的です。効果的に使用することでユーザビリティの向上につながることはもちろん、使用するタイミングや演出によっては、ユーザーにサービスへの親しみやすさを感じてもらうこともできるでしょう。

マイクロインタラクションは必ずしもアニメーションが必要ではありません。 しかし、フィードバックやステータスを表す際に、0か1かの切り替えでは変化が伝わりにくく、より明確に状況を伝えるためマイクロインタラクションにアニメーションが使用されることが多くなっています。

何人かの人が楽しそうにPCを見てる画像

マイクロインタラクションの利用タイミング

それでは、具体的にはどのような場面でマイクロインタラクションを使用すればよいでしょうか。使用する場面やタイミングを間違えると、マイクロインタラクションは逆にユーザーにストレスを与えかねません。ここでは、おすすめの利用タイミングを4つあげさせていただきます。

1. 処理の進行状況を伝える

データのダウンロード、アップロードなど、何らかの処理が進行中である場合、進行状況を伝えることでユーザーのストレスを緩和することができます。
読み込みに時間のかかる場合も、ローディング画面にマイクロインタラクションを利用することで、ユーザーに正しく処理が進んでいることを伝えながら、サービスへの愛着を持ってもらうことができます。

2. アクションに対するフィードバックを伝える

ユーザーの行ったアクションに対して、システムの反応を視覚的にフィードバックすることで、ユーザーとの双方向のコミュニケーションが深まります。SNS の「いいね」ボタンや、オン・オフで色が変わる切り替えボタンなどは、「アクションを受け止めましたよ」ということをユーザーに明確に伝えています。

いいねのアイコンの画像

3. データ入力を可視化する

データ入力はユーザーにとって面倒な作業です。入力後の確認画面で初めて入力ミスが分かるサービスも多いですが、入力中からマイクロインタラクションを使うことで、ユーザーが後から訂正する手間を省くことができます。
また入力毎に内容をチェックし、全ての条件を満たした場合のみサブミットボタンを押すことができるパスワード入力画面も「マイクロインタラクション」の好例と言えるでしょう。

4. 階層(前後関係)を明らかにし、現在の操作をスムーズにする

スマートフォンの画面は PC と比べて狭いため、表示できる情報量に限界があります。モーションを使ってコンテンツやメニューの階層構造を立体的に明らかにすることで、ユーザーの操作を助け、サービス全体で一体感のあるインターフェイスを実現することができます。

階層(前後関係)のイメージ画像

さいごに

いかがでしたでしょうか。
普段意識することの少ないマイクロインタラクションですが、細部に工夫を加えることで、UI / UX をより快適に、魅力的にすることができます。
CX ユニットでは UI / UX / CX の改善や支援など行っています。ご相談がありましたら、是非お問い合わせください。

関連ブログ記事

デザイナーが考える UI 刷新のニュースが多い理由
専門家が UX 事例として有名なアプリを実際に使用してみた【Coke on、tinder、yenta】
UI、UX、CX、DX、BX、AX、XR・・・整理してみませんか?
UI / UX の違いとは?UI / UX の違いや関連性を解説
真のニーズを導く!評価・分析で用いる手法とは。 UX デザインプロセス①
プロジェクトに大きく貢献する!コンセプトデザインの重要性。 UX デザインプロセス②
作って終わりじゃない!目標とする UI / UX を維持するポイントとは? UX デザインプロセス③
データだけでは見えない課題を抽出!ヒューリスティック調査・ヒューリスティック分析とは
ペルソナはなぜ必要?UXデザインおけるペルソナの重要性
専門家が考える Web サイトと Web アプリと Web サービスの違い
UI のキホン - 資料作成にも役立つ!デザインの4原則 -

関連ページ

サイトの改善点を明らかにする - ヒューリスティック調査
デジタルマーケティング・コンサルティングサービス
MA 施策の効果を向上させる - Marketo クリエイティブ制作サービス

お問い合わせ

製品・サービスに関するお問い合わせはお気軽にご相談ください。