Versions Compared

Version Old Version 9 New Version Current
Changes made by

Matt Birtch

Matt Birtch

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Tip

Implemented

  • Product Switcher

  • Product Brand Identifier

    • Back/Forward History

    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

    Image Removed

    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

    Image Removed

    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

    Image Removed

    The Playbooks Global Header will house the following elements:

    Mattermost Feature Channel

    Contents

    Table of Contents
    maxLevel2
    excludeImportant Links

    Global Header Shared Elements

    Image Added

    Each product will have its own nuanced version of the global header, but will still feel like the same family of products. The following elements will exist in every instance of the global header (although they may be be positioned in different locations in some cases)

    1. Product Switcher Icon Button + Menu

    2. Product Menu Button

    3. Navigator Icon Buttons (Desktop app only)

    4. Help Icon Button

    5. Settings Icon Button

    6. User Profile Avatar + Menu

    Product

    SwitcherA

    Menu Button

    The Product Menu Button is a global control that will give users access to switch to open other products in the “Mattermost Suite”. Tapping this button will open a popover menu to switch to one of the other products. where the core products can be accessed.

    • The core products will each open in a new tab as indicated by the open in new tab icon.

    Image Removed

    • The active product is identified by a checkmark.

    Image Added

    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.

    Info

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

    Help

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

    Image Added

    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.

    Info

    NOTE: Status and Custom Status may only be available on the messaging product to start. To be confirmed…

    Default State

    Image Added

    With Custom Status Showing

    Image Added

    Account Menu Open

    Image Added

    Messaging Global Header

    Image Added

    In addition to the standard shared elements of the global header, the Messaging Global Header will house the following elements:

    1. Search

    2. Recent Mentions

    3. Saved Messages

    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.

    Info

    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.

    Image RemovedRecent Mentions

    Recent Mentions Icon Button

    Access to Recent Mentions is moved out of the Channel Header and into the Global Header. Still opens The resulting content will still open up in the Right Sidebar as it does today.

    Info

    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 Messages Icon Button

    Access to Saved Messages is moved out of the Channel Header and into the Global Header. Still opens The resulting content will still open up in the Right Sidebar as it does today.

    Info

    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

    Image Removed

    With Custom Status Showing

    Image Removed

    Account Menu Open

    Image Removed

    Messaging Global Header In Context

    Image Added

    Playbooks Global Header

    Image Added

    In addition to the standard shared elements of the global header, the Playbooks Global Header will house the following elements. Search will be added at a later update.

    1. Tasks

    2. Activity

    Other differences to note:

    • The Navigator Icon Buttons are positioned differently

    • The Help Icon Button is positioned differently

    • The User Profile/Avatar Menu will not have any of the status options in its menu for Playbooks to start (To be confirmed)

    Playbooks Global Header In Context

    Image Added

    Focalboard Global Header

    Image Added

    To start, the Focalboard Global Header will only house the standard shared elements in its global header. Search will be added at a later update.

    Differences to note:

    • The Navigator Icon Buttons are positioned differently

    • The Help Icon Button is positioned differently

    • The User Profile/Avatar Menu will not have any of the status options in its menu for Playbooks to start (To be confirmed)

    Focalboard Global Header In Context

    Image Added

    Mobile Webview

    Messaging

    For the first phase, Mobile webview for the Messaging app will remain largely the same with the addition of the Product Switcher (screenshots below).

    Image Added
    Image Added
    Image Added

    Focalboard and Playbooks Mobile Webview

    To be confirmed once the plan for a mobile responsive experience is nailed down for these products.