UI観察 - 引っ張って更新する機能（Pull-to-Refresh）
情報が常に更新されるアプリでは、引っ張って更新する機能（Pull-to-Refresh）が実装されています。
その機能のアプリ別の挙動についてまとめたので、それぞれ紹介していきます。
Pull-to-Refresh（引っ張って更新）とは
画面上部から下部に「Pull-to-Refresh（引っ張って更新）」（または「Swipe-to-Refresh（スワイプで更新）」とも言う）することにより、ユーザーはタッチの操作だけで、より多くのデータを閲覧できるようになりました。
（その他のUI観察記事はマガジンはこちら ↓）
各アプリ（Pull-to-Refresh）の挙動
■ SmartNewsアプリ
引き下げて更新
軽くスクロールすると、「引き下げて更新」と表示され、もう少しスクロールして欲しい旨を伝えている。はなして更新
もう少しスクロールさせると「はなして更新」と表示され、次にして欲しいアクションを伝えている。受信中…
スクロールした指を離すと「一瞬受信中…」と表示。プログレスバー
上の領域すべてがプログレスバーとなり、左から右へグレーが流れる。
ここまで丁寧に伝える必要があるかはさておき、更新に4段階の状態を用意するのは、なかなかリッチ。
あとプログレスバーの挙動は面白いです。一般的にはプログレスバーを画面上部の2~4px程度の幅で行いたくなりますが、ヘッダー上部をまるまるプログレスバーとして活用しています。
一般的なプログレスバーをSmartNewsアプリに配置してみると…
この実装にしたのは、端末のヘッダー上部の造りによってプログレスバーが隠れてしまったり、適切な配置が存在しなかったため、ヘッダー上部をプログレスバーにせざるをえなかったのが理由かもしれません。
■ Twitterアプリ
引き下げる
下矢印が表示され、スクロールして欲しい旨を伝える。さらに引き下げる
下矢印がクルっと回転し、上矢印になる。受信中…（更新）
スピナーが表示される。
Twitterアプリでは、3段階の状態がありました。
読み込みまでのUIはこれくらいシンプルでもいいかもしれないですね。しかし気になる点としては、ネット環境によって更新される秒数がまちまちでスピナーだと秒数の把握ができない点。一般的に読み込み速度に応じて、スピナーとプログレスバーの使い分けがなされます。
4秒ルール
ユーザーをアプリに留まらせたいなら、読み込みに４秒より長くかかる処理にスピナーを使用しないようにしましょう。研究によると、ほとんどのユーザーにとって許容できる待ち時間は４秒です。これは、ユーザーの行動に対する意思が４秒後に変わり始めることを意味します。
（2017年の記事で情報が古く、現代では許容の待ち時間は4秒ではなく、もっと短くなっているとも言われています）
■ Instagramアプリ
引き下げる
スピナーが表示され、読み込んでいることを伝える。はなす
変わらずスピナーが表示され、読み込むまでスピナーが回転し続ける。
Instagramアプリは非常にシンプル。スピナーが回転するだけです。これだけでも情報を読み込んでいることがユーザーに伝わるため、スピナーだけでもいいかもしれません。
まとめ
引っ張って更新する機能（Pull-to-Refresh）の各アプリの挙動についてまとめました。
読み込んでいる時間によって、スピナーとプログレスバーで使い分ける必要がありそうですが、読み込む情報量によって使い分けても良さそうです。
例えば「テキストしか読み込まない場合はスピナー」「テキストと高解像度の画像を読み込む場合はプログレスバー」といった使い分けです。
もし、引っ張って更新する機能（Pull-to-Refresh）を実装を検討する際は、参考にしてみてください。
この記事が気に入ったらサポートをしてみませんか？