この記事は、特定の瞬間にユーザーが何をしているかを知っているインターフェイス要素の動作がどのように見えて実装できるかについての主観的な反映にすぎないことに注意してください。 ただし、思考は、少しの研究と実装によって裏付けられています。 行こう
インターネットの夜明けに、サイトは基本的なインターフェイス要素のスタイリングに個性を求めませんでした。 ばらつきは少なかったため、ページのコンポーネントはかなり均一でした。
各リンクは、リンク、ボタンのようなボタン、およびチェックボックスのようなチェックボックスのように見えました。 ユーザーは、各要素の動作原理について明確な考えを持っていたため、自分のアクションが何につながるかを知っていました。
リンクは、リンクがどこから来ても、ナビゲーションメニューから、または説明のテキストから、別のページに送信する必要があります。 ボタンは、おそらくサーバーにリクエストを送信することにより、現在のページのコンテンツを変更します。 ほとんどの場合、チェックボックスの状態は、この状態を使用するアクションのボタンを押すまで、コンテンツに影響しません。 したがって、ユーザーがインターフェース要素を見て、それとどのように対話し、何につながるかを高い確率で理解するには十分でした。
最新のサイトは、ユーザーに非常に多くのパズルを提供します。 すべてのリンクは完全に異なって見え、ボタンはボタンのように見えません。 線がリンクであるかどうかを理解するには、ユーザーが線の上にカーソルを置いて、色がより対照的な色に変化するのを確認する必要があります。 要素がボタンかどうかを理解するために、マウスをホバーして、フィルトーンの変化を確認します。 さまざまなメニューの要素を使用すると、すべてが複雑になり、それらの一部はおそらく追加のサブメニューを拡張し、一部は外部的には同一ですが、拡張しません。
しかし、私たちは定期的に使用するインターフェイスにすぐに慣れ、要素の機能について混乱しなくなりました。 主要な役割は、インターフェースの全体的な連続性によって果たされます。 上記のページを見ると、「検索」という言葉が付いた黄色の矢印は単なる装飾要素ではなく、ボタンであることがすぐにわかりますが、標準のHTMLボタンのようには見えません。 そのため、予測可能性と個性の観点から、ほとんどのリソースはユーザーが採用する安定したコンセンサスに達しました。
一方、要素の詳細を事前にユーザーに通知するインターフェイス、またはそのための日常的な作業を行うインターフェイスを取得することは興味深いでしょう。 カーソルはメニュー項目に向かって移動します-事前にサブメニューを展開してインターフェイスとの対話を高速化し、ユーザーがカーソルをボタンに移動します-クリック後にのみ必要な追加コンテンツをロードできます。 記事の見出しは、標準インターフェース（左）と予測を比較しています。
簡単な視覚テストでは、カーソルの速度とその微分を分析することにより、一定のステップ数で移動の方向とストップの座標を予測できることが示されています。 加速度の大きさに対して一定の周波数でモーションイベントがトリガーされると、ターゲットに近づくと速度が低下します。 したがって、ユーザーが事前に計画しているアクションを見つけることができます。これにより、すでに発表されているメリットが得られます。
したがって、問題には2つのタスクが含まれます。カーソルの将来の座標を決定することと、ユーザーの意図（ホバー、クリック、ハイライトなど）を決定することです。 これらのデータはすべて、カーソル座標の以前の値の分析に基づいてのみ取得する必要があります。
主なタスクは、より複雑な問題である停止の瞬間を予測するのではなく、カーソルの移動方向を評価することです。 ノイズの多い量のパラメータの推定として、運動の方向を計算する問題は、多くの既知の方法によって解決できます。
頭に浮かぶ最初のオプションは、 移動平均フィルターです。 前の瞬間の速度を平均すると、次のように値を取得できます。 以前の値は、特定の法則（線形、指数、指数）に従って重み付けして、最も近い状態の影響を強化し、より遠い値の寄与を減らすことができます。
もう1つのオプションは、パーティクルフィルターなどの再帰アルゴリズムを使用することです。 カーソルの速度を評価するために、フィルターは、粒子とも呼ばれる速度の現在の値に関する多くの仮説を作成します。 最初の時点では、これらの仮説は完全にランダムですが、途中でフィルターは無効な仮説を削除し、再配布段階で定期的に信頼できる仮説に基づいて新しい仮説を生成します。 したがって、結果としての仮説のセットから、速度の真の値に最も近いものだけが残ります。
次の例では、視覚化のために各パーティクルのカーソルを移動すると、半径の値はその重量に直接比例します。 したがって、重粒子の濃度が最も高い領域は、カーソルの移動の最も可能性の高い方向を特徴付けます。
ただし、取得された移動方向だけでは、ユーザーの意図を判断するには不十分です。 インターフェース要素の密度が高いと、カーソルパスがそれらの多くの上に横たわり、予測アルゴリズムの大量の誤検知が発生します。 ここでは、機械学習法、つまりリカレントニューラルネットワークが役立ちます。
カーソルの座標は、強く相関した値のシーケンスです。 動きが遅くなると、イベントごとにタイムライン上の隣接する位置の座標の差が小さくなります。 逆の傾向は、動きの開始時に顕著です—座標間隔が増加します。 おそらく、許容できる精度で、この問題は、パスのさまざまな部分で導関数の値を調べ、これらの値の動作に基づいて応答しきい値をエンコードすることによって分析的に解決することもできます。 しかし、その性質上、カーソル位置の座標シーケンスは、長期短期記憶のネットワークの動作原理によく適合するデータセットのように見えます。
LSTMネットワークは、長期的な依存関係のトレーニングに適したリカレントニューラルネットワークの特定の種類のアーキテクチャです。 これは、多くの状態にわたってネットワークモジュールによって情報を保存する機能によって促進されます。 したがって、ネットワークは、たとえば、カーソルのスローダウンの長さ、先行するもの、スローダウンの開始時のカーソル速度の変化などに基づいて兆候を検出できます。 これらの兆候は、ボタンをクリックするなど、特定のアクション中のユーザーの行動の特定のパターンを特徴付けます。
したがって、パーティクルフィルターとニューラルネットワークの出力で取得したデータを継続的に分析すると、たとえば、ユーザーが次の数秒でカーソルを移動して開くときにドロップダウンメニューを表示できるようになります。 マウスイベントごとにこの分析を実行すると、適切なタイミングを見逃すことは困難です。
LSTMネットワークトレーニングは、ユーザーの行動の分析中に取得したデータセットで実行でき、インターフェイスと対話するときに機能を識別するように設計された一連のタスクを実行します：ボタンをクリックする、リンク上でカーソルを移動する、メニューを開くなど。 以下は、ニューラルネットワーク解析なしで、粒子フィルターのみに基づいて予測要素のマトリックスをトリガーする例です。
以下のアニメーションは、ユーザーの行動を予測するプロセスへのニューラルネットワークの貢献を示しています。 誤検知ははるかに少なくなります。
一般に、タスクは、アクションとその予測の間の期間とエラーの数（誤検知と脱落）の2つの量のバランスをとることに要約されます。 極端な2つのケースは、ページ上のすべての要素を選択する（最大予測期間、膨大な数のエラー）か、ユーザーが行動したときにアルゴリズムをすぐに動作させる（ゼロ予測期間と欠落エラー）です。
ユーザーの速度は純粋に個別であり、エラーの数は問題のインターフェイスに依存するため、図は最大値に正規化された結果を示しています。 移動平均アルゴリズムと粒子フィルターアルゴリズムは、ほぼ同様の結果を示します。 特にタッチパッドを使用する場合は、2番目の方法の方がもう少し正確です。 最終的に、これらのオプションはすべて、特定のユーザーとデバイスに大きく依存します。
結論として、HTML要素の予測動作の小さなデモは、理想からはほど遠いですが、少し明らかになっています。
もちろん、このようなタスクでは、機能と予測可能性のバランスを取ることが重要です。 結果として生じる振る舞いがユーザーにとって理解できない場合、引き起こされた刺激はすべての努力を無効にします。 たとえば、ページインターフェイスとの通信の最初のセッションで、アルゴリズムを学習するプロセスをユーザーに見えなくすることが可能かどうかについて話すことは困難です。そのため、トレーニングされたアルゴリズムを使用して、インターフェイスの要素を予測的に動作させることができます。 いずれにせよ、それぞれの個人の特性のために追加のトレーニングが必要になり、これは追加の研究の対象となります。