プルトゥリフレッシュ
Pull to refresh
別名: プルトゥリフレッシュ、引っ張って更新、Pull to refresh、Swipe to refresh
生態(さわってみる)
一言定義
一覧の最上部から下方向にドラッグ(引っ張る)ことで、コンテンツを再読み込みするタッチ操作主体のUI。
分類
使う場面
- ネイティブアプリライクな一覧・フィードで、手動更新を直感的なジェスチャーで行わせたいとき
- プッシュ通知等に頼らず、最新状態への更新をユーザー自身の操作で促したいモバイル画面
避ける場面
- タッチ操作が主体でないPCブラウザ中心の画面(マウス操作の代替手段を必ず用意する)
- バックグラウンドで自動更新できる場合(ジェスチャーへの依存自体が不要)
近縁種との比較
プルトゥリフレッシュはiOSのUIRefreshControlが広めたジェスチャーで、タッチ操作を主手段とする点が本図鑑の他の多くのUIと異なる出自を持つ。スワイプアクションとは、どちらも指でのドラッグを直接の操作トリガーとする点で近縁だが、プルトゥリフレッシュは一覧全体を対象に「再読込」という単一の結果を導くのに対し、スワイプアクションは行単位で複数の操作候補(削除・アーカイブ等)を出し分ける点で異なる。無限スクロールとは、どちらもスクロール方向の操作でコンテンツの追加・更新を行う点が似ているが、無限スクロールが末尾への到達を契機に「新しい項目を足す」のに対し、プルトゥリフレッシュは先頭からの引っ張りを契機に「今ある一覧を最新の状態に置き換える」という逆方向・逆用途の挙動である。マウス操作の環境では成立しないジェスチャーのため、代替の更新ボタンを必ず併設する必要がある。
実例リンク
アクセシビリティ
- role
- ドラッグ中〜更新中はrole="status"のaria-live領域で「更新中です」「更新しました」を通知する
- キーボード操作
- ドラッグ操作のみを唯一の手段にせず、マウス・キーボードでも実行できる明示的な「更新」ボタンを併設する
- 補足
- 引っ張り量に応じてインジケーターが弾性(elastic)を持って伸び、しきい値を超えて離すとスピナーに切り替わる、というiOSのUIRefreshControlに由来する挙動が事実上の標準になっている