C3.15.1Pull-to-refresh as top overscrolldesignresearch

Pull-to-refresh attaches to overscroll at the top of a list

Aliases: pull to refresh · top overscroll · swipe down to reload

What it is

Pull-to-refresh is not a brand-new gesture. It parasitizes the overscroll that continues downward after a list is already at the top. Only when scroll offset is 0 (or an equivalent top) is extra downward pull read as “go fetch.” A downward pull mid-list is ordinary scrolling. Making refresh a anywhere-pull turns browsing into a hail of network requests.

Why it happens

While the list tracks, offset > 0 scrolls; offset already 0 and still down enters refresh arming. That overscroll borrows the body feel of rubber-banding, but the meaning switches from “that’s the edge” to “you may load.” It therefore belongs at the temporal start of the stream—feeds whose newest content arrives at the top—not on an arbitrary edge. Paging that loads more at the bottom uses the other end of the scroll; do not let it fight pull-to-refresh for the same overscroll. The parasite’s gift is no permanent control; its cost is that people must first scroll to the top, or the entrance does not exist.

Studying it

Park the list mid-way, at top, and at bottom, and “pull new data.” Log the share that fire only on top overscroll, mid-list false fires, and whether the bottom is taken as refresh. Independent variables include whether people must first return to top. Control: a persistent refresh button. If the field shows “I pull and never get a spinner,” check whether offset is 0 before checking the network.

Where it stops holding

A grid, map, or horizontal gallery has no “top,” so the parasite has no host; refresh needs another entrance. Chat products whose newest messages sit at the bottom will, if refresh hangs at the top, fetch history rather than new mail; the host end must move to the bottom or the name must change. An empty state with no scrollable list has no overscroll host and needs a placeholder pull region or a button.

Applying it

  • Arm refresh only on downward overscroll after the list is at top; mid-list down only scrolls content.
  • Use this parasite for streams that insert at the top. Load-more at the bottom uses the scroll end; do not call both pull-to-refresh.
  • Park the list on the third screen and pull down—it should not refresh. Scroll to top and pull—it should arm. If both fire, the parasite relationship is broken.

Related

  • Same group: C3.15.2 Crossing the trigger threshold needs feedback · C3.15.3 Conflicts with sticky headers and search fields · C3.15.4 The gesture becomes redundant under auto-refresh
  • Adjacent: C3.07 Pan · C3.06 Fling and inertia
  • Search: pull to refresh · overscroll · list offset

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/C3.15.1