Mobile UX - Collapsable Custom Categories

Owned by Eric Sethna
Last updated: Feb 10, 2021 by Matt Birtch
3 min read

Design Complete

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

Figma Design

Figma Prototype

Goals

As the new channel sidebar in the web app now includes custom categories, we are proposing a V1 improvement to the Mobile app sidebar that includes these categories as well as a few other minor UI updates.

Collapsable Custom Categories

Custom categories are now introduced to align with desktop. These categories are expandable/collapsable.

When a category is collapsed (notice the ‘Favourites’ category below), the channels in that category hide, and the chevron icon points to the right instead of down.

Expanded State (Favorites)

 

Collapsed State (Favorites)

 

Channel organization

  • The ‘Unreads’ category always shows at the top above all other categories

  • Use the order for every other category that is in the webapp (including favourites, direct messages, etc).

  • Combine Public and Private channels categories in to one ‘Channels’ category (as per webapp)

  • Each category is collapsable (except for ‘Unreads’)

Plus buttons

  • A New Global + button is added next to the jump to

    • Clicking this will open a bottom sheet with options

  • Each category will have a + button to the right of it

    • Clicking the + will open a bottom sheet with options

  • The + associated with DMs, will behave as-is (launching the ‘New Conversation’ modal)

Animation samples

Collapsing categories animation

  • Fade away all channels within so that only the category name remains

  • The chevron arrow rotates to point right instead of down

  • As the channels hide, the content below collpases upwards

  • All the above happens simultaneously with ease-in-out function over a duration of 150ms

Other Minor UI Updates

Small refinements to the channel sidebar include:

  • Improved alignment with the jump to input

  • Changed ‘Jump to…’ to ‘Find channels…’

  • Added the global + button

  • Rounded corner radius set properly to 4 on team button and jump to input

  • Removes the keylines between the header and channels

  • Removes the keylines between categories

  • Small refinement to the selected state active sliver (algins with web app) for active channel

  • Slightly improved contrast on category names and channels that are read

  • Slightly enlarged icons for channels

 

Before

After