vocab.design

pattern · touch

Swipe to dismiss

also called swipe away (community), dismissible (material), flick to dismiss (community), swipe to clear (community)

Flinging an item off the edge of the screen to remove it, with the item tracking the finger and snapping back if the throw is too short.

The gesture works because it borrows a physical intuition: the item is under your finger, it moves exactly as far as you move, and past a point it is going to keep going whether you hold on or not. All three parts have to be built. An item that only reacts on release is a button with extra steps, one that never snaps back punishes an accidental brush, and one with no point of no return leaves the reader guessing whether they threw it hard enough. The commit rule is usually distance or velocity, whichever arrives first, so that a short fast flick and a long slow drag both count.

Swipe actions is the neighbouring gesture and the two are told apart by what is underneath. There, the row slides to uncover buttons and the swipe is a way of asking a question; here, there is nothing underneath and the swipe is the answer. Interfaces that use both usually give one direction to each, which is why a partial swipe reveals Archive and a full swipe just archives.

Because the gesture is invisible and irreversible, it needs two things around it. An undo, offered immediately and in the place the item vanished from, because a gesture this cheap will be made by accident. And a visible equivalent, since a swipe cannot be performed with a keyboard, is awkward with a screen reader’s own gesture set, and is impossible for anyone using a switch or voice control. A dismiss button on the item satisfies all of those at once, which is why the platform components that ship this pattern also ship the button.

The last detail is what happens to the space. Removing the item without closing the gap leaves a hole that reads as a rendering bug, and closing the gap instantly makes the next item jump under a finger that is still moving. The usual answer is to let the item leave first and then collapse its own height, so the list settles as one movement, and to make that collapse the one piece of motion here that reduced motion turns off.

Which word?

If you wantsay
throwing a card or notification off the screen to clear itswipe to dismiss
actions parked behind a row until it is swipedswipe actions
a stack of cards you swipe left or right to judgeswipe deck

Related

See also: Interactive transition · Undo

Sources