« ブログのトップページに戻る

説明なしでもわかる? マイクロインタラクションとは

   投稿者 : 2017年10月11日 By

イメージ画像

これからのWebサイトデザインの方向性は「内容(コンテンツ)の充実」と「体験の向上」にあると言われている。それらを実現するひとつの解は、「ヒューマンセンタードデザイン(人間中心デザイン)」という思想である。
そして、ヒューマンセンタードデザインのアプローチの方法として、マイクロインタラクションという手法が取られている。このマイクロインタラクションを手法を採用すれば、ユーザーとの距離は近くなり、サイト離脱率を下げるだげではなく、サイトの印象が高くなり、再訪問率の向上にもつながるだろう。
今回は、今年も注目されている、マイクロインタラクションのポイント、注意点など見て行こう。

 

●マイクロインタラクションの定義

マイクロ インタラクションとは、「ヒューマンセンタードデザイン(人間中心のデザイン)」と呼ばれるデザイン手法のひとつであり、今どのような状況で、次にどのような行動をすれば良いかを直感的なUIで伝えることを目的としたものだ。
「マイクロインタラクション」という言葉はDan Suffer氏の著書では、 ある作業をひとつだけこなす、最小単位のインタラクション(機器とのやりとり)を意味し、UI/UXデザインの神が宿る細部が出典とされている。
また、Dan Suffer氏は、

  • スイッチを押すと、部屋の電気が点く
  • スマートフォンのボタンを切り替えると、アイコンが画面に表示され、マナーモードになる
  • ダウンロードボタンを押すと、残り時間がポップアップで表示され、完了したらポップアップが閉じる
  • トースターにパンを入れて開始ボタンを押すと、焼き始め、完了したら食パンが飛び出す

上記のような様々な動作をマイクロインタラクションと名付け、定義している。
マイクロインタラクションを直訳すれば「とても小さなやりとり」という意味になるが、Webサイトやスマホアプリを作るうえで共通に考えられる内容であり、ユーザーが使用する様々な瞬間に関連する。
今やマイクロインタラクションは設定の変更時、データやデバイスの同期時、アラームの設定時、パスワードの選択時、ログイン時、ステータス・メッセージの設定時、『いいね』や『お気に入り』などをクリックする時など、様々なシーンで関わっている。

 

●マイクロインタラクションの基本的な4つの構成要素

マイクロインタラクションを実現するには4つの構成要素をおさえる必要がある。
トリガー、ルール、フィードバック、ループとモードの4つっである。

①トリガー

トリガーとはユーザーにアクションを促す要素であり、ユーザーに「気づきを与える要素」を指す。アプリを初めて使うユーザーからすれば、使い方が分からないので、まず何をすればい良いか伝える内容は重要なトリガーである。
例えば、Twitter上に「新しいツイートがあります」の表示や、メッセージ受信時にチャイムが鳴るなどである。

②ルール

ルールとはトリガーによって引き起こされた一連の処理、動作などを定義したもの。 ユーザーがボタンをクリックした時、何ができて何ができないかをルール付けすること。
詳細内容としては、複雑なものにしないことや同じトリガーには同じ動作にするなどがある。

③フィードバック

フィードバックは、ユーザーが何か実行した時、処理が始まった時、処理が実行中の時 、さらに処理が終わった時、ユーザーの理解を助けるための視覚的、聴覚的、触覚的な要素を指す。
例えば、ユーザーがパスワードの入力を間違えた時、フォームが横揺れするなどである。

④ループとモード

ユーザーの行動に合わせた、より大きなメタ・ルールと呼ばれ、 ループとはその動作を繰り返し行った場合の定義を意味し、モードとはルールが2股以上に条件分岐する場合の定義。モードは極力少なくするのがモードの注意点である。
facebookを使用して1年経つと1年を振り返る動画を作って知らせてくれるものなどがある。

 

●マイクロインタラクションの事例

入力フォームの内容を全て入力しないと購入ボタンを押すことができないマイクロインタラクションの例。

 

ハンバーガーメニューは気づかないことが多く、ユーザー体験の低下につながる。
このマイクロインタラクションはハンバーガーメニューを押すとどうなるかを気づかせることができる。

 

このマイクロインタラクションは直前のコンテンツを折りたたみ、次のコンテンツが表示されるというもの。
直前の情報は保持されたまま、次の情報が表示されるアニメーションである。

 

●マイクロインタラクションのメリットは?

マイクロインタラクションのメリットは大きいといえる。それはユーザー視点、ユーザーファーストに立って設計されるべきものだからだ。
マイクロインタラクションはユーザーがボタンをクリック前、クリックした時に、何らかのフィードバックを与えることにより、ユーザーを手助けしてくる。
そして直感的でわかりやすくユーザーを導く点にある。
以下にマイクロインタラクションのメリットをまとめた。

  • 新しいサービスでも、説明がなくても利用してもらえる
  • 操作ミスを少なくすることができる
  • 継続的なサービスの利用に繋げることにできる

 

●マイクロインタラクションで注意すべきこと

マイクロインタラクションは、ユーザーにアクションを促すアニメーションが重要な要素となるが、制作しているとアニメーションの動きの美しさに固執しがちになってしまう。
アニメーションはユーザーにとっては使いやすさ向上のためのもので、美しいかどうかは問題ではない。美しい動きに固執すると動きに時間を用し、ユーザーにとっては困惑するばかりだ。動きはシンプルに、単一な動きで構成する必要がある。
マイクロインタラクションを自身で作ろうとすると、つい、ユーザー視点を忘れがちになる。マイクロインタラクションの構造を理解し、ユーザーにとってストレスなく、心地よく使えるものになっているか。その都度、ユーザー視点で動作確認しながら設計することがポイントである。

 

●まとめ

Webやスマホアプリに限らず、プロダクト製品やサービスでも、UXを改善するうえで、マイクロインタラクションは重要な手法と言える。
そして、マイクロインタラクションは、ユーザーの日々のインスタラクションに対し、小さいが楽しい瞬間を作ることができる。
ユーザーストレスを少なくし、UI/UXを向上しサイトクォリティをあげる。マイクロインタラクションは今後、さらに継続され、増えてくるだろう。

 

出典:

 

関連する記事

越境ECにかかせない海外配送 大手3社を比較してみた... 越境ECでは、海外への配送をどの会社から配送するか、海外配送するにはどんなサービスがあり、料金や日数はどれくらいかかるのかなど、データがあると便利だ。 越境ECでの海外配送を扱っている企業はいろいろあるが、国内の海外物流の主な企業は日本郵便、ヤマト運輸、佐川急便の3社である。 2年前にも...
インターネットで商品を見つけ購入するということ... インターネットの素晴らしいところの一つは、タイムカプセルのように、昔からの懐かしい物をそのまま保てることです。子供時代に見た懐かしいCMを、ふと思い出してきたのなら,簡単にYoutubeで検索して見ることができますよね。eBayでは画面を超え、昔の物を手元に配達してもらえるということは、創立...
海外で売れる日本製品 まとめ 海外向けネットショップという事業をやっていると、よく聞かれることなんですが、 「海外で何が売れてるの?」 これは、当社のお客様との秘密保持があるので、一概に全部を公言することはできませんが、TerapeakとかeBay Japanさんが公開している資料の中から、これは確実に売れると言う商品を今日...
中国の越境EC Tmall GlobalのTP(TmallPartner)とは... 昨年、2016年の中国国内において、越境ECを利用して日本から商品購入した総額は1兆366億円と過去最高で、その額はアメリカの1兆1,371億円に次ぐ額である。2020年には 日本からの購入額は1兆9,000億円に達成すると見込みである。 その中国BtoCで圧倒的なシェアを占めるのが「Tm...
海外展開に関する補助金・助成金情報 (2016.Sep)... 9月の補助金・助成金の募集状況を紹介する。 補助金・助成金は国や地方自治体から支援される「返済不要なお金」である。助成金は要件が合えば基本的には受給でき、補助金は審査があるため、要件が合っても受給出来ない可能性がある。 今回は海外展示会、見本市出展に対するものや海外向けホームページ構築な...
スマホ・タブレット最適化に「レスポンシブWebサイト」がベストな理由... スマートフォンやタブレットの利用者数の増加にあわせ、Webサイトへのアクセス数のモニタリングから「スマホ最適化の必要性」を実感している人も多いでしょう。 昨年あたりからレスポンシブWebデザインとよばれる、PCやスマホ、タブレットなどあらゆるデバイスに対応するWebページ制作の手法が増えてきました...
このエントリーをはてなブックマークに追加
 

今なら海外展開の為の成功BOOKを無料ダウンロードできます。是非この機会にお読みください。