Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
1  
Here's some interesting theory to why people do this, and possibly why providing a feedback may not help here. –  Izhaki Jun 18 at 21:37

8 Answers 8

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.

Pull Progress One Pull Progress Two

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:

No new feed data New feed data available

share|improve this answer
9  
Wouldn't a friendly format of the date be better? Something like "Last updated 5 minutes ago". Having to understand how long past since that date doesn't feel "easy" for a task that doesn't deserve much attention. –  mgarciaisaia Jun 19 at 14:29
1  
Possibly. I would be hesitant to automatically assume it is easier to parse a long, dictated sentence. This would be a good area to validate with some usability testing to ultimately determine which is more beneficial depending on the product's particular context. –  Courtny Cotten Jun 19 at 15:17
1  
Also ~ as shown in the screenshot examples above, the application leverages the paradigm you suggest. –  Courtny Cotten Jun 19 at 15:26
    
It doesn't have to be long. The user isn't all that worried about the time being exactly right; they just want a rough idea of how long ago the feed last updated. "Last updated ## (seconds/minutes/hours/days) ago" would be plenty. The main concern would be that a relative time would have to be updated as time goes on. –  cHao Jun 19 at 16:56
    
@cHao I though about it changing (not about the effort of updating it, but the fact of seeing it change), but, as this doesn't have to be that accurate, I imagine defining some ranges like "on last minute", "on last five minutes", "this hour", and the like. –  mgarciaisaia Jun 19 at 17:35

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.

share|improve this answer

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.

enter image description here

share|improve this answer
1  
Hmm. Valid point, but a) I personally find that thing "Share Twitter with friends" thing pretty annoying, and b) what I really want is to intuitively know that nothing is above the top, so I don't have to scroll in the first place. –  balpha Jun 19 at 15:06

Typically, apps like Twitter or Facebook use this kind of pull-to-refresh: 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.

share|improve this answer

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.

share|improve this answer
1  
That's a good point. On the other side, mobile OSes (and more recently even some desktop OSes as far as I know) hide the scrollbar to save space, so it would be a somewhat non-native behavior. –  balpha Jun 18 at 17:07
    
@balpha I've mostly seen it fade to hidden - visible when being updated (used). Simply do the same here - make it visible when you update it, and let it fade to hidden. –  Travis Jun 18 at 17:49

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):

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.

share|improve this answer

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.

share|improve this answer

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?

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.