01 / 活用例
ひとつのシグナル。多くの用途。
// 分析
クリックだけでなく意図を
行動だけでなく、途中でやめた接近やためらいを記録します。
// 開示
段階的な開示
ユーザーがそれに向かった瞬間に、プレビューやツールチップを開きます。
// パフォーマンス
リンクをプリフェッチ
ユーザーがクリックする前にナビゲーションリンクをプリフェッチします。
// 適応 UI
補助付きの照準
ユーザーが近づくにつれて、ターゲットを大きくするか近くに移動します。
01
01
計測
ノイズの多い軌道を
02
02
推定
有力な遷移先を
03
03
準備
到達する前に
02 / ライブデモ
カードに向かって動かすと — プリフェッチされる様子が見えます。
importance
cost
onIntent ストリーム0 回発火
// カードに向かって動かすとシグナルが発火します…
product shot
レディース
product shot
メンズ
product shot
キッズ
product shot
シューズ
product shot
バッグ
product shot
アクセサリー
product shot
スポーツ
product shot
デニム
product shot
アウター
product shot
ビューティー
product shot
ホーム
product shot
セール
product shot
電化製品
product shot
腕時計
product shot
ジュエリー
product shot
家具
product shot
ギフト
product shot
トラベル
03 / 違いを体感
同じクリック。待ち時間をスキップ。
一方のページはネットワークリクエストを待ち、もう一方はユーザーの移動軌跡の途中で取得されます。
このセッションで節約した時間
0 ms
/product/quilted-jacket
/product/quilted-jacket
04 / 何が違うか
可視性でも、ホバーでもなく、意図。
ほかの手法は、遅すぎるか、無駄が多いかのどちらかです。
1.37
Fetch:Click 比率
useIntentTarget
独自のコンポーネントを構築
React · Next
最も人気のあるフレームワーク向け
MIT
オープンソース、データ収集なし
| 手法 | intent-link | ForesightJS | instant.page | Next.js prefetch | Guess.js |
|---|---|---|---|---|---|
| タイミング | 到達する前 | 軌道上で | ホバー時 | 表示に入ったとき | 事前計算 |
| 選択性 | その遷移先 | その遷移先 | 1つ | 見えているもの全部 | 最有力の推測 |