Bottom bar too subtle to get properly noticed

[cristina-eleonora]

The appearance of the EUI bottom bar used to confirm changes made on a page is a bit too subtle and can go slightly unnoticed when the user's OS is configured in dark mode and Chrome has the downloads bar at the bottom:

Download bar	Download bar + EU bottom bar

Both bars have a fairly similar color and height and the action on the right hand side.
The bar becomes less noticeable when using a big screen.

Similar issue when using the Amsterdam theme:

Possible ways to address this:

• slightly increase the height of the bottom bar
• use a background color that creates more contrast with the download bar
• change the color of the button to use the secondary color rather than the primary.

Thoughts?

[cchaos]

Hey @cristina-eleonora. Thanks for the feedback on that component. We finally got around to discussing it and generally decided that we're not sure there's any action to take here.

In order to get to the scenario you're seeing, all 3 of the situations have to happen:

1. Using Chrome (Firefox doesn't have a downloads footer)
2. Had downloaded something
3. Turned Dark mode on in Mac OS

So it ends up being quite a rare situation to optimize for. The few bullets you mentioned as a solution are things that consumers currently have the ability to do.

They have a prop that adjusts the overall padding and therefore overall height of the bar and all the contents within it are consumer created. Meaning, they can put any color of button they wish in it. As for the color of the bar, it's hard to try to effectively adjust colors based on browser/mode/os, so it's best to stick with what exists in our current color scheme.

I'm going to close for now. Of course, we're open to more suggestions if you have any. But for now, there's no clear path to adjusting for this very specific scenario.

[cristina-eleonora]

Hey @cchaos, thanks for taking the time to analyze this issue.

Chrome accounts for most of our users (79%) which is 8 times more than Firefox users (10%).

Dark mode is more and more popular and is used often by folks who work in IT, so this case could happen more often than we think.

A user doesn't need to use dark mode in MacOs to have Dark mode in Chrome, they can set it up manually:
https://support.google.com/chrome/answer/9275525?co=GENIE.Platform%3DAndroid&hl=en

[cristina-eleonora]

Wanted to resuscitate this issue, as we did some user testing and noticed that many people did not notice the bar and the save action either.Here are some details:

• Most users didn’t notice the bar (11 out of 14)
• Some users reported that it looked like a cookie bar
• Some users said it doesn't appear related with the rest of the page
• Some users reported that it would be hard to spot, because the "Apply changes" button is too far away from the rest of the content
• A few users thought that it belonged to Chrome
• One user thought the dark background color of his desktop and the dark background of the bar made it unnoticeable

We made several changes to the bar, changed the background color to blue, then white, but only when the content of the bar was aligned with the main content of the page, that the users finally considered the bar related.

The format pictured above had a 100% success rate during testing, which is why I'd like to suggest we change the EUI bar to:

• have the same background color as the theme using it
• have the content (left and right) aligned with the main content of the page
• display on top of the content area leaving out the side menu, if available

[elizabetdev]

Right now it's possible to have the content (left and right) aligned with the main content of the page. For that, we just need to use the EuiPageTemplate and pass a bottomBar prop. See https://elastic.github.io/eui/#/layout/page#showing-a-bottom-bar.

One thing we could do is by default the bottom bar would take the current theme color, but we could give the option to force a theme like theme="dark". The same way we're doing with the EuiHeader (https://elastic.github.io/eui/#/layout/header#dark-theme).

What do you think @cchaos?

[cristina-eleonora]

I fear the color of the bar could still a problem, @miukimiu @cchaos . We tested with various colors ourselves and users only responded when it had the same background color as the page.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[cchaos]

I think this is a valid issue, but am pushing off until we convert the component to Emotion. It'll be easier to just be able to flip the colorMode from light to dark which will ensure every component inside will also flip their colorMode.

[elizabetdev]

We need to establish better guidelines for the bottom bar and look into what's the best color usage. Our team is currently working on a new documentation site, and I created a new issue to track its progress.

So I'm closing this issue in favor of https://github.com/elastic/design-system-team/issues/175.