使いやすさにフォーカスしたマイクロインタラクションとは?

初めて使ってみたものが思いのほか使いやすかったり、使いやすさのあまりもう一つ購入したなどといった経験はありませんか?使いやすさの理由は様々ありますが、そのような商品・サービスは、「どのようにしたらユーザーが操作に困らないか」「直感的に操作できるか」など、ユーザー視点で設計されているものがほとんどだと考えられます。このように、デザインにおいてユーザーファーストの視点に立つ手法の一つにマイクロインタラクションと呼ばれるものがあります。今回はマイクロインタラクションについてご紹介します。

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

マイクロインタラクションは、ユーザーのアクションに対するフィードバックやステータスの変化を正しく伝えるための細かなデザインのことを指します。今自分がどのような状況で、次はどのような行動をとればよいのかが直感的にわかることで、操作に迷うことがありません。簡単な操作でユーザーに心地よい体験を提供することは更なる利用機会の増加にもつながるでしょう。

“マイクロ”というくらいなので細かいデザインを指しますが、技術が発達した今の時代、技術だけでは商品やサービスの差別化を図るのが難しく、少しの工夫を施すことによって他の商品との差異を出す必要があります。そういった少しの工夫、つまり細かなデザインの積み重ねこそが良い商品・サービスを生み出すカギなのかもしれません。

Webにおけるマイクロインタラクションの例

1.タスクの進行状況を伝えるゲージ
ただローディング画面を出すだけでなく、そのタスクがどのくらいで完了するのかをゲージなどを用いて表示したほうがユーザーも安心して使うことができます。特にデータのダウンロードやアップロードではとても大切です。

2.フィードバックを提示する
例えばボタンをクリックしたときにへこむようなアニメーションをつけることで、本当にボタンを押しているかのような体験を提供することができます。また、自分のアクションに対してフィードバックが返ってくることによって、アクションが正しく処理されたことがわかりやすく伝わります。

3.エラーの発生をわかりやすく伝える
フォーム入力の際に条件を満たしていなければ、入力フィールドの色を変えてわかりやすく伝える工夫が大切です。またダウンロードしている際に途中で障害がありダウンロードを中止する場合なども文章だけでなくモーダルを出して警告したり、色を変えるなどする必要があるでしょう。

 “使いやすさ”に焦点を当てる

上記で紹介した機能にはよくアニメーションが使われます。アニメーションを使ったデザインにすることで、よりリアルな体験ができるようになるためマイクロインタラクションにおいてアニメーションは重要な役割を担っていますが、見た目の良さを重視するあまり、本来の目的である「使いやすさの向上」を忘れてしまっては元も子もありません。見た目の楽しさとともに、ユーザーがそのデザインによってどんなメリットを受けることができるかを常に考えることが大切です。

エイ・エヌ・エスではUIUXの観点からわかりやすさや操作性に特化した業務システムの構築を行っています。システムのデザインに関するお悩みはぜひお気軽にご相談ください。

マンガでわかる!イノベーションデザインラボ

contact us

ご相談・お問い合わせはこちら ご相談・お問い合わせはこちら