Global Search Screen
- Matt Birtch
- Marina Karpenko (Deactivated)
In-progress
Important Links
Background
As an interim step, the Global Search screen for phase 1 of the v2 app will largely be a UI refresh to match with the rest of the core UI updates. In a future iteration, we will look at how we can improve the search experience as a whole, since it is in need of more improvement.
Design
The Search Screen and the Recent Mentions Screen follow a very similar design pattern. The default state displays with the enlarged header and once users scroll within the main content area, the header condenses.
iOS
Android
States
Below are the many states this screen can be shown in.
Default
In the default state, the Search Input is not focused. Users can tap the recent searches or modifier items below to populate the search field.
Focused, Text entered
When the input is tapped, the keyboard displays and the Cancel button shows next to the input. Once text is entered, the ‘Search’ button is enabled on the keyboard and the clear button is added to the search input field.
Loading
While searching for results, a spinner displays within the main content area
Results
Search keywords are highlighted within the results.
Scrolled
Tabs are sticky on scroll.
Empty State
If there are no results based on the search term, an empty state is displayed.
Multi-team scenarios
As an interim solution, until the search can reliably be across all teams, we are offering a team selector in the top-right corner of the search screen via a team icon with dropdown indicator.
This will only be visible if the user has multiple teams on the active server.
Default team
The default selected team is based on the current team that the user has active on the home screen.
Recent searches
The recent searches that display here would be scoped by the selected team. If a different team is selected, the recent searches change.
In multi-team scenarios, the title “Recent searches” changes to “Recent searches in {Team name}”
Interaction
When a user taps on the team selector icon, a bottom sheet with the available teams opens (see following screens)
Bottom sheet
The current active team shows with a checkmark next to it
Tapping the same active team will simply close the bottom sheet
Tapping a different team, will close the bottom sheet and switch the scope of the search to be the newly selected team. The team icon in the top-right will change appropriately.
If this is done before viewing any results, the “recent searches” section would be scoped to the selected team
If this is done while viewing results, the results are reloaded and scoped to the newly selected team.
Tablet Layout