UIアニメーションは飾りじゃない！ユーザーの「信頼感」を高める目的はコレだ！
引用元：https://news.ycombinator.com/item?id=45139088
デザイナーはアニメーションを「磨き」や「喜び」のためと思ってるけど、それって過大評価じゃない？アニメーションはユーザーが状態変化を理解するためのもんだよ。他は全部自己満足さ。
控えめなアニメーションは「頑丈さ」を感じさせて、ユーザーに良い印象を与えるよ。これは「良い」と「素晴らしい」を分ける最後の20%だね。UIデザインは「雰囲気」や「ブランディング」に流れすぎてるから、実用性重視に戻すべきだね。
これには完全に同意するよ。マウスダウン時のボタンの変化をアニメーションと呼ぶのは驚きだな。「これはコンポーネントがクリック可能で、クリックが認識されたことを示す基本的な視覚フィードバックじゃないの？」
「ユーザーが「頑丈さ」を強く感じる」ってのは、UIの「磨き」の全てだね。信頼できて、頑丈で、頼りになる感じ。アニメーションはこれの一部だけど、それは全てがしっかりした後の最後の仕上げだよ。キラキラさせる前に、まずグリッチをなくすべきだね。
それって辞書的にも、口語的にもアニメーションの定義に合うじゃん。専門用語があったとしても、それに当てはまるはずだよ。これがアニメーションじゃないって言われる理由が理解できないな。
どっちの意見も分かるけど、俺の中ではアニメーションって、実際の状態間の滑らかな遷移のために、合成された中間状態を生成して時間で表示することなんだよね。マウスダウンのケースは、間にフレームを挟まないから、この定義ではアニメーションじゃないんだよ。
「喜びは過大評価」って意見には反対だな、本当はそうであってほしいけど。Apple/iPhoneユーザーにAndroidを1週間使わせてみてよ。きっと「なんか変」とか「カクカクしてる」って言うはず。それはiOSのしっかりしたアニメーションのおかげだよ。一般ユーザーは「喜び」とは言わないけど、劣る体験だと気づくんだよ。
経験から言うと、目を引くヒーローバナーやアニメーションは直帰率を減らす効果があるんだ。すでに確立したビジネスなら関係ないかもしれないけど、初期の顧客を獲得しようとする小さな企業にはすごく重要だよ。
それには同意できるね。グリッチのあるソフトウェアに「磨き」をかけるのは、エンジンのかかりが悪くて、勝手にハッチが開いちゃうような車に、高級なレザー内装と防音材を入れるようなもんだよ。
アニメーションって、最初は楽しいけど3回目以降はもういらないんだよね。処理が遅くなるだけだし。
B2BなのにB2Cみたいなデザインする人がいるけど、B2Bはあくまで仕事のツールだから、派手なアニメーションとかは邪魔なノイズにしかならないんだよ。CRMやERPの仕事なら、ユーザーの気分より効率を重視すべきだね。
筆者もアニメーションを使うべきかどうかの基準として、使う頻度を考えてるって言ってたよ。
アニメーションって、視覚的な動きのことだよね。2つの違うフレームを連続させれば、それだけでもうアニメーションなんだよ。
「Delightは過大評価されてる」って意見は、結局他のエンジニアやデザイナーがTwitterで持ち上げてるだけじゃない？ほとんどのユーザーはそんなに気にしてないと思うよ。
「Reduce Motion」ってめちゃくちゃ有名な設定だよね。システムのキビキビ感を上げるTipとしてずっと言われてるし。アニメーションを完全にオフにできる、もっと強力な設定を求める声もあるくらいだよ。
「Delightは過大評価されてる」って意見は分かるな。アニメーションに本当に喜ぶのはデザイナーだけじゃなく、昔のAppleファンもそうだったりするしね。Daring Fireballのこの記事（https://daringfireball.net/linked/2024/12/05/festivitas）にもちょっと触れてるけど、ニッチだけどデザイナーだけってわけじゃないよ。
ここには、バウンス率がちゃんと測れて、それが下がれば売上アップにつながるっていう前提が隠れてるよね。
「コミュニケーションになって、邪魔にならない」っていうのは、個人の好みを世間の一般論にしすぎじゃないかな。記事には研究とかが一個も引用されてないし！
もう一つの隠れた前提は、どんな犠牲を払ってでも売上を伸ばすことが、長期的に見て利益増につながるってことだよね。
Delightって、ゲームデザイナーが言う「Juice」に似てるよね。上手く作られたゲームは、純粋なゲームプレイを超えて本当に楽しいと感じさせるしさ。でも実用的なインターフェースでこの感覚を味わうのは稀なんだよね。なんでだろう？
たぶん、ゲームとプログラムで期待が違うとか、状況や操作がかなり違うとか、あとはほとんどの組織に、センス、時間、経験が必要で、委員会で管理・測定・実行できないような満足度の高いインターフェースを作る意志や能力がないからだろうな。
「道路上で理由もなくリアハッチが時々開く」ってのは、まさに“訓練されたモンキー部隊”が“おっと、何かうまくいかなかった”問題を直しにくるってことだね。
ユーザーを子供扱いする rant_about_paternizing_users.h について文句を言いたい。
サイトの例には、Tweenフレームちゃんとあるじゃん。「transition-duration: .15s」って書いてあるし。
使用頻度は個々のケースによることが多いけどね。実際のアプリケーションで、ほとんどの人が頻繁に使わないって要素はほとんどないと思うけど。
もっとシンプルに言えば「豚に真珠」ってことだね。
プロダクトのカタログみたいなWebページなのか、それともユーザーがタスクを終わらせたいアプリケーションなのかで、全然話が変わるよね。後者には“印象的なヒーローバナー”とか、“ユーザーの注意を引くアニメーション”は、重要なアプリイベントを知らせる時にだけ必要なんじゃない？
もっと具体的に言うべきだったな。デザイナーが「Delight」を加えてるって言ってるけど、実際には見た目だけの効果で体験を濁してるってトレンドのことだよ。もちろんソフトウェアは楽しいものになり得るって信じてる。Linearとかがそうだよね。たくさんの細かいニュアンスのあるインタラクションがあって、使うのがすごく気持ちいいんだ。
あと、ほとんどのユーザーは派手なアニメーションをじっくり見たいわけじゃないんだよね。テレビのチャンネルを変えたい時、すぐに切り替わってほしいわけで、アニメーションで待たされたいわけじゃないし。
「状態の変化をユーザーが認識しづらい場合に、それを視覚化するアニメーションを使う」ってのが、UIアニメーションの唯一正当化される使い方だと思うんだ。でも、知覚される遷移時間を長くしつつUIの遅延を増やすってジレンマには不満だったんだよね。
イベントトリガー型の状態変化、つまりクリックとかで、イーズアウトベースの遷移を使うことで、両方の良いとこ取りができるって気づいたよ。遷移の開始は瞬時にして、終わりだけを減速させるんだ。これだとアニメーションがないのと同じくらいサクサク感じるし、反応を待ってる時に遷移の開始への反応が早くなるから、変化を伝えるのにも役立つんだ。
「より派手にする前に、まずバグを少なくするべきだ」って言葉、これメモっとこ。マーケティングがまた新しいランディングページの更新を提案してきたときに使ってやるわ。今、バグチケット対応で手一杯なんだから。
なんでアニメーションじゃないって言うの？これ、すごく基本的なアニメーションじゃん。
もっとコメントを表示（1）
昔はLinuxでアニメーション無効化しまくってたけど、マジで多くのWebサイトが使えなくなっちゃったんだよね。アニメーションが機能に影響するっぽい。たぶん開発者って、アニメーション無効化時のテストしてないでしょ。だから今は無効化じゃなくて、超高速設定にしてる。これならバッチリ！
Appleは反省すべき。バカみたいに長いアニメーションのせいで、待たされすぎ！さっきも、スクロールしてボタン見えたからすぐ押したのに、バウンドが止まるまで何度もタップさせられたよ。Androidの方がサクサク動いてたし、Appleはもっと改善できるはず。アプリ切り替えのスワイプとか、Macの通知消すとか、Dockを出すのとか、全部遅い！複数のアニメーションが重なると、全部終わるまで操作できないし。アクセシビリティ設定でこれらを無効にしなきゃデバイスが使いにくいって、マジ皮肉だよね。
Apple WalletがiPhoneに接続すると、いつもクソ長い全画面アニメーションが出るんだ。マジで永遠に感じるし、その間は何も見えないし操作もできない。超イラつくし、意味ない！接続した時にちょっとハプティックフィードバックくれるだけで十分だよ。
これマジで怒り心頭なんだが。Walletがずれて戻るアニメーションって、iPhoneをポケットから出す時に起こるんだよ。で、iPhoneを一番使いたい時もポケットから出す時だろ？つまり、iPhoneを使いたい時の約50%は、あの3秒のアニメーションを待たされるってこと！Face ID解除に3秒の遅延があったらすぐ直すくせに、これを「サプライズ＆デライトアニメーション」って呼んだら、Appleのデザイナーは喜んで押し付けてくるんだからな。
MagSafe充電器にロック中のiPhoneをくっつける時も同じだよ。些細なことって思われるかもだけど、ロック中のiPhoneを結構触るから、あれは本当にイライラする。ハプティックフィードバックだけでいいのに、スワイプで消すことすらできないのがマジで不便だわ。
iOSのナビゲーションアニメーションって、全部終わるまで待つ必要ないんだよ。中断できるように設計されてるからね。
いや、全部じゃないって！例えば、Messagesで会話を開くと左にスライドするけど、スクロールできるようになるまで待たないといけないじゃん。Mapsでルートキャンセルしたら、現在地に戻るズームがあって、地図を動かせるようになるまで待たなきゃダメなんだよ（しかも、マジ遅いし！）。
いつも忘れちゃって引っかかる、マジでイライラする事例があるんだけど、iOSのアラーム設定のAM/PMホイールね。夜中にアラーム設定して、最後にホイールをAMにフリックするじゃん？でも、あの微妙なアニメーションが終わる前に保存押しちゃうと、設定が元のPMのままで、朝アラーム鳴らないんだよ。最悪すぎ！
そうそう、あれマジで頭に来るんだよ！スライドホイールってさ、アニメーションが完全に止まるまで、たとえ99%まで動いてても値が変わらないんだよね。新しい値が設定されたと思って画面移動しちゃうけど、実際はされてないっていう。これは俺に言わせりゃUXの重罪レベルだね。ただの遅延とか混乱じゃなくて、値を間違ったように見せてるんだから。
macOSのスペース切り替えアニメーション、めっちゃイラつく！アニメが終わるまで操作が効かないんだよ。Appleは完全に迷走してるし、Steve Jobsみたいな強いリーダーがいないと良いUXなんて無理だね。
Hacker Newsの奴らもデザインわかってない。平均的なユーザーは製品のファンじゃなく、ただの道具として見てるだけ。何か変えるなら「おばあちゃんが『最高！』って言わない限り変えるな」ってくらい考えろよ。
あのワークスペース切り替えアニメーション、消す方法を色々探したけど見つからないんだよな〜。ホットキー使うのが一番速いけど、それだけ。Flashspaceみたいなツールもあるけど、完璧じゃないし。どうにかしたいんだけどね。
マジでイライラして、俺はもうhttps://github.com/nikitabobko/AeroSpaceに乗り換えちゃったよ。スムーズスクロールはテキストを追うのに便利だけど、フルスクリーンのワークスペース切り替えには、あんなの絶対いらないから！
俺、スムーズスクロールとか他のUIアニメーションは嫌いなんだよね。でも、役立つ機能もあるよ。
例えば、Xawスクロールバー（クリックしたところが画面のトップになるやつ）、行番号、あと前のスクロール位置のトップとボトムのマーカーとか。そういうのはいいんじゃないかな。
スムーズスクロールテキストは、UXの歴史で最悪の失敗の一つだよ。
そうそう、ProMotionとスペース切り替えにはずっと前からバグがあるんだって。アニメーションの長さがリフレッシュレートと関係してるみたい。
60Hzに設定すると速くなるんだけど、そんな選択しなきゃいけないなんて本当に迷惑だよね！
iOSのデフォルトアニメーション速度って350msで、SwiftUIだと特にそう。いつもちょっと遅いなって感じてたんだよね。最近のシステムアニメーションの変更（iMessageのアクションバーとか）も、なんか余計だなって思った。
まあ、この記事自体がAppleのデザイン哲学の流れを汲んでるわけだけどね。
皮肉なことにさ、AppleのHuman Interface Guidelinesって昔は「アニメーションは使いすぎるな、短くしろ」って言ってたんだよね。
個人的には、アニメーションをもっと速くしたいんだよね。300msは長すぎ。ほとんど気づかないくらいのアニメーションが理想かな。それがないと初めて「あれ？」って思うくらいがベスト。それより長いと、もう遅すぎると感じるね。
昔は250msだったけど、今は200msを使ってるよ。UIの変化を理解するのに、これが一番良いスイートスポットだと思うね。
CSSで.2sって書けて短いのも良い。150msまで短くすると、最初の数フレームが落ちたりすると、なんかバグみたいに感じちゃうんだよね。アニメーションのメリットも出ないし、かといって瞬間的でもないし、微妙なんだ。
アニメーションが「変化を理解する手助け」なら、デザインを見直すべきかもね。「保存成功」トーストは、ボタンを「Saved」に変えてグレーアウトする方が、アニメーションなしでもっと分かりやすくて良いよ。
トーストって基本アンチパターンだよね。特に「元に戻す」機能がタイマー式だと、ユーザーは焦るだけ。そもそも重要な操作は簡単に実行させないようにするか、標準のUndo機能を使うべきだよ。
大画面でのトーストはアンチパターン。アクションと離れすぎてる。モバイルだとスペースがないから、トーストでUndoボタンを出すのはまだアリかもね。iOSには信頼できるUndo機能がないし、Androidみたいな戻るボタンもないから、ちょっと事情が違うんだ。
モバイルでもトーストは微妙だね。親指で隠れることだってあるし。iOSにはシェイクでUndo、スワイプで画面を戻るジェスチャーがあるよ。AndroidはUndoジェスチャーがないけど、SamsungとかのカスタムOSはテキスト編集だけ対応してる。クロスプラットフォームのアプリは、iOSのスワイプジェスチャーを実装してないことが多いよね。
iOSのUndoアクションなんてApple純正アプリくらいしか対応してないし、ほとんど意味ないよ。Androidの戻るボタンは普遍的に使えるのにさ。iOSの「スワイプで戻る」もinconsistentすぎてもはや使い物にならない。「戻る」と「Undo」は同じものだと思うから、iOSはAndroidやブラウザに比べて、この点で大きな欠点があるよね。シェイクでUndoなんて、マジで最悪のUIだ！
iOSファーストのアプリなら、スワイプで戻る機能はかなり定着してるよ。Androidはジェスチャーバー使ってるけど、右からのスワイプで戻るのは右利きには誤作動しやすい。UndoとBackは別物だと思ってて、デスクトップブラウザのCmd-ZとCmd-[みたいな関係かな。
保存するときは、保存ボタンのすぐ隣に確認メッセージを出すのがいいよ。ボタン自体は状態を変えないでね（何度も押す人がいるから）。「保存済み」テキストがボタンから少し動くアニメーションは、ユーザーに「何が起きたか」を直感的に伝えるのに役立つ。アニメーションは短く（75-150ms）、微妙な動きでOK。
ボタンの状態変化は、ドキュメントの状態を示すなら全く問題ないよ。未保存の変更があればボタンを有効、変更がなければ無効にすればいい。これはアクションの結果じゃなくて、ドキュメントの状態を表してるんだからさ。
トーストは、ユーザーが続けて保存するのを邪魔しないのがいいんだよね。
Androidスマホ買ったら、まず開発者モードをオンにしてアニメーション速度を2倍にするのが習慣！標準速度だと遅すぎてイライラするんだよね。
アニメーションを全部オフにできる設定があるの知ってる？マジで天国だよ。
もっとコメントを表示（2）
ウェブアニメーションってPowerPointみたいだよね。クイッククロスフェードくらいで99%は見た目を整えるのに十分で、それ以上はめったに必要ないって思うな。
Linearの機能紹介アニメーション、デザイナーは説明目的って言うけど、俺には違うな。変な3Dアングルは実際のUIじゃないし、機能理解には役立たないよ。あの3Dで別プロダクトってのはわかるけど、肝心のプロダクト理解には全然繋がってない。
アニメーションが終わるまでユーザーを待たせるようなら、それはすぐ消すべき。あと、常にアニメーションをオフにするアクセシビリティ設定は絶対用意しろよ。
prefers-reduced-motionメディアクエリはこういう時にすごく便利だよ。詳細はMDNを見てね。
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref…
面白いことにブラウザ（Firefox）はOSの設定を使うみたいだね。Windows 10でアニメーションを有効にしてても、Firefoxで手動で設定できるよ。about:configでui.prefersReducedMotionを1に設定してみて。確認はhttps://animate.style
参考: https://stackoverflow.com/a/59709067
微妙な問題なんだけどさ、自分の環境で”最高！”って思うアニメーションも、別の画面だとマジひどいってことあるんだよね。例えば、記事のボタン拡大アニメーション、俺のM1 MacBook Proだと良いけど、IBM ThinkVisionモニターだとカクカクして重いんだわ。見てみてくれよ。
MacBook: https://drive.google.com/file/d/1UjJnxobPlBh_nv18Ych0XHwHEMw…
Crappy Monitor: https://drive.google.com/file/d/1jtwJKIFvteLOWD1Pzj1mTZjQwVX…
IBMモニター、ネイティブ解像度で使ってるの？
それが何か問題？一部のユーザーはそう（良いとか悪いとか）感じるんだからさ。
問題の原因をちゃんと特定したいなら、それは大事なことだよ。
アニメーションは逆効果になることもあるんだよ。ページスクロールを遅くしたり、予測不能にしたり、イライラさせたりね。記事の例にあるLinearの機能説明アニメーションも、読みにくい角度だし、読むのを妨げるから情報が頭に入ってこない。デザイナーの想像の中だけで目的に合ってるんだよな。
スピナーの速度に関するこのセクションについて一言。速く回るスピナーの方が早くロードしているように感じる、ってあるけど、個人的には何もないのに速く回す企業があるせいで、遅いスピナーの方が逆に信頼できるんだよな。
俺が信頼できるのは、特定のステップや進捗がはっきりわかる非線形なプログレスバーだけだよ。
俺の最初の直感は「遅いスピナーは大変な作業をしてるから信頼できるはず」だったな。
Android 16が導入したロック解除時のアニメーションは本当にバカげてる。ユーザーが早く見たいのに、デザイナーは毎日何十回もフェードインアニメーションを見させるんだから。デザイナーは自分の製品を使わないか、センスがないかのどっちかだろうね。
Androidではアクセシビリティ設定でアニメーションを完全に無効にできるんだ。だから俺はiOSには絶対行かない。無駄なUIアニメーションで時間を無駄にするのは耐えられないし、全然嬉しくないよ。
良い情報ありがとう！「アニメーションを削除」設定は有効にしてるんだけど、ロック画面のアニメーションが無効にならないのは一時的なバグだといいな。
アニメーション中に要素の状態が inconsistent だと、本当にイライラするんだよね。例えばWindowsの通知ポップアップだと、アニメーションが終わるまで「X」で閉じられない。押すと通知が開いちゃうんだ。Macのデスクトップ切り替えでも、アプリがちらついて間違った操作をしちゃうことがある。デザイナーは、アニメーションを入れるなら完璧な実装じゃないと、ユーザーはすぐ「バカな奴らだ、アプリはバグだらけ」って思うよ。
俺はアニメーションは、ユーザーが「すでに知っていること」を確認するためのものであって、情報そのものじゃないって強く信じてるんだ。つまり、アニメーションをオフにしても、ユーザーが同じくらい素早く理解して使えるべき。アニメーションの目的は、UXの体験をなめらかにして、UIが期待通りの状態であることを小さなサインで確認させることだよ。ツールチップの例は、UXがユーザーの意図を理解していることを示す完璧な例だね。
タイトルは「クリックベイト」って感じだね。もっと「アニメーションをデザインする際の考慮事項」って感じだよ。ボタン押下みたいな控えめなアニメーションは、UI操作に自信を持たせるし、違和感を減らすから好きだな。でも、これってかなり主観的だよね。UIアニメーションの効果に関するユーザー調査って誰か持ってる？あと、Webアプリでもアニメーションのオン/オフを設定できるようにしたら、パワーユーザーはワークフローを速くできるんじゃないかな。スマホのUI設定みたいにさ。
「prefers-reduced-motion」っていうブラウザ設定はすでにあるし、これでアニメーションをゼロにできるんだよね。僕のコード例だと、こんな風に使えるよ！URL: https://github.com/mickael-kerjean/filestash/blob/master/pub…
それじゃ全然足りないんだよ。「prefers-reduced-motion」はあくまで「減らす」設定であって、「ゼロ」にはならない。何年も前からあるのに、ほとんどのサイトがこれを無視してるんだから、ブラウザが強制的にアニメーションを止めるべきだね。JavaScriptアニメーションも問題だし。
アニメーションのユーザビリティに関するちゃんとした研究があったら面白いだろうね。僕は大体無駄だと思ってるけど、ボタンを押してからUIコンポーネントが生成されるときに視線を誘導するっていうのは、一理あるかも。でも、間違った研究になりがちだから、アニメーションなしを前提としたUIはもっと動的じゃなくするべきだよね。
僕の意見だけど、UIアニメーションが必要な最低限のケースは、画面の30％～40％以上が変わる時だね。それくらいの変化なら、ある程度使い慣れた人でも驚かないけど、そうじゃない人にとっては、何がどう繋がってるのかわからなくて混乱しちゃうから。
うーん、僕の好みとは違うな。アニメーションは、何か原因と結果があったときに、それに気づかせるために使うのが一番だよ。画面の半分近くが変わるようなら、ボタンを押したら変化に気づくはずだもん！
だから言ったでしょ、技術に詳しい人とそうじゃない人の間に差があるって。非技術系のユーザーにとって、アニメーションがないとUIの劇的な変化が何によって引き起こされたか分かりにくいんだ。例えばモバイルアプリのドリルダウンアニメーションは、ユーザーが階層を移動してるってことを教えてくれるし、シートやドロワーのアニメーションも、ユーザーのアクションで出現したことを明確にするのに役立つんだよ。
僕はかなりアンチアニメーションだったけど、君の言うことは納得できるね。アニメーションは、新規ユーザーが何が起こってるか理解するのを助けることで、アプリの機能を豊かにするんだ。オフにできれば、熟練ユーザーも余計な機能から恩恵を受けられる。ただアプリをかっこよく見せるだけの、不必要な邪魔者だと思ってたよ。
もっと多くのデザイナーがこんな風に考えてくれるといいんだけどな。僕は「インタラクティブアニメーションの5つの原則」ってブログ記事の下書きを持ってるんだけど、80年代の「アニメーションの12原則」を真似てて、この記事と共通する点が多いんだ！
1. 装飾よりも目的
2. 頻繁であるほど少なく
3. タイミングが認識を形成する
4. モーションは状態に適応する
5. 静止は選択肢
UIアニメーションには、唯一有効な使い道があるよ。それは、第三者にUIの状態変化を明確にすることだね。自分で使ってる時は、アニメーションはただの時間の無駄。でも、画面をリモートで見てる人には、何がクリックされたか分からないから、アニメーションがあると何が起こってるか追えるんだ。もちろん、デフォルトでは無効にしておくべきだけどね。
「ユーザーは自分が変化をリクエストしたから当然知っている」って？
僕のデバイスは、よく僕の意図を認識し損なうんだ。そんなとき、アニメーションが起こらないことが、数秒以内に気づく唯一のサインなんだよ。
