トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

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

UIを学んでいるcocoda!で「マイクロインタラクション」というコースを始めました。

f:id:bibinbaleo:20200420100752p:plain

マイクロインタラクションとは?????

 初めて聞いた言葉。

twitterのいいね💛を押したときのアニメーションとか、twitter文字数制限ぎりぎりに出るあの表示

f:id:bibinbaleo:20200420101009p:plain

f:id:bibinbaleo:20200420101012p:plain

ユーザーの動きに合わせて、さりげなく動くUIのこと???

なくてもいいけど、あると便利だったり、サービスの個性になるような小さいインタラクション

note.tsumikiinc.com

事例

こちらの方のマガジンにいろいろなサービスのマイクロインタラクションが載っています!

 

note.com

Twitter

note.tsumikiinc.com

Instagram

note.tsumikiinc.com

Appleの水準器(こんなのあるんだ)

note.tsumikiinc.com

AbemaTV

note.tsumikiinc.com


404

404ページもマイクロインタラクション

blogs.adobe.com

クレカ

クレカ情報を入れて入力する画面のマイクロインタラクションPOINTがまとまっている良いサイト

adilsiddiqui.in

disabledはグレーじゃなく半透明

理由
・グレー→色付きに変化するとびっくりする。シームレスじゃない
・半透明だと色を認識できる
・グレーだと背景になじまない。浮く
・グレーはキャンセルなど優先度が低いボタンにも使われる

coliss.com

作ったもの

レッスンで作ったのはこの3つ。

支払いが完了したら、分かりやすいポップアップを出す。paypayみたい

f:id:bibinbaleo:20200422104508p:plain

cocoda-design.com

何を押したかを💛で分かりやすくフィードバック

f:id:bibinbaleo:20200422104536p:plain

cocoda-design.com

 

クレジットカード番号を入れるときは、最初から数字キーボードを出す。

f:id:bibinbaleo:20200422104517p:plain

cocoda-design.com

 

最後に

パスワードを決めるときの自動チェックとかのインタラクションに慣れると、それがなされていないサイトで物足りなさを覚える。そういう違いを生み出すのがマイクロインタラクションなんだろうなー。

でも余裕がないとできない。