快適なユーザー体験を作り出す！もう一度理解したいマイクロインタラクションの基本の「き」

更新日: 2018年01月10日

デザイン

マイページにお気に入り

Web上でのマイクロインタラクションの役割

マイクロインタラクションは様々な役割を演じますが、概して次の4つに集約されます。
　　

1. アクションが行われた後にフィードバックを提供する

日常生活でも、様々な機械がボタンを押すと音がなったり光ったりして反応を返しますが、Webサイトやアプリでも同じです。

Twitterはシンプルかつ効果的な方法で、誰かをフォローした時のフィードバックを返しています。
　　

2. 一回的なインタラクションを認める

Twitterでは、ツイートをお気に入りに入れる時にも小さなアニメーションでフィードバックを提供してくれます。
　　

3. 設定が可能

YouTubeでは自動再生のオン・オフを、トグルボタンをクリックすることで切り替えることができます。この時に、オンの時にはブルーに、オフの時には白になるのもフィードバックの一種だと言えます。
　　

4. ユーザーのミスを防ぐ

マイクロインタラクションによって、ユーザーのミスを防ぐこともできます。

例えば、せっかく書いていたブログ記事が消えないように、ウィンドウを閉じる瞬間に小さな警告で「ブログ記事を削除しますか？」と確認をしてくれることがあります。
　　

マイクロインタラクションを活かすために気を付けたい3つのこと

1. デザインありきにしない

Webデザインの進歩とともに複雑で技術的にもさまざまな挙動を実装することが可能になったので、デザイナーであれば自分のデザインスキルを思う存分に発揮したいと思うのは当然です。

しかし、いくら見かけ上クールなアニメーションを表現していると言っても、本来のマイクロインタラクションの意図とかけ離れたデザイナーのエゴイスティックなアニメーションは、マイクロインタラクションとしては失敗だと言わざるを得ないでしょう。

▲ クールなデザインである反面、人によっては使いにくいと感じてしまうことも｜dribbble

マイクロインタラクションを考える時には、アニメーションとセットになりがちです。もちろん、アニメーションを設計することには大きな価値があります。しかし、機能的な部分とそうではないところを区別し、削るべきムダな部分は思い切って排除するといった良心を持つことは大事です。
　　

2. ユーザーの想定を大きく外れすぎない

コンセントに挿すだけで、水を入れてスイッチを入れれば、火を使わずに簡単にお湯を沸かすことにできるポット。今では多くの家庭に設置されています。

自分の家にあるブランドと違っても、友人の家にある同じようなものを見れば、同じようにお湯を沸かすことができるでしょう。

▲ サークルのUIは独特だが、ユーザーが慣れるまでに時間がかかってしまう｜dribbble

しかし、Webサイトやアプリの話となると、初めて訪問したWebサイトは、想定と大きくことなるようなびっくりするような反応をするものもあります。ボタンを押すと大きな画面で警告画面が登場したり、ハンバーガーメニューを押すと思いがけないところからメニューが出てきたりすることです。

これらは、デザイン的には優れていると評価されることもありますが、ユーザビリティの観点からはNGです。

▲ 誇張しすぎないアニメーションを取り入れているので、想定の範囲内に収まっているアニメーション例｜dribbble

ユーザーをびっくりさせるような挙動はやめて、これを押せばこうなる、という想像がつくものにしましょう。
　　

3. 機能性を阻害しないようにする

かつて検索エンジンの世界では、GoogleやYahoo!、Bingが群雄割拠していましたが、多くの人が最終的にわからないことを調べる時にGoogleを使うようになったのはなぜでしょうか。結局のところ、Googleの成功の決め手の大部分を占めているのは、速くて直感的なユーザー体験なのです。

▲ Googleのマイクロインタラクションにおけるアニメーションの例｜dribbble

Googleは、読み込み時間がコンバージョン率に影響することを知っています。過剰なアニメーションやインタラクションで詰め込み過ぎて、結果的に読み込み時間が遅くなってしまえば、全てが台無しになってしまいます。マイクロインタラクションを使うことで0.1秒でも読み込み時間が遅くなってしまうのであれば、そのインタラクションを実装するべきかどうかをもう一度考え直したほうがいいでしょう。