Clear Entry

Problem

Although typing on a virtual keyboard is a difficult task, resetting an input form to the default state may be no less easy. Deleting a long string of text letter by letter can be a very tedious error prone task.

Solution

Provide a button that resets the input form with one tap.

You should always strive for minimize users’ need to input text on mobile. Like text entry, deleting long strings of text can be a very tedious task and propitious to mistakes. While, generally, operating systems have some sort of method to facilitate the clearing of input fields, such as, faster deleting on long presses, you may still provide a better and faster method for this task. This pattern is based on the patterns Text Clear Button 1 and Clear Entry2, so you can find additional information there.

Therefore, provide a button on all free-text input fields that allows users to quickly remove previous composed text. Place that button inside the input field aligned to the right and farther enough from other targets so it is not tapped by mistake. If it is needed you can use and ICEBERG TIP to improve the efficacy of that button. A button with an “x” is succinct, unambiguous and almost a standard so it is usually favored, but if you have the space you can use a label like “Clear” or “Reset”.

***

Web Design Patterns for Mobile Devices
Google, 06/2012
Web Design Patterns for Mobile Devices
Bing, 06/2012
  • Clear Entry in Designing Mobile Interfaces
  • Text Clear Button in Designing Interfaces

  1. Tidwell, Jenifer. Designing Interfaces: Patterns for Effective Interaction Design. 2005. 2nd ed. Sebastopol, California: O'Reilly Media, 2011. 

  2. Hoober, Steven, and Eric Berkman. Designing Mobile Interfaces. Sebastopol, California: O'Reilly Media, 2011.