Global Search Screen

In-progress

Important Links

https://mattermost.atlassian.net/browse/MM-36857

Figma Design

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