Visual feedback of "no new data" after pull-to-refresh

Question

I really like pull-to-refresh as a way to force an update of a reverse-chronological list. However I've noticed a somewhat awkward pattern in my own use of pull-to-refresh, and I assume I'm not the only user who does this:

When I pull a list to refresh it, but there were no new items to be added to the top, I tend to pull again just a bit to make sure that there really are no new items hidden above the top. I do that even if I know that the app would give me visual feedback if there were new items. I even do that in an app that I worked on myself, where I should know better than anyone else that I would definitely see the new content, if there were any.

In other words, the absence of feedback does not translate to a feedback of absence, and of course I always feel a bit stupid after trying to scroll "just to make sure".

The only solution I can come up with is some sort of explicit "there are no new items" message after a successful yet empty pull, but this a) seems like it could become annoying very quickly, and b) it feels like it breaks the metaphor of pull-to-refresh, where the whole point is that the scrolling motion is "fluently" turned into a check for new data.

Is there any good way to signify visually that the pull-to-refresh polled the server (or similar) successfully for new data, but there simply wasn't any? Any examples of apps that handle this well?

Answer 1

TLDR; A time based message (timestamp, declarative sentence, or both) in the pull to refresh tray assists user understanding of the age of data shown in the feed. New items available to pull can be indicated with a visual counter.

Example: Tweetbot has executed their pull to refresh in a useful, informative way.

1. The time based message is always shown as you pull. (Last updated...)

2. While performing the pull gesture, the circle progress indicator fills up. Once you fill the circle, the refresh cycle begins (and the circle spins). Once it has updated the pull to refresh tray closes.

By indicating the last time data was received, they have decided to rely on the users' ability to see no new items in the feed to elicit "no new data". While not extremely explicit, this model reduces the need for additional UI states.

NEW DATA is shown available to pull by the presence of a small, slide down counter notification. The following before and after screenshots show how this counter indicates more data is ready. To pull:

Answer 2

Most commonly I have seen this done with a refresh timestamp, so you might see a message "Last updated 5 seconds ago" at the top of the item list, close to the place where new items would appear when available.

Answer 3

The big thing is that you don't want your user to reach a dead-end. How can you curl this microinteraction back around to another action? Is there is an action that the user could take to keep their feed updated more like following more topics, people, or questions? Give the user a proactive way to keep their stream updating instead of an error message that tells there isn't new.

The official Twitter app provides an excellent example of this loop.

1. The first time you pull-to-refresh, it updates the stream (as normal).
2. The second time you pull-to-refresh and there are no new stream items, Twitter prompts the user to add more friends, making the assumption that the reason why your feed hasn't updated yet is because you aren't following enough people.

Answer 4

Typically, apps like Twitter or Facebook use this kind of pull-to-refresh:
...but when there is no new data, it simply returns to normal, like you said.

One possible solution is, after finding no new entries, change the "Loading..." to say "No new entries", then disappear after a short delay.

Answer 5

Simple, easy implementation - include a scroll bar, and update its size with each refresh.

Users use scrollbars to determine their location in the content, and how much content is present (last paragraph before conclusion in the linked article). I'm sure if you think about it, you'll see that you do, too. The scrollbar doesn't have to be thick and obtrusive, which can destroy a mobile interface - it just needs to be enough to give the user an idea of where they are in the content (or how much is above them, to address your specific question). If they see that the scrollbar is all the way at the top, they'll likely trust it, as long as you help them to trust it by updating its size & position when there is new content.

Answer 6

Have something that implicitly indicates you are at the top of the list, and provides some information. You could take the "Last updated" timestamp out of (or duplicate it from) the pull-down section.

This information could be shown in a different colour to make it stand out, as well as be in a more "friendly" format (Just now, a few moments ago, etc., though after a few minutes I would be more specific such as stating "5 minutes ago"), that makes it evident to the user that yes, the refresh they requested did in fact take place and find nothing new.

To be clear, I mean that this banner should scroll off the top if you scroll down, so if there is new content you would no longer see it; instead you might see the bottom of a new piece of content.

Here I've taken Courtny Cotten's screenshots and edited them to demonstrate what I mean (before, pulldown, after, although in retrospect the "now" in first two shots should probably have been left as an old timestamp):

Answer 7

I like to see a graphic or bar of text stating that there is nothing new to get, e.g. 'No new messages'. You could hide it after a few seconds, so it doesn't clutter things up. While, I appreciate a friendly time stamp, I find the bar of text more obvious.

Answer 8

Just a thought: how about a horizontal line that appears at the top after a refresh, which slowly fades away? Any time the user can see the line, they know two things:

1. They're at the top of the feed
2. They have refreshed recently

The line then slowly fades away over a minute or so. I'm not sure what kind of visual metaphor would work best here - something like a hard edge of a piece of paper, rather than a torn off edge?