Indicate the scope in the search bar for global search when we are defaulting to a specific project or group
Problem to solve
When a user performs a search within the global search bar from within a project or group, we are defaulting the scope of those searches to the correlated project or group they are within. The current affordance that the user has available is we are highlighting the first item in the dropdown (which shows this scope), but it can be easily unnoticed. Additionally, that menu takes a bit of time to appear, so if they type their search and immediately submit, they may not even notice the search is being scoped.
This came up as a experience improvement recommendation in both a competitive evaluation (https://gitlab.com/gitlab-org/competitor-evaluations/-/issues/5#insights-with-issue-links) as well as on a recent UX Scorecard (https://gitlab.com/gitlab-org/gitlab-design/-/issues/1679).
customer feedback: https://hello.chorus.ai/listen?guid=d0dd0ef7332f4bfe808ae8631362d44c
Proposal
Display a more clear indication that we are scoping these searches (with the ability to change scope), while not relying on the dropdown menu to provide this indication.
Further details
current experience
group | project |
---|---|
![]() |
![]() |
Solution
When searches from the top navbar will be scoped to a specific group or project, disclose this information as a token within the search field on focus.
We will also still offer the ability to expand that scope (either the parent group or all of GitLab) with the first option(s) within the dropdown as the user begins typing.
Since on screen sizes less than 992px there is no search bar present, and by tapping the search icon the user is taken to the global search page, we do not need to solve for mobile sizes with this first iteration. It may make sense to modify this current behavior in the future to allow searching from where the user is at on smaller screens (<992px)without first needing to be taken to the global search page.
We will want to ensure there is a max-width for the search bar on focus for extra large screens (currently I have this shown at 640px max in the 1600 screen size design below).
-
Show/hide scope as token when option is available (currently once 2
characters are entered) -
Since we are showing the default scope (the current first scope option that is auto-focused) as a token, we can remove this as an option in the dropdown.The direction for this has been changed, we will continue to show the default scope as the first option in the dropdown even with it being also displayed as a token in the search field itself.When a user arrows down⬇ when scopes options are shown, the first option in the dropdown will be selected/focused (which would be either a subgroup, group, or "all of GitLab".- Arrowing down will work as it did prior to this update. The default scope will be shown first in the dropdown and highlighted, and arrowing down will move to the next option in the dropdown.
-
Update the other scope options in the dropdown to use a token to display their scope (as seen in the design) -
Hide scope when search field is out of focus (on blur) -
Update the max-width of the search field to 640px
-
Prefix scope token with what type it is (Group, Subgroup, Project) -
Truncate scope tokens at a set threshold (design shows 30
char). See this design for how we can use the title attribute to allow users to see the full scope name -
Ensure input text does not go below the token and is always visible, with horizontal scrolling when needed