elifesciences / UX-features-roadmaps

A test attempt at moving some of the Product team feature definition and prioritisation into GitHub. The aim is to create more detailed feature definitions, provide more transparent prioritisation and more effective "linking" of product design to development tickets (currently in the xPub project board).
0 stars 0 forks source link

Update People Picker search to "search as you type" (and add empty state) #77

Open chris-huggins opened 5 years ago

chris-huggins commented 5 years ago

Some usability issues and bugs with search exist. It seems we can solve this by adopting an approach were a search term is triggered with each character entered. While searching the same progress indicator should be shown as during loading the people picker.

Making this change allows us to use a simpler/more typical search component e.g.

Empty/default:

image

Search term entered:

image

(note these screenshots are from different files - they do not suggest the bar will change in size between states)

The search icon implies functionality of the bar when empty (including placeholder text). When text is entered/a search is triggered, the icon should be replaced with an 'x' to enable users to quickly clear/close the search.

Conversations with Cory have suggested this is a 'relatively' simple update and will improve our search ux, and fix a bug when users press enter to submit the search