見出し画像

虫の視点でつくる、マイクロインタラクションの事例

こんにちは。

「鳥の目」「虫の目」「魚の目」というものがあります。物事を見極めるため必要な視点を生き物の目線で表現した言葉です。「鳥の目」は俯瞰して全体像を見ること、「虫の目」は細部に注視すること、「魚の目」は潮の流れを読むように市場を流れを捉えることを言います。俯瞰したり注視したり周りを見たり、デザインをしていればどれも必要な視点ですね。

今回取り上げるマイクロインタラクションは、虫の視点で機能をつなぎ合わせプロダクトの体験を向上させる役割を持っているものです。もっとも小さいインタラクションで操作をスムーズにするだけでなく、愛着を高めてくれます。

例えば、Googleマップのハンバーガーメニューがなくなり変更を知らせるTool Tipが設置されました。これは主要な導線が変更される場合にユーザーの離脱を防ぐため移行の助走期間をアプリに実装したのです。

一度UIが変更されてしまえば、ユーザーは混乱しかねないことを私たちはわかっています。「ただいま道路工事を行っており、この道変わります。ご理解のほどよろしくお願いします」と言われているような感じかもしれない。事前に知らされているのと、突然変わってしまうのとではサービスに対しての信頼感がちがいませんか? まさにマイクロインタラクションの事例に最適なもの。

神は細部に宿る「God is in the detail」

さて、マイクロインタラクションの事例を見ていく上で注意するポイントは、アニメーションである必要はないということです。あくまで手法として取り入れられていることが多いだけで、「マイクロインタラクションを実践しよう」とアニメーションを作るTipsだけが紹介されているケースが見受けられましたので念のため。

教書はDan Safferの「マイクロインタラクション UI/UXデザインの神が宿る細部」です。Dan Safferといえば「インタラクションデザインの教科書」の著者としても有名な、Webサイト、インタラクティブTVサービス、モバイル機器など幅広い製品のインタラクションデザインの牽引役であります。

「こよなく愛する製品」と「許容範囲の製品」の違いを生んでいる要素がマイクロインタラクションであるケースが多いのです
「製品の中でいちばん最後に設計、開発されるのはマイクロインタラクション」というのはよく聞く話で、「マイクロインタラクションまで手が回らなかった」といったことになりがちです。しかしマイクロインタラクションをないがしろにするのは間違いです。米国で初めてAndroid OSを搭載した携帯電話「T-Mobile G1」は荒削りで洗練されていない印象が強かったのですが、その理由は「(特にiPhoneに比べて)マイクロインタラクションがダサかった」というものです。
マイクロインタラクションがよくないと、主な機能の仕上がりがどれほど良くても、ユーザーはイライラしたり戸惑ったりしてしまいます。全体のデザインの質が、最小の要素の質を超えることはないのです。

UIのディテールを工夫することで体験を改善することができます。いままでUIの基本に取り組んで来た方には体験を向上させる視点として、マクロに取り組んで来た方であればプロダクトに落とし込まれたUIの事例を具体的に知ることができるでしょう。

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

このnoteを書くにあたりインスピレーションをもらったTSUMIKIの鈴木さんのnoteを紹介させていただきます。私がNewsPicksで担当したマイクロインタラクションをいくつかあげたいとおもいます。

NewsPicks - 感触で楽しませるHaptic Feedback & Animation

行動に反応が返ってくる、それが触感として気持ちがいい。Haptic Feedbackを実装しました。ポジティブな世界観をつくるために、コメントにいいねを伝える行為はサービスの中で行っていただきたい行動の一つです。NewsPicksのコミュニティではユーザーのコメントが主軸にあります。ニュースサービスにそんなものはいらない、なんて決してありません。

画像5

NewsPicks - 必要な操作が行われなかったときに反応するアイコン

「僕を押して〜」とリアクションするように跳ねるアニメーションを設置。プロトタイプでのユーザーテストを実施した際に、初めてのインターフェースや機能に戸惑って文章を読まずに「Pickする」ボタンを押して次に進もうとする方が多かったことから、完了されていない行為が伝わる反応を取り入れました。細部ですが、機能開発の中で大変重要な改善でした。

画像4

NewsPicks - マイニュース作成中の完了ステップ

「マイニュース」とは、フォローしたユーザーのコメントやPickした投稿が流れてくるフィードです。最新ニュースを知るカテゴリ別のフィードとともに、マイニュースではフォローユーザーの関心のあるニュースやコメント、フォローしているキーワードに紐づくニュースをいち早く知ることができます。Twitterのフィードと近いものです。

そもそも、マイニュースを活用している方は多くありませんでした。ヒアリングを行ってみると、「フォローするとどんなメリットがあるの?」「マイニュースを存在を知らない」というお声をいただき改善せねばとオンボーディングや導線を改善、そこでステップの可視化にグラフアニメーションを活用しました。

画像3

NewsPicks - マイニュース作成後のTip Tool

「Tip Tool」は直接かつシンプルな案内です。一度確認したら表示されないため、操作の邪魔になりません。マイニュース作成ステップを完了すると「マイニュースのフォローはこちらでいつでも編集できます」の案内を設置しました。

画像4

NewsPicks - 連載の次の記事までしか知らせない

特集は、月曜日から毎日1本、5~7日連続で公開されます。例えば月曜日、特集の1記事目だけしか公開されていない場合「2日目以降の記事も面白いものを揃えているから期待してほしい!」タイトルを並べたくなります。しかし、閲覧する側の立場であれば未公開の記事がいくつ並んでようとじっくり見ることはないのではないでしょうか...。NewsPicksをお使いになっている方は忙しい毎日の合間に見てくださっています。このままだと情報が多すぎて気になるものも気になりません。そこで、翌日の予告だけに。

画像2

まとめ

神は細部に宿りますが、私たちがどれだけこだわって検討ししようが、その仕組みはユーザーには気づかれなくて良いのです。

しかし、実際にはマイクロインタラクションが悪ければ主な機能の仕上がりがどれほど良くても、ユーザーのストレスのもとになってるということ。

「こよなく愛する製品」と「許容範囲の製品」の違いを生んでいる要素がマイクロインタラクションであるケースが多いのです。
ー マイクロインタラクションの教科書

愛される製品は生きるように私たちと接続します。自然でいて無駄がない。

だからこそ、細部にこだわっていればいいわけではありません。過剰なアニメーション、お知らせの数々…。良かれと思ってユーザーを無視することないように、可能な限り動作に支障がないよう軽量で簡略である、そんなインタラクションをつくるためにデザイナーの目が必要です。




この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
yoshikawa akane

サポートいただけたら一層頑張れそうです!

ありがとうございます♡ 次も楽しみにしていてくださいね!
9
CS出身のUI/UXデザイナー。トーマツ子会社や株式会社LIGのCSを経て、2017年一念発起でデザイナーへ転身。業務委託先や個人でwebやアプリデザインをひたすら作り続け、2018年9月よりNewsPicks。Portfolio: https://akanyoshi.com