Develop Banner to advise user of current environment

[AmyRickwartz]

Develop Banner to advise user of current environment Example: "dev.cordfield.com" or "training.cordfield.com"

┆Issue is synchronized with this Monday item by Unito

[AmyRickwartz]

Designs for production can be found here:

Advisory Banner Designs Cord Field – FOR DEVELOPMENT Figma LInk

[CarsonF]

• Is the expansion really necessary? The main message fits in the same spot. Based on past experience I doubt some users will click on the expansion and just be confused by the domain name.
• The red on orange seems excessive. This is a warning, not an error. Can the icon color just be white instead?
• The orange color #FFC107 is different from our standard warning color #F2994A, which was pulled from designs previously. I suggest we match it. For reference the standard color is Orange 500 #ff9800. I do see that the new color is Amber 500 from MD, so it's not like I'm not in favor of it :) We just need to be aware of the other places we use it, like medium sensitivity.
• In one screen it looks like the banner is over top of the page content, but on the other it looks like it pushes it down. I'd suggest opposite of what you have. Have the banner above the page layout, not over the top of it. If we continue with the expansion panel, then have that overlap the page content, so that the animation doesn't have to reflow the entire page.

[ParkeBrown]

@AmyRickwartz any thoughts on Carson's questions above?

[AmyRickwartz]

• Is the expansion really necessary? The main message fits in the same spot. Based on past experience I doubt some users will click on the expansion and just be confused by the domain name.

I'd like this to behave kind of like the toasts. Banner is open when you first land on page, but retracts after a few moments so the entire message is hidden. It's important that the function is there for them to open the message incase they missed it on arrival (lessens frustration). Keeping only the warning icon and URL is better to visually declutter the page (less for the brain to keep up with)

• The red on orange seems excessive. This is a warning, not an error. Can the icon color just be white instead?

I see your point. I have updated the designs to use the rounded warning triangle from MD in our High Emphasis CF Black to match the following message (URL)

• The orange color #FFC107 is different from our standard warning color #F2994A, which was pulled from designs previously. I suggest we match it. For reference the standard color is Orange 500 #ff9800. I do see that the new color is Amber 500 from MD, so it's not like I'm not in favor of it :) We just need to be aware of the other places we use it, like medium sensitivity.

I think it will be ok to have two different oranges in this case. The Orange 500 is a little duller so it doesn't pop as much. I'm thinking the banner and the medium sensitivity icon don't necessarily need to match because they are two different pieces of information. I was wondering if the Amber 500 might get annoying after awhile and we keep the duller Orange 500, but after thinking about the pros and cons, I think we should stick with it (at least for now ;)

[CarsonF]

I'd like this to behave kind of like the toasts. Banner is open when you first land on page, but retracts after a few moments so the entire message is hidden. It's important that the function is there for them to open the message incase they missed it on arrival (lessens frustration). Keeping only the warning icon and URL is better to visually declutter the page (less for the brain to keep up with)

Gotcha, that wasn't communicated in the designs, so we would've never known to implement that.

What I was saying though is if people are confused by the banner they probably aren't going to click on the expansion icon - users are dumb.

To that point, I think "dev.cordfield.com" does a poor job communicating the warning. Something like "Training environment - not live data" more clearly communicates the warning.

I think it will be ok to have two different oranges in this case.

I disagree, but I won't die on it. I think any shade of orange that takes up the full width of the screen is going to pop no matter what. It's pretty in your face for what it is.

I think the warning should be dismissible too. I know I'd be annoyed if I had to stare at that knowing full well which env I'm working in.

[sethmcknight]

Love the conversation here!

We need to keep this as a persistent banner rather than dismissible. The feedback from a number of users has been that they have become confused between environments by having production and another environment open in separate tabs for potentially days at a time. Keeping a persistent banner will ensure they do not accidentally enter data into a non-production environment thinking it is production.

@CarsonF I really like your suggestion that we change the text on the banner from just the URL.

Here's what I'd suggest we use for Development:

(Banner) Development Environment - Not Live Data (Body) You are on dev.cordfield.com. This site is for testing purposes only and does not use live data. Please use cordfield.com for official reporting.

And for Training:

(Banner) Training Environment - Not Live Data (Body) You are on training.cordfield.com. This site is for training purposes only and does not use live data. Please use cordfield.com for official reporting.

[AmyRickwartz]

• In one screen it looks like the banner is over top of the page content, but on the other it looks like it pushes it down. I'd suggest opposite of what you have. Have the banner above the page layout, not over the top of it. If we continue with the expansion panel, then have that overlap the page content, so that the animation doesn't have to reflow the entire page.

On this one: I designed the banner so it looked like it was intentionally overlapping the current environment. I wanted it to be visually "interruptive." Since we are going with the brighter orange, which is pretty interruptive, putting the banner above the page will work for me. I just don't want the expansion to push the page down. I think you are saying you can do that?

I like the copy suggestions for Banner and Body! :) "Not Live Data" seems like there might be another way to say that. I'll think on it a little, but that should be good for now! @sethmcknight @CarsonF

[CarsonF]

putting the banner above the page will work for me. I just don't want the expansion to push the page down. I think you are saying you can do that?

I think we are saying the same thing. And that works best for animation too.

I like the copy suggestions for Banner and Body! :) "Not Live Data" seems like there might be another way to say that. I'll think on it a little, but that should be good for now!

I agree that phrase doesn't sit well with me either. Maybe it can just be dropped from the title?

Does "Development env" make sense with users? Maybe calling dev "Testing Environment" would be better?

[AmyRickwartz]

I just thought of something else, can we make this a link to cordfield.com? What is that called, an in-line link? In-line link for the styling.

You are on dev.cordfield.com. This site is for testing purposes only and does not use live data. Please use cordfield.com for official reporting.

[CarsonF]

Yeah yeah that's how it is right now. We'll carry it forward.