SBテクノロジー CX ユニットの児玉です。
Web サイトやアプリの快適な操作に欠かせないマイクロインタラクションについて、この記事では取り上げていきたいと思います。
「いいね」を押した際のハートが弾けるアニメーションや、入力フォームのポップアップアラートなど、気づかれないほど些細な工夫でありながら、ユーザーとのコミュニケーション手法のひとつとして、UI / UX を大きく向上させるマイクロインタラクション。今回は活用事例をまじえつつ、その効果や魅力をお伝えいたします。
私たちが Web サイトやアプリを利用するとき、意識はしませんが実は数多くの細かく単純な作業を行っています。画面を開き見る箇所を判断する、文章を読む、フォームに入力する、ボタンを選択する、次の画面がロードされるのを待つ…。その一つひとつの瞬間に生まれる、ユーザーとサービスとの小さな相互作用をマイクロインタラクションと呼びます。
「購入ボタンを押すと、買い物かごのアイコンがバウンスしアイテム数が増える」であったり、「メッセージの送信中に、紙飛行機が飛ぶ」であったりと、ユーザーの行うアクションに対して、フィードバックや現在のステータスを視覚的・感覚的に正しく伝えることがマイクロインタラクションの目的です。効果的に使用することでユーザビリティの向上につながることはもちろん、使用するタイミングや演出によっては、ユーザーにサービスへの親しみやすさを感じてもらうこともできるでしょう。
マイクロインタラクションは必ずしもアニメーションが必要ではありません。 しかし、フィードバックやステータスを表す際に、0か1かの切り替えでは変化が伝わりにくく、より明確に状況を伝えるためマイクロインタラクションにアニメーションが使用されることが多くなっています。
それでは、具体的にはどのような場面でマイクロインタラクションを使用すればよいでしょうか。使用する場面やタイミングを間違えると、マイクロインタラクションは逆にユーザーにストレスを与えかねません。ここでは、おすすめの利用タイミングを４つあげさせていただきます。
1. 処理の進行状況を伝える
データのダウンロード、アップロードなど、何らかの処理が進行中である場合、進行状況を伝えることでユーザーのストレスを緩和することができます。
読み込みに時間のかかる場合も、ローディング画面にマイクロインタラクションを利用することで、ユーザーに正しく処理が進んでいることを伝えながら、サービスへの愛着を持ってもらうことができます。
2. アクションに対するフィードバックを伝える
ユーザーの行ったアクションに対して、システムの反応を視覚的にフィードバックすることで、ユーザーとの双方向のコミュニケーションが深まります。SNS の「いいね」ボタンや、オン・オフで色が変わる切り替えボタンなどは、「アクションを受け止めましたよ」ということをユーザーに明確に伝えています。
3. データ入力を可視化する
データ入力はユーザーにとって面倒な作業です。入力後の確認画面で初めて入力ミスが分かるサービスも多いですが、入力中からマイクロインタラクションを使うことで、ユーザーが後から訂正する手間を省くことができます。
また入力毎に内容をチェックし、全ての条件を満たした場合のみサブミットボタンを押すことができるパスワード入力画面も「マイクロインタラクション」の好例と言えるでしょう。
4. 階層（前後関係）を明らかにし、現在の操作をスムーズにする
スマートフォンの画面は PC と比べて狭いため、表示できる情報量に限界があります。モーションを使ってコンテンツやメニューの階層構造を立体的に明らかにすることで、ユーザーの操作を助け、サービス全体で一体感のあるインターフェイスを実現することができます。
いかがでしたでしょうか。
普段意識することの少ないマイクロインタラクションですが、細部に工夫を加えることで、UI / UX をより快適に、魅力的にすることができます。
CX ユニットでは UI / UX / CX の改善や支援など行っています。ご相談がありましたら、是非お問い合わせください。
関連ページ
サイトの改善点を明らかにする - ヒューリスティック調査
|
