Menu side bar - background effect

[cdpestitschek]

Background
Side bar - This iteration is about creating a foundation for User profile / settings / help center which we can start populating with useful information about the health status of users system, quick access settings and link to more preferences.
As the natural place (see Youtube, Gmail, Slack and also contact center competitors) for such content is user avatar in the header which we already have, the first step is to structure that area in a way that is future proof and can handle more items to be added.

User statement
Me as a user, when viewing my profile I would like to be able to have differentiation/evidence on the information I’m interacting, so I can focus on it rather than scatter across the entire screen content.

Question
What are your thoughts on the proposal for this new component? any concerns?
In addition panel is an existing component inside Flex (it’s not a new component for Flex but it is new for Paste).

How the panel currently works is that is sits on top of the content rather than pushing the content on the page to the side. we would like to explore its impact and interactions with the rest of the screen.

We would like to know if there is some kind of overlay or blur to apply to the background content, while the sidebar is being displayed.
If there is: What would it be?
if no: which would be the preference, the use of blur or overlay?

Stage of design: Define/High-fidelity
Research: TBD
Links to mockups or prototype: Figma

[nkrantz]

Hey again @cdpestitschek!

The answer here will depend on what the intended usage is. When an agent is viewing their settings panel, should they be able to perform other background actions at the same time? Should agents be able to access the items in the settings panel while on a call with and/or responding to a customer?

If the nature of Flex means it should allow for this type of multitasking, you'll want to ensure that all of the existing background content remains active in appearance and usability. Rather than covering any content with the panel, shrink the content so that both can fit on the page. Don't darken or blur the content - doing so would insinuate that the content is disabled while the panel is open.

On the other hand, if you truly want to block interaction with the rest of the page while the settings panel is open, you should treat it as a Modal situation. Use the background overlay and interaction pattern used by Modal.

Let us know which direction you end up choosing and how we can continue to support you!