| 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 | Use pull-to-refresh when users expect to check for newer content in a feed, inbox, list, dashboard, or status surface without leaving their current place. | 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. | Use a loading spinner for short indeterminate waits where the system is actively working but cannot yet expose progress; resolve it quickly to content, success, cancellation, progress, or error. | Use retry when a specific operation likely failed for a transient reason and the same operation can be attempted again without losing user context or duplicating side effects. |
| 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 map can only be zoomed with a two-finger pinch and has no plus, minus, or reset controls. | 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 blank page shows a large spinner with no text, no affected object, and no idea what is loading. | A generic Try again button appears after every error, including validation and permission failures users cannot fix by repeating the request. |
| 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 pinches a diagram to zoom, sees the scale change, releases outside the threshold without committing a rotate gesture, then uses visible Zoom in and Reset controls with one finger. | 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 user retries the same export after a network timeout, sees the attempt change to sending, and then returns to the recovered download state without re-entering filters. |
| Bad UX | A user tries to scroll up inside a nested comments panel and accidentally refreshes the whole page. | A user with a head pointer cannot trigger a two-finger gesture and has no single-pointer alternative. | A feed keeps loading forever, hides the footer, and gives no way to resume from a saved position. | The app keeps a spinner on Save during airplane mode and never explains that no network request can start. | 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. | A short action, request, save, submit, refresh, sync, or fetch is actively processing and progress cannot be meaningfully measured. | A load, save, submit, upload, export, sync, payment, or background request failed for a transient or uncertain reason. |
| Avoid when | The surface is not scrollable or does not have a clear top boundary. | 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. | Idle state with visible touch targets, gesture hints when needed, and no reliance on hover. | Default feed with heading, order label, rendered item count or range, and article-like items. | Online normal state with no offline warning. | Idle state with no spinner and the action or region ready. | Retryable failed state with affected operation, object, and preserved request context. |
| Accessibility burden | Provide a manual refresh command that does not require a path-based gesture. | 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. | Use an action label that names the operation, not only an icon or generic phrase. |
| Common misuse | Making pull-to-refresh the only way to update the data. | Requiring pinch, rotate, two-finger swipe, or shape gestures with no single-pointer alternative. | 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. |