web-dev-qa-db-ja.com

プルトゥリフレッシュ後の「新しいデータなし」の視覚的フィードバック

時系列の逆のリストを強制的に更新する方法として、pull-to-refreshが本当に好きです。ただし、自分でプルトゥリフレッシュを使用する場合、やや厄介なパターンに気づきました。これを行うのは私だけではありません。

リストをプルして更新しても、新しいアイテムが一番上に追加されなかった場合、再度プルの上に隠された新しいアイテムが本当にないことを確認する傾向があります上。アプリがwouldビジュアルフィードバックifであることを知っていても、新しいアイテムがありました。私は自分で開発したアプリでもそれを行います。新しいコンテンツがある場合は、それを他の誰よりも確実に確認できるはずです。

つまり、フィードバックがないことは、フィードバックがないことにはなりません。もちろん、「確認のためだけ」にスクロールしようとすると、常に少し愚かになります。

私が思いつくことができる唯一の解決策は、成功したが空のプルの後のある種の明示的な「新しいアイテムはありません」メッセージですが、これは非常にすぐに迷惑になる可能性があり、b)それが壊れるように感じますpull-to-refreshのメタファー。ここで重要なのは、スクロールモーションが「流暢に」新しいデータのチェックに変わることです。

プルトゥリフレッシュがサーバー(または同様のもの)に新しいデータを求めて正常にポーリングしたことを視覚的に示す良い方法はありますか?これをうまく処理するアプリの例はありますか?

40
balpha

TLDR;プルトゥリフレッシュトレイの時間ベースのメッセージ(タイムスタンプ、宣言文、またはその両方)は、ユーザーの理解を助けますフィードに表示されるデータの古さ。プルできる新しいアイテムは、ビジュアルカウンターで示すことができます。

例:ツイートボットは、有用で有益な方法で更新するためにプルを実行しました。

  1. 時間ベースのメッセージは、プルすると常に表示されます。 (最終更新...)

  2. プルジェスチャを実行している間、円の進行状況インジケータがいっぱいになります。円を埋めると、更新サイクルが始まります(そして円が回転します)。プルを更新すると、プルトレイが閉じます。

データが最後に受信された時刻を示すことにより、フィード内に新しいアイテムを表示しないというユーザーの能力に依存して、「新しいデータなし」を引き出します。それほど明確ではありませんが、このモデルは追加のUI状態の必要性を減らします。

Pull Progress OnePull Progress Two

新しいデータは、小さなスライドダウンカウンター通知の存在によってプルできるように表示されます。次の前と後のスクリーンショットは、このカウンターがより多くのデータの準備ができていることを示しています。引っ張る:

No new feed dataNew feed data available

23
Courtny

最も一般的には、これが更新タイムスタンプで行われるのを見たので、アイテムリストの上部、新しいアイテムが表示される場所の近くに「5秒前に最終更新」というメッセージが表示されることがあります。

12
Franchesca

重要なのは、ユーザーが行き止まりに到達したくないということです。このマイクロインタラクションを別のアクションにどのようにカールさせることができますか?より多くのトピック、人、または質問をフォローするなど、ユーザーがフィードを更新し続けるために実行できるアクションはありますか?新規ではないことを通知するエラーメッセージの代わりに、ストリームを更新し続けるための積極的な方法をユーザーに提供します。

公式Twitterアプリは、このループの優れた例を提供します。

  1. 初めてプルトゥリフレッシュすると、(通常どおり)ストリームが更新されます。
  2. 2回目にプルトゥリフレッシュを行い、新しいストリームアイテムがない場合、Twitterはユーザーに友達を追加するように求め、フィードがまだ更新されていない理由は、十分な人をフォローしていないためであると想定しています。

enter image description here

5
Hynes

通常、TwitterやFacebookなどのアプリは、次の種類のプルトゥリフレッシュを使用します。 Pull-to-refresh
...しかし、新しいデータがない場合、あなたが言ったように、それは単に通常に戻ります。

考えられる解決策の1つは、新しいエントリが見つからない場合は、[読み込み中...]を「新しいエントリなし」に変更し、しばらくすると消えます。

5
wmassingham

シンプルで簡単な実装-スクロールバーを含め、更新するたびにサイズを更新します。

ユーザーはスクロールバーを使用します コンテンツ内の自分の場所、およびコンテンツの量(リンクされた記事で結論が出る前の最後の段落)を決定します。考えてみれば、きっとあなたもそうなるはずです。スクロールバーは太くて邪魔になる必要はなく、モバイルインターフェースを破壊する可能性があります。ユーザーが特定のコンテンツに対処するには、コンテンツのどこにあるか(またはどのくらい上にあるか)をユーザーに知らせるだけで十分です。質問)。スクロールバーが一番上にあることがわかった場合は、サイズと位置を更新して信頼できるように支援する限りis新しいコンテンツ。

1
Travis

リストの最上位にいることを暗黙的に示し、いくつかの情報を提供するものを用意します。プルダウンセクションから「最終更新」タイムスタンプを削除(または複製)できます。

この情報は、目立つように別の色で表示することも、より「わかりやすい」形式で表示することもできます(たった今、少し前など)。ただし、数分後には、次のように具体的になります。 「5分前」と述べると、ユーザーが要求した更新が実際に行われ、新しいものは何も見つからなかったことをユーザーに明らかにします。

明確に言うと、下にスクロールすると、このバナーは上からスクロールするはずです。そのため、新しいコンテンツがある場合は、表示されなくなります。代わりに、新しいコンテンツの下部が表示される場合があります。

ここで、私はコートニーコッテンのスクリーンショットを撮り、それらを編集して、私が何を意味するかを示します(前、プルダウン、後ですが、振り返ってみると、最初の2ショットの「現在」はおそらく古いタイムスタンプのままになっているはずです)。

Screenshot showing "Last updated now" banner at top of tweets.Screenshot showing "Last updated now" banner at top of tweets, with "pull down to refresh" partially visible as well.Screenshot showing tweets after refresh, with banner no longer visible, presumably scrolled off top.

1
Keilaron

取得する新しいことは何もないことを示すグラフィックまたはテキストのバーを見るのが好きです。 「新しいメッセージはありません」。数秒後に非表示にできるので、煩雑になりません。親しみやすいタイムスタンプに感謝しますが、テキストのバーはより明白です。

0
testpattern

ちょっと考えてみてください。リフレッシュ後に上部に表示される、ゆっくりと消える水平線はどうでしょうか。ユーザーがラインを見ることができるときはいつでも、2つのことを知っています。

  1. フィードの上部にあります
  2. 彼らは最近リフレッシュしました

その後、ラインは1分ほどかけてゆっくりと消えていきます。私はここでどのような視覚的なメタファーが最もうまく機能するかわかりません-引き裂かれたエッジではなく、紙のハードエッジのようなものですか?

0
Steve Bennett