Improvement: Clearing search bar UX
Summary
The search bar currently doesn't have the clear action. As this is standard for any re-actionable input and the search bar is a common feature, this has an increased critical level.
-
Add the action reset tiny
close
IconButton
to the search bar input -
On closing and re-opening the search view the search should not keep it's state -
Add the correct returnKeyType
for the keyboard action -
Refactor the bar structure to avoid the double close icon proximity
On re-opening
The user expectation
is for the search to have cleared after closing and re-opening the view.
The returnKeyType
The user expectation
is for having an actionable key on it's keyboard whenever it uses an actionable text input.
![](/-/project/10171280/uploads/aaf676d700d1da7703bebab3a53c97b5/keyboard.png)
Avoiding the double close icon
Twitter and Instagram does this by using the Close
labeled button on the right side of the input. Facebook does it by adding the back button on the left side of the input giving up on the search icon.
![](/-/project/10171280/uploads/755b00369c22b42660258a0f75703224/IMG_0007.jpg)
![](/-/project/10171280/uploads/3d80b3b5f8667682c772f86612e17bfc/IMG_0009.jpg)
![](/-/project/10171280/uploads/2dffe1a02d617d7293a607428de98376/IMG_0008.jpg)
Current app version
![](/-/project/10171280/uploads/98e2844a2810b4960e4c1cf00de8c139/IMG_0014.jpg)