Use pull to refresh for the specific top-of-scroll downward drag that refreshes the current data set. Use touch gesture for the broader gesture contract, feed for stream structure, offline state for disconnected behavior, loading spinner for pending operation feedback, and retry for reattempting a known failed refresh.
Use pull to refresh for the specific top-of-scroll downward drag that refreshes the current data set. Use touch gesture for the broader gesture contract, feed for stream structure, offline state for disconnected behavior, loading spinner for pending operation feedback, and retry for reattempting a known failed refresh.
Practice the judgment: Imagine this situation: A feed refreshes from the middle of the list because top-of-scroll detection is missing. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Pull to refresh | Touch gesture | Feed | Offline state | Loading spinner | Retry |
|---|---|---|---|---|---|---|
| UI or UX | UI + UX - Top-of-scroll vertical drag gesture that refreshes the current data set | UI + UX - Touch-first gesture vocabulary and fallback contract for taps, swipes, drags, pinches, and multi-touch interactions | UI + UX - Dynamic stream of article-like updates that may load or insert content at either end | UI + UX - Connectivity-mode and local-work continuity state | UI + UX - Bounded indeterminate wait indicator for a named action or region | UI + UX - Scoped failed-operation retry control |
| UI guidance | Show pull-to-refresh only at the beginning of scrollable content, with a clear pull distance, threshold, release-to-refresh state, refreshing indicator, and completion status tied to the current data set. | Render touch gesture affordances with visible targets, enough spacing, state feedback, and non-gesture controls for the same outcome when a gesture is path-based, multipoint, hidden, or easy to misfire. | Render the feed as a labelled stream of item boundaries where each item has a source or author, timestamp, title or body summary, type, actions, and enough context to stand alone as an article-like update. | Show offline status where it changes the current task, naming what remains available such as cached reports, local draft editing, queued saves, or read-only history. | Render a compact spinner only beside, inside, or over the affected action, component, or page region, and pair it with concise text that names what is loading or processing. | Place Retry next to the failed operation, object, or request summary, and name the exact action being retried such as Retry export or Retry payment authorization. |
| UX guidance | Help the person reach a clear task outcome. | Use touch gesture when the product needs direct manipulation on a touchscreen, but treat gestures as part of a larger interaction contract rather than the only way to act. | Use feed when users consume a continuing stream of posts, updates, stories, events, or collaboration activity and need to keep their reading position while new or older content appears. | Use offline state to preserve trust and task continuity when connection loss changes what users can read, edit, submit, sync, refresh, or share. | Prevent duplicate or conflicting actions while the operation is in flight, but keep context, status, safe cancellation, and timeout recovery available when the wait exceeds the expected threshold. | Help the person reach a clear task outcome. |
| Good UI | A mobile inbox at the top of the message list shows Pull to refresh, Release to refresh, Refreshing, Last updated 10:42, and a Refresh menu item that runs the same request. | A photo viewer supports pinch to zoom, double tap to zoom, plus and minus buttons, a reset button, zoom percent feedback, and a clear pan boundary after zoom. | A project feed shows source avatar, actor, timestamp, object name, excerpt, item type, unread marker, reply and save actions, and a visible queued-new-items banner while the reader is midstream. | A field report says Offline: 3 edits saved on this device, cached customer history shown from 10:42, Submit disabled until connection returns, and Retry connection. | A Pay invoice button becomes Processing payment with a small spinner, disables only duplicate payment actions, and leaves the invoice reference visible. | A report export card says Export CSV failed, keeps the saved filters visible, shows Attempt 1 of 3, and offers Retry export with request EXP-2048. |
| Bad UI | A feed refreshes from any scroll position, causing accidental network calls while users read older content. | A hidden edge swipe deletes a message while the user is trying to scroll the list. | New posts appear above the current paragraph and shift the page while the user is reading. | A blank page says You are offline even though the app has cached drafts and help content. | A search results panel shows skeleton rows, a spinner, and a progress bar for the same request. | Retry creates duplicate records, payments, invitations, exports, or queued jobs. |
| Good UX | A user reaches the top of a notifications list, drags down, sees the pull distance cross threshold, releases, and the list updates while older items stay in place. | A user starts swiping a gallery card, sees the next-card preview, changes their mind by moving back under the threshold, and the card snaps back with position unchanged. | A user pauses live updates, reads three older posts, sees 2 new updates waiting, then chooses Jump to latest when ready. | A user loses connection while editing an inspection note, sees it saved on this device, attaches photos to a queue, and later watches the queue sync after reconnect. | After submit, users see payment PAY-2048 processing, can tell the button is temporarily unavailable, and then get either success or retry guidance. | A second failure increases the wait before the next attempt and then offers cached export, background notification, or support reference after attempts are exhausted. |
| Bad UX | A user tries to scroll up inside a nested comments panel and accidentally refreshes the whole page. | A user tries to scroll a feed but the product interprets a short diagonal movement as a destructive swipe action. | The feed jumps to the top whenever a new post arrives. | A submitted offline form disappears from the screen even though it was neither queued nor accepted by the server. | The spinner blocks the whole workspace for a small table refresh and prevents users from continuing other work. | The app retries aggressively every second during an outage and makes the service harder to recover. |
| Best fit | A top-of-list gesture is a platform-expected shortcut for checking freshness on a scrollable data surface. | A touchscreen interaction needs deliberate design for gesture vocabulary, thresholds, feedback, target sizing, cancellation, and equivalent controls. | Users consume a continuing stream of updates, posts, stories, comments, media, or collaboration activity. | Connection loss or server reachability changes the user's current task. | The operation has defined resolution, timeout, cancellation, or failure paths. | A load, save, submit, upload, export, sync, payment, or background request failed for a transient or uncertain reason. |
| Avoid when | Data freshness must be automatic, real-time, scheduled, or explicit through a visible command rather than hidden behind a gesture. | The gesture is only an implementation detail inside a more specific pattern such as swipe action, pull to refresh, long press, drag and drop, bottom sheet, carousel, or map view. | The content is a finite set of objects that users need to filter, sort, select, compare, or manage. | A single request failed while the rest of the app is reachable and an error state is clearer. | The content layout is predictable and a skeleton would better preserve structure. | The error is caused by invalid user input and correction is required. |
| Required state | Idle state with current content visible and last updated timestamp when freshness matters. | Touch down or gesture start state that identifies the active target. | Default feed with heading, order label, rendered item count or range, and article-like items. | Offline banner or local status that names affected scope. | Inline processing state for a button or small local action. | Retryable failed state with affected operation, object, and preserved request context. |
| Accessibility burden | Keep refresh controls reachable by keyboard, switch, screen reader, external keyboard, and assistive pointer devices. | Provide a simple single-pointer alternative for multipoint or path-based gestures unless the gesture is essential. | Give the feed a heading or accessible label and expose the current order or filter in text. | Announce significant connectivity changes with status messaging when they affect the current task. | Give the spinner or affected region an accessible name that identifies the operation. | Expose pending, failed again, cooldown, succeeded, exhausted, and non-retryable outcomes through status text or live regions. |
| Common misuse | Making pull-to-refresh the only way to update the data. | Making a hidden gesture the only way to find navigation, delete, refresh, zoom, or edit controls. | Calling any vertical card list a feed even when it is a bounded object collection. | Showing only a browser-style offline page when useful cached or local content exists. | Showing an unlabeled spinner on a blank page. | Offering Retry for every error regardless of whether the user or system state can change. |