E2.10.3search clear affordancedesign

A clear control must be present whenever there is content

Aliases: clear search · query reset · in-field clear

What it is

Once a search slot holds a query, one of the most common next acts is “not this sentence—start over.” A search clear affordance is an in-slot control that appears only while there is text, returning the slot to empty and usually cancelling the current filter in one hit. It must not show on an empty slot, where a mis-tap would wipe a query not yet sent; it must not hide in a menu once there is text. The issue is how to throw away the current query, not which key sends it, and not which domain it searches.

Why it happens

A search string is a temporary constraint. Once it is in force (a list filtered, a result page open), leaving it must be cheaper than navigating away. Select-all and delete, or a long backspace, are slow on touch and tend to leave a leftover character, so the filter stays wrong. Clear packs “restore the unsearched state” into one target. It appears only with content because a cross on an empty slot has no object and sits next to submit as a mis-tap. Content without a clear makes people treat the current filter as a permanent page state—especially in the broken case where the query has moved into a title and the slot is already empty.

Where it stops holding

Live filters with very short strings make backspace fast enough that clear is a bonus. When submit jumps to a result page that has no slot, clear belongs at the top of that page as one-tap return to unsearched; emptying the original slot while leaving the person on an empty result page breaks state. A voice query may live on a chip rather than in the slot; clear must clear the chip, not hunt an empty box. Unlike a generic field clear, search clear often has to reset the result set, not merely delete characters.

Applying it

  • Show clear when the slot has text, hide it when empty; size the hit target for a finger, not an 8-pixel cross.
  • After clear, restore the unfiltered result set; do not delete characters and leave old hits.
  • When the query has jumped to a result page, keep “clear search” or an editable query chip there.
  • Verify: type, watch the filter apply, tap clear. The unsearched data set should return and the slot should be empty. Repeat with a finger on a touch-only device, without long-press backspace. If the term remains in a title and the list stays filtered, the constraint was not withdrawn.

Related

  • Within the group: E2.10.1 A search field must show what it will search · E2.10.2 Submit must work with both Enter and a button
  • Adjacent: E2.17 Clear buttons in fields · E6.06 Empty states
  • Search terms: search clear affordance · clear search · reset filter

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/E2.10.3