Webデザイントレンド定点観測 ユーザーと対話し満足度を上げるマイクロインタラクション
東京都渋谷区でフリーランスWebデザイナーとして働く、黒野明子（くろのあきこ）と申します。
当連載のネタ探しをするため、筆者（黒野）は定期的に、英語圏のWebデザイン関係の記事を拾い読みしています。
2014年末に「2015年のWebデザイントレンド」関連の記事を探して読んでいたところ、「マテリアル・デザイン」や「レスポンシブWebデザインの洗練」といった有名どころの他に、「2015年のトレンドとなる」と複数の記事で言及されていたトピックが気になりました。
それが、今回のお題「マイクロインタラクション」です。
マイクロインタラクションは、インタラクションデザイナーのDan Saffer氏の著作「マイクロインタラクション」で提唱された用語で、「ひとつのシナリオに基づいてひとつのやりとりだけをこなす、最小単位のインタラクション」を指します。
Webサイトだけではなく、各種アプリケーションやハードウェアなどの、「システムとユーザーがやりとりするインタラクション」の細部について、事例を交えながら考察している書籍です。
その中で繰り返し訴えられているのは、インタラクションを「よく使うものほど発見しやすく」「利用するにあたってストレス無く」「いま現在の状態が分かりやすく」「利用しているコンテキストに沿って」作り込んでいきましょう、などというポイントです。
今月の記事では、この「マイクロインタラクション」の良い例になりそうなものを、黒野が独自に周囲を見回して、ご紹介していきます。
Dan Saffer氏の本の中では、「すぐれたマイクロインタラクションでは、『トリガー』、『ルール』、『フィードバック』、『ループとモード』という4つのパートがスムースに展開されます」と定義されています。
この連載は、主に視覚的なデザインに焦点を当てて執筆しています。そこで、Dan Saffer氏がおっしゃっている4つのパートのうち、視覚的な「トリガー」（ボタンやメニューやラベルなど）と、操作後にシステムから返される（視覚的な）フィードバックについて、ご紹介することになります。
では、さっそくひとつめの事例です。
Inboxのリマインダー作成機能
Googleが2014年10月にリリースした、Gmailを扱う新しいサービス／アプリ「Inbox」には、メールの閲覧や作成だけでなく、リマインダーの登録機能もあります。
ご紹介するスクリーンショットは、InboxをPCのブラウザから閲覧し、リマインダーの新規作成ボタンを押したあとの画面。新規画面を開くのではなく、メールのリスト画面の上にライトボックス的に表示され、リマインダーの内容を入力する操作だけに集中して使えるようになっています。
書籍「マイクロインタラクション」では、「（ユーザーが何をしていいか分からなくならないよう、初期値を）ゼロから始めない」と述べられていますが、このInboxのリマインダー作成インタラクションでも、あらかじめ「call…」、「buy…」、「clean…」という入力候補が挙げられていますね。
試しに「buy…」をクリックすると「buy milk」「buy eggs」などの候補が現れ、さらにeggsの中でも複数の候補を表示し……、と、できるだけユーザーが自分で文字を入力しなくてもいいようになっています。
Google検索
Google関係で、もう一件の例を見てみましょう。
近年のGoogle検索入力欄には、右側にマイクのアイコンがついています。これをクリックすると、検索結果画面の上に、「待機しています」というメッセージと大きなマイクアイコンで構成されたインタラクションが表示されます。
これは、「検索キーワードの音声入力」だけに特化されたシンプルなインタラクションであることに加え、声を発するとマイクのアイコンが赤く変化して、「ユーザーの声を拾っていますよ」ということをフィードバックしてくれます。
次にご紹介するのは、お気に入りの画像を集めるサービス「Pinterest」です。
PinterestのWebサイトでは、ピンされた画像にマウスカーソルを重ねると「Send」というボタンが表示されます。これをクリックすると、画面が遷移すること無く、メッセージ入力欄と送り先候補を選択することに機能が絞られた小さなインタラクションが現れます。
Google+
これに似た機能として、Google+への投稿機能が挙げられます。
Googleアカウントにログインし、GoogleマップやGoogleカレンダーなどのサービスをブラウザから利用していると、右上に自分のユーザー写真と「＋」のアイコンが常に表示されています。この「＋」をクリックすると、そのページから遷移すること無く、Google+への投稿だけに機能を絞ったインタラクションが表示されます。
Slack
話題のサービスから、似た感じのインタラクションをもう一件ご紹介します。
メールキラーのメッセージングサービスとしてエンジニアに人気の「Slack」では、チャンネル（掲示板のような単位）の右上に、ここに属しているユーザーの一覧が表示されます。
この時点で、「ログインしているユーザーには緑の丸がつく」という情報を提示してくれているのですが、さらにユーザー名をクリックすると、その個人に対して「プロフィールを見る」「ダイレクトメッセージを送る」などの操作を、画面遷移するなく実行することができます。
Qualaroo
さて、上記のような大規模なサービスばかりではなく、「Qualaroo」というサービスを利用すると、自分のサイトにユーザーの声を投稿してもらうための「マイクロインタラクション」が簡単に設置できます。
「Ivy」というサービスのページをスクロールダウンしていくと、右下に「Qualaroo」を利用したポップアップが出てきます。この入力欄は「What else would you like to know about Ivy?（他にIvyについて、何をお知りになりたいですか？）」という内容を入力させることのみに特化しています。
Ivy
Medium
少し違うタイプのインタラクションも見ていきましょう。
この連載で数回紹介しているブログプラットフォーム「Medium」では、記事内の文字列を選択すると小さな黒い吹き出しが表示されます。
「＋」のアイコンをクリックすると、記事内のこの部分に対してコメントを投稿することができますし、鳥のアイコンをクリックすると、この文字列を Twitterに投稿することができます。「ユーザーが文字列を選択したとき」というコンテキストに沿って、さりげなくシンプルなサポートが提供されるイ ンタラクションです。
余談ですが、実はこの機能は、上記で紹介した「Ivy」というサービスで実装可能ですので、ご興味があればチェックしてみてください。
最後に、「コンテキストに沿って変化する小さなインタラクション」の例の小ネタを、3つご紹介しておきます。
Google検索
ここ最近、スマートフォンでGoogle検索した際の結果表示に、スマートフォン対応しているサイトには「スマホ対応」というラベルがついたことにお気づきでしょうか。これはPCのブラウザから検索したときには表示されず、「スマートフォンから検索している」というコンテキストに沿って、有益な情報を提示してくれています。
YouTube
ふたつ目は、YouTubeの動画を再生しながら「共有」ボタンをクリックすると、「開始位置」という数値が、いま再生している時分に変化している、というインタラクションです。ここにチェックを入れると、動画のアタマからではなく、任意の時分からスタートさせて、共有することが可能です。
時分を手で入力することも可能ですが、「いま再生している時分をデフォルトで表示してくれる」という細やかさが、Dan Saffer氏の「ゼロから始めない」という提言にも沿っています。
〆は、地球の色々な場所でFacebookにログインしたことのある方ならお気づきかもしれないネタです。
Facebookのインターフェイスでは、右上部に友達からのコメント数などを通知する地球アイコンがありますね。筆者は、この地球アイコンの「アジアバージョン」、「ヨーロッパバージョン」だと思われる2種類を確認しています。いまログインしている位置情報を判別し、classを変更してアイコンの差し替えを行っているようです。
とても小さな変化ですが、人々が持つ「地球」のイメージは、住んでいる地域によって中心地が違うのだなぁということに気づかされる、遊び心のあるインタラクションですね。
以上、今回の記事では、日常頻繁に触れるサービスの中で発見できる「マイクロインタラクション」を探してご紹介してみました。
私たちが制作するWebサイトやサービスでも、ユーザーの満足度を上げていくために、このような細かな部分の「おもてなし」にも目を向けていきたいものですね。
（了）