Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Version History

« Previous Version 9 Next »

Figma Design File

Figma Prototype

The new global header will be a new core piece of the app’s layout that will house the elements identified below. Each of the core products (Messaging, Playbooks, Focalboard) will have their own slightly different versions of the Global Header.

Messaging Global Header

The Messaging Global Header will house the following elements:

  1. Product Switcher

  2. Product Brand Identifier

  3. Back/Forward History Buttons (Desktop app only)

  4. Search

  5. Help

  6. Recent Mentions

  7. Saved Messages

  8. Settings

  9. User Profile Avatar

Playbooks Global Header

The Playbooks Global Header will house the following elements:

  1. Product Switcher

  2. Product Brand Identifier

  3. Back/Forward History Buttons (Desktop app only)

  4. Tasks

  5. Activity

  6. Help

  7. Settings

  8. User Profile Avatar

Focalboard Global Header

The Playbooks Global Header will house the following elements:

  1. Product Switcher

  2. Product Brand Identifier

  3. Back/Forward History Buttons (Desktop app only)

  4. Help

  5. Settings

  6. User Profile Avatar

Product Switcher

A global control that will give users access to switch to other products in the “Mattermost Suite”. Tapping this button will open a popover menu to switch to one of the other products. The core products will each open in a new tab as indicated by the open in new tab icon.

Product Brand Identifier

Each product in the suite will display a product branding identifier next to the product switcher. This will help ensure users are oriented and that they land where they expect when switching between products.

NOTE: Branding shown in these screens are for placement only until each product’s brand is finalized

Search will be moved out of the Channel Header and into the global header. When users engage the Search input, a new Search popover displays. This will make way for the vision of a ‘Command Palette’ in the future.

Ideally, we’d like to fit ‘Recent Searches' into this popover as well if it can be included in Phase 1.

NOTE: For this first phase, search results will remain in the Right Sidebar. Also, Search will stay scoped to the current Team (as is currently), but the goal is to scope this across the server.

Default State

Open State

Help

The existing Help Icon Button and associated menu move out of the Channel Header and into the Global Header.

Recent Mentions

Access to Recent Mentions is moved out of the Channel Header and into the Global Header. Still opens up in the Right Sidebar.

NOTE: For the first phase, Recent Mentions will stay scoped to the current Team (as is currently), but the goal is to scope this across the server.

Saved

Access to Saved Messages is moved out of the Channel Header and into the Global Header. Still opens up in the Right Sidebar.

NOTE: For the first phase, Saved Messages will stay scoped to the current Team (as is currently), but the goal is to scope this across the server.

Account Avatar

The authenticated user’s avatar, accompanying status menu and other account-related items move to a new Account Menu in the Global Header. Custom Statuses will also display next to the user’s avatar here.

Default State

With Custom Status Showing

Account Menu Open

  • No labels