The searching/filtering functionality in the MR screen needs improving from UX standpoint
When trying to search or filter merge requests in the Merge Request screen, the UX is not very clear, leading to a frustrating experience.
When giving the search field focus, a div is displayed:
1. The first item is 'Keep typing and press enter'. This message is worded in a strange way and is potentially superfluous.
- Evidently I would need to 'keep typing' as no query has been entered yet.
- 'Keep typing' implies that a constraint on the input field hasn't been satisfied yet (perhaps length?), and that the UI might update to reflect when a valid query is entered. But this isn't the case, the text cue always remains the same.
Suggestion: Change wording to:
Enter a query and press enter
and place this inside the input as a placeholder. - 'Keep typing' placed so close to the other items in the div ('author', 'milestone', 'assignee', 'label') also implies any of these words can be entered in the input field. This is not the case. Typing any of these words either with or without an '@' leads to 0 search results.
2. The div also includes more items: 'author', 'assignee', 'milestone', 'label'. Through a lengthy process of trial and error I found out those items are actually buttons that are clickable, as opposed to the 'Keep typing and press enter' message.
- There is no visual differentiation between the message and these options and as such it isn't clear those are even useable as buttons. They could just as easily been textual cues. Suggestion: Style these options differently so they are recognizable as things you can select, instead of messages that are supposed to guide the user.
3. Make the input field keyboard friendly.
- In a previous iteration of this screen the UI used to have separate select's for author, assignee, etc. In that version it was immediately clear you could tab through these fields and select them with the keyboard. Now that this non-native div is displayed when the input gets focus, it is less clear the keyboard can even be used to build a search query. This can be remedied by updating the styling of these options (see previous point) so these options are recognisable as buttons.
- It is suggested you can enter one of the keywords by typing them in the input field, but when you type them in, your query yields 0 results. Suggestion: when a user types in one of the keywords (author, etc) recognize them as a keyword to structure the query, similar to clicking one of these options with the mouse.
- It isn't immediately clear you can use the arrow keys to select one of the options. Perhaps this can work better when 'Keep typing and press enter' message isn't displayed as an option in the div, but as a placeholder in the actual search field.
4. There is no help function available in this screen that describes how this function is supposed to work.
- Suggestion: Include a (?) icon that succinctly explains how to build a query.