見出し画像

Instagramのマイクロインタラクション

マイクロインタラクションにおいて、アニメーションなどの細部の作り込みや、それに伴う体感的な心地よさは大切ですが、手法に寄りすぎてしまうと導入意図やそれらが生み出す効果を見失いがちです。
そこで、マイクロインタラクションをデザインする際のインプットとして色々なアプリの挙動を観察し、それらがユーザーに与える効果を考察します。
今回はInstagramのマイクロインタラクションの観察です。

マイクロインタラクションのデザイン方法については、以前こちらに書きました。
マイクロインタラクションのデザイン。UIデザイナーもコードを学ぼう

コレクション追加時のフィードバック
写真がプロフィールタブに格納されるアニメーション。プロフィール画面にコレクションが一覧化されることを伝える。サムネイルの動きが一旦停止するため視線が誘導される。

画像1

プロフィールタブを長押しした際のアカウント切替
上級者向けインタラクションのため、プロフィール画面でも代替操作が可能。画面全体が奥に移動するため、構造上最も上位レイヤーでの切替操作であることが伝わる。

画像2

ストーリーのインジケーター
全体の所要時間とカット数を同時に示す。投稿は上から下の移動なのに対して、ストーリーは左から右への移動。インジケーターでも移動の方向を踏襲。

画像3

ストーリー切り替わりのトランジション
一見して派手すぎる印象だが、動画を含む場合切り替わりが分かりづらくなりがちなので、このくらいの分かりやすさは必要なのかも。

画像4

外国語のコメントに翻訳ボタンを自動で表示
多くのユーザーは使用しないかもしれないが、一部のユーザーにとっては重要なインタラクション。

画像5

複数写真切替えのインジケーター
投稿が無限に増えても、インジケーターが一定幅に収まる。ドットの大きさを徐々に小さくして続きがあることを暗示。カット数がわからない点は写真右上のラベルで補足。

画像6

コメント投稿の即時反映
サーバーからのレスポンスを待たずに投稿したコメントを画面に表示。投稿中である旨をラベルで補足。

画像7

コメント削除の即時反映
コメントを削除する際に確認ダイアログを挟まない。代わりに元に戻すためのボタンを一定時間表示。ユーザーへの不要な確認を省きつつ、誤って削除したユーザーへの救済措置は残す。

画像8

写真をダブルタップでいいね!
上級者向けインタラクションのため、他ボタンで代替操作が可能。フィードバックも写真中心に大きくハートを表示するアニメーションに変化する。

画像9

写真調整スライダーの触覚フィードバック
写真投稿時の調整スライダーが中央値に戻る際に触覚フィードバック。調整前に戻す操作を補助する。

画像10

僕が気がついた点はざっとこんな感じです。Instagramはすごく作り込まれているアプリなので、まだまだ確認できていないマイクロインタラクションがありそうです。他にも気づいた点があれば是非教えてください。

----

Twitterでもマイクロインタラクションについて発信しています。マイクロインタラクションを活用したUIデザインやUI改善などお気軽にご相談ください。

Twitter (@shingo2000)


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

よろしければシェアもお願いします!
148

鈴木慎吾 / TSUMIKI INC.

(株)つみき のデザイン責任者。UIを考えたりコードを書いたりします。 https://twitter.com/shingo2000https://www.behance.net/shingo2000https://tsumikiinc.com/

マイクロインタラクションの観察

マイクロインタラクションをデザインする際のインプットとして色々なアプリの挙動を観察し、それらが及ぼす効果を考察します。
9つ のマガジンに含まれています

コメント2件

普段何気なく使っていましたがなるほどこれは面白いと思いました。ストーリーの部分は確かに派手だなぁと思っていましたがおっしゃる通りあれくらいの変化がないとわからないよなぁと感心しました。
ありがとうございます。Instagramは僕も普段何気なく使ってるんですが、改めて観察してみると作り手の意図が感じられる作り込みが多くて面白いです。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。