Jelly UI: ネイティブHTMLフォームコントロール向けのソフトボディ物理演算

Jelly UIは、ネイティブHTMLフォームコントロールにソフトボディ物理演算を導入するデザインシステムです。これにより、ボタン、チェックボックス、スライダーなどの要素が変形し、ユーザーの操作に反応するようになります。このライブラリは、「ゼリーのような」素材の物理的特性をシミュレートすることで、ウェブインターフェースにより有機的で触覚的な感覚を生み出すことを目的としています。

技術的な実装とパフォーマンス

Jelly UIは、物理シミュレーションを処理するためにRequestAnimationFrame (RAF) アニメーションループを使用しています。しかし、デモサイトの技術的な分析により、大幅なパフォーマンスオーバーヘッドが明らかになりました。このライブラリは、ページ上のすべてのコンポーネントに対して8msごとにアニメーションループを実行し、フレームごとにドキュメント全体の再描画をトリガーしています。

ある批評家は、「JellyEngine」がポインターイベントが発生したときのみアニメーションを計算するのではなく、操作されているかどうかにかかわらず、ページ上のすべての有効なコンポーネントに対して物理演算を再計算していると指摘しています。このアプローチは、特にOperaを使用しているMacBook M3 Proのような特定のハードウェア構成において、知覚的なラグを引き起こします。

ユーザーエクスペリエンスとアクセシビリティ

このライブラリは視覚的な新奇性を提供しますが、いくつかのUXおよびアクセシビリティの課題を導入します。

モーションとアクセシビリティ

Jelly UIは、前庭疾患を持つユーザーにとって重要な機能である @media (prefers-reduced-motion: reduce) メディアクエリを尊重しています。しかし、ユーザーからは、システムレベルの設定を変更せずにアニメーションを有効または無効にするための手動オーバーライドをデモサイトに用意すべきだという提案があります。

インタラクションモデル

インタラクションモデルが不整合であると感じるユーザーもいます。例えば、要素をクリックして保持し、離す前にマウスを動かすと、ボタンではクリックとして登録されるものの、チェックボックスでは登録されない場合があります。また、スライダーコントロールは、ハンドルがマウスカーソルから遅れて動くという顕著なラグが発生しており、一部のユーザーはこれを触覚的というよりも、気を散らすものだと感じています。

支援技術の可能性

批判はあるものの、このライブラリの物理ベースのアプローチは、微細な運動制御が困難なユーザーを支援する可能性があります。クリックゾーンのサイズを大きくしたり、ターゲットの形状を変更してターゲットの精度を高めたりすることで、このライブラリを、現代の小さなUIターゲットに苦労する人々のためのアクセシビリティツールとして機能するように修正できる可能性があります。

デモサイトへの批判：スクロールジャッキングとナビゲーション

多くのユーザーが、デモサイトで使用されている scroll-snap に対する不満を表明しています。彼らはこれを「スクロールジャッキング」と表現しています。この実装は、一部のデバイスで速度のあるスクロール体験を損なわせ、強制的な時間指定アニメーションによって同時並行のスクロールイベントをロックアウトしてしまいます。

"Please never use scroll-snap as is done on this demo page... It leads to an awful experience for a large fraction of users."

コミュニティ・フィードバックの要約

Jelly UIに対するコミュニティの反応は二極化しています。一部のユーザーは、これをウェブへの創造的で「かわいい」追加要素として見ており、特にゲームUIやノベルティプロジェクトに適していると考えています。他のユーザーは、エフェクトが気を散らす、吐き気を催す、あるいはオン/オフのコントロールに対して不気味に「本能的」な反応を引き起こすと感じています。

改善のための一般的な提案は以下の通りです：

• ホバーベースのゼリーエフェクトの度合いを抑えること。
• 色覚多様性を持つユーザーを支援するために、赤とアンバーのボタンのコントラストを改善すること。
• クリック時に範囲外に出てしまう「Chip」要素を修正すること。
• 不必要なドキュメントの再描画を防ぐために、アニメーションループを最適化すること。